feat: migrate no days

WDY-300

frontend/package.json

@@ -24,32 +24,32 @@
   ],
   "dependencies": {
     "@binarycapsule/editor": "^1.1.1",
-    "@binarycapsule/ui-capsules": "^3.2.2",
+    "@binarycapsule/ui-capsules": "^3.3.0",
     "@nivo/pie": "^0.61.1",
-    "@reduxjs/toolkit": "^1.3.5",
-    "array-move": "^2.2.1",
+    "@reduxjs/toolkit": "^1.3.6",
+    "array-move": "^2.2.2",
     "axios": "^0.19.2",
     "focus-visible": "^5.1.0",
     "formik": "^2.1.4",
     "history": "^4.10.1",
-    "immer": "^6.0.3",
+    "immer": "^6.0.9",
     "immutable": "^4.0.0-rc.12",
     "is-hotkey": "^0.1.6",
     "jest-styled-components": "^7.0.2",
     "lodash": "latest",
-    "moment": "^2.24.0",
+    "moment": "^2.26.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-beautiful-dnd": "^13.0.0",
     "react-copy-to-clipboard": "^5.0.2",
     "react-detect-offline": "^2.4.0",
     "react-dom": "^16.13.1",
-    "react-hook-form": "^5.6.3",
-    "react-query": "^1.4.3",
-    "react-query-devtools": "^1.1.4",
+    "react-hook-form": "^5.7.2",
+    "react-query": "^1.5.3",
+    "react-query-devtools": "^1.1.16",
     "react-redux": "^7.2.0",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.1",
     "react-sizeme": "^2.6.12",
     "react-use": "^15.1.0",
@@ -60,39 +60,39 @@
     "reselect": "^4.0.0",
     "slate": "0.47.8",
     "slate-react": "0.22.9",
-    "styled-components": "^5.1.0",
-    "yup": "^0.28.4"
+    "styled-components": "^5.1.1",
+    "yup": "^0.29.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@types/jest": "^25.2.1",
-    "@types/node": "^13.13.1",
+    "@babel/core": "^7.10.1",
+    "@types/jest": "^25.2.3",
+    "@types/node": "^14.0.6",
     "@types/prop-types": "^15.7.3",
-    "@types/react": "^16.9.34",
-    "@types/react-beautiful-dnd": "^12.1.2",
-    "@types/react-dom": "^16.9.6",
-    "@types/react-redux": "^7.1.7",
-    "@types/react-router-dom": "^5.1.4",
-    "@types/react-select": "^3.0.11",
+    "@types/react": "^16.9.35",
+    "@types/react-beautiful-dnd": "^13.0.0",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
+    "@types/react-router-dom": "^5.1.5",
+    "@types/react-select": "^3.0.13",
     "@types/styled-components": "^5.1.0",
-    "@types/yup": "^0.26.37",
-    "@typescript-eslint/eslint-plugin": "^2.29.0",
-    "@typescript-eslint/parser": "^2.29.0",
+    "@types/yup": "^0.29.1",
+    "@typescript-eslint/eslint-plugin": "^3.0.2",
+    "@typescript-eslint/parser": "^3.0.2",
     "babel-plugin-macros": "^2.8.0",
     "docz": "^2.3.1",
     "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.10.1",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jest": "^23.8.2",
+    "eslint-plugin-jest": "^23.13.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react": "^7.20.0",
     "husky": "^4.2.5",
-    "lint-staged": "^10.1.6",
-    "prettier": "^2.0.4",
+    "lint-staged": "^10.2.7",
+    "prettier": "^2.0.5",
     "pretty-quick": "^2.0.1",
     "source-map-explorer": "^2.4.2",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.3"
   },
   "husky": {
     "hooks": {

frontend/src/config/queryConfig.ts

@@ -0,0 +1,17 @@
+import { AxiosError } from 'axios';
+
+export const queryConfig = {
+  refetchAllOnWindowFocus: true,
+  suspense: false,
+  retry: (failureCount: number, error: unknown) => {
+    if ((error as AxiosError).response) {
+      switch ((error as AxiosError).response?.status) {
+        case 404:
+          return false;
+        default:
+      }
+    }
+
+    return failureCount <= 3;
+  },
+};

frontend/src/features/auth/Logout/Logout.actions.js

@@ -1,12 +1,17 @@
+import { queryCache } from 'react-query';
 import { LOGOUT_FAILURE, LOGOUT_REQUEST, LOGOUT_SUCCESS } from './Logout.types';
 
 export const logoutRequest = () => ({
   type: LOGOUT_REQUEST,
 });
 
-export const logoutSuccess = () => ({
-  type: LOGOUT_SUCCESS,
-});
+export const logoutSuccess = () => {
+  queryCache.clear();
+
+  return {
+    type: LOGOUT_SUCCESS,
+  };
+};
 
 export const logoutFailure = () => ({
   type: LOGOUT_FAILURE,

frontend/src/features/day/Board/Board.error.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components/macro';
 import { Button, Icon } from '@binarycapsule/ui-capsules';
+import { AxiosError } from 'axios';
 import { IllustrationOldPC } from '../../../icons/Illustrations';
 import { Brand } from '../../daysNav/Brand/Brand';
 
@@ -32,21 +33,30 @@ const Header = styled.div`
   height: 64px;
 `;
 
-interface Props {}
+interface Props {
+  error?: AxiosError;
+}
+
+// TODO ➜ Improve error handling
+export const BoardError: React.FC<Props> = ({ error }) => {
+  const status = error?.response?.status;
 
-export const BoardError: React.FC<Props> = () => {
   return (
     <StyledBoardError>
       <Header>
         <Brand />
       </Header>
       <IllustrationOldPC />
       <ErrorText>
-        <Icon icon="exclamation_c" /> Oops, something went wrong...
+        <Icon icon="exclamation_c" />{' '}
+        {status === 404 ? 'Day not found' : 'Oops, something went wrong...'}
       </ErrorText>
-      <Button appearance="minimal" iconBefore="refresh" onClick={() => document.location.reload()}>
-        Refresh the page
-      </Button>
+
+      {status !== 404 && (
+        <Button appearance="minimal" iconBefore="refresh" onClick={document.location.reload}>
+          Refresh the page
+        </Button>
+      )}
     </StyledBoardError>
   );
 };

frontend/src/features/day/Board/Board.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { DragDropContext, DropResult } from 'react-beautiful-dnd';
+import { AxiosError } from 'axios';
 import useDay from '../api/useDay';
 import { Section } from '../Section/Section';
 import { BoardLoading } from './Board.loading';
@@ -8,13 +9,16 @@ import { BoardHeader } from './BoardHeader/BoardHeader';
 import { BoardError } from './Board.error';
 import { useActiveTask } from '../api/useActiveTask';
 import { useMoveTask } from '../api/useMoveTask';
+import useDays from '../../daysNav/api/useDays';
+import NoDays from '../../../components/NoDays';
 
 interface Props {
   dayId?: string;
 }
 
 export const Board: React.FC<Props> = ({ dayId }) => {
-  const { status: getDayStatus, data: day } = useDay(dayId);
+  const { days, status: getDaysStatus } = useDays();
+  const { status: getDayStatus, data: day, error: dayError } = useDay(dayId);
   const { status: getActiveTaskStatus } = useActiveTask();
   const [moveTask] = useMoveTask();
 
@@ -44,15 +48,23 @@ export const Board: React.FC<Props> = ({ dayId }) => {
   return (
     <StyledBoard>
       <BoardHeader status={getDayStatus} day={day} />
-      {(getDayStatus === 'loading' || getActiveTaskStatus === 'loading') && <BoardLoading />}
-      {(getDayStatus === 'error' || getActiveTaskStatus === 'error') && <BoardError />}
-
-      <DragDropContext onDragEnd={handleDragEnd}>
-        {getDayStatus === 'success' &&
-          getActiveTaskStatus === 'success' &&
-          day &&
-          day.sections.map(data => <Section key={data.id} dayId={day.id} data={data} />)}
-      </DragDropContext>
+
+      {getDaysStatus === 'success' && days.length === 0 ? (
+        <NoDays />
+      ) : (
+        <>
+          {(getDayStatus === 'loading' || getActiveTaskStatus === 'loading') && <BoardLoading />}
+          {(getDayStatus === 'error' || getActiveTaskStatus === 'error') && (
+            <BoardError error={dayError as AxiosError} />
+          )}
+          <DragDropContext onDragEnd={handleDragEnd}>
+            {getDayStatus === 'success' &&
+              getActiveTaskStatus === 'success' &&
+              day &&
+              day.sections.map(data => <Section key={data.id} dayId={day.id} data={data} />)}
+          </DragDropContext>
+        </>
+      )}
     </StyledBoard>
   );
 };

frontend/src/features/day/Board/BoardTopActions/BoardTopActions.tsx

@@ -2,23 +2,27 @@ import React, { ButtonHTMLAttributes } from 'react';
 import { IconButton } from '@binarycapsule/ui-capsules';
 import { useHistory, useParams } from 'react-router-dom';
 import { UserMenu } from '../../../userMenu/UserMenu';
+import useDays from '../../../daysNav/api/useDays';
 import { StyledBoardTopActions } from './BoardTopActions.styles';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {}
 
 export const BoardTopActions: React.FC<Props> = () => {
   const history = useHistory();
   const { dayId } = useParams();
+  const { days, status: getDaysStatus } = useDays();
 
   return (
     <StyledBoardTopActions>
-      <IconButton
-        text="Report"
-        icon="survey"
-        isRound
-        hasBackground
-        onClick={() => history.push(`/report/${dayId}`)}
-      />
+      {getDaysStatus === 'success' && days.length > 0 && (
+        <IconButton
+          text="Report"
+          icon="survey"
+          isRound
+          hasBackground
+          onClick={() => history.push(`/report/${dayId}`)}
+        />
+      )}
       <UserMenu />
     </StyledBoardTopActions>
   );

frontend/src/features/day/Day.tsx

@@ -1,8 +1,6 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory, useParams } from 'react-router-dom';
-import { ReactQueryConfigProvider } from 'react-query';
-import { ReactQueryDevtools } from 'react-query-devtools';
 import { DaysNav } from '../daysNav/DaysNav';
 import { StyledDay } from './Day.styles';
 import useDays from '../daysNav/api/useDays';
@@ -49,19 +47,13 @@ export const Day: React.FC<Props> = () => {
     return () => clearInterval(timer);
   }, [activeTaskId, dispatch]);
 
-  const queryConfig = useRef({ refetchAllOnWindowFocus: true, suspense: false });
-
   return (
-    <ReactQueryConfigProvider config={queryConfig.current}>
-      <StyledDay>
-        <StatusBar />
-        <DaysNav />
-        <Board dayId={dayId} />
-        <SideBar />
-        <ActiveTaskPopup />
-      </StyledDay>
-
-      <ReactQueryDevtools initialIsOpen={false} />
-    </ReactQueryConfigProvider>
+    <StyledDay>
+      <StatusBar />
+      <DaysNav />
+      <Board dayId={dayId} />
+      <SideBar />
+      <ActiveTaskPopup />
+    </StyledDay>
   );
 };

frontend/src/index.tsx

@@ -4,15 +4,18 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
+import { ReactQueryConfigProvider } from 'react-query';
+import { ReactQueryDevtools } from 'react-query-devtools';
 import { ThemeProvider } from 'styled-components/macro';
 import { WithToasts, setAppElement, theme } from '@binarycapsule/ui-capsules';
 import App from './App';
 import store, { runSaga } from './store/store';
 import history from './router/history';
 import { INIT_REQUEST } from './features/auth/Init/Init.types';
+import { queryConfig } from './config/queryConfig';
 
 // Run axios config
-import './axios/axios';
+import './config/axios';
 
 runSaga();
 
@@ -21,14 +24,20 @@ store.dispatch({ type: INIT_REQUEST });
 setAppElement('#root');
 
 ReactDOM.render(
-  <Provider store={store}>
-    <ThemeProvider theme={theme}>
-      <Router history={history}>
-        <WithToasts>
-          <App />
-        </WithToasts>
-      </Router>
-    </ThemeProvider>
-  </Provider>,
+  <>
+    <ReactQueryConfigProvider config={queryConfig}>
+      <Provider store={store}>
+        <ThemeProvider theme={theme}>
+          <Router history={history}>
+            <WithToasts>
+              <App />
+            </WithToasts>
+          </Router>
+        </ThemeProvider>
+      </Provider>
+    </ReactQueryConfigProvider>
+
+    <ReactQueryDevtools initialIsOpen={false} />
+  </>,
   document.getElementById('root'),
 );