Loading state dusccefully added.

src/components/calender/DatePicker.tsx

@@ -28,7 +28,6 @@ import {
 import { format } from "date-fns";
 import findValidDateRange from "../../../lib/findValidDateRange";
 import FormValidateEmoji from "./FormValidateEmoji";
-import { useAppSelector } from "../../app/hooks";
 
 interface DatePickerProps {
   isLoading: boolean;
@@ -58,7 +57,7 @@ const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => {
         dateError = "Please select a date.";
         setValid(false);
       } else if (dateArr.length === 3) {
-        const date: UpdateCalendarProps = {
+        const date: UpdateCalenderPropsDateLayout = {
           year: parseInt(dateArr[0]),
           month: parseInt(dateArr[1]),
           day: parseInt(dateArr[2])
@@ -98,7 +97,7 @@ const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => {
       if (formInput.date) {
         if (!validateDate(formInput.date)) {
           const dateArr = formInput.date.split("-");
-          const date: UpdateCalendarProps = {
+          const date: UpdateCalenderPropsDateLayout = {
             year: parseInt(dateArr[0]),
             month: parseInt(dateArr[1]),
             day: parseInt(dateArr[2])

src/components/calender/index.tsx

@@ -6,7 +6,10 @@ import { updateCurrDate, updateMonth } from "../../features/calender/calender";
 import CalenderNav from "./CalenderNav";
 import Day from "./Day";
 
-const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
+const Calender = ({
+  date: newDate,
+  isLoading
+}: UpdateCalendarProps): JSX.Element => {
   // * Month * //
   const currDate: string = useAppSelector((state) => state.calender.currDate);
   const selectedDate: SelectedDateInfo = useAppSelector(
@@ -64,7 +67,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
 
   return (
     <VStack h="91vh" w="100%">
-      <CalenderNav title={title} isLoading={false} />
+      <CalenderNav title={title} isLoading={isLoading} />
       <VStack h="100%" w="100%" spacing={0}>
         <HStack
           px={6}
@@ -128,7 +131,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
 
               return (
                 <Day
-                  isLoading={false}
+                  isLoading={isLoading}
                   isOverflow={isOverflow}
                   overflowDirection={overflowDirection}
                   currSticker={sticker}

src/features/calender/calender.ts

@@ -5,6 +5,7 @@ import populate from "../../../lib/populateMonth";
 interface CalenderSlice {
   currDate: string;
   selectedDateInfo: SelectedDateInfo;
+  isLoading: boolean;
 }
 
 const getCurrDate = (): Date => new Date();
@@ -17,7 +18,8 @@ const initialState: CalenderSlice = {
     date: dateParse(getCurrDate()),
     title: dateFormatter(getCurrDate()),
     layout: populate(getCurrDate())
-  }
+  },
+  isLoading: true
 };
 
 // TODO: Add a function that validated if a month has at least one sticker in it. Use that within the nav function (when filter is enabled).
@@ -50,9 +52,15 @@ const calenderSlice = createSlice({
     // Update current date
     updateCurrDate(state: CalenderSlice) {
       state.currDate = dateParse(new Date());
+    },
+    // Update isLoading
+    updateLoading(state: CalenderSlice, action: PayloadAction<boolean>) {
+      const { payload } = action;
+      state.isLoading = payload;
     }
   }
 });
 
-export const { updateMonth, updateCurrDate } = calenderSlice.actions;
+export const { updateMonth, updateCurrDate, updateLoading } =
+  calenderSlice.actions;
 export default calenderSlice.reducer;

src/pages/_app.tsx

@@ -4,6 +4,8 @@ import { ChakraProvider } from "@chakra-ui/react";
 import AppTheme from "../theme/AppTheme";
 import Layout from "../theme/layout/Layout";
 import Head from "next/head";
+import { Provider } from "react-redux";
+import { store } from "../app/store";
 
 function LCMPottyChart({ Component, pageProps }: AppProps): JSX.Element {
   return (
@@ -17,7 +19,9 @@ function LCMPottyChart({ Component, pageProps }: AppProps): JSX.Element {
               content="width=device-width, user-scalable=yes, initial-scale=1.0"
             />
           </Head>
-          <Component {...pageProps} />
+          <Provider store={store}>
+            <Component {...pageProps} />
+          </Provider>
         </Layout>
       </ChakraProvider>
     </React.StrictMode>

src/pages/index.tsx

@@ -6,9 +6,14 @@ import Tutorial from "../components/tutorial";
 import LoadingOverlay from "../components/loading/LoadingOverlay";
 import { Provider } from "react-redux";
 import { store } from "../app/store";
+import { useAppDispatch, useAppSelector } from "../app/hooks";
+import { updateLoading } from "../features/calender/calender";
 
 const IndexPage = (): JSX.Element => {
-  const calenderProps = useRef<UpdateCalendarProps>({
+  const isLoading = useAppSelector((state) => state.calender.isLoading);
+  const dispatch = useAppDispatch();
+
+  const currDate = useRef<UpdateCalenderPropsDateLayout>({
     year: parseInt(format(new Date(), "y")),
     month: parseInt(format(new Date(), "M")),
     day: parseInt(format(new Date(), "d"))
@@ -19,42 +24,20 @@ const IndexPage = (): JSX.Element => {
   );
 
   const getTutorialCookie = (): boolean => {
-    let flag = false;
-
-    const decodedCookie = decodeURIComponent(document.cookie);
-    const cookies = decodedCookie.split(";");
-
-    cookies.map((val) => {
-      const cookie = val.split("=");
-
-      if (cookie.length > 1) {
-        const cName = cookie[0].toLowerCase();
-        const cVal = JSON.parse(cookie[1]) || cookie[1];
-
-        if (
-          cName === "tutorialCompleted".toLowerCase() &&
-          cName &&
-          cVal &&
-          typeof cVal === "boolean"
-        ) {
-          flag = cVal;
-        }
-      }
-    });
-    return flag;
+    return JSON.parse(localStorage.getItem("tutorialCompleted")) || false;
   };
 
   const setTutorialCookie = (bool: boolean): void => {
-    const name = "tutorialCompleted";
-    const exp = addMonths(new Date(), 1).toUTCString();
-
-    document.cookie = `${name}=${bool};expires=${exp}'path=/`;
-    setCompletedTutorial(bool);
+    localStorage.setItem("tutorialCompleted", `${bool}`);
+    setCompletedTutorial(true);
   };
 
   useEffect(() => {
+    if (completedTutorial !== null) {
+      dispatch(updateLoading(false));
+    }
     setCompletedTutorial(getTutorialCookie());
-  }, [completedTutorial]);
+  }, [completedTutorial, dispatch]);
 
   return (
     <Box
@@ -69,10 +52,10 @@ const IndexPage = (): JSX.Element => {
         {completedTutorial === null ? (
           <Fragment>
             <LoadingOverlay />
-            <Calender {...calenderProps.current} />
+            <Calender date={currDate.current} isLoading={isLoading} />
           </Fragment>
         ) : completedTutorial ? (
-          <Calender {...calenderProps.current} />
+          <Calender date={currDate.current} isLoading={isLoading} />
         ) : (
           <Tutorial setTutorialCookie={setTutorialCookie} />
         )}

types/Calender.d.ts

@@ -39,11 +39,15 @@ interface MonthLayout {
   monday: WeekLayout;
 }
 
-interface UpdateCalendarProps {
+interface UpdateCalenderPropsDateLayout {
   year: number;
   month: number;
   day: number;
 }
+interface UpdateCalendarProps {
+  date: UpdateCalenderPropsDateLayout;
+  isLoading: boolean;
+}
 
 interface SelectedDateInfo {
   date: string;