Check for expires compelted tutorial cookie.

src/pages/index.tsx

@@ -3,29 +3,38 @@ import { Provider } from "react-redux";
 import { store } from "../app/store";
 import { useAppDispatch, useAppSelector } from "../app/hooks";
 import { updateLoading } from "../features/calender";
-import { getAndSetTutorial } from "../features/tutorial";
+import {
+  clearTutorialCompleted,
+  getAndSetTutorial,
+  StorageState
+} from "../features/tutorial";
 import { Box } from "@chakra-ui/react";
-import { format } from "date-fns";
+import { format, isAfter, isBefore, startOfDay } from "date-fns";
 import Calender from "../components/calender";
 import Tutorial from "../components/tutorial";
 import LoadingOverlay from "../components/loading/LoadingOverlay";
+import versionStringToNumber from "../../lib/versionStringToNumber";
 
 const IndexPage = (): JSX.Element => {
-  const isLoading = useAppSelector((state) => state.calender.isLoading);
-  const completedTutorial = useAppSelector(
+  const currDateStr: string = useAppSelector(
+    (state) => state.calender.currDate
+  );
+  const isLoading: boolean = useAppSelector(
+    (state) => state.calender.isLoading
+  );
+
+  const currDateObj: Date = new Date(currDateStr);
+
+  // * Tutorial * //
+  const completedTutorial: boolean = useAppSelector(
     (state) => state.tutorial.completedTutorial
   );
-  const tutorialCompletionInfo = useAppSelector(
+  const tutorialCompletionInfo: StorageState = useAppSelector(
     (state) => state.tutorial.storageState
   );
   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"))
-  });
-
+  // Get the completed tutorial cookie or have it set to false.
   useEffect(() => {
     if (completedTutorial === null && tutorialCompletionInfo === null) {
       dispatch(getAndSetTutorial());
@@ -36,6 +45,73 @@ const IndexPage = (): JSX.Element => {
     }
   }, [completedTutorial, dispatch, tutorialCompletionInfo]);
 
+  // Checking the exp date of completed tutorial cookie and if the version completed is out of date.
+  useEffect(() => {
+    if (tutorialCompletionInfo !== null) {
+      const { exp, version } = tutorialCompletionInfo;
+      const currDateObj: Date = new Date(currDateStr);
+
+      /**
+       * Checks if the completed tutorial cookie is expired.
+       * @param {Date} expDate the date when the completed tutorital cookie expires.
+       * @returns {boolean} true if the cookie is expired, false is otherwise.
+       */
+      const expDateValidator = (expDate: Date): boolean => {
+        let flag = false;
+
+        const startOfToday = startOfDay(currDateObj);
+
+        if (isAfter(startOfToday, expDate)) {
+          flag = true;
+        }
+
+        return flag;
+      };
+
+      /**
+       * Checks if the last time the completed tutorial is before an update to the tutorial.
+       * @param {number} lastVersionCompleted the version number the tutorial was last completed.
+       * @returns {boolean} true if the version given is before the changes to the tutorial, false otherwise.
+       */
+      const versionValidator = (lastVersionCompleted: number): boolean => {
+        const lastVersionWithChangeStr: string =
+          process.env.NEXT_PUBLIC_NEW_TUTORIAL_VERSION;
+        const lastVersionWithChange: number = versionStringToNumber(
+          lastVersionWithChangeStr
+        );
+
+        const lastUpdatedDateStr: string =
+          process.env.NEXT_PUBLIC_LAST_UPDATE_DATE;
+        const lastUpdatedDate: Date = new Date(lastUpdatedDateStr);
+
+        let flag = false;
+
+        if (
+          lastVersionCompleted < lastVersionWithChange ||
+          (lastVersionCompleted === lastVersionWithChange &&
+            isBefore(currDateObj, lastUpdatedDate))
+        ) {
+          flag = true;
+          console.error("Completed cookie version is out of date.");
+        }
+
+        return flag;
+      };
+
+      if (expDateValidator(new Date(exp)) || versionValidator(version)) {
+        console.warn("Version outdated or cookie expired.");
+        dispatch(clearTutorialCompleted());
+      }
+    }
+  }, [currDateStr, dispatch, tutorialCompletionInfo]);
+
+  // Current date
+  const currDate = useRef<UpdateCalenderPropsDateLayout>({
+    year: parseInt(format(currDateObj, "y")),
+    month: parseInt(format(currDateObj, "M")),
+    day: parseInt(format(currDateObj, "d"))
+  });
+
   return (
     <Box textAlign="center" w="100%" h="auto" pt="50px" minWidth="min-content">
       <Provider store={store}>