feat: implement skeleton layout for settings and search pages (#366)

Co-authored-by: Lê Nhân Phụng <lenhanphung@Phung-Mac-M4.local>

src/components/Calendar/Calendar.styl

@@ -5,10 +5,12 @@
   justify-content space-between
 
 .main-layout
+  display flex
+  height calc(100vh - 90px)
+  
+.main-layout.calendar-layout
   background-color #fff
   flex-direction row
-  height calc(100vh - 90px)
-  display flex
 
 .calendar
   flex-grow 1

src/components/Calendar/Calendar.tsx

@@ -574,7 +574,7 @@ export default function CalendarApp({
   const { t, lang } = useI18n();
 
   return (
-    <main className="main-layout">
+    <main className="main-layout calendar-layout">
       <Box
         className="sidebar"
         sx={{

src/components/Calendar/CalendarLayout.tsx

@@ -7,12 +7,16 @@ import { useAppSelector } from "../../app/hooks";
 import { refreshCalendars } from "../Event/utils/eventUtils";
 import { ErrorSnackbar } from "../Error/ErrorSnackbar";
 
+import SettingsPage from "../../features/Settings/SettingsPage";
+import SearchResultsPage from "../../features/Search/SearchResultsPage";
+
 export default function CalendarLayout() {
   const calendarRef = useRef<any>(null);
   const dispatch = useAppDispatch();
   const error = useAppSelector((state) => state.calendars.error);
   const selectedCalendars = useAppSelector((state) => state.calendars.list);
   const tempcalendars = useAppSelector((state) => state.calendars.templist);
+  const view = useAppSelector((state) => state.settings.view);
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
   const [currentView, setCurrentView] = useState<string>("timeGridWeek");
 
@@ -59,11 +63,15 @@ export default function CalendarLayout() {
   return (
     <div className="App">
       <Menubar {...menubarProps} />
-      <CalendarApp
-        calendarRef={calendarRef}
-        onDateChange={handleDateChange}
-        onViewChange={handleViewChange}
-      />
+      {view === "calendar" && (
+        <CalendarApp
+          calendarRef={calendarRef}
+          onDateChange={handleDateChange}
+          onViewChange={handleViewChange}
+        />
+      )}
+      {view === "settings" && <SettingsPage />}
+      {view === "search" && <SearchResultsPage />}
       <ErrorSnackbar error={error} type="calendar" />
     </div>
   );

src/features/Search/SearchResultsPage.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function SearchResultsPage() {
+  return (
+    <main className="main-layout search-layout">
+      <h1>Search Results</h1>
+    </main>
+  );
+}

src/features/Settings/SettingsPage.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function SettingsPage() {
+  return (
+    <main className="main-layout settings-layout">
+      <h1>Settings Page</h1>
+    </main>
+  );
+}

src/features/Settings/SettingsSlice.ts

@@ -2,6 +2,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 export interface SettingsState {
   language: string;
+  view: "calendar" | "settings" | "search";
 }
 
 const savedLang = localStorage.getItem("lang");
@@ -9,6 +10,7 @@ const defaultLang = savedLang ?? (window as any).LANG ?? "en";
 
 const initialState: SettingsState = {
   language: defaultLang,
+  view: "calendar",
 };
 
 export const settingsSlice = createSlice({
@@ -19,8 +21,14 @@ export const settingsSlice = createSlice({
       state.language = action.payload;
       localStorage.setItem("lang", action.payload);
     },
+    setView: (
+      state,
+      action: PayloadAction<"calendar" | "settings" | "search">
+    ) => {
+      state.view = action.payload;
+    },
   },
 });
 
-export const { setLanguage } = settingsSlice.actions;
+export const { setLanguage, setView } = settingsSlice.actions;
 export default settingsSlice.reducer;