feat: reload calendar modal

gitroomhq · Sep 9, 2024 · a5cecc9 · a5cecc9
1 parent 048df4f
commit a5cecc9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/apps/frontend/src/components/launches/add.edit.model.tsx b/apps/frontend/src/components/launches/add.edit.model.tsx
@@ -32,7 +32,7 @@ import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.titl
 import { PickPlatforms } from '@gitroom/frontend/components/launches/helpers/pick.platform.component';
 import { ProvidersOptions } from '@gitroom/frontend/components/launches/providers.options';
 import { v4 as uuidv4 } from 'uuid';
-import useSWR, { useSWRConfig } from 'swr';
+import useSWR from 'swr';
 import { useToaster } from '@gitroom/react/toaster/toaster';
 import { UpDownArrow } from '@gitroom/frontend/components/launches/up.down.arrow';
 import { DatePicker } from '@gitroom/frontend/components/launches/helpers/date.picker';
@@ -53,10 +53,10 @@ export const AddEditModal: FC<{
   date: dayjs.Dayjs;
   integrations: Integrations[];
   reopenModal: () => void;
+  mutate: () => void;
 }> = (props) => {
-  const { date, integrations, reopenModal } = props;
+  const { date, integrations, reopenModal, mutate } = props;
   const [dateState, setDateState] = useState(date);
-  const { mutate } = useSWRConfig();
 
   // hook to open a new modal
   const modal = useModals();
@@ -243,7 +243,7 @@ export const AddEditModal: FC<{
         await fetch(`/posts/${existingData.group}`, {
           method: 'DELETE',
         });
-        mutate('/posts');
+        mutate();
         modal.closeAll();
         return;
       }
@@ -321,7 +321,7 @@ export const AddEditModal: FC<{
 
       existingData.group = uuidv4();
 
-      mutate('/posts');
+      mutate();
       toaster.show(
         !existingData.integration
           ? 'Added successfully'

diff --git a/apps/frontend/src/components/launches/calendar.context.tsx b/apps/frontend/src/components/launches/calendar.context.tsx
@@ -31,6 +31,7 @@ const CalendarContext = createContext({
   integrations: [] as Integrations[],
   trendings: [] as string[],
   posts: [] as Array<Post & { integration: Integration }>,
+  reloadCalendarView: () => {/** empty **/},
   display: 'week',
   setFilters: (filters: {
     currentWeek: number;
@@ -175,6 +176,7 @@ export const CalendarWeekProvider: FC<{
     <CalendarContext.Provider
       value={{
         trendings,
+        reloadCalendarView: swr.mutate,
         ...filters,
         posts: isLoading ? [] : internalData,
         integrations,

diff --git a/apps/frontend/src/components/launches/calendar.tsx b/apps/frontend/src/components/launches/calendar.tsx
@@ -1,6 +1,13 @@
 'use client';
 
-import React, { FC, Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  FC,
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import {
   Integrations,
   useCalendar,
@@ -159,7 +166,14 @@ export const CalendarColumn: FC<{
 }> = (props) => {
   const { getDate, randomHour } = props;
   const user = useUser();
-  const { integrations, posts, trendings, changeDate, display } = useCalendar();
+  const {
+    integrations,
+    posts,
+    trendings,
+    changeDate,
+    display,
+    reloadCalendarView,
+  } = useCalendar();
 
   const toaster = useToaster();
   const modal = useModals();
@@ -168,15 +182,16 @@ export const CalendarColumn: FC<{
   const postList = useMemo(() => {
     return posts.filter((post) => {
       const pList = dayjs.utc(post.publishDate).local();
-      const check = display === 'week'
-        ? pList.isSameOrAfter(getDate.startOf('hour')) && pList.isBefore(getDate.endOf('hour'))
-        : pList.format('DD/MM/YYYY') === getDate.format('DD/MM/YYYY');
+      const check =
+        display === 'week'
+          ? pList.isSameOrAfter(getDate.startOf('hour')) &&
+            pList.isBefore(getDate.endOf('hour'))
+          : pList.format('DD/MM/YYYY') === getDate.format('DD/MM/YYYY');
 
       return check;
     });
   }, [posts, display, getDate]);
 
-
   const canBeTrending = useMemo(() => {
     return !!trendings.find((trend) => {
       return dayjs
@@ -282,6 +297,7 @@ export const CalendarColumn: FC<{
           <ExistingDataContextProvider value={data}>
             <AddEditModal
               reopenModal={editPost(post)}
+              mutate={reloadCalendarView}
               integrations={integrations
                 .slice(0)
                 .filter((f) => f.id === data.integration)
@@ -308,6 +324,7 @@ export const CalendarColumn: FC<{
       children: (
         <AddEditModal
           integrations={integrations.slice(0).map((p) => ({ ...p }))}
+          mutate={reloadCalendarView}
           date={
             randomHour ? getDate.hour(Math.floor(Math.random() * 24)) : getDate
           }
@@ -368,11 +385,15 @@ export const CalendarColumn: FC<{
           ))}
         </div>
         {!isBeforeNow && (
-          <div className="pb-[2.5px] px-[5px] flex-1 flex" onClick={integrations.length ? addModal : addProvider}>
+          <div
+            className="pb-[2.5px] px-[5px] flex-1 flex"
+            onClick={integrations.length ? addModal : addProvider}
+          >
             <div
               className={clsx(
-                display === 'month' ? 'flex-1 min-h-[40px] w-full' :
-                !postList.length
+                display === 'month'
+                  ? 'flex-1 min-h-[40px] w-full'
+                  : !postList.length
                   ? 'h-full w-full absolute left-0 top-0 p-[5px]'
                   : 'min-h-[40px] w-full',
                 'flex items-center justify-center cursor-pointer pb-[2.5px]'