Merging main
This commit is contained in:
Lucid Kobold
55
src/components/calender/CalenderNav.tsx
Normal file
55
src/components/calender/CalenderNav.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React, { useContext } from "react";
|
||||
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";
|
||||
import { CalenderContext } from "../../../contexts/CalenderContext";
|
||||
|
||||
const CalenderNav = (): JSX.Element => {
|
||||
const { selectedDate } = useContext(CalenderContext);
|
||||
|
||||
const validDateRange = findValidDateRange();
|
||||
const { start: validStart, end: validEnd } = validDateRange;
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const handleNavButtons = (direction: "next" | "prev") => {
|
||||
if (direction === "next") {
|
||||
const newMonth = addMonths(selectedDate, 1);
|
||||
|
||||
const year = format(newMonth, "y");
|
||||
const month = format(newMonth, "L");
|
||||
|
||||
router.push(`/calendar/${year}/${month}`);
|
||||
} else if (direction === "prev") {
|
||||
const newMonth = subMonths(selectedDate, 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(selectedDate, validStart)}
|
||||
aria-label="Previous Month"
|
||||
icon={<Icon icon="akar-icons:chevron-left" />}
|
||||
onClick={() => handleNavButtons("prev")}
|
||||
/>
|
||||
<DatePicker />
|
||||
<IconButton
|
||||
isDisabled={isSameMonth(selectedDate, validEnd)}
|
||||
aria-label="Next Month"
|
||||
icon={<Icon icon="akar-icons:chevron-right" />}
|
||||
onClick={() => handleNavButtons("next")}
|
||||
/>
|
||||
</HStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default CalenderNav;
|
||||
267
src/components/calender/DatePicker.tsx
Normal file
267
src/components/calender/DatePicker.tsx
Normal file
@@ -0,0 +1,267 @@
|
||||
import React, { useContext, useRef, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import {
|
||||
Button,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Heading,
|
||||
HStack,
|
||||
Input,
|
||||
Popover,
|
||||
PopoverBody,
|
||||
PopoverCloseButton,
|
||||
PopoverContent,
|
||||
PopoverHeader,
|
||||
PopoverTrigger,
|
||||
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";
|
||||
import { CalenderContext } from "../../../contexts/CalenderContext";
|
||||
|
||||
const DatePicker = (): JSX.Element => {
|
||||
const { title } = useContext(CalenderContext);
|
||||
|
||||
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: UpdateCalendarProps = {
|
||||
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: UpdateCalendarProps = {
|
||||
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">
|
||||
<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>
|
||||
{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;
|
||||
185
src/components/calender/Day.tsx
Normal file
185
src/components/calender/Day.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
import { Box, Text, VStack } from "@chakra-ui/react";
|
||||
import {
|
||||
add,
|
||||
getYear,
|
||||
getMonth,
|
||||
sub,
|
||||
getDate,
|
||||
isBefore,
|
||||
endOfDay
|
||||
} 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";
|
||||
|
||||
interface DayProps {
|
||||
isOverflow?: boolean;
|
||||
overflowDirection?: "next" | "prev" | null;
|
||||
sticker: StickerVal;
|
||||
date: Date;
|
||||
selectedDate: Date;
|
||||
currDate: Date;
|
||||
isToday: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
const Day = ({
|
||||
isOverflow,
|
||||
overflowDirection,
|
||||
sticker,
|
||||
date,
|
||||
selectedDate,
|
||||
currDate,
|
||||
isToday
|
||||
}: DayProps): JSX.Element => {
|
||||
const handleNav = (direction: "next" | "prev") => {
|
||||
if (direction === "next") {
|
||||
console.log(overflowDirection);
|
||||
const newMonth = add(selectedDate, { months: 1 });
|
||||
|
||||
const year = getYear(newMonth);
|
||||
const month = getMonth(newMonth) + 1;
|
||||
|
||||
router.push(`/calendar/${year}/${month}`);
|
||||
} else if (direction === "prev") {
|
||||
const newMonth = sub(selectedDate, { 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 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);
|
||||
|
||||
// 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 (
|
||||
<Fragment>
|
||||
{isOverflow && (
|
||||
<VStack
|
||||
bg="transparent"
|
||||
color="gray.600"
|
||||
border="1px solid #181d8f"
|
||||
w="100%"
|
||||
h="100%"
|
||||
_hover={{
|
||||
cursor: isBefore(date, endOfDay(currDate)) ? "pointer" : "default",
|
||||
background: "gray.700",
|
||||
border: "1px solid #FFF",
|
||||
color: "whiteAlpha.900"
|
||||
}}
|
||||
onClick={() => handleNav(overflowDirection)}
|
||||
spacing="0.5rem"
|
||||
alignContent="center"
|
||||
justifyContent="flex-start"
|
||||
pt={2}
|
||||
>
|
||||
<Text w="auto" h="auto">
|
||||
{`${getDate(date)}`}
|
||||
</Text>
|
||||
<Box
|
||||
key={stickerState === null ? Math.random() : stickerState}
|
||||
fontSize="1.5rem"
|
||||
>
|
||||
<DemoStickers
|
||||
stickerVal={stickerState === null ? null : stickerState}
|
||||
/>
|
||||
</Box>
|
||||
</VStack>
|
||||
)}
|
||||
{!isOverflow && (
|
||||
<VStack
|
||||
bg="transparent"
|
||||
border="1px solid #0068ff"
|
||||
w="100%"
|
||||
h="100%"
|
||||
onClick={() => {
|
||||
setStep(0);
|
||||
setSelectedSticker(null);
|
||||
setIsOpen(true);
|
||||
}}
|
||||
alignContent="center"
|
||||
justifyContent="flex-start"
|
||||
pt={2}
|
||||
_hover={{
|
||||
cursor: isBefore(date, endOfDay(currDate)) ? "pointer" : "default",
|
||||
background: "gray.700",
|
||||
border: "1px solid #FFF"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
p={
|
||||
isToday
|
||||
? getDate(date) > 10
|
||||
? "0px 6px 3px 6px"
|
||||
: "0px 9px 3px 9px"
|
||||
: "auto"
|
||||
}
|
||||
h="auto"
|
||||
w="auto"
|
||||
border={isToday ? "1px solid #0068ff" : "0px"}
|
||||
borderRadius={isToday ? "100px" : "0px"}
|
||||
>
|
||||
{`${getDate(date)}`}
|
||||
</Text>
|
||||
<Box
|
||||
key={stickerState === null ? Math.random() : stickerState}
|
||||
fontSize="1.5rem"
|
||||
>
|
||||
<DemoStickers
|
||||
stickerVal={stickerState === null ? null : stickerState}
|
||||
/>
|
||||
</Box>
|
||||
<StickersContextProvider>
|
||||
{isBefore(date, endOfDay(currDate)) && (
|
||||
<AddUpdateSticker
|
||||
date={date}
|
||||
isOpen={isOpen}
|
||||
updateIsOpen={setIsOpen}
|
||||
updateSticker={setStickerState}
|
||||
currSticker={stickerState}
|
||||
step={step}
|
||||
updateStep={setStep}
|
||||
selectedSticker={selectedSticker}
|
||||
updateSelectedSticker={setSelectedSticker}
|
||||
currDate={currDate}
|
||||
/>
|
||||
)}
|
||||
</StickersContextProvider>
|
||||
</VStack>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default Day;
|
||||
35
src/components/calender/FormValidateEmoji.tsx
Normal file
35
src/components/calender/FormValidateEmoji.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
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;
|
||||
121
src/components/calender/index.tsx
Normal file
121
src/components/calender/index.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import React, { useContext, useEffect } from "react";
|
||||
import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
|
||||
import { isSameDay, format } from "date-fns";
|
||||
import { CalenderContext } from "../../../contexts/CalenderContext";
|
||||
import { StickersContext } from "../../../contexts/StickerContext";
|
||||
import CalenderNav from "./CalenderNav";
|
||||
import Day from "./Day";
|
||||
|
||||
const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
|
||||
const { selectedDate, layout, updateDate, currDate, setCurrDate } =
|
||||
useContext(CalenderContext);
|
||||
const { stickersMonth } = useContext(StickersContext);
|
||||
|
||||
useEffect(() => {
|
||||
if (newDate && newDate.year && newDate.month && newDate.day) {
|
||||
const { year, month, day } = newDate;
|
||||
|
||||
if (year > 0 && month > 0 && day > 0) {
|
||||
updateDate(newDate);
|
||||
} else {
|
||||
console.warn("Invalid date format: ", newDate);
|
||||
}
|
||||
}
|
||||
}, [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",
|
||||
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="91vh" w="100%">
|
||||
<CalenderNav />
|
||||
<VStack h="100%" w="100%" spacing={0}>
|
||||
<HStack
|
||||
px={6}
|
||||
spacing={0}
|
||||
w="100%"
|
||||
h="auto"
|
||||
alignContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
{weekdays.map((weekDay) => {
|
||||
return (
|
||||
<Box
|
||||
d="flex"
|
||||
alignContent="center"
|
||||
alignItems="center"
|
||||
bg="transparent"
|
||||
border="1px solid #0068ff"
|
||||
w="100%"
|
||||
h={10}
|
||||
key={weekDay}
|
||||
>
|
||||
<Text w="100%" h="auto">
|
||||
{weekDay}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</HStack>
|
||||
<SimpleGrid px={6} w="100%" h="100%" columns={7} alignItems="center">
|
||||
{Object.keys(month).map((week) => {
|
||||
const thisWeek = month[week];
|
||||
|
||||
return thisWeek.map((day: MonthDay) => {
|
||||
const { date, isOverflow, overflowDirection } = day;
|
||||
|
||||
let sticker = null;
|
||||
|
||||
let id = "";
|
||||
|
||||
stickersMonth.map((stickerDay) => {
|
||||
if (isSameDay(stickerDay.date, date)) {
|
||||
sticker = stickerDay.sticker;
|
||||
|
||||
id = stickerDay.id;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Day
|
||||
isOverflow={isOverflow}
|
||||
overflowDirection={overflowDirection}
|
||||
sticker={sticker}
|
||||
date={date}
|
||||
selectedDate={selectedDate}
|
||||
currDate={currDate}
|
||||
isToday={isSameDay(currDate, date)}
|
||||
key={
|
||||
id.length
|
||||
? id
|
||||
: format(date, "yyyyddLL") +
|
||||
`/${sticker === null ? 0 : sticker}`
|
||||
}
|
||||
/>
|
||||
);
|
||||
});
|
||||
})}
|
||||
</SimpleGrid>
|
||||
</VStack>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default Calender;
|
||||
272
src/components/calender/modals/AddUpdateSticker.tsx
Normal file
272
src/components/calender/modals/AddUpdateSticker.tsx
Normal file
@@ -0,0 +1,272 @@
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Heading,
|
||||
HStack,
|
||||
Text,
|
||||
VStack,
|
||||
SimpleGrid,
|
||||
Box
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useState, useContext, 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";
|
||||
|
||||
interface AddStickerProps {
|
||||
isOpen: boolean;
|
||||
updateIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
date: Date;
|
||||
updateSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
|
||||
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} 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 {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 {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker The react state function to update the selected sticker that will be added or updated.
|
||||
*/
|
||||
const AddUpdateSticker = ({
|
||||
isOpen,
|
||||
updateIsOpen,
|
||||
date,
|
||||
updateSticker,
|
||||
currSticker,
|
||||
step,
|
||||
updateStep,
|
||||
selectedSticker,
|
||||
updateSelectedSticker,
|
||||
currDate
|
||||
}: AddStickerProps): JSX.Element => {
|
||||
// TODO: Import the stickers array from the calender context.
|
||||
|
||||
const { addEditSticker } = useContext(StickersContext);
|
||||
|
||||
// ! Update these states to say "add" and "edit" for easier reading.
|
||||
|
||||
const [modalVariant] = useState<"currDate" | "notCurrDate">(
|
||||
isSameDay(date, currDate) ? "currDate" : "notCurrDate"
|
||||
);
|
||||
|
||||
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) => {
|
||||
const newSticker: Sticker = addEditSticker(date, sticker);
|
||||
updateSticker(newSticker.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 = {
|
||||
currDate: [
|
||||
{
|
||||
header: `Which sticker did you earn for ${format(date, "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>
|
||||
)
|
||||
}
|
||||
],
|
||||
notCurrDate: [
|
||||
{
|
||||
header: `Which sticker did you want to update for ${format(
|
||||
date,
|
||||
"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(
|
||||
date,
|
||||
"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 === "currDate" ? "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;
|
||||
73
src/components/calender/modals/StickerSelector.tsx
Normal file
73
src/components/calender/modals/StickerSelector.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
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.
|
||||
*/
|
||||
|
||||
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;
|
||||
48
src/components/calender/stickers/DemoStickers.tsx
Normal file
48
src/components/calender/stickers/DemoStickers.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import React, { FC } from "react";
|
||||
|
||||
// TODO: When themes are made import the theme from user settings context. Refactor to use whatever those SVGs are.
|
||||
|
||||
interface DemoStickersProps {
|
||||
stickerVal: StickerVal;
|
||||
}
|
||||
|
||||
const DemoStickers: FC<DemoStickersProps> = ({
|
||||
stickerVal
|
||||
}: DemoStickersProps) => {
|
||||
if (stickerVal === null) {
|
||||
return <span aria-label="spacer"> </span>;
|
||||
}
|
||||
interface StickerToEmoji {
|
||||
[key: string]: JSX.Element;
|
||||
}
|
||||
|
||||
let key = "0";
|
||||
|
||||
if (stickerVal > 0) {
|
||||
key = "1";
|
||||
} else if (stickerVal < 0) {
|
||||
key = "-1";
|
||||
}
|
||||
|
||||
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 stickerToEmoji[`${key}`];
|
||||
};
|
||||
|
||||
export default DemoStickers;
|
||||
37
src/components/loading/LoadingOverlay.tsx
Normal file
37
src/components/loading/LoadingOverlay.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import {
|
||||
Box,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalContent,
|
||||
ModalOverlay
|
||||
} from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import LoadingSpinner from "./LoadingSpinner";
|
||||
|
||||
const LoadingOverlay = (): JSX.Element => {
|
||||
return (
|
||||
<Modal
|
||||
isCentered
|
||||
isOpen
|
||||
onClose={() => null}
|
||||
motionPreset="slideInBottom"
|
||||
scrollBehavior="inside"
|
||||
size="xs"
|
||||
>
|
||||
<ModalOverlay bg="loading.overlayBg" />
|
||||
<ModalContent bg="transparent" boxShadow="none">
|
||||
{/* <ModalHeader>
|
||||
</ModalHeader> */}
|
||||
<ModalBody border="0px">
|
||||
<Box h="100%" w="100%" textAlign="center">
|
||||
<LoadingSpinner />
|
||||
</Box>
|
||||
</ModalBody>
|
||||
{/* <ModalFooter>
|
||||
</ModalFooter> */}
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoadingOverlay;
|
||||
16
src/components/loading/LoadingSpinner.tsx
Normal file
16
src/components/loading/LoadingSpinner.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { Spinner } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
|
||||
const LoadingSpinner = (): JSX.Element => {
|
||||
return (
|
||||
<Spinner
|
||||
thickness="4px"
|
||||
speed="0.50s"
|
||||
emptyColor="loading.spinnerEmptySpace"
|
||||
color="loading.spinnerColor"
|
||||
size="xl"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoadingSpinner;
|
||||
Reference in New Issue
Block a user