diff --git a/src/components/calender/CalenderNav.tsx b/src/components/calender/CalenderNav.tsx
index fa06d69..ed35b74 100644
--- a/src/components/calender/CalenderNav.tsx
+++ b/src/components/calender/CalenderNav.tsx
@@ -7,7 +7,17 @@ import findValidDateRange from "../../../lib/findValidDateRange";
import DatePicker from "./DatePicker";
import { useAppSelector } from "../../app/hooks";
-const CalenderNav = (): JSX.Element => {
+interface CalenderNavProps {
+ isLoading: boolean;
+ title: string;
+}
+
+/**
+ * @param {boolean} isLoading is the component loading?
+ * @param {string} title the title for the current date.
+ */
+
+const CalenderNav = ({ title, isLoading }: CalenderNavProps): JSX.Element => {
const selectedDate = useAppSelector(
(state) => state.calender.selectedDateInfo
);
@@ -46,7 +56,7 @@ const CalenderNav = (): JSX.Element => {
icon={}
onClick={() => handleNavButtons("prev")}
/>
-
+
{
- const selectedDate = useAppSelector(
- (state) => state.calender.selectedDateInfo
- );
+interface DatePickerProps {
+ isLoading: boolean;
+ title: string;
+}
+/**
+ * @param {boolean} isLoading is the component loading?
+ * @param {string} title the title for the current date.
+ */
+
+const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => {
const router = useRouter();
const [valid, setValid] = useState(false);
@@ -130,9 +137,17 @@ const DatePicker = (): JSX.Element => {
diff --git a/src/components/calender/Day.tsx b/src/components/calender/Day.tsx
index ad5336d..0fba192 100644
--- a/src/components/calender/Day.tsx
+++ b/src/components/calender/Day.tsx
@@ -1,4 +1,4 @@
-import { Box, Text, VStack } from "@chakra-ui/react";
+import { Box, Skeleton, Text, VStack } from "@chakra-ui/react";
import {
add,
getYear,
@@ -16,6 +16,7 @@ import { Provider } from "react-redux";
import { store } from "../../app/store";
interface DayProps {
+ isLoading: boolean;
isOverflow?: boolean;
overflowDirection?: "next" | "prev" | null;
currSticker: StickerVal;
@@ -27,6 +28,7 @@ interface DayProps {
/**
* The individual days in the calender component.
+ * @param {boolean} isLoading is the component loading?
* @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} currSticker the sticker for this date.
@@ -36,6 +38,7 @@ interface DayProps {
* @param {boolean} isToday is the current iteration of this component in today's date.
*/
const Day = ({
+ isLoading,
isOverflow,
overflowDirection,
currSticker,
@@ -110,9 +113,17 @@ const Day = ({
{`${getDate(currDateObj)}`}
-
-
-
+ {isLoading ? (
+
+
+
+
+
+ ) : (
+
+
+
+ )}
)}
{!isOverflow && (
@@ -152,11 +163,19 @@ const Day = ({
>
{`${getDate(currDateObj)}`}
-
-
-
+ {isLoading ? (
+
+
+
+
+
+ ) : (
+
+
+
+ )}
- {isBefore(currDateObj, endOfDay(currDate)) && (
+ {isBefore(currDateObj, endOfDay(currDate)) && !isLoading && (
{
const selectedDate: SelectedDateInfo = useAppSelector(
(state) => state.calender.selectedDateInfo
);
- const { layout } = selectedDate;
+ const { layout, title } = selectedDate;
const currDateObj = new Date(currDate);
@@ -64,7 +64,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
return (
-
+
{
return (
void;
+}
+
+const Tutorial = ({ setTutorialCookie }: TutorialProps): JSX.Element => {
+ const handleSetCookieButton = (): void => {
+ setTutorialCookie(true);
+ };
+ return (
+
+ {"Tutorial Component"}
+
+
+ );
+};
+
+export default Tutorial;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fa48616..7d34efe 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,21 +1,81 @@
-import React, { useRef } from "react";
+import React, { Fragment, useEffect, useRef, useState } from "react";
import { Box } from "@chakra-ui/react";
-import { format } from "date-fns";
+import { addMonths, format } from "date-fns";
+import Calender from "../components/calender";
+import Tutorial from "../components/tutorial";
+import LoadingOverlay from "../components/loading/LoadingOverlay";
import { Provider } from "react-redux";
import { store } from "../app/store";
-import Calender from "../components/calender";
const IndexPage = (): JSX.Element => {
- const date = useRef({
+ const calenderProps = useRef({
year: parseInt(format(new Date(), "y")),
month: parseInt(format(new Date(), "M")),
day: parseInt(format(new Date(), "d"))
});
+ const [completedTutorial, setCompletedTutorial] = useState(
+ null
+ );
+
+ const getTutorialCookie = (): boolean => {
+ let flag = false;
+
+ const decodedCookie = decodeURIComponent(document.cookie);
+ const cookies = decodedCookie.split(";");
+
+ cookies.map((val) => {
+ const cookie = val.split("=");
+
+ if (cookie.length > 1) {
+ const cName = cookie[0].toLowerCase();
+ const cVal = JSON.parse(cookie[1]) || cookie[1];
+
+ if (
+ cName === "tutorialCompleted".toLowerCase() &&
+ cName &&
+ cVal &&
+ typeof cVal === "boolean"
+ ) {
+ flag = cVal;
+ }
+ }
+ });
+ return flag;
+ };
+
+ const setTutorialCookie = (bool: boolean): void => {
+ const name = "tutorialCompleted";
+ const exp = addMonths(new Date(), 1).toUTCString();
+
+ document.cookie = `${name}=${bool};expires=${exp}'path=/`;
+ setCompletedTutorial(bool);
+ };
+
+ useEffect(() => {
+ setCompletedTutorial(getTutorialCookie());
+ }, [completedTutorial]);
+
return (
-
+
-
+ {completedTutorial === null ? (
+
+
+
+
+ ) : completedTutorial ? (
+
+ ) : (
+
+ )}
);