Merge pull request #54 from LucidKobold/upgrades

Upgrades

contexts/CalenderContext.tsx

@@ -240,7 +240,12 @@ const CalenderContextProvider = ({
     }
   };
 
-  const calenderContextValues = {
+  // * Attempting to fix an issue with static generation where the date does not appear to be updating after initial generation.
+  const [currDate, setCurrDate] = useState<Date>(new Date());
+
+  const calenderContextValues: CalenderContextState = {
+    currDate,
+    setCurrDate,
     selectedDate,
     title: selectedDateInfo.title,
     layout: selectedDateInfo.layout,

contexts/StickerContext.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useState, ReactNode } from "react";
-import { format, getDate, isBefore, startOfDay } from "date-fns";
+import { format, getDate, isSameDay } from "date-fns";
 import stickersSeeder from "../data/stickerSeeder";
 
 const StickersContext = createContext({} as StickersContextState);
@@ -21,9 +21,9 @@ const StickersContextProvider = ({
 
     const edited = currDate.edited
       ? true
-      : isBefore(currDate.date, startOfDay(new Date()))
-      ? true
-      : false;
+      : isSameDay(currDate.date, new Date())
+      ? false
+      : true;
     currDate.edited = edited;
     // Add manual here when necessary.
 

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "lucid-creations-media-potty-chart",
   "homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/",
-  "version": "v0.0.9.8-alpha",
+  "version": "v0.0.9.9-alpha",
   "author": {
     "name": "Lucid Creations Media",
     "url": "https://lucidcreations.media",
@@ -22,16 +22,16 @@
     "@iconify/react": "^3.2.1",
     "date-fns": "^2.28.0",
     "formik": "^2.2.9",
-    "framer-motion": "^6.3.1",
+    "framer-motion": "^6.3.3",
     "next": "12.1.5",
     "react": "<=17.0.2",
     "react-dom": "<=17.0.2",
     "sharp": "^0.30.4"
   },
   "devDependencies": {
-    "@types/react": "<=17.0.2",
-    "@types/node": "^17.0.25",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@types/node": "^17.0.30",
+    "@types/react": "<18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
     "eslint": "^8.14.0",
     "eslint-config-next": "^12.1.5",
     "eslint-config-prettier": "^8.5.0",
@@ -41,5 +41,8 @@
     "prettier": "^2.6.2",
     "typescript": "<4.6.0"
   },
+  "resolutions": {
+    "@types/react": "^17.0.38"
+  },
   "packageManager": "yarn@3.1.0"
 }

src/components/calender/Day.tsx

@@ -5,7 +5,6 @@ import {
   getMonth,
   sub,
   getDate,
-  isSameDay,
   isBefore,
   endOfDay
 } from "date-fns";
@@ -21,6 +20,8 @@ interface DayProps {
   sticker: StickerVal;
   date: Date;
   selectedDate: Date;
+  currDate: Date;
+  isToday: boolean;
 }
 
 /**
@@ -37,7 +38,9 @@ const Day = ({
   overflowDirection,
   sticker,
   date,
-  selectedDate
+  selectedDate,
+  currDate,
+  isToday
 }: DayProps): JSX.Element => {
   const handleNav = (direction: "next" | "prev") => {
     if (direction === "next") {
@@ -90,9 +93,7 @@ const Day = ({
           w="100%"
           h="100%"
           _hover={{
-            cursor: isBefore(date, endOfDay(new Date()))
-              ? "pointer"
-              : "default",
+            cursor: isBefore(date, endOfDay(currDate)) ? "pointer" : "default",
             background: "gray.700",
             border: "1px solid #FFF",
             color: "whiteAlpha.900"
@@ -131,16 +132,14 @@ const Day = ({
           justifyContent="flex-start"
           pt={2}
           _hover={{
-            cursor: isBefore(date, endOfDay(new Date()))
-              ? "pointer"
-              : "default",
+            cursor: isBefore(date, endOfDay(currDate)) ? "pointer" : "default",
             background: "gray.700",
             border: "1px solid #FFF"
           }}
         >
           <Text
             p={
-              isSameDay(new Date(), date)
+              isToday
                 ? getDate(date) > 10
                   ? "0px 6px 3px 6px"
                   : "0px 9px 3px 9px"
@@ -148,8 +147,8 @@ const Day = ({
             }
             h="auto"
             w="auto"
-            border={isSameDay(new Date(), date) ? "1px solid #0068ff" : "0px"}
-            borderRadius={isSameDay(new Date(), date) ? "100px" : "0px"}
+            border={isToday ? "1px solid #0068ff" : "0px"}
+            borderRadius={isToday ? "100px" : "0px"}
           >
             {`${getDate(date)}`}
           </Text>
@@ -162,7 +161,7 @@ const Day = ({
             />
           </Box>
           <StickersContextProvider>
-            {isBefore(date, endOfDay(new Date())) && (
+            {isBefore(date, endOfDay(currDate)) && (
               <AddUpdateSticker
                 date={date}
                 isOpen={isOpen}
@@ -173,6 +172,7 @@ const Day = ({
                 updateStep={setStep}
                 selectedSticker={selectedSticker}
                 updateSelectedSticker={setSelectedSticker}
+                currDate={currDate}
               />
             )}
           </StickersContextProvider>

src/components/calender/index.tsx

@@ -7,7 +7,8 @@ import CalenderNav from "./CalenderNav";
 import Day from "./Day";
 
 const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
-  const { selectedDate, layout, updateDate } = useContext(CalenderContext);
+  const { selectedDate, layout, updateDate, currDate, setCurrDate } =
+    useContext(CalenderContext);
   const { stickersMonth } = useContext(StickersContext);
 
   useEffect(() => {
@@ -22,6 +23,14 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
     }
   }, [newDate, updateDate]);
 
+  useEffect(() => {
+    console.info("Check to update date.");
+    if (!isSameDay(currDate, new Date())) {
+      console.info("Updated date.");
+      setCurrDate(new Date());
+    }
+  }, [currDate, setCurrDate]);
+
   // Simulated user settings context
   const userSettings = {
     theme: "default",
@@ -91,6 +100,8 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
                   sticker={sticker}
                   date={date}
                   selectedDate={selectedDate}
+                  currDate={currDate}
+                  isToday={isSameDay(currDate, date)}
                   key={
                     id.length
                       ? id

src/components/calender/modals/AddUpdateSticker.tsx

@@ -30,6 +30,7 @@ interface AddStickerProps {
   updateStep: React.Dispatch<React.SetStateAction<number>>;
   selectedSticker: StickerVal;
   updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
+  currDate: Date;
 }
 
 /**
@@ -52,7 +53,8 @@ const AddUpdateSticker = ({
   step,
   updateStep,
   selectedSticker,
-  updateSelectedSticker
+  updateSelectedSticker,
+  currDate
 }: AddStickerProps): JSX.Element => {
   // TODO: Import the stickers array from the calender context.
 
@@ -61,7 +63,7 @@ const AddUpdateSticker = ({
   // ! Update these states to say "add" and "edit" for easier reading.
 
   const [modalVariant] = useState<"currDate" | "notCurrDate">(
-    isSameDay(date, new Date()) ? "currDate" : "notCurrDate"
+    isSameDay(date, currDate) ? "currDate" : "notCurrDate"
   );
 
   const handleClose = () => {

src/pages/_app.tsx

@@ -7,18 +7,20 @@ import Head from "next/head";
 
 function LCMPottyChart({ Component, pageProps }: AppProps): JSX.Element {
   return (
-    <ChakraProvider theme={AppTheme}>
-      <Layout {...pageProps}>
-        <Head>
-          <title>{"LCM Potty Chart"}</title>
-          <meta
-            name="viewport"
-            content="width=device-width, user-scalable=yes, initial-scale=1.0"
-          />
-        </Head>
-        <Component {...pageProps} />
-      </Layout>
-    </ChakraProvider>
+    <React.StrictMode>
+      <ChakraProvider theme={AppTheme}>
+        <Layout {...pageProps}>
+          <Head>
+            <title>{"LCM Potty Chart"}</title>
+            <meta
+              name="viewport"
+              content="width=device-width, user-scalable=yes, initial-scale=1.0"
+            />
+          </Head>
+          <Component {...pageProps} />
+        </Layout>
+      </ChakraProvider>
+    </React.StrictMode>
   );
 }
 

src/theme/layout/Header.tsx

@@ -15,7 +15,7 @@ import appLogo from "../../../public/images/logo.svg";
 
 const Header = (): JSX.Element => {
   const appName = "LCM Potty Chart";
-  const appVersion = "v0.0.9.8-alpha";
+  const appVersion = "v0.0.9.9-alpha";
 
   // Add transparency while not at the top of the page.
   const [transparentNavbar, setTransparentNavbar] = useState<boolean>(false);

types/CalenderContext.d.ts

@@ -55,6 +55,8 @@ interface UpdateCalendarProps {
 }
 
 interface CalenderContextState {
+  currDate: Date;
+  setCurrDate: React.Dispatch<React.SetStateAction<Date>>;
   selectedDate: Date;
   title: string;
   layout: MonthLayout;