wkc/wkc-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed most code, logos, and other references to the potty chart. Updated everything to be LCM website.

Browse Source
This commit is contained in:
Lucid Kobold
2024-02-29 17:23:17 -05:00
parent 1314444719
commit 39abadc1c4
28 changed files with 232 additions and 2132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/buttons/data/links.ts
View File

@@ -8,18 +8,13 @@ type Links = LinkObj[];
const links: Links = [
{
href: "https://docs.google.com/document/d/1hrerGKHTO3iach8A-CabtfIB4lyZWlgO8EGTyOCrI2Y",
href: "https://docs.google.com/document/d/1y1tbTG6TYoLMEde4XHzInByyHQ0T6Aw2RF6Y4Z7Yabs",
name: "Roadmap and Progress",
type: "secondary"
},
{
href: "https://lucidcreations.media/lcm-potty-chart/",
name: "Official Announcement",
type: "secondary"
},
{
type: "ko-fi"
},
// {
// type: "ko-fi"
// },
{
href: "https://t.me/LucidCreationsMedia",
name: "Dev Updates",

70
src/components/calender/CalenderNav.tsx
View File

@@ -1,70 +0,0 @@
import React from "react";
import { useAppSelector } from "../../redux/hooks";
import { useRouter } from "next/router";
import { HStack, IconButton } from "@chakra-ui/react";
import { Icon } from "@iconify/react";
import { format, isSameMonth, addMonths, subMonths } from "date-fns";
import findValidDateRange from "../../../lib/findValidDateRange";
import DatePicker from "./DatePicker";
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
);
const { date } = selectedDate;
const selectedDateObj = new Date(date);
const validDateRange = findValidDateRange();
const { start: validStart, end: validEnd } = validDateRange;
const router = useRouter();
const handleNavButtons = (direction: "next" | "prev") => {
if (direction === "next") {
const newMonth = addMonths(selectedDateObj, 1);
const year = format(newMonth, "y");
const month = format(newMonth, "L");
router.push(`/calendar/${year}/${month}`);
} else if (direction === "prev") {
const newMonth = subMonths(selectedDateObj, 1);
const year = format(newMonth, "y");
const month = format(newMonth, "L");
router.push(`/calendar/${year}/${month}`);
}
};
return (
<HStack spacing={10} as="nav" w="auto" h="10vh" textAlign="center">
<IconButton
isDisabled={isSameMonth(selectedDateObj, validStart)}
aria-label="Previous Month"
icon={<Icon icon="akar-icons:chevron-left" />}
onClick={() => handleNavButtons("prev")}
/>
<DatePicker isLoading={isLoading} title={title} />
<IconButton
isDisabled={isSameMonth(selectedDateObj, validEnd)}
aria-label="Next Month"
icon={<Icon icon="akar-icons:chevron-right" />}
onClick={() => handleNavButtons("next")}
/>
</HStack>
);
};
export default CalenderNav;

284
src/components/calender/DatePicker.tsx
View File

@@ -1,284 +0,0 @@
import React, { useRef, useState } from "react";
import { useRouter } from "next/router";
import {
Button,
FormControl,
FormErrorMessage,
FormLabel,
Heading,
HStack,
Input,
Popover,
PopoverBody,
PopoverCloseButton,
PopoverContent,
PopoverHeader,
PopoverTrigger,
Skeleton,
VStack
} from "@chakra-ui/react";
import {
Formik,
// FormikHelpers,
FormikProps,
Form,
Field,
FieldProps
} from "formik";
import { format } from "date-fns";
import findValidDateRange from "../../../lib/findValidDateRange";
import FormValidateEmoji from "./FormValidateEmoji";
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<boolean>(false);
const validDateRange = findValidDateRange();
const validateDate = (
dateString?: string | undefined
): string | undefined => {
let dateError;
if (dateString) {
const dateArr = dateString.split("-");
if (dateArr.length !== 3) {
dateError = "Please select a date.";
setValid(false);
} else if (dateArr.length === 3) {
const date: UpdateCalenderPropsDateLayout = {
year: parseInt(dateArr[0]),
month: parseInt(dateArr[1]),
day: parseInt(dateArr[2])
};
if (!/^(19|20)\d{2}$/.test(`${date.year}`)) {
dateError = "Please use a year between 1900 and 2099";
setValid(false);
}
if (date.month < 1 || date.month > 12) {
dateError = "Please use a month between 1 and 12";
setValid(false);
}
if (date.day < 1 || date.day > 31) {
dateError = "Please use a day between 1 and 31";
setValid(false);
}
setValid(true);
} else {
setValid(true);
}
} else if (dateString.length === 0) {
dateError = "Please select a date.";
setValid(false);
} else {
setValid(true);
}
return dateError;
};
const handleSubmit = (formInput?: { date?: string }): Promise<unknown> => {
return new Promise((resolve, reject) => {
if (formInput.date) {
if (!validateDate(formInput.date)) {
const dateArr = formInput.date.split("-");
const date: UpdateCalenderPropsDateLayout = {
year: parseInt(dateArr[0]),
month: parseInt(dateArr[1]),
day: parseInt(dateArr[2])
};
return resolve(router.push(`/calendar/${date.year}/${date.month}`));
} else {
return reject("Error validating date.");
}
} else {
return reject("Date not provided.");
}
});
};
// Field theme
const fieldTheme = {
width: "auto",
bg: "gray.900",
borderColor: "white",
_placeholder: {
color: "white"
},
_focus: {
bg: "#000",
color: "#FFF",
borderColor: "#63b3ed",
boxShadow: "0 0 0 1px #63b3ed",
zIndex: "1"
}
};
const initRef = useRef();
return (
<Popover placement="bottom" initialFocusRef={initRef}>
<PopoverTrigger>
<Button border="none" variant="outline">
{isLoading ? (
<Skeleton>
<Heading w="100%" h="auto">
{title}
</Heading>
</Skeleton>
) : (
<Heading w="100%" h="auto">
{title}
</Heading>
)}
</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverHeader py={2} fontWeight="semibold">
<Heading size="md" as="h3">
{"Choose a Date"}
</Heading>
</PopoverHeader>
<PopoverCloseButton />
<PopoverBody textAlign="center">
<Formik
initialValues={{
date: ""
}}
onSubmit={(data, actions) => {
handleSubmit(data)
.then(() => {
actions.setSubmitting(false);
actions.resetForm({
values: {
date: ""
}
});
})
.catch(() => {
actions.setSubmitting(false);
});
}}
>
{(
formProps: FormikProps<{
date: string;
}>
) => (
<Form
style={{
width: "100%",
height: "auto"
}}
>
<VStack
alignItems="center"
alignContent="flex-start"
w="100%"
h="auto"
spacing={6}
py={4}
>
<Heading as="h4" size="sm" fontWeight="semibold">
{"Required fields indicated with"}
<FormValidateEmoji type="Required" />
</Heading>
<Field name="date" validate={validateDate}>
{({ field, form }: FieldProps) => (
<FormControl
isInvalid={
form.errors.date && form.touched.date ? true : false
}
>
<VStack
alignContent="center"
alignItems="center"
spacing={2}
w="100%"
h="auto"
>
<HStack
alignContent="center"
alignItems="center"
pl={4}
w="100%"
h="auto"
spacing={2}
>
<FormLabel fontWeight="semibold" htmlFor="date">
{"Date:"}
</FormLabel>
<Input
required
{...fieldTheme}
type="date"
isDisabled={formProps.isSubmitting}
{...field}
id="date"
textAlign="center"
min={format(validDateRange.start, "yyyy-MM-dd")}
max={format(validDateRange.end, "yyyy-MM-dd")}
{...(!form.errors.date && form.touched.date
? {
borderColor: "brand.valid",
boxShadow: "0 0 0 1px #00c17c",
_hover: {
borderColor: "brand.valid",
boxShadow: "0 0 0 1px #00c17c"
}
}
: "")}
/>
{!form.touched.date && (
<FormValidateEmoji type="Required" />
)}
{form.errors.name && form.touched.date && (
<FormValidateEmoji type="Error" />
)}
{!form.errors.name && form.touched.date && (
<FormValidateEmoji type="Valid" />
)}
</HStack>
<FormErrorMessage>
{typeof form.errors.date === "string" &&
form.errors.date}
</FormErrorMessage>
</VStack>
</FormControl>
)}
</Field>
<Button
isDisabled={!valid}
background={valid ? "brand.valid" : "brand.danger"}
isLoading={formProps.isSubmitting}
type="submit"
>
{"Select this date"}
</Button>
</VStack>
</Form>
)}
</Formik>
</PopoverBody>
</PopoverContent>
</Popover>
);
};
export default DatePicker;

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

@@ -1,262 +0,0 @@
import React, { useState } from "react";
import { Provider } from "react-redux";
import { store } from "../../redux/store";
import { Box, Skeleton, VStack } from "@chakra-ui/react";
import {
add,
getYear,
getMonth,
sub,
getDate,
isBefore,
endOfDay,
isToday as isTodayFun
} from "date-fns";
import router from "next/router";
import AddUpdateSticker from "./modals/AddUpdateSticker";
import DemoStickers from "./stickers/DemoStickers";
interface DayProps {
isLoading: boolean;
isOverflow?: boolean;
overflowDirection?: "next" | "prev" | null;
currSticker: StickerVal;
date: string;
selectedDate: string;
currDate: Date;
tutorial?: "add" | "edit";
}
/**
* 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.
* @param {date} date the date for this day.
* @param {date} selectedDate the date for the selected month.
* @param {Date} currDate today's date.
*/
const Day = ({
isLoading,
isOverflow,
overflowDirection,
currSticker,
date,
selectedDate,
currDate,
tutorial
}: DayProps): JSX.Element => {
const selectedDateObj = new Date(selectedDate);
const currDateObj = new Date(date);
const isToday = isTodayFun(currDateObj);
const handleNav = (direction: "next" | "prev") => {
if (direction === "next") {
console.log(overflowDirection);
const newMonth = add(selectedDateObj, { months: 1 });
const year = getYear(newMonth);
const month = getMonth(newMonth) + 1;
router.push(`/calendar/${year}/${month}`);
} else if (direction === "prev") {
const newMonth = sub(selectedDateObj, { months: 1 });
const year = getYear(newMonth);
const month = getMonth(newMonth) + 1;
router.push(`/calendar/${year}/${month}`);
}
};
// This handles the modal for the day.
const [isOpen, setIsOpen] = useState<boolean>(false);
// The step the modal is at.
const [step, setStep] = useState<number>(0);
// The current selected sticker. (To be added or updated)
const [selectedSticker, setSelectedSticker] = useState<StickerVal>(null);
/**
* TODO: Add logic to remove the onClick within overflow dates.
* Do not give dates for the next month an onClick.
* Do not give dates in the past an onClick there is nothing before that month.
* (Creation date of a chart)
*/
// TODO: When the valid date range is created, disallow pointer cursor outside of the date range.
return isOverflow ? (
<VStack
w="100%"
h="100%"
bg="transparent"
pt={2}
color="gray.600"
border="1px solid #181d8f"
_hover={{
cursor: isBefore(currDateObj, endOfDay(currDate))
? selectedSticker !== null
? "pointer"
: "default"
: "default",
background: "gray.700",
border: "1px solid #FFF",
color: "whiteAlpha.900"
}}
onClick={() =>
selectedSticker !== null ? handleNav(overflowDirection) : ""
}
spacing="0.5rem"
alignContent="center"
justifyContent="flex-start"
>
<Box w="1.8rem" h="1.8rem" textAlign="center" p={0} m={0}>
{`${getDate(currDateObj)}`}
</Box>
{isLoading ? (
<Skeleton key={currSticker}>
<Box fontSize="1.5rem">
<DemoStickers stickerVal={0} />
</Box>
</Skeleton>
) : (
<Box key={currSticker} fontSize="1.5rem">
<DemoStickers stickerVal={currSticker} />
</Box>
)}
</VStack>
) : (
<VStack
w="100%"
h="100%"
bg={
tutorial
? tutorial === "add" && isToday
? "gray.600"
: tutorial === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate))
? "gray.600"
: "transparent"
: "transparent"
}
border={
tutorial
? tutorial === "add" && isToday
? "1px solid #00ff3c"
: tutorial === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate))
? "1px solid #00ff3c"
: "1px solid #0068ff"
: "1px solid #0068ff"
}
onClick={() => {
setStep(0);
setSelectedSticker(null);
setIsOpen(true);
}}
alignContent="center"
justifyContent="flex-start"
pt={2}
_hover={{
cursor: isBefore(currDateObj, endOfDay(currDate))
? "pointer"
: "default",
bg: tutorial
? tutorial === "add" && isToday
? "gray.600"
: tutorial === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate))
? "gray.600"
: "transparent"
: "transparent",
border: "1px solid #FFF"
}}
>
{isToday ? (
<Box
border="1px solid #0068ff"
borderRadius="50%"
w="1.8rem"
h="1.8rem"
textAlign="center"
p={0}
m={0}
>
{`${getDate(currDateObj)}`}
</Box>
) : (
<Box w="1.8rem" h="1.8rem" textAlign="center" p={0} m={0}>
{`${getDate(currDateObj)}`}
</Box>
)}
{isLoading ? (
<Skeleton key={currSticker}>
<Box fontSize="1.5rem">
<DemoStickers stickerVal={0} />
</Box>
</Skeleton>
) : (
<Box key={currSticker} fontSize="1.5rem">
<DemoStickers stickerVal={currSticker} />
</Box>
)}
{tutorial ? (
<Provider store={store}>
{tutorial.toLowerCase() === "add" && isToday && !isLoading && (
<AddUpdateSticker
stickerDate={date}
isOpen={isOpen}
updateIsOpen={setIsOpen}
currSticker={currSticker}
step={step}
updateStep={setStep}
selectedSticker={selectedSticker}
updateSelectedSticker={setSelectedSticker}
currDate={currDate}
/>
)}
{tutorial.toLowerCase() === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate)) &&
!isLoading && (
<AddUpdateSticker
stickerDate={date}
isOpen={isOpen}
updateIsOpen={setIsOpen}
currSticker={currSticker}
step={step}
updateStep={setStep}
selectedSticker={selectedSticker}
updateSelectedSticker={setSelectedSticker}
currDate={currDate}
/>
)}
</Provider>
) : (
<Provider store={store}>
{isBefore(currDateObj, endOfDay(currDate)) && !isLoading && (
<AddUpdateSticker
stickerDate={date}
isOpen={isOpen}
updateIsOpen={setIsOpen}
currSticker={currSticker}
step={step}
updateStep={setStep}
selectedSticker={selectedSticker}
updateSelectedSticker={setSelectedSticker}
currDate={currDate}
/>
)}
</Provider>
)}
</VStack>
);
};
export default Day;

35
src/components/calender/FormValidateEmoji.tsx
View File

@@ -1,35 +0,0 @@
import React, { FC } from "react";
interface FormValidateEmojiProps {
type: string;
}
const FormValidateEmoji: FC<FormValidateEmojiProps> = ({
type
}: FormValidateEmojiProps) => {
interface Validations {
[key: string]: JSX.Element;
}
const validations: Validations = {
Required: (
<span role="img" aria-label="Explication Mark">
❗
</span>
),
Error: (
<span role="img" aria-label="X">
❌
</span>
),
Valid: (
<span role="img" aria-label="Check">
✔
</span>
)
};
return validations[`${type}`];
};
export default FormValidateEmoji;

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

@@ -1,166 +0,0 @@
import React, { useEffect } from "react";
import { useAppDispatch, useAppSelector } from "../../redux/hooks";
import { updateCurrDate, updateMonth } from "../../features/calender";
import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
import { isSameDay, format } from "date-fns";
import CalenderNav from "./CalenderNav";
import Day from "./Day";
const Calender = ({
date: newDate,
isLoading
}: UpdateCalendarProps): JSX.Element => {
const dispatch = useAppDispatch();
// * Month * //
const currDate: string = useAppSelector((state) => state.calender.currDate);
const selectedDate: SelectedDateInfo = useAppSelector(
(state) => state.calender.selectedDateInfo
);
const { layout, title, date: currentSelectedDateStr } = selectedDate;
const currDateObj = new Date(currDate);
// * Stickers * //
const stickersMonth: StickerDays = useAppSelector(
(state) => state.stickers.stickersMonth
);
useEffect(() => {
if (newDate && newDate.year && newDate.month && newDate.day) {
const { year, month, day } = newDate;
if (year > 0 && month > 0 && day > 0) {
const generatedDate: Date = new Date(year, month - 1, day);
const currSelectedDateObj = new Date(currentSelectedDateStr);
const dateString: string = generatedDate.toJSON();
if (!isSameDay(currSelectedDateObj, generatedDate)) {
dispatch(updateMonth(dateString));
}
} else {
console.warn("Invalid date format: ", newDate);
}
}
}, [currentSelectedDateStr, dispatch, newDate]);
useEffect(() => {
// console.info("Check to update date.");
const currDateObj = new Date(currDate);
if (!isSameDay(currDateObj, new Date())) {
// console.info("Updated date.");
dispatch(updateCurrDate());
}
}, [currDate, dispatch]);
// Simulated user settings.
const userSettings = {
theme: "default",
startOfWeek: "Sunday"
};
const currMonth: WeekLayout =
layout[`${userSettings.startOfWeek.toLowerCase()}`];
const { month, weekdays } = currMonth;
// TODO: Move the weekdays into it's own component for responsiveness.
return (
<VStack h="92vh" w="100%" mb="5vh">
<CalenderNav title={title} isLoading={isLoading} />
<VStack h="100%" w="100%" spacing={0}>
<HStack
w="100%"
h="auto"
px={{ base: 1, sm: 2, md: 6 }}
spacing={0}
alignContent="center"
alignItems="center"
>
{weekdays.map((weekDay) => {
return (
<Box
key={weekDay}
display="flex"
w="100%"
h={10}
bg="transparent"
border="1px solid #0068ff"
alignContent="center"
alignItems="center"
>
<Text display={{ base: "none", md: "block" }} w="100%" h="auto">
{weekDay}
</Text>
<Text
display={{ base: "none", sm: "block", md: "none" }}
w="100%"
h="auto"
>
{weekDay.substring(0, 3)}
</Text>
<Text display={{ base: "block", sm: "none" }} w="100%" h="auto">
{weekDay.substring(0, 2)}
</Text>
</Box>
);
})}
</HStack>
<SimpleGrid
w="100%"
h="100%"
px={{ base: 1, sm: 2, md: 6 }}
columns={7}
alignItems="center"
>
{Object.keys(month).map((week) => {
const thisWeek = month[week];
return thisWeek.map((day: MonthDay) => {
const { date, isOverflow, overflowDirection } = day;
const toDateObj: Date = new Date(date);
let sticker = null;
let id = "";
stickersMonth.map((stickerDay) => {
const { date: stickerDate } = stickerDay;
if (isSameDay(new Date(stickerDate), toDateObj)) {
sticker = stickerDay.sticker;
id = stickerDay.id;
}
});
return (
<Day
isLoading={isLoading}
isOverflow={isOverflow}
overflowDirection={overflowDirection}
currSticker={sticker}
date={date}
selectedDate={selectedDate.date}
currDate={currDateObj}
key={
id.length
? id
: format(toDateObj, "yyyyddLL") +
`/${sticker === null ? 0 : sticker}`
}
/>
);
});
})}
</SimpleGrid>
</VStack>
</VStack>
);
};
export default Calender;

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

@@ -1,271 +0,0 @@
import React, { useState, useRef } from "react";
import { useAppDispatch } from "../../../redux/hooks";
import { addEditSticker } from "../../../features/calender/stickers";
import {
Button,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
ModalFooter,
Heading,
HStack,
Text,
VStack,
SimpleGrid,
Box
} from "@chakra-ui/react";
import { format, isSameDay } from "date-fns";
import { Icon } from "@iconify/react";
import StickerSelector from "./StickerSelector";
import DemoStickers from "../stickers/DemoStickers";
interface AddStickerProps {
isOpen: boolean;
updateIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
stickerDate: string;
currSticker: StickerVal;
step: number;
updateStep: React.Dispatch<React.SetStateAction<number>>;
selectedSticker: StickerVal;
updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
currDate: Date;
}
/**
* 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} stickerDate 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.
* @param {StickerVal} selectedSticker the value of the selected sticker.
* @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSelectedSticker The react state function to update the selected sticker that will be added or updated.
* @param {Date} currDate the current date.
*/
const AddUpdateSticker = ({
isOpen,
updateIsOpen,
stickerDate,
currSticker,
step,
updateStep,
selectedSticker,
updateSelectedSticker,
currDate
}: AddStickerProps): JSX.Element => {
const dispatch = useAppDispatch();
const stickerDateObj = new Date(stickerDate);
const [modalVariant] = useState<"add" | "edit">(
isSameDay(stickerDateObj, currDate) ? "add" : "edit"
);
const handleClose = () => {
updateIsOpen(false);
};
// TODO: Validate that the provided sticker is not the current sticker. Throw an error if the same sticker is attempted.
const handleSubmit = (sticker: StickerVal) => {
dispatch(addEditSticker({ stickerDate, sticker }));
handleClose();
};
// The first sticker to have focus when the modal opens.
const initialRef = useRef();
// * Double check that the submit button is disabled if the selected sticker is the same as the current sticker.
const variants = {
add: [
{
header: `Which sticker did you earn for ${format(
stickerDateObj,
"LLL d, y"
)}?`,
body: (
<VStack
w="100%"
h="auto"
justifyContent="space-between"
alignContent="center"
spacing="4"
>
<Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
{"Select a sticker"}
</Heading>
<StickerSelector
stickerSet="Demo"
currSticker={currSticker}
selectedSticker={selectedSticker}
updateSelectedSticker={updateSelectedSticker}
initialSticker={initialRef}
/>
</VStack>
),
footer: (
<Button
variant="submit"
isDisabled={
selectedSticker === null || selectedSticker === currSticker
}
onClick={() => handleSubmit(selectedSticker)}
>
{"Submit"}
</Button>
)
}
],
edit: [
{
header: `Which sticker did you want to update for ${format(
stickerDateObj,
"LLL d, y"
)}?`,
body: (
<VStack
w="100%"
h="auto"
justifyContent="space-between"
alignContent="center"
>
<Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
{"Current Sticker"}
</Heading>
<Text fontSize="4rem">
<DemoStickers stickerVal={currSticker} />
</Text>
<Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
{"Select your new sticker"}
</Heading>
<StickerSelector
stickerSet="Demo"
currSticker={currSticker}
selectedSticker={selectedSticker}
updateSelectedSticker={updateSelectedSticker}
initialSticker={initialRef}
/>
</VStack>
),
footer: (
<Button
variant="primary"
isDisabled={
selectedSticker === null || selectedSticker === currSticker
}
onClick={() => updateStep(step + 1)}
>
{"Next"}
</Button>
)
},
{
header: `Are you sure you want to change the sticker for ${format(
stickerDateObj,
"M/d/y"
)}?`,
body: (
<SimpleGrid
my={{ base: "0px", sm: "6" }}
mx={{ base: "0px", sm: "10", md: "16" }}
w="auto"
h="100%"
columns={3}
>
<Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
{"Previous Sticker"}
</Heading>
<Box></Box>
<Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
{"New Sticker"}
</Heading>
<Text textAlign="center" w="100%" fontSize="4rem">
<DemoStickers stickerVal={currSticker} />
</Text>
<Box fontSize="4rem" m="auto">
<Icon fontSize="4rem" icon="bi:arrow-right" />
</Box>
<Text textAlign="center" w="100%" fontSize="4rem">
<DemoStickers stickerVal={selectedSticker} />
</Text>
</SimpleGrid>
),
footer: (
<HStack
w="100%"
h="auto"
justifyContent="space-between"
alignContent="center"
>
<Button variant="primary" onClick={() => updateStep(step - 1)}>
{"Previous"}
</Button>
<HStack w="auto" h="auto" alignContent="center" spacing={6}>
<Button
backgroundColor="transparent"
_hover={{ backgroundColor: "brand.danger" }}
onClick={() => updateIsOpen(!isOpen)}
>
{"Cancel"}
</Button>
<Button
variant="submit"
isDisabled={
selectedSticker === null || selectedSticker === currSticker
}
onClick={() => handleSubmit(selectedSticker)}
>
{"Confirm"}
</Button>
</HStack>
</HStack>
)
}
]
};
return (
<Modal
isCentered
initialFocusRef={initialRef}
isOpen={isOpen}
onClose={() => handleClose()}
motionPreset="slideInBottom"
scrollBehavior="inside"
size={modalVariant === "add" ? "xl" : "2xl"}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>
<HStack
w="100%"
h="auto"
justifyContent="space-between"
alignContent="center"
>
<Heading textAlign="center" as="h2" size="md" w="100%" h="auto">
{modalVariant && variants[modalVariant][step].header}
</Heading>
<Button
fontSize="2rem"
px="1"
onClick={() => updateIsOpen(!isOpen)}
>
<Icon icon="bi:x" />
</Button>
</HStack>
</ModalHeader>
<ModalBody>
{modalVariant && variants[modalVariant][step].body}
</ModalBody>
<ModalFooter>
{modalVariant && variants[modalVariant][step].footer}
</ModalFooter>
</ModalContent>
</Modal>
);
};
export default AddUpdateSticker;

74
src/components/calender/modals/StickerSelector.tsx
View File

@@ -1,74 +0,0 @@
import { HStack, Button } from "@chakra-ui/react";
import React from "react";
import DemoStickers from "../stickers/DemoStickers";
interface StickerSelectorProps {
stickerSet: "Demo";
currSticker: StickerVal;
selectedSticker: StickerVal;
updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
initialSticker: React.MutableRefObject<undefined>;
}
/**
* Handles displaying a list of dynamic stickers to be selected.
* @param {string} stickerSet The name of the stickers that should be displayed.
* @param {StickerVal} currSticker The current sticker for the date.
* @param {StickerVal} selectedSticker The selected sticker for the current. date
* @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSelectedSticker TThe react state function to update the selected sticker that will be added or updated.
* @param {React.MutableRefObject<undefined>} initialSticker the sticker that should have be in focus when the modal opens.
*/
const StickerSelector = ({
stickerSet,
currSticker,
selectedSticker,
updateSelectedSticker,
initialSticker
}: StickerSelectorProps): JSX.Element => {
const stickers = {
Demo: (
<HStack
w="100%"
h="auto"
justifyContent="center"
alignContent="center"
spacing={14}
>
<Button
isDisabled={currSticker >= 1}
ref={currSticker <= 1 ? initialSticker : null}
border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
bg={selectedSticker === 1 && "gray.800"}
onClick={() => updateSelectedSticker(1)}
variant="stickerButton"
>
<DemoStickers stickerVal={1} />
</Button>
<Button
isDisabled={currSticker === 0}
ref={currSticker >= 1 ? initialSticker : null}
border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
bg={selectedSticker === 0 && "gray.800"}
onClick={() => updateSelectedSticker(0)}
variant="stickerButton"
>
<DemoStickers stickerVal={0} />
</Button>
<Button
isDisabled={currSticker <= -1}
border={selectedSticker === -1 ? "1px solid #FFF" : "opx"}
bg={selectedSticker === -1 && "gray.800"}
onClick={() => updateSelectedSticker(-1)}
variant="stickerButton"
>
<DemoStickers stickerVal={-1} />
</Button>
</HStack>
)
};
return stickers[stickerSet];
};
export default StickerSelector;

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

@@ -1,56 +0,0 @@
import React, { FC } from "react";
// TODO: When themes are made import the theme from user settings store. Refactor to use whatever those SVGs are.
interface DemoStickersProps {
stickerVal: StickerVal;
}
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) {
key = "1";
} else if (stickerVal < 0) {
key = "-1";
}
// Link value to an emoji representing a sticker.
const stickerToEmoji: StickerToEmoji = {
"1": (
<span role="img" aria-label="Sun">
☀️
</span>
),
"0": (
<span role="img" aria-label="Cloud">
☁️
</span>
),
"-1": (
<span role="img" aria-label="Raining Cloud">
🌧️
</span>
)
};
// Return the appropriate sticker.
return stickerToEmoji[`${key}`];
};
export default DemoStickers;

210
src/components/tutorial/CalenderExample.tsx
View File

@@ -1,210 +0,0 @@
import React, { useEffect } from "react";
import { useAppDispatch, useAppSelector } from "../../redux/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";
isLoading: boolean;
}
const CalenderExample = ({
type,
isLoading
}: CalenderExampleProps): JSX.Element => {
// TODO: Check if the current date is the start of the user's preferred start of the week and use the previous week for the edit example.
const currDateStr: string = useAppSelector(
(state) => state.calender.currDate
);
const currDateObj: Date = new Date(currDateStr);
const dispatch = useAppDispatch();
// * Current Month * //
const selectedDate: SelectedDateInfo = useAppSelector(
(state) => state.calender.selectedDateInfo
);
const { layout, date: currSelectedDateStr } = selectedDate;
// * Stickers * //
const stickersMonth: StickerDays = useAppSelector(
(state) => state.stickers.stickersMonth
);
// Simulated user settings.
const userSettings = {
theme: "default",
startOfWeek: "Sunday"
};
// * Week Names * //
const currMonth: WeekLayout =
layout[`${userSettings.startOfWeek.toLowerCase()}`];
const { month, weekdays } = currMonth;
useEffect(() => {
const currDateObj: Date = new Date(currDateStr);
const currSelectedDateOj: Date = new Date(currSelectedDateStr);
if (!isSameDay(currDateObj, currSelectedDateOj)) {
dispatch(updateMonth(currDateObj.toJSON()));
}
}, [currDateStr, currSelectedDateStr, dispatch]);
// * The current week * //
const currWeek = useAppSelector((state) => state.tutorial.currWeek);
useEffect(() => {
const getCurrentWeek = (): MonthDay[] => {
let foundWeek: MonthDay[];
for (const week in month) {
const currWeek = month[week];
currWeek.forEach((day: MonthDay) => {
const { date } = day;
if (isToday(new Date(date))) {
foundWeek = currWeek;
}
});
}
return foundWeek || ([] as MonthDay[]);
};
if (currWeek === null) {
dispatch(setCurrentWeek(getCurrentWeek()));
}
}, [currWeek, dispatch, month]);
return (
<VStack
h="auto"
w="100%"
alignContent="center"
alignItems="center"
spacing={2}
>
<VStack
h="8.5rem"
w="100%"
alignContent="center"
alignItems="center"
spacing={0}
>
<HStack
w="100%"
h="auto"
alignContent="center"
alignItems="center"
spacing={0}
px={{ base: 1, sm: 2, md: 6 }}
>
{weekdays.map((weekDay) => {
return (
<Box
key={weekDay}
display="flex"
w="100%"
h={10}
bg="transparent"
border="1px solid #0068ff"
alignContent="center"
alignItems="center"
>
<Text display={{ base: "none", md: "block" }} w="100%" h="auto">
{weekDay}
</Text>
<Text
display={{ base: "none", sm: "block", md: "none" }}
w="100%"
h="auto"
>
{weekDay.substring(0, 3)}
</Text>
<Text display={{ base: "block", sm: "none" }} w="100%" h="auto">
{weekDay.substring(0, 2)}
</Text>
</Box>
);
})}
</HStack>
<SimpleGrid
w="100%"
h="100%"
columns={7}
px={{ base: 1, sm: 2, md: 6 }}
alignItems="center"
>
{currWeek &&
currWeek.map((day: MonthDay) => {
const { date, isOverflow, overflowDirection } = day;
const toDateObj: Date = new Date(date);
let sticker = null;
let id = "";
stickersMonth.map((stickerDay) => {
const { date: stickerDate } = stickerDay;
if (isSameDay(new Date(stickerDate), toDateObj)) {
sticker = stickerDay.sticker;
id = stickerDay.id;
}
});
return (
<Day
isLoading={isLoading}
isOverflow={isOverflow}
overflowDirection={overflowDirection}
currSticker={sticker}
date={date}
selectedDate={selectedDate.date}
currDate={currDateObj}
tutorial={type}
key={
id.length
? id
: format(toDateObj, "yyyyddLL") +
`/${sticker === null ? 0 : sticker}`
}
/>
);
})}
</SimpleGrid>
</VStack>
{type === "edit" && (
<VStack
w="100%"
h="auto"
alignContent="center"
alignItems="center"
spacing={2}
>
<Text fontSize="sm" color="whiteAlpha.800">
{
"Not being able to edit within this tutorial when the current date is the start of the week or month is a known bug."
}
</Text>
<Text fontSize="sm" color="whiteAlpha.800">
{"This bug will be fixed in beta v2."}
</Text>
<Text fontSize="sm" color="whiteAlpha.800">
{"You can skip the tutorial and try again tomorrow."}
</Text>
</VStack>
)}
</VStack>
);
};
export default CalenderExample;

10
src/components/tutorial/data/aboutApp.ts
View File

@@ -1,10 +0,0 @@
type AboutApp = string[];
const aboutApp: AboutApp = [
"The Potty Chart is an app that mimics a potty/star chart commonly used while potty training toddler or child.",
"The app can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way with colorful themes, stickers, and even receive encouraging messaged from your big/dom, followers, and friends.",
"The final app will have settings to disable any mentions and references of ABDL to allow a more general audience to use, such as for a master and pet relationship.",
"This is a beta build of the app. Some functionality may not work as intended, is not fully functional, and may be missing entirely."
];
export default aboutApp;

9
src/components/tutorial/data/appFunctionality.ts
View File

@@ -1,9 +0,0 @@
type AppFunctionality = string[];
const appFunctionality: AppFunctionality = [
"The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use.",
"Ability to add a sticker to the current date.",
"Ability to add edit a sticker from a previous date with a confirmation prompt."
];
export default appFunctionality;

38
src/components/tutorial/index.tsx
View File

@@ -1,38 +0,0 @@
import React from "react";
import { VStack } from "@chakra-ui/react";
import TutorialCalender from "./sections/TutorialCalender";
import TutorialLinks from "./sections/TutorialLinks";
import TutorialHeading from "./sections/TutorialHeading";
import TutorialAboutApp from "./sections/TutorialAboutApp";
import TutorialSubmitButtons from "./sections/TutorialSubmitButtons";
import TutorialAppFunctionality from "./sections/TutorialAppFunctionality";
interface TutorialProps {
isLoading: boolean;
}
const Tutorial = ({ isLoading }: TutorialProps): JSX.Element => {
return (
<VStack
h="auto"
w="auto"
justifyContent="center"
alignContent="center"
my={8}
mx={{ base: 0, sm: 2, md: 4 }}
py={4}
px={{ base: 0, sm: 2, md: 4 }}
bg="gray.700"
borderRadius={{ base: "", sm: "2xl" }}
>
<TutorialHeading />
<TutorialAboutApp />
<TutorialAppFunctionality />
<TutorialCalender isLoading={isLoading} />
<TutorialLinks />
<TutorialSubmitButtons isLoading={isLoading} />
</VStack>
);
};
export default Tutorial;

33
src/components/tutorial/sections/TutorialAboutApp.tsx
View File

@@ -1,33 +0,0 @@
import React from "react";
import { VStack, Heading, Divider, Text } from "@chakra-ui/react";
import aboutApp from "../data/aboutApp";
const TutorialAboutApp = (): JSX.Element => {
return (
<VStack
h="auto"
w="100%"
justifyContent="center"
alignContent="center"
spacing={4}
>
<Heading as="h3" size="lg">
{"About the App"}
</Heading>
<VStack
h="auto"
w="100%"
justifyContent="start"
alignContent="center"
spacing={1}
>
{aboutApp.map((string: string) => {
return <Text key={string.replaceAll(" ", "-")}>{string}</Text>;
})}
</VStack>
<Divider orientation="horizontal" />
</VStack>
);
};
export default TutorialAboutApp;

33
src/components/tutorial/sections/TutorialAppFunctionality.tsx
View File

@@ -1,33 +0,0 @@
import React from "react";
import { VStack, Heading, Divider, Text } from "@chakra-ui/react";
import appFunctionality from "../data/appFunctionality";
const TutorialAppFunctionality = (): JSX.Element => {
return (
<VStack
h="auto"
w="100%"
justifyContent="center"
alignContent="center"
spacing={4}
>
<Heading as="h3" size="lg">
{"App Functionality"}
</Heading>
<VStack
h="auto"
w="100%"
justifyContent="start"
alignContent="center"
spacing={1}
>
{appFunctionality.map((string: string) => {
return <Text key={string.replaceAll(" ", "-")}>{string}</Text>;
})}
</VStack>
<Divider orientation="horizontal" />
</VStack>
);
};
export default TutorialAppFunctionality;

74
src/components/tutorial/sections/TutorialCalender.tsx
View File

@@ -1,74 +0,0 @@
import React from "react";
import { Divider, Heading, HStack, Text, VStack } from "@chakra-ui/react";
import CalenderExample from "../CalenderExample";
interface CalenderExampleProps {
isLoading: boolean;
}
const TutorialCalender = ({ isLoading }: CalenderExampleProps): JSX.Element => {
return (
<VStack
h="auto"
w="100%"
justifyContent="center"
alignContent="center"
spacing={4}
>
<Heading as="h3" size="lg">
{"How to Use The Calender"}
</Heading>
<VStack
h="auto"
w="100%"
justifyContent="center"
alignItems="center"
alignContent="center"
spacing={4}
>
<Heading as="h4" size="md">
{"Add a Sticker to Today's Date"}
</Heading>
<HStack
w="100%"
h="auto"
alignContent="center"
justifyContent="center"
spacing={1}
>
<Text>{"Select the date with the"}</Text>
<Text color="#00ff3c">{" green "}</Text>
<Text>{"border."}</Text>
</HStack>
<CalenderExample type={"add"} isLoading={isLoading} />
</VStack>
<VStack
h="auto"
w="100%"
justifyContent="center"
alignItems="center"
alignContent="center"
spacing={4}
>
<Heading as="h4" size="md">
{"Add a Sticker to Previous Dates"}
</Heading>
<HStack
w="100%"
h="auto"
alignContent="center"
justifyContent="center"
spacing={1}
>
<Text>{"Select a date with a"}</Text>
<Text color="#00ff3c">{" green "}</Text>
<Text>{"border."}</Text>
</HStack>
<CalenderExample type={"edit"} isLoading={isLoading} />
</VStack>
<Divider orientation="horizontal" />
</VStack>
);
};
export default TutorialCalender;

22
src/components/tutorial/sections/TutorialHeading.tsx
View File

@@ -1,22 +0,0 @@
import React from "react";
import { VStack, Heading, Divider } from "@chakra-ui/react";
const TutorialHeading = (): JSX.Element => {
return (
<VStack
h="auto"
w="100%"
justifyContent="center"
alignContent="center"
spacing={4}
>
<Heading as="h2">{"Welcome to Code Name: LCM Potty Chart"}</Heading>
<Heading as="h3" size="md">
{"A Lucid Creations Media Project"}
</Heading>
<Divider orientation="horizontal" />
</VStack>
);
};
export default TutorialHeading;

23
src/components/tutorial/sections/TutorialLinks.tsx
View File

@@ -1,23 +0,0 @@
import React from "react";
import { Divider, Heading, VStack } from "@chakra-ui/react";
import Buttons from "../../buttons";
const TutorialLinks = (): JSX.Element => {
return (
<VStack
h="auto"
w="100%"
justifyContent="center"
alignContent="center"
spacing={4}
>
<Heading as="h3" size="lg">
{"More Info"}
</Heading>
<Buttons />
<Divider orientation="horizontal" />
</VStack>
);
};
export default TutorialLinks;

83
src/components/tutorial/sections/TutorialSubmitButtons.tsx
View File

@@ -1,83 +0,0 @@
import { HStack, Button, VStack, Checkbox } from "@chakra-ui/react";
import React from "react";
import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
import {
setTutorialCompleted,
setTempTutorialComplete,
toggleRememberCompleted
} from "../../../features/tutorial";
interface TutorialSubmitButtonsProps {
isLoading: boolean;
}
const TutorialSubmitButtons = ({
isLoading
}: TutorialSubmitButtonsProps): JSX.Element => {
const rememberComplete: boolean = useAppSelector(
(state) => state.tutorial.rememberCompleted
);
const dispatch = useAppDispatch();
const handleComplete = (): void => {
if (rememberComplete) {
dispatch(setTutorialCompleted());
}
if (!rememberComplete) {
dispatch(setTempTutorialComplete());
}
};
const handleSkip = (): void => {
dispatch(setTempTutorialComplete());
};
const handleUpdateCheck = (): void => {
dispatch(toggleRememberCompleted());
};
return (
<HStack
h="auto"
w="90%"
justifyContent="space-between"
alignItems="flex-start"
pt={8}
>
<Button
type="button"
isDisabled={isLoading}
onClick={() => handleSkip()}
variant="skip"
>
{"Skip"}
</Button>
<VStack
h="auto"
w="auto"
justifyContent="center"
alignItems="center"
spacing={2}
>
<Button
type="button"
isDisabled={isLoading}
onClick={() => handleComplete()}
variant="primary"
>
{"Complete Tutorial"}
</Button>
<Checkbox
isChecked={rememberComplete}
isDisabled={isLoading}
onChange={() => handleUpdateCheck()}
>
{"Remember completed?"}
</Checkbox>
</VStack>
</HStack>
);
};
export default TutorialSubmitButtons;

2
src/pages/_app.tsx
View File

@@ -13,7 +13,7 @@ function LCMPottyChart({ Component, pageProps }: AppProps): JSX.Element {
<ChakraProvider theme={AppTheme}>
<Layout {...pageProps}>
<Head>
<title>{"LCM Potty Chart"}</title>
<title>{"LCM Website"}</title>
<meta
name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1.0"

25
src/pages/_document.tsx
View File

@@ -4,8 +4,7 @@ import { ColorModeScript } from "@chakra-ui/react";
import AppTheme from "../theme/AppTheme";
const description =
// "Behavior and progress tracker for ABDLs and babyfurs alike. Track multiple littles and create any trackers you would like.";
"Beta preview of a, calender like, 'star chart' behavior and progress tracker for ABDLs, diaperfurs, and babyfurs.";
"Official website for Lucid Creations Media. Where you can back us, donate to us, and purchase our official content such as hypno audio files.";
const logo = "images/logo.svg";
const logoOG = "/images/logo.png";
@@ -18,31 +17,27 @@ class Document extends NextDocument {
<meta name="theme-color" content="#3138dc" />
<link rel="icon" href={logo} sizes="32x32 192x192" />
<link rel="apple-touch-icon" href={logo} />
<meta property="og:title" content="LCM Potty Chart" />
<meta property="og:title" content="Lucid Creations Media Website" />
<meta name="og:description" content={description} />
<meta property="og:type" content="Progress Tracking" />
<meta property="og:type" content="eCommerce" />
<meta property="og:image" content={logoOG} />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="LCM Potty Chart Logo" />
<meta property="og:image:alt" content="Lucid Creations Media Logo" />
<meta property="og:url" content="https://lucidcreations.media" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="title" content="LCM Potty Chart" />
<meta property="title" content="Lucid Creations Media Website" />
<meta name="description" content={description} />
<meta property="type" content="Progress Tracking" />
<meta property="type" content="eCommerce" />
<meta property="image" content={logoOG} />
<meta property="image:type" content="image/png" />
<meta property="image:alt" content="LCM Potty Chart Logo" />
<meta property="image:alt" content="Lucid Creations Media Logo" />
<meta property="url" content="https://https://lucidcreations.media" />
<meta httpEquiv="content-language" content="en_US" />
<meta charSet="UTF-8" />
<meta
name="keywords"
content="ABDL Adult Baby Diaper Lover Furry Babyfur ab/dl AB/DL potty chart training progress behavior tracker habbit"
/>
<meta name="keywords" content={description} />
<meta name="copyright" content="Lucid Creations Media" />
<meta name="page-topic" content="Progress Tracking" />
<meta name="page-type" content="Calender" />
<meta name="audience" content="18+" />
<meta name="page-topic" content="eCommerce" />
<meta name="audience" content="E" />
<meta name="robots" content="index, follow" />
</Head>
<html lang="en" />

209
src/pages/calendar/[...date].tsx
View File

@@ -1,209 +0,0 @@
import React, { useEffect, useState } from "react";
import { Provider } from "react-redux";
import { store } from "../../redux/store";
import { Box } from "@chakra-ui/react";
import { useRouter } from "next/router";
import {
endOfMonth,
getDate
// getMonth,
// getYear,
// isAfter,
// isBefore,
// isSameMonth
} from "date-fns";
// import findValidDateRange from "../../lib/findValidDateRange";
import ErrorPage from "next/error";
import Calender from "../../components/calender";
const DateRoute: React.FC<unknown> = () => {
const router = useRouter();
const { date: slug } = router.query;
const [date, setDate] = useState<UpdateCalenderPropsDateLayout | null>(null);
const [error, setError] = useState<boolean>(false);
// const dateRange = useRef(findValidDateRange());
// const validDateRange = Object.assign({}, dateRange.current);
const validateDateInput = (
dateArr: number[]
): UpdateCalenderPropsDateLayout => {
if (!(dateArr.length >= 2) && !(dateArr.length <= 3)) {
return {
year: 0,
month: 0,
day: 0
};
}
const date = {
year: 0,
month: 0,
day: 0
};
if (/^(19|20)\d{2}$/.test(`${dateArr[0]}`)) {
date.year = dateArr[0];
}
if (dateArr[1] > 0 && dateArr[1] <= 12) {
date.month = dateArr[1];
}
if (date.month && date.year) {
const lastDay = getDate(
endOfMonth(new Date(date.year, date.month - 1, 1))
);
if (dateArr[2] && dateArr[2] > 0 && dateArr[2] <= lastDay) {
date.day = dateArr[2];
} else if (!dateArr[2]) {
date.day = 1;
}
}
return date;
};
/**
* ! This function does not work as is. It is causing infinite loops whe used within the useEffect.
*/
// const validateDateRange = (
// slugDate: Date
// ): [Date, "after" | "before" | "valid"] => {
// const { start: validStart, end: validEnd } = validDateRange;
// // Check if the slug date is beyond the valid end date.
// if (isAfter(slugDate, validEnd)) {
// // router.push("/calender/now");
// console.warn(
// "Slug date is after the valid date range for this calendar!!!"
// );
// return [validEnd, "after"];
// // Check if the slug is before the valid start date.
// } else if (isBefore(slugDate, validStart)) {
// console.warn(
// "Slug date is before the valid date range for this calendar!!!"
// );
// return [validStart, "before"];
// // router.push(`/${getYear(validStart)}/${getMonth(validStart) + 1}`);
// } else {
// console.info(
// "Slug date is within the valid date range for this calendar."
// );
// return [slugDate, "valid"];
// }
// };
useEffect(() => {
// Checking if the slug exists and is an array.
if (slug && Array.isArray(slug)) {
console.log(slug);
// Grabbing the slug length
const length = slug.length;
// Parsing the slug to convert it from strings to numbers.
const parsedSlug = slug.map((e) => {
return parseInt(e);
});
// Checking if the slug has 2 to 3 numbers within the array. year/month/day.
if (length >= 2 && length <= 3) {
// Validate that the date is valid.
const newDate = validateDateInput(parsedSlug);
// If anything is invalid the year/day/month would be set to 0. This checks for the invalid condition.
if (newDate.year === 0 || newDate.month === 0 || newDate.day === 0) {
setError(true);
// Set the date to the valid date.
} else {
// TODO: Make sure the date is within the valid range using the validateDateRange function.
// const validDate = new Date(
// newDate.year,
// newDate.month - 1,
// newDate.day
// );
// const validDateWithinRange = validateDateRange(validDate)[0];
// setDate({
// ...{
// year: getYear(validDateWithinRange),
// month: getMonth(validDateWithinRange) + 1,
// day: getDate(validDateWithinRange)
// }
// });
setDate({
...newDate
});
}
} else if (length === 1) {
// Checking if the slug is not "now".
// ! Update this to include a check for "today".
if (slug[0] !== "now") {
setError(true);
return console.warn("improper date input:", slug);
}
}
}
}, [slug]);
/**
* ? Pushing into the router within the use effect does not create the infinite loop.
* ? The way the validate date range or the way it is being used within a useEffect is what is creating the infinite loop.
*/
// useEffect(() => {
// // Check is slug and date are valid.
// if (slug && date && date !== null) {
// // Check if the slug is an array and has a length of 2.
// if (Array.isArray(slug) && slug.length === 2) {
// const dateState = new Date(date.year, date.month - 1, date.day);
// const parsedSlug = slug.map((e) => {
// return parseInt(e);
// });
// const slugDate = new Date(parsedSlug[0], parsedSlug[1] - 1, 1);
// if (!isSameMonth(dateState, slugDate)) {
// const validDateWithinRange = validateDateRange(dateState);
// if (validDateRange[1] === "after") {
// router.push("/now");
// } else {
// router.push(
// `/${getYear(validDateWithinRange[0])}/${getMonth(
// validDateWithinRange[0]
// )}`
// );
// }
// }
// }
// }
// }, [date]);
if (router.isFallback) {
return <ErrorPage statusCode={404} />;
}
/**
* TODO: Update to disallow navigation in the future and too far in the past.
* Update so that a date given in the future take the user to /now to today's date.
* Update so that a date given beyond the last valid date will bring the user to the
* last month that has stickers within it (When filter is enabled) or to the creation date of the chart..
*/
return error ? (
<ErrorPage statusCode={404} />
) : (
<Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
<Provider store={store}>
<Calender date={date} isLoading={false} />
</Provider>
</Box>
);
};
export default DateRoute;

23
src/pages/calendar/index.tsx
View File

@@ -1,23 +0,0 @@
import React, { useEffect } from "react";
import { useRouter } from "next/router";
import { Box, Heading } from "@chakra-ui/react";
const DateIndex = () => {
const router = useRouter();
useEffect(() => {
if (router) {
router.push("calendar/now");
}
}, [router]);
return (
<Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
<Heading as="h2" size="xl">
Loading
</Heading>
</Box>
);
};
export default DateIndex;

121
src/pages/index.tsx
View File

@@ -1,130 +1,15 @@
import React, { Fragment, useEffect, useRef } from "react";
import React from "react";
import { Provider } from "react-redux";
import { store } from "../redux/store";
import { useAppDispatch, useAppSelector } from "../redux/hooks";
import { updateLoading } from "../features/calender";
import {
clearTutorialCompleted,
getAndSetTutorial,
StorageState
} from "../features/tutorial";
import { Box } from "@chakra-ui/react";
import { format, isAfter, isBefore, startOfDay } from "date-fns";
import Calender from "../components/calender";
import Tutorial from "../components/tutorial";
import LoadingOverlay from "../components/loading/LoadingOverlay";
import versionStringToNumber from "../../lib/versionStringToNumber";
const IndexPage = (): JSX.Element => {
const currDateStr: string = useAppSelector(
(state) => state.calender.currDate
);
const isLoading: boolean = useAppSelector(
(state) => state.calender.isLoading
);
const currDateObj: Date = new Date(currDateStr);
// * Tutorial * //
const completedTutorial: boolean = useAppSelector(
(state) => state.tutorial.completedTutorial
);
const tutorialCompletionInfo: StorageState = useAppSelector(
(state) => state.tutorial.storageState
);
const dispatch = useAppDispatch();
// Get the completed tutorial cookie or have it set to false.
useEffect(() => {
if (completedTutorial === null && tutorialCompletionInfo === null) {
dispatch(getAndSetTutorial());
}
if (completedTutorial !== null) {
dispatch(updateLoading(false));
}
}, [completedTutorial, dispatch, tutorialCompletionInfo]);
// Checking the exp date of completed tutorial cookie and if the version completed is out of date.
useEffect(() => {
if (tutorialCompletionInfo !== null) {
const { exp, version } = tutorialCompletionInfo;
const currDateObj: Date = new Date(currDateStr);
/**
* Checks if the completed tutorial cookie is expired.
* @param {Date} expDate the date when the completed tutorital cookie expires.
* @returns {boolean} true if the cookie is expired, false is otherwise.
*/
const expDateValidator = (expDate: Date): boolean => {
let flag = false;
const startOfToday = startOfDay(currDateObj);
if (isAfter(startOfToday, expDate)) {
flag = true;
}
return flag;
};
/**
* Checks if the last time the completed tutorial is before an update to the tutorial.
* @param {number} lastVersionCompleted the version number the tutorial was last completed.
* @returns {boolean} true if the version given is before the changes to the tutorial, false otherwise.
*/
const versionValidator = (lastVersionCompleted: number): boolean => {
const lastVersionWithChangeStr: string =
process.env.NEXT_PUBLIC_NEW_TUTORIAL_VERSION;
const lastVersionWithChange: number = versionStringToNumber(
lastVersionWithChangeStr
);
const lastUpdatedDateStr: string =
process.env.NEXT_PUBLIC_LAST_UPDATE_DATE;
const lastUpdatedDate: Date = new Date(lastUpdatedDateStr);
let flag = false;
if (
lastVersionCompleted < lastVersionWithChange ||
(lastVersionCompleted === lastVersionWithChange &&
isBefore(currDateObj, lastUpdatedDate))
) {
flag = true;
console.error("Completed cookie version is out of date.");
}
return flag;
};
if (expDateValidator(new Date(exp)) || versionValidator(version)) {
console.warn("Version outdated or cookie expired.");
dispatch(clearTutorialCompleted());
}
}
}, [currDateStr, dispatch, tutorialCompletionInfo]);
// Current date
const currDate = useRef<UpdateCalenderPropsDateLayout>({
year: parseInt(format(currDateObj, "y")),
month: parseInt(format(currDateObj, "M")),
day: parseInt(format(currDateObj, "d"))
});
return (
<Box textAlign="center" w="100%" h="auto" pt="50px" minWidth="min-content">
<Provider store={store}>
{isLoading === true ? (
<Fragment>
<LoadingOverlay />
<Calender date={currDate.current} isLoading={isLoading} />
</Fragment>
) : completedTutorial ? (
<Calender date={currDate.current} isLoading={isLoading} />
) : (
<Tutorial isLoading={isLoading} />
)}
</Provider>
</Box>
);

3
src/theme/AppTheme.ts
View File

@@ -29,8 +29,7 @@ const AppTheme = extendTheme({
footer: "#0097a7",
footerText: "black",
content: "#2d3748",
kofi: "#FF5E5B",
twitter: "#1da1f2"
kofi: "#FF5E5B"
},
loading: {
overlayBg: "#171923cb",

2
src/theme/layout/Header.tsx
View File

@@ -14,7 +14,7 @@ import MobileNav from "./MobileNav";
import appLogo from "../../../public/images/logo.svg";
const Header = (): JSX.Element => {
const appName = "LCM Potty Chart";
const appName = "Lucid Creations Media";
const appVersion = process.env.NEXT_PUBLIC_APP_VERSION_HEADER || "";
// Add transparency while not at the top of the page.