Merge pull request #61 from jcmnunes/release/v0.12.0

v0.12.0
jcmnunes · Sep 19, 2020 · e651308 · e651308
2 parents 3cd1cfb + 213a0ee
commit e651308
Show file tree

Hide file tree

Showing 23 changed files with 106 additions and 74 deletions.
diff --git a/backend/package-lock.json b/backend/package-lock.json
diff --git a/backend/package.json b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "widy-backend",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Widy app backend",
   "main": "build/index.js",
   "repository": {
@@ -36,7 +36,7 @@
     "joi-objectid": "^3.0.1",
     "jsonwebtoken": "^8.5.1",
     "juice": "^6.0.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.19",
     "moment": "^2.27.0",
     "mongoose": "^5.9.21",
     "mongoose-mongodb-errors": "0.0.2",

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "widy-frontend",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "private": true,
   "proxy": "http://localhost:5000",
   "scripts": {
@@ -45,8 +45,8 @@
     "react-detect-offline": "^2.4.0",
     "react-dom": "^16.13.1",
     "react-hook-form": "^5.7.2",
-    "react-query": "1.5.5",
-    "react-query-devtools": "^1.2.0",
+    "react-query": "2.4.13",
+    "react-query-devtools": "^2.2.1",
     "react-redux": "^7.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

diff --git a/frontend/src/config/queryConfig.ts b/frontend/src/config/queryConfig.ts
@@ -1,18 +1,22 @@
 import { AxiosError } from 'axios';
 
 export const queryConfig = {
-  refetchAllOnWindowFocus: false,
-  suspense: false,
-  staleTime: Infinity,
-  retry: (failureCount: number, error: unknown) => {
-    if ((error as AxiosError).response) {
-      switch ((error as AxiosError).response?.status) {
-        case 404:
-          return false;
-        default:
+  shared: {
+    suspense: false,
+  },
+  queries: {
+    refetchOnWindowFocus: false,
+    staleTime: Infinity,
+    retry: (failureCount: number, error: unknown) => {
+      if ((error as AxiosError).response) {
+        switch ((error as AxiosError).response?.status) {
+          case 404:
+            return false;
+          default:
+        }
       }
-    }
 
-    return failureCount <= 3;
+      return failureCount <= 3;
+    },
   },
 };
diff --git a/frontend/src/features/day/Board/BoardHeader/BoardHeader.tsx b/frontend/src/features/day/Board/BoardHeader/BoardHeader.tsx
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import moment from 'moment';
 import { Icon } from '@binarycapsule/ui-capsules';
 import { useDispatch } from 'react-redux';
+import { QueryStatus } from 'react-query';
 import { BoardTopActions } from '../BoardTopActions/BoardTopActions';
 import { BoardHeaderLoading } from './BoardHeader.loading';
 import {
@@ -17,7 +18,7 @@ import { Brand } from '../../../daysNav/Brand/Brand';
 import { daysNavSliceActions } from '../../../daysNav/DaysNavSlice';
 
 interface Props {
-  status: 'loading' | 'error' | 'success';
+  status: QueryStatus;
   day?: DayDto;
 }
 

diff --git a/frontend/src/features/day/SideBar/SideBar.styles.ts b/frontend/src/features/day/SideBar/SideBar.styles.ts
@@ -11,8 +11,9 @@ export const StyledSidebar = styled.div<{ isOpen?: boolean }>`
   z-index: 999;
   right: 0;
   transform: ${({ isOpen }) => `translateX(${isOpen ? 0 : '448px'})`};
-  transition: transform 0.2s ease;
+  transition: transform 0.2s cubic-bezier(0, 0.52, 0, 1);
   box-shadow: 0 10px 20px hsla(0, 0%, 0%, 0.15), 0 3px 6px hsla(0, 0%, 0%, 0.1);
+  border-left: 1px solid ${({ theme }) => theme.yellow075};
 
   @media (min-width: ${props => props.theme.breakpoints.mobile}) {
     width: 448px;

diff --git a/frontend/src/features/day/Task/Task.syles.ts b/frontend/src/features/day/Task/Task.syles.ts
@@ -87,6 +87,8 @@ export const StyledTask = styled.div<StyledTaskProps>`
   flex-direction: row;
   border: ${props =>
     props.isPlan || props.isSchedule ? 'none' : `1px solid ${getColors(props).border}`};
+  border-bottom: ${({ isPlan, isSchedule, theme }) =>
+    (isPlan || isSchedule) && `1px solid ${theme.neutral100}`};
   border-radius: ${({ isPlan, isSchedule }) => (isPlan || isSchedule ? 0 : '4px')};
   background-color: ${props => getColors(props).background};
   padding: 8px;
@@ -96,7 +98,6 @@ export const StyledTask = styled.div<StyledTaskProps>`
   cursor: pointer;
   ${({ isActive }) => isActive && isActiveMixin};
 
-  ${StyledScopeCode},
   ${ActionsContainer} {
     display: ${({ isPlan, isSchedule, isSelected }) =>
       (isPlan || isSchedule) && !isSelected && 'none'};

diff --git a/frontend/src/features/day/TaskMenu/TaskMenu.tsx b/frontend/src/features/day/TaskMenu/TaskMenu.tsx
@@ -90,7 +90,12 @@ export const TaskMenu: React.FC<Props> = ({ dayId, sectionId, task, isPlan }) =>
       )}
 
       {showRegisterTimeModal && (
-        <RegisterTimeModal closeModal={() => setShowRegisterTimeModal(false)} />
+        <RegisterTimeModal
+          taskId={task.id}
+          sectionId={sectionId}
+          dayId={dayId}
+          closeModal={() => setShowRegisterTimeModal(false)}
+        />
       )}
     </>
   );

diff --git a/frontend/src/features/day/Timer/Timer.tsx b/frontend/src/features/day/Timer/Timer.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import moment from 'moment';
 import { useSelector } from 'react-redux';
 import { Button } from '@binarycapsule/ui-capsules';
+import { useParams } from 'react-router';
 import { TimerButton } from './TimerButton/TimerButton';
 import { Time } from './Time/Time';
 import { activeTaskTickSelector } from '../activeTask/activeTaskSelectors';
@@ -17,6 +18,7 @@ interface Props {
 }
 
 export const Timer: React.FC<Props> = ({ task, section }) => {
+  const { dayId } = useParams();
   const [isRegisterModalOpen, setIsRegisterModalOpen] = useState(false);
 
   const { data: activeTaskData } = useActiveTask();
@@ -54,7 +56,12 @@ export const Timer: React.FC<Props> = ({ task, section }) => {
       </StyledTimer>
 
       {isRegisterModalOpen && (
-        <RegisterTimeModal closeModal={() => setIsRegisterModalOpen(false)} />
+        <RegisterTimeModal
+          taskId={task.id}
+          sectionId={section.id}
+          dayId={dayId}
+          closeModal={() => setIsRegisterModalOpen(false)}
+        />
       )}
     </>
   );

diff --git a/frontend/src/features/day/Timer/TimerButton/TimerButton.tsx b/frontend/src/features/day/Timer/TimerButton/TimerButton.tsx
@@ -21,7 +21,7 @@ interface Props {
 export const TimerButton: React.FC<Props> = ({ size, task, sectionId }) => {
   const { dayId } = useParams();
   const { status, data: activeTaskData } = useActiveTask();
-  const [updateTask] = useUpdateTask();
+  const [updateTask, { isLoading }] = useUpdateTask();
   const history = useHistory();
   const dispatch = useDispatch();
 
@@ -40,6 +40,11 @@ export const TimerButton: React.FC<Props> = ({ size, task, sectionId }) => {
       colors={isActive ? colors.active : undefined}
       icon={isActive ? 'stop' : 'play'}
       onClick={() => {
+        // Debounce to prevent simultaneous requests
+        if (isLoading) {
+          return;
+        }
+
         const payload = isActive
           ? {
               start: null,

diff --git a/frontend/src/features/day/api/useDay.ts b/frontend/src/features/day/api/useDay.ts
@@ -26,13 +26,13 @@ export interface DayDto {
   sections: SectionDto[];
 }
 
-const getDayById = async (_: string, dayId: string) => {
+const getDayById = async (_: string, dayId?: string) => {
   const { data } = await axios.get<DayDto>(`/api/days/${dayId}`);
   return data;
 };
 
 export const useDay = (dayId?: string) => {
-  return useQuery(dayId ? ['day', dayId] : null, getDayById);
+  return useQuery(['day', dayId], getDayById, { enabled: dayId });
 };
 
 export const useSection = (dayId?: string, sectionId?: string): SectionDto | null => {

diff --git a/frontend/src/features/day/api/useDeleteTask.ts b/frontend/src/features/day/api/useDeleteTask.ts
@@ -88,10 +88,10 @@ export const useDeleteTask = () => {
       });
     },
 
-    onSettled: (result, err, { body: { dayId } }) => {
-      queryCache.refetchQueries(['day', dayId]);
-      queryCache.refetchQueries('activeTask');
-      queryCache.refetchQueries('schedule');
-    },
+    // onSettled: (result, err, { body: { dayId } }) => {
+    //   queryCache.invalidateQueries(['day', dayId]);
+    //   queryCache.invalidateQueries('activeTask');
+    //   queryCache.invalidateQueries('schedule');
+    // },
   });
 };
diff --git a/frontend/src/features/day/api/useMoveAll.ts b/frontend/src/features/day/api/useMoveAll.ts
@@ -82,9 +82,9 @@ export const useMoveAll = () => {
       });
     },
 
-    onSettled: (result, err, { body: { dayId } }) => {
-      queryCache.refetchQueries(['day', dayId]);
-      queryCache.refetchQueries('schedule');
-    },
+    // onSettled: (result, err, { body: { dayId } }) => {
+    //   queryCache.invalidateQueries(['day', dayId]);
+    //   queryCache.invalidateQueries('schedule');
+    // },
   });
 };
diff --git a/frontend/src/features/day/api/useMoveTask.ts b/frontend/src/features/day/api/useMoveTask.ts
@@ -214,10 +214,10 @@ export const useMoveTask = () => {
       });
     },
 
-    onSettled: (result, err, { body: { dayId } }) => {
-      queryCache.refetchQueries(['day', dayId]);
-      queryCache.refetchQueries('activeTask');
-      queryCache.refetchQueries('schedule');
-    },
+    // onSettled: (result, err, { body: { dayId } }) => {
+    //   queryCache.invalidateQueries(['day', dayId]);
+    //   queryCache.invalidateQueries('activeTask');
+    //   queryCache.invalidateQueries('schedule');
+    // },
   });
 };
diff --git a/frontend/src/features/day/api/useScheduleTask.ts b/frontend/src/features/day/api/useScheduleTask.ts
@@ -72,9 +72,9 @@ export const useScheduleTask = () => {
       });
     },
 
-    onSettled: (result, err, { body: { dayId } }) => {
-      queryCache.refetchQueries(['day', dayId]);
-      queryCache.refetchQueries('schedule');
-    },
+    // onSettled: (result, err, { body: { dayId } }) => {
+    //   queryCache.invalidateQueries(['day', dayId]);
+    //   queryCache.invalidateQueries('schedule');
+    // },
   });
 };
diff --git a/frontend/src/features/day/api/useUpdateTask.ts b/frontend/src/features/day/api/useUpdateTask.ts
@@ -98,9 +98,12 @@ export const useUpdateTask = () => {
                 } as ActiveTaskDto);
               }
 
-              // We are stopping a task
+              // We are editing task time
               if (payload.time) {
-                queryCache.setQueryData('activeTask', emptyActiveTask);
+                // We are stopping the active task
+                if (previousActiveTask.taskId === taskId) {
+                  queryCache.setQueryData('activeTask', emptyActiveTask);
+                }
               }
 
               if (payload.title) {
@@ -151,9 +154,9 @@ export const useUpdateTask = () => {
     },
 
     onSettled: (result, err, { body: { dayId } }) => {
-      queryCache.refetchQueries(['day', dayId]);
-      queryCache.refetchQueries('activeTask');
-      queryCache.refetchQueries('schedule');
+      queryCache.invalidateQueries(['day', dayId]);
+      queryCache.invalidateQueries('activeTask');
+      queryCache.invalidateQueries('schedule');
     },
   });
 };
diff --git a/frontend/src/features/day/dialogs/ScheduleTaskDialog.tsx b/frontend/src/features/day/dialogs/ScheduleTaskDialog.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Dialog, DialogAction } from '@binarycapsule/ui-capsules';
+import { useHistory, useParams } from 'react-router';
 import { ScheduleTaskVariables, useScheduleTask } from '../api/useScheduleTask';
 
 interface Props {
@@ -15,6 +16,9 @@ export const ScheduleTaskDialog: React.FC<Props> = ({
   taskId,
   onRequestClose,
 }) => {
+  const { taskId: selectedTaskId } = useParams();
+  const history = useHistory();
+
   const [scheduleTask] = useScheduleTask();
 
   const scheduleTaskAction = () => {
@@ -24,6 +28,10 @@ export const ScheduleTaskDialog: React.FC<Props> = ({
     };
     onRequestClose();
 
+    if (selectedTaskId === taskId) {
+      history.push(`/day/${dayId}`);
+    }
+
     return scheduleTask(scheduleTaskVariables);
   };