From 0241adfbd52820a470fb1610f853b9be8a9f9899 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Sun, 5 Dec 2021 20:55:18 -0600
Subject: [PATCH] Made a date picker componenet.

---
 components/calender/DatePicker.tsx | 252 +++++++++++++++++++++++++++++
 1 file changed, 252 insertions(+)
 create mode 100644 components/calender/DatePicker.tsx

diff --git a/components/calender/DatePicker.tsx b/components/calender/DatePicker.tsx
new file mode 100644
index 0000000..83742f9
--- /dev/null
+++ b/components/calender/DatePicker.tsx
@@ -0,0 +1,252 @@
+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 { CalenderContext } from "../../contexts/CalenderContext";
+
+interface UpdateCalendarProps {
+  year: number;
+  month: number;
+  day: number;
+}
+
+const DatePicker = (): JSX.Element => {
+  const { selectedDate } = useContext(CalenderContext);
+
+  const currentMonth = format(selectedDate, "LLLL uuuu");
+
+  const router = useRouter();
+
+  const [valid, setValid] = useState<boolean>(false);
+
+  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">
+            {currentMonth}
+          </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}
+                >
+                  <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={6}
+                            w="100%"
+                            h="auto"
+                            spacing={0}
+                          >
+                            <FormLabel fontWeight="semibold" htmlFor="date">
+                              {"Date:"}
+                            </FormLabel>
+                            <Input
+                              required
+                              {...fieldTheme}
+                              type="date"
+                              isDisabled={formProps.isSubmitting}
+                              {...field}
+                              id="date"
+                              textAlign="center"
+                              {...(!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",
+                                    },
+                                  }
+                                : "")}
+                            />
+                          </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;