diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index 2edf1bb..abd21fc 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/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(getCurrentWeek()); + }, [currWeek, dispatch, month]); return ( @@ -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 ( - - ); - })} + }); + + return ( + + ); + })} ); diff --git a/src/components/tutorial/sections/TutorialLinks.tsx b/src/components/tutorial/sections/TutorialLinks.tsx index 377e249..8c1c34c 100644 --- a/src/components/tutorial/sections/TutorialLinks.tsx +++ b/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 ; + return ( + + ); } if (type === "patreon") { - return ; + return ; } if (type === "twitter") { - return ; + return ; } })} @@ -53,15 +60,22 @@ const TutorialLinks = (): JSX.Element => { const { href, name, type } = link; if (type === "primary" || type === "secondary") { - return ; + return ( + + ); } if (type === "patreon") { - return ; + return ; } if (type === "twitter") { - return ; + return ; } })} diff --git a/src/features/tutorial/index.ts b/src/features/tutorial/index.ts index d93be58..fc50ff8 100644 --- a/src/features/tutorial/index.ts +++ b/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) { + const { payload } = action; + + state.currWeek = payload; } } }); @@ -113,6 +121,7 @@ export const { setTutorialCompleted, clearTutorialCompleted, getAndSetTutorial, - toggleRememberCompleted + toggleRememberCompleted, + setCurrentWeek } = tutorialSlice.actions; export default tutorialSlice.reducer;