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,7 +56,9 @@ const CalenderExample = ({
   }, [currDateStr, currSelectedDateStr, dispatch]);
 
   // * The current week * //
+  const currWeek = useAppSelector((state) => state.tutorial.currWeek);
 
+  useEffect(() => {
     const getCurrentWeek = (): MonthDay[] => {
       let foundWeek: MonthDay[] | null;
       for (const week in month) {
@@ -74,7 +76,10 @@ const CalenderExample = ({
       return foundWeek || ([] as MonthDay[]);
     };
 
-  const [currWeek /*, setCurrWeek*/] = useState<MonthDay[]>(getCurrentWeek());
+    if (currWeek === null) {
+      dispatch(setCurrentWeek(getCurrentWeek()));
+    }
+  }, [currWeek, dispatch, month]);
 
   return (
     <VStack h="8.5rem" w="100%" spacing={0}>
@@ -122,7 +127,8 @@ const CalenderExample = ({
         columns={7}
         alignItems="center"
       >
-        {currWeek.map((day: MonthDay) => {
+        {currWeek &&
+          currWeek.map((day: MonthDay) => {
             const { date, isOverflow, overflowDirection } = day;
 
             const toDateObj: Date = new Date(date);

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;