wkc/lcm-potty-chart
Archived
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Moved stickers state to redux. Removed unneded type definitions. Refactored components to accomdate changes in types and interfaces.

Browse Source
This commit is contained in:
Lucid Kobold
2022-06-13 15:24:59 -05:00
parent 8654d7ac79
commit 06df367277
13 changed files with 156 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/calender/Day.tsx
View File

@@ -10,15 +10,16 @@ import {
} from "date-fns";
import router from "next/router";
import React, { Fragment, useState } from "react";
import { StickersContextProvider } from "../../../contexts/StickerContext";
import AddUpdateSticker from "./modals/AddUpdateSticker";
import DemoStickers from "./stickers/DemoStickers";
import { Provider } from "react-redux";
import { store } from "../../app/store";
interface DayProps {
isOverflow?: boolean;
overflowDirection?: "next" | "prev" | null;
sticker: StickerVal;
date: Date;
date: string;
selectedDate: string;
currDate: Date;
isToday: boolean;
@@ -26,12 +27,11 @@ interface DayProps {
/**
* The individual days in the calender component.
* @param props the props for this component.
* @param {boolean} props.isOverflow is the current date being given before or after the current month.
* @param {"next" | "prev" | null} props.overflowDirection the direction the overflow is. This will navigate the calender forward or backwards 1 month.
* @param {StickerVal} props.sticker the sticker for this date.
* @param {date} props.date the date for this day.
* @param {date} props.selectedDate the date for the selected month.
* @param {boolean} isOverflow is the current date being given before or after the current month.
* @param {"next" | "prev" | null} overflowDirection the direction the overflow is. This will navigate the calender forward or backwards 1 month.
* @param {StickerVal} sticker the sticker for this date.
* @param {date} string the date for this day.
* @param {date} selectedDate the date for the selected month.
*/
const Day = ({
isOverflow,
@@ -43,6 +43,7 @@ const Day = ({
isToday
}: DayProps): JSX.Element => {
const selectedDateObj = new Date(selectedDate);
const currDateObj = new Date(date);
const handleNav = (direction: "next" | "prev") => {
if (direction === "next") {
@@ -66,10 +67,6 @@ const Day = ({
// This handles the modal for the day.
const [isOpen, setIsOpen] = useState<boolean>(false);
// The current sticker to be displayed on the current date.
// * This is temporary. There should be no need for this once persistent storage is used. This is being used as a workaround to a bug.
const [stickerState, setStickerState] = useState<StickerVal>(sticker);
// The step the modal is at.
const [step, setStep] = useState<number>(0);
@@ -95,7 +92,9 @@ const Day = ({
w="100%"
h="100%"
_hover={{
cursor: isBefore(date, endOfDay(currDate)) ? "pointer" : "default",
cursor: isBefore(currDateObj, endOfDay(currDate))
? "pointer"
: "default",
background: "gray.700",
border: "1px solid #FFF",
color: "whiteAlpha.900"
@@ -107,15 +106,10 @@ const Day = ({
pt={2}
>
<Text w="auto" h="auto">
{`${getDate(date)}`}
{`${getDate(currDateObj)}`}
</Text>
<Box
key={stickerState === null ? Math.random() : stickerState}
fontSize="1.5rem"
>
<DemoStickers
stickerVal={stickerState === null ? null : stickerState}
/>
<Box key={sticker} fontSize="1.5rem">
<DemoStickers stickerVal={sticker} />
</Box>
</VStack>
)}
@@ -134,7 +128,9 @@ const Day = ({
justifyContent="flex-start"
pt={2}
_hover={{
cursor: isBefore(date, endOfDay(currDate)) ? "pointer" : "default",
cursor: isBefore(currDateObj, endOfDay(currDate))
? "pointer"
: "default",
background: "gray.700",
border: "1px solid #FFF"
}}
@@ -142,7 +138,7 @@ const Day = ({
<Text
p={
isToday
? getDate(date) > 10
? getDate(currDateObj) > 10
? "0px 6px 3px 6px"
: "0px 9px 3px 9px"
: "auto"
@@ -152,24 +148,18 @@ const Day = ({
border={isToday ? "1px solid #0068ff" : "0px"}
borderRadius={isToday ? "100px" : "0px"}
>
{`${getDate(date)}`}
{`${getDate(currDateObj)}`}
</Text>
<Box
key={stickerState === null ? Math.random() : stickerState}
fontSize="1.5rem"
>
<DemoStickers
stickerVal={stickerState === null ? null : stickerState}
/>
<Box key={sticker} fontSize="1.5rem">
<DemoStickers stickerVal={sticker} />
</Box>
<StickersContextProvider>
{isBefore(date, endOfDay(currDate)) && (
<Provider store={store}>
{isBefore(currDateObj, endOfDay(currDate)) && (
<AddUpdateSticker
date={date}
isOpen={isOpen}
updateIsOpen={setIsOpen}
updateSticker={setStickerState}
currSticker={stickerState}
currSticker={sticker}
step={step}
updateStep={setStep}
selectedSticker={selectedSticker}
@@ -177,7 +167,7 @@ const Day = ({
currDate={currDate}
/>
)}
</StickersContextProvider>
</Provider>
</VStack>
)}
</Fragment>

26
src/components/calender/index.tsx
View File

@@ -1,25 +1,29 @@
import React, { useContext, useEffect } from "react";
import React, { useEffect } from "react";
import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
import { isSameDay, format } from "date-fns";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { updateCurrDate, updateMonth } from "../../features/calender/calender";
import { StickersContext } from "../../../contexts/StickerContext";
import CalenderNav from "./CalenderNav";
import Day from "./Day";
const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
// * Month * //
const currDate: string = useAppSelector((state) => state.calender.currDate);
const selectedDate = useAppSelector(
const selectedDate: SelectedDateInfo = useAppSelector(
(state) => state.calender.selectedDateInfo
);
const { layout } = selectedDate;
const dispatch = useAppDispatch();
const { stickersMonth } = useContext(StickersContext);
const currDateObj = new Date(currDate);
// * Stickers * //
const stickersMonth: StickerDays = useAppSelector(
(state) => state.stickers.stickersMonth
);
const dispatch = useAppDispatch();
useEffect(() => {
if (newDate && newDate.year && newDate.month && newDate.day) {
const { year, month, day } = newDate;
@@ -46,7 +50,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
}
}, [currDate, dispatch]);
// Simulated user settings context
// Simulated user settings.
const userSettings = {
theme: "default",
startOfWeek: "Sunday"
@@ -103,7 +107,9 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
let id = "";
stickersMonth.map((stickerDay) => {
if (isSameDay(stickerDay.date, toDateObj)) {
const { date: stickerDate } = stickerDay;
if (isSameDay(new Date(stickerDate), toDateObj)) {
sticker = stickerDay.sticker;
id = stickerDay.id;
@@ -115,7 +121,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
isOverflow={isOverflow}
overflowDirection={overflowDirection}
sticker={sticker}
date={toDateObj}
date={date}
selectedDate={selectedDate.date}
currDate={currDateObj}
isToday={isSameDay(currDateObj, toDateObj)}

33
src/components/calender/modals/AddUpdateSticker.tsx
View File

@@ -13,18 +13,18 @@ import {
SimpleGrid,
Box
} from "@chakra-ui/react";
import React, { useState, useContext, useRef } from "react";
import React, { useState, useRef } from "react";
import { format, isSameDay } from "date-fns";
import { Icon } from "@iconify/react";
import { StickersContext } from "../../../../contexts/StickerContext";
import StickerSelector from "./StickerSelector";
import DemoStickers from "../stickers/DemoStickers";
import { useAppDispatch } from "../../../app/hooks";
import { addEditSticker } from "../../../features/calender/stickers";
interface AddStickerProps {
isOpen: boolean;
updateIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
date: Date;
updateSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
date: string;
currSticker: StickerVal;
step: number;
updateStep: React.Dispatch<React.SetStateAction<number>>;
@@ -37,8 +37,7 @@ interface AddStickerProps {
* Handles adding and modifying the stickers for the given month.
* @param {boolean} isOpen Tells the component when the modal should be open.
* @param {React.Dispatch<React.SetStateAction<boolean>>} updateIsOpen Used to close the modal.
* @param {date} date The date for which the sticker will be added or modified.
* @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker The react state function to update the sticker.
* @param {date} string The date for which the sticker will be added or modified.
* @param {StickerVal} currSticker The current sticker for the date.
* @param {number} step A numerical variable that represents the page the modal should be at.
* @param {React.Dispatch<React.SetStateAction<number>>} updateStep Used to navigate the pages of the modal by updating the step the modal is on.
@@ -48,7 +47,6 @@ const AddUpdateSticker = ({
isOpen,
updateIsOpen,
date,
updateSticker,
currSticker,
step,
updateStep,
@@ -56,14 +54,13 @@ const AddUpdateSticker = ({
updateSelectedSticker,
currDate
}: AddStickerProps): JSX.Element => {
// TODO: Import the stickers array from the calender context.
const { addEditSticker } = useContext(StickersContext);
const dispatch = useAppDispatch();
const currDateObj = new Date(date);
// ! Update these states to say "add" and "edit" for easier reading.
const [modalVariant] = useState<"currDate" | "notCurrDate">(
isSameDay(date, currDate) ? "currDate" : "notCurrDate"
isSameDay(currDateObj, currDate) ? "currDate" : "notCurrDate"
);
const handleClose = () => {
@@ -71,9 +68,8 @@ const AddUpdateSticker = ({
};
// TODO: Validate that the provided sticker is not the current sticker. Throw an error if the same sticker is attempted.
const handleSubmit = (sticker) => {
const newSticker: Sticker = addEditSticker(date, sticker);
updateSticker(newSticker.sticker);
const handleSubmit = (sticker: StickerVal) => {
dispatch(addEditSticker({ date, sticker }));
handleClose();
};
@@ -85,7 +81,10 @@ const AddUpdateSticker = ({
const variants = {
currDate: [
{
header: `Which sticker did you earn for ${format(date, "LLL d, y")}?`,
header: `Which sticker did you earn for ${format(
currDateObj,
"LLL d, y"
)}?`,
body: (
<VStack
w="100%"
@@ -122,7 +121,7 @@ const AddUpdateSticker = ({
notCurrDate: [
{
header: `Which sticker did you want to update for ${format(
date,
currDateObj,
"LLL d, y"
)}?`,
body: (
@@ -164,7 +163,7 @@ const AddUpdateSticker = ({
},
{
header: `Are you sure you want to change the sticker for ${format(
date,
currDateObj,
"M/d/y"
)}?`,
body: (

10
src/components/calender/stickers/DemoStickers.tsx
View File

@@ -1,6 +1,6 @@
import React, { FC } from "react";
// TODO: When themes are made import the theme from user settings context. Refactor to use whatever those SVGs are.
// TODO: When themes are made import the theme from user settings store. Refactor to use whatever those SVGs are.
interface DemoStickersProps {
stickerVal: StickerVal;
@@ -9,13 +9,19 @@ interface DemoStickersProps {
const DemoStickers: FC<DemoStickersProps> = ({
stickerVal
}: DemoStickersProps) => {
// If sticker is null return an empty space.
if (stickerVal === null) {
return <span aria-label="spacer">&nbsp;</span>;
}
interface StickerToEmoji {
[key: string]: JSX.Element;
}
/**
* ? Temporarily using values -1 to 1.
* ? In the full app the values will be between -2 and 2.
*/
let key = "0";
if (stickerVal > 0) {
@@ -24,6 +30,7 @@ const DemoStickers: FC<DemoStickersProps> = ({
key = "-1";
}
// Link value to an emoji representing a sticker.
const stickerToEmoji: StickerToEmoji = {
"1": (
<span role="img" aria-label="Sun">
@@ -42,6 +49,7 @@ const DemoStickers: FC<DemoStickersProps> = ({
)
};
// Return the appropriate sticker.
return stickerToEmoji[`${key}`];
};