Moved completed tutorial states to session and local storage.

src/pages/calendar/[...date].tsx

@@ -20,14 +20,16 @@ const DateRoute: React.FC<unknown> = () => {
   const router = useRouter();
   const { date: slug } = router.query;
 
-  const [date, setDate] = useState<UpdateCalendarProps | null>(null);
+  const [date, setDate] = useState<UpdateCalenderPropsDateLayout | null>(null);
 
   const [error, setError] = useState<boolean>(false);
 
   // const dateRange = useRef(findValidDateRange());
   // const validDateRange = Object.assign({}, dateRange.current);
 
-  const validateDateInput = (dateArr: number[]): UpdateCalendarProps => {
+  const validateDateInput = (
+    dateArr: number[]
+  ): UpdateCalenderPropsDateLayout => {
     if (!(dateArr.length >= 2) && !(dateArr.length <= 3)) {
       return {
         year: 0,
@@ -198,7 +200,7 @@ const DateRoute: React.FC<unknown> = () => {
   ) : (
     <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
       <Provider store={store}>
-        <Calender {...date} />
+        <Calender date={date} isLoading={false} />
       </Provider>
     </Box>
   );

src/pages/index.tsx

@@ -1,16 +1,27 @@
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import { Box } from "@chakra-ui/react";
-import { addMonths, format } from "date-fns";
+import { format } from "date-fns";
 import Calender from "../components/calender";
 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";
+import { updateLoading } from "../features/calender";
+import {
+  getAndSetTutorial,
+  setTempTutorialComplete,
+  setTutorialCompleted
+} from "../features/tutorial";
 
 const IndexPage = (): JSX.Element => {
   const isLoading = useAppSelector((state) => state.calender.isLoading);
+  const completedTutorial = useAppSelector(
+    (state) => state.tutorial.completedTutorial
+  );
+  const tutorialCompletionInfo = useAppSelector(
+    (state) => state.tutorial.storageState
+  );
   const dispatch = useAppDispatch();
 
   const currDate = useRef<UpdateCalenderPropsDateLayout>({
@@ -19,25 +30,26 @@ const IndexPage = (): JSX.Element => {
     day: parseInt(format(new Date(), "d"))
   });
 
-  const [completedTutorial, setCompletedTutorial] = useState<boolean | null>(
-    null
-  );
-
-  const getTutorialCookie = (): boolean => {
-    return JSON.parse(localStorage.getItem("tutorialCompleted")) || false;
+  const handleTempTutorialCompleted = (): void => {
+    dispatch(setTempTutorialComplete());
   };
 
-  const setTutorialCookie = (bool: boolean): void => {
-    localStorage.setItem("tutorialCompleted", `${bool}`);
-    setCompletedTutorial(true);
+  const handleTutorialCompleted = (): void => {
+    dispatch(setTutorialCompleted());
   };
 
   useEffect(() => {
+    if (completedTutorial === null || tutorialCompletionInfo === null) {
+      dispatch(getAndSetTutorial());
+      dispatch(updateLoading(false));
+    }
+
     if (completedTutorial !== null) {
       dispatch(updateLoading(false));
     }
-    setCompletedTutorial(getTutorialCookie());
-  }, [completedTutorial, dispatch]);
+
+    console.info("use effect", completedTutorial, tutorialCompletionInfo);
+  }, [completedTutorial, dispatch, tutorialCompletionInfo]);
 
   return (
     <Box
@@ -49,7 +61,7 @@ const IndexPage = (): JSX.Element => {
       minWidth="min-content"
     >
       <Provider store={store}>
-        {completedTutorial === null ? (
+        {isLoading === true ? (
           <Fragment>
             <LoadingOverlay />
             <Calender date={currDate.current} isLoading={isLoading} />
@@ -57,7 +69,10 @@ const IndexPage = (): JSX.Element => {
         ) : completedTutorial ? (
           <Calender date={currDate.current} isLoading={isLoading} />
         ) : (
-          <Tutorial setTutorialCookie={setTutorialCookie} />
+          <Tutorial
+            setTutorialComplete={handleTutorialCompleted}
+            setTempTutorialComplete={handleTempTutorialCompleted}
+          />
         )}
       </Provider>
     </Box>