fix: tasks behind sidebar when dragging

jcmnunes · Jun 6, 2020 · c80ac85 · c80ac85
1 parent d144138
commit c80ac85
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/frontend/src/features/day/Board/BoardHeader/BoardHeader.styles.ts b/frontend/src/features/day/Board/BoardHeader/BoardHeader.styles.ts
@@ -7,7 +7,7 @@ export const StyledBoardHeader = styled.div`
   align-items: flex-start;
   width: 100%;
   position: sticky;
-  z-index: 5000;
+  z-index: 998;
   top: 0;
   padding-top: 48px;
   background: white;

diff --git a/frontend/src/features/day/SideBar/SideBar.styles.ts b/frontend/src/features/day/SideBar/SideBar.styles.ts
@@ -8,7 +8,7 @@ export const StyledSidebar = styled.div<{ isOpen?: boolean }>`
   overflow-y: auto;
   background: ${({ theme }) => theme.yellow050};
   position: fixed;
-  z-index: 20000;
+  z-index: 999;
   right: 0;
   transform: ${({ isOpen }) => `translateX(${isOpen ? 0 : '448px'})`};
   transition: transform 0.2s ease;

diff --git a/frontend/src/features/day/api/useToggleActiveTask.ts b/frontend/src/features/day/api/useToggleActiveTask.ts
@@ -42,13 +42,15 @@ export const useToggleActiveTask = () => {
 
       // If "this" is not the active task ➜ start it
       if (activeTaskId !== task.id) {
+        const start = moment.utc().toISOString();
+
         updateTask({
           taskId: task.id,
           body: {
             sectionId,
             dayId,
             payload: {
-              start: moment.utc().toISOString(),
+              start,
             },
           },
         });
@@ -59,7 +61,7 @@ export const useToggleActiveTask = () => {
           taskId: task.id,
           sectionId,
           dayId,
-          start: moment.utc().toISOString(),
+          start,
         } as ActiveTaskDto);
       } else {
         queryCache.setQueryData('activeTask', emptyActiveTask);

diff --git a/frontend/src/features/day/api/useUpdateTask.ts b/frontend/src/features/day/api/useUpdateTask.ts
@@ -39,6 +39,8 @@ export const useUpdateTask = () => {
       const previousDay = queryCache.getQueryData(['day', dayId]);
       const scopes = queryCache.getQueryData('scopes') as ScopeDto[];
 
+      const previousActiveTask = queryCache.getQueryData('activeTask');
+
       queryCache.setQueryData<DayDto | undefined>(['day', dayId], currentDay => {
         if (currentDay) {
           const sectionIndex = currentDay.sections.findIndex(({ id }) => id === sectionId);
@@ -70,7 +72,10 @@ export const useUpdateTask = () => {
         return currentDay;
       });
 
-      return () => queryCache.setQueryData(['day', dayId], previousDay);
+      return () => {
+        queryCache.setQueryData(['day', dayId], previousDay);
+        queryCache.setQueryData('activeTask', previousActiveTask);
+      };
     },
 
     onError: (_, __, rollback) => {