src/components/tutorial/CalenderExample.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { updateMonth } from "../../features/calender";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import { format, isSameDay, isToday } from "date-fns";
 import Day from "../calender/Day";
+import { setCurrentWeek } from "../../features/tutorial";
 
 interface CalenderExampleProps {
   type: "add" | "edit";
@@ -30,7 +31,6 @@ const CalenderExample = ({
   const { layout, date: currSelectedDateStr } = selectedDate;
 
   // * Stickers * //
-
   const stickersMonth: StickerDays = useAppSelector(
     (state) => state.stickers.stickersMonth
   );
@@ -56,25 +56,30 @@ const CalenderExample = ({
   }, [currDateStr, currSelectedDateStr, dispatch]);
 
   // * The current week * //
+  const currWeek = useAppSelector((state) => state.tutorial.currWeek);
 
-  const getCurrentWeek = (): MonthDay[] => {
-    let foundWeek: MonthDay[] | null;
-    for (const week in month) {
-      const currWeek = month[week];
+  useEffect(() => {
+    const getCurrentWeek = (): MonthDay[] => {
+      let foundWeek: MonthDay[] | null;
+      for (const week in month) {
+        const currWeek = month[week];
 
-      currWeek.forEach((day: MonthDay) => {
-        const { date } = day;
+        currWeek.forEach((day: MonthDay) => {
+          const { date } = day;
 
-        if (isToday(new Date(date))) {
-          foundWeek = currWeek;
-        }
-      });
+          if (isToday(new Date(date))) {
+            foundWeek = currWeek;
+          }
+        });
+      }
+
+      return foundWeek || ([] as MonthDay[]);
+    };
+
+    if (currWeek === null) {
+      dispatch(setCurrentWeek(getCurrentWeek()));
     }
-
-    return foundWeek || ([] as MonthDay[]);
-  };
-
-  const [currWeek /*, setCurrWeek*/] = useState<MonthDay[]>(getCurrentWeek());
+  }, [currWeek, dispatch, month]);
 
   return (
     <VStack h="8.5rem" w="100%" spacing={0}>
@@ -122,44 +127,45 @@ const CalenderExample = ({
         columns={7}
         alignItems="center"
       >
-        {currWeek.map((day: MonthDay) => {
-          const { date, isOverflow, overflowDirection } = day;
+        {currWeek &&
+          currWeek.map((day: MonthDay) => {
+            const { date, isOverflow, overflowDirection } = day;
 
-          const toDateObj: Date = new Date(date);
+            const toDateObj: Date = new Date(date);
 
-          let sticker = null;
+            let sticker = null;
 
-          let id = "";
+            let id = "";
 
-          stickersMonth.map((stickerDay) => {
-            const { date: stickerDate } = stickerDay;
+            stickersMonth.map((stickerDay) => {
+              const { date: stickerDate } = stickerDay;
 
-            if (isSameDay(new Date(stickerDate), toDateObj)) {
-              sticker = stickerDay.sticker;
+              if (isSameDay(new Date(stickerDate), toDateObj)) {
+                sticker = stickerDay.sticker;
 
-              id = stickerDay.id;
-            }
-          });
-
-          return (
-            <Day
-              isLoading={isLoading}
-              isOverflow={isOverflow}
-              overflowDirection={overflowDirection}
-              currSticker={sticker}
-              date={date}
-              selectedDate={selectedDate.date}
-              currDate={currDateObj}
-              tutorial={type}
-              key={
-                id.length
-                  ? id
-                  : format(toDateObj, "yyyyddLL") +
-                    `/${sticker === null ? 0 : sticker}`
+                id = stickerDay.id;
               }
-            />
-          );
-        })}
+            });
+
+            return (
+              <Day
+                isLoading={isLoading}
+                isOverflow={isOverflow}
+                overflowDirection={overflowDirection}
+                currSticker={sticker}
+                date={date}
+                selectedDate={selectedDate.date}
+                currDate={currDateObj}
+                tutorial={type}
+                key={
+                  id.length
+                    ? id
+                    : format(toDateObj, "yyyyddLL") +
+                      `/${sticker === null ? 0 : sticker}`
+                }
+              />
+            );
+          })}
       </SimpleGrid>
     </VStack>
   );

src/components/tutorial/sections/TutorialLinks.tsx

@@ -29,15 +29,22 @@ const TutorialLinks = (): JSX.Element => {
           const { href, name, type } = link;
 
           if (type === "primary" || type === "secondary") {
-            return <CustomButton link={href} text={name} type={type} />;
+            return (
+              <CustomButton
+                key={name.replaceAll(" ", "-")}
+                link={href}
+                text={name}
+                type={type}
+              />
+            );
           }
 
           if (type === "patreon") {
-            return <Patreon />;
+            return <Patreon key={type} />;
           }
 
           if (type === "twitter") {
-            return <Twitter />;
+            return <Twitter key={type} />;
           }
         })}
       </HStack>
@@ -53,15 +60,22 @@ const TutorialLinks = (): JSX.Element => {
           const { href, name, type } = link;
 
           if (type === "primary" || type === "secondary") {
-            return <CustomButton link={href} text={name} type={type} />;
+            return (
+              <CustomButton
+                key={name.replaceAll(" ", "-")}
+                link={href}
+                text={name}
+                type={type}
+              />
+            );
           }
 
           if (type === "patreon") {
-            return <Patreon />;
+            return <Patreon key={type} />;
           }
 
           if (type === "twitter") {
-            return <Twitter />;
+            return <Twitter key={type} />;
           }
         })}
       </VStack>

src/features/tutorial/index.ts

@@ -1,4 +1,4 @@
-import { createSlice /*, PayloadAction*/ } from "@reduxjs/toolkit";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { addMonths } from "date-fns";
 
 interface StorageState {
@@ -37,12 +37,14 @@ interface TutorialSlice {
   completedTutorial: boolean | null;
   storageState: StorageState | null;
   rememberCompleted: boolean;
+  currWeek: MonthDay[] | null;
 }
 
 const initialState: TutorialSlice = {
   completedTutorial: null,
   storageState: null,
-  rememberCompleted: false
+  rememberCompleted: false,
+  currWeek: null
 };
 
 const tutorialSlice = createSlice({
@@ -104,6 +106,12 @@ const tutorialSlice = createSlice({
       const { rememberCompleted } = state;
 
       state.rememberCompleted = !rememberCompleted;
+    },
+    // Set current week
+    setCurrentWeek(state: TutorialSlice, action: PayloadAction<MonthDay[]>) {
+      const { payload } = action;
+
+      state.currWeek = payload;
     }
   }
 });
@@ -113,6 +121,7 @@ export const {
   setTutorialCompleted,
   clearTutorialCompleted,
   getAndSetTutorial,
-  toggleRememberCompleted
+  toggleRememberCompleted,
+  setCurrentWeek
 } = tutorialSlice.actions;
 export default tutorialSlice.reducer;