chore: fix calendar layout

makeplane · sriramveeraghanta · Oct 11, 2023 · Jul 27, 2023 · Jul 28, 2023 · Aug 1, 2023
commit ecf381d5abec468d950274ce3bfa6959c9152edc
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -12,14 +12,14 @@ import { IIssueGroupedStructure } from "store/issue";
 
 type Props = {
   issues: IIssueGroupedStructure | null;
+  layout: "month" | "week" | undefined;
 };
 
 export const CalendarChart: React.FC<Props> = observer((props) => {
-  const { issues } = props;
+  const { issues, layout } = props;
 
-  const { calendar: calendarStore, issueFilter: issueFilterStore } = useMobxStore();
+  const { calendar: calendarStore } = useMobxStore();
 
-  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
   const calendarPayload = calendarStore.calendarPayload;
 
   const allWeeksOfActiveMonth = calendarStore.allWeeksOfActiveMonth;
@@ -37,7 +37,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
         <CalendarHeader />
         <CalendarWeekHeader />
         <div className="h-full w-full overflow-y-auto">
-          {calendarLayout === "month" ? (
+          {layout === "month" ? (
             <div className="h-full w-full grid grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
               {allWeeksOfActiveMonth &&
                 Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (

diff --git a/web/components/issues/issue-layouts/calendar/module-root.tsx b/web/components/issues/issue-layouts/calendar/module-root.tsx
@@ -9,7 +9,7 @@ import { CalendarChart } from "components/issues";
 import { IIssueGroupedStructure } from "store/issue";
 
 export const ModuleCalendarLayout: React.FC = observer(() => {
-  const { module: moduleStore } = useMobxStore();
+  const { module: moduleStore, issueFilter: issueFilterStore } = useMobxStore();
 
   // TODO: add drag and drop functionality
   const onDragEnd = (result: DropResult) => {
@@ -29,7 +29,10 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
   return (
     <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
       <DragDropContext onDragEnd={onDragEnd}>
-        <CalendarChart issues={issues as IIssueGroupedStructure | null} />
+        <CalendarChart
+          issues={issues as IIssueGroupedStructure | null}
+          layout={issueFilterStore.userDisplayFilters.calendar?.layout}
+        />
       </DragDropContext>
     </div>
   );

diff --git a/web/components/issues/issue-layouts/calendar/root.tsx b/web/components/issues/issue-layouts/calendar/root.tsx
@@ -9,7 +9,7 @@ import { CalendarChart } from "components/issues";
 import { IIssueGroupedStructure } from "store/issue";
 
 export const CalendarLayout: React.FC = observer(() => {
-  const { issue: issueStore } = useMobxStore();
+  const { issue: issueStore, issueFilter: issueFilterStore } = useMobxStore();
 
   // TODO: add drag and drop functionality
   const onDragEnd = (result: DropResult) => {
@@ -29,7 +29,10 @@ export const CalendarLayout: React.FC = observer(() => {
   return (
     <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
       <DragDropContext onDragEnd={onDragEnd}>
-        <CalendarChart issues={issues as IIssueGroupedStructure | null} />
+        <CalendarChart
+          issues={issues as IIssueGroupedStructure | null}
+          layout={issueFilterStore.userDisplayFilters.calendar?.layout}
+        />
       </DragDropContext>
     </div>
   );