.prettierrc

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "none"
+}

components/calender/CalenderNav.tsx

@@ -14,7 +14,7 @@ const CalenderNav = (): JSX.Element => {
   const handleNavButtons = (direction: "next" | "prev") => {
     if (direction === "next") {
       const newMonth = add(selectedDate, {
-        months: 1,
+        months: 1
       });
 
       const year = format(newMonth, "y");
@@ -23,7 +23,7 @@ const CalenderNav = (): JSX.Element => {
       router.push(`/calendar/${year}/${month}`);
     } else if (direction === "prev") {
       const newMonth = sub(selectedDate, {
-        months: 1,
+        months: 1
       });
 
       const year = format(newMonth, "y");

components/calender/DatePicker.tsx

@@ -14,7 +14,7 @@ import {
   PopoverContent,
   PopoverHeader,
   PopoverTrigger,
-  VStack,
+  VStack
 } from "@chakra-ui/react";
 import {
   Formik,
@@ -22,7 +22,7 @@ import {
   FormikProps,
   Form,
   Field,
-  FieldProps,
+  FieldProps
 } from "formik";
 import { format } from "date-fns";
 import { CalenderContext } from "../../contexts/CalenderContext";
@@ -57,7 +57,7 @@ const DatePicker = (): JSX.Element => {
         const date: UpdateCalendarProps = {
           year: parseInt(dateArr[0]),
           month: parseInt(dateArr[1]),
-          day: parseInt(dateArr[2]),
+          day: parseInt(dateArr[2])
         };
 
         if (!/^(19|20)\d{2}$/.test(`${date.year}`)) {
@@ -97,7 +97,7 @@ const DatePicker = (): JSX.Element => {
           const date: UpdateCalendarProps = {
             year: parseInt(dateArr[0]),
             month: parseInt(dateArr[1]),
-            day: parseInt(dateArr[2]),
+            day: parseInt(dateArr[2])
           };
 
           return resolve(router.push(`/calendar/${date.year}/${date.month}`));
@@ -116,15 +116,15 @@ const DatePicker = (): JSX.Element => {
     bg: "gray.900",
     borderColor: "white",
     _placeholder: {
-      color: "white",
+      color: "white"
     },
     _focus: {
       bg: "#000",
       color: "#FFF",
       borderColor: "#63b3ed",
       boxShadow: "0 0 0 1px #63b3ed",
-      zIndex: "1",
+      zIndex: "1"
-    },
+    }
   };
 
   const initRef = useRef();
@@ -148,7 +148,7 @@ const DatePicker = (): JSX.Element => {
         <PopoverBody textAlign="center">
           <Formik
             initialValues={{
-              date: "",
+              date: ""
             }}
             onSubmit={(data, actions) => {
               handleSubmit(data)
@@ -156,8 +156,8 @@ const DatePicker = (): JSX.Element => {
                   actions.setSubmitting(false);
                   actions.resetForm({
                     values: {
-                      date: "",
+                      date: ""
-                    },
+                    }
                   });
                 })
                 .catch(() => {
@@ -169,7 +169,7 @@ const DatePicker = (): JSX.Element => {
               <Form
                 style={{
                   width: "100%",
-                  height: "auto",
+                  height: "auto"
                 }}
               >
                 <VStack
@@ -223,8 +223,8 @@ const DatePicker = (): JSX.Element => {
                                     boxShadow: "0 0 0 1px #00c17c",
                                     _hover: {
                                       borderColor: "brand.valid",
-                                      boxShadow: "0 0 0 1px #00c17c",
+                                      boxShadow: "0 0 0 1px #00c17c"
-                                    },
+                                    }
                                   }
                                 : "")}
                             />

components/calender/FormValidateEmoji.tsx

@@ -5,7 +5,7 @@ interface FormValidateEmojiProps {
 }
 
 const FormValidateEmoji: FC<FormValidateEmojiProps> = ({
-  type,
+  type
 }: FormValidateEmojiProps) => {
   interface Validations {
     [key: string]: JSX.Element;
@@ -26,7 +26,7 @@ const FormValidateEmoji: FC<FormValidateEmojiProps> = ({
       <span role="img" aria-label="Check">
         ✔
       </span>
-    ),
+    )
   };
 
   return validations[`${type}`];

components/calender/index.tsx

@@ -28,7 +28,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
   // Simulated user settings context
   const userSettings = {
     theme: "default",
-    startOfWeek: "Sunday",
+    startOfWeek: "Sunday"
   };
 
   return (

contexts/CalenderContext.tsx

@@ -68,7 +68,7 @@ interface CalenderContextState {
 const CalenderContext = createContext({} as CalenderContextState);
 
 const CalenderContextProvider = ({
-  children,
+  children
 }: {
   children: ReactNode;
 }): JSX.Element => {
@@ -81,7 +81,7 @@ const CalenderContextProvider = ({
         3: "Wednesday",
         4: "Thursday",
         5: "Friday",
-        6: "Saturday",
+        6: "Saturday"
       },
       Monday: {
         0: "Monday",
@@ -90,9 +90,9 @@ const CalenderContextProvider = ({
         3: "Thursday",
         4: "Friday",
         5: "Saturday",
-        6: "Sunday",
+        6: "Sunday"
-      },
+      }
-    },
+    }
   };
 
   // Selected month & year
@@ -157,7 +157,7 @@ const CalenderContextProvider = ({
         "Wednesday",
         "Thursday",
         "Friday",
-        "Saturday",
+        "Saturday"
       ],
       Monday: [
         "Monday",
@@ -166,9 +166,9 @@ const CalenderContextProvider = ({
         "Thursday",
         "Friday",
         "Saturday",
-        "Sunday",
+        "Sunday"
-      ],
+      ]
-    },
+    }
   };
 
   //TODO: Create an object of arrays that will align with the days on the week. Make two sets for each start of the week setting.
@@ -193,7 +193,7 @@ const CalenderContextProvider = ({
     selectedDate,
     daysOfMonth,
     daysOfWeek,
-    setDate,
+    setDate
   };
 
   return (

contexts/NewCalenderContext.tsx

@@ -8,7 +8,7 @@ import {
   sub,
   set,
   isAfter,
-  isBefore,
+  isBefore
 } from "date-fns";
 // TODO: import types
 
@@ -72,7 +72,7 @@ interface CalenderContextState {
 const NewCalenderContext = createContext({} as CalenderContextState);
 
 const NewCalenderContextProvider = ({
-  children,
+  children
 }: {
   children: ReactNode;
 }): JSX.Element => {
@@ -85,7 +85,7 @@ const NewCalenderContextProvider = ({
         "Wednesday",
         "Thursday",
         "Friday",
-        "Saturday",
+        "Saturday"
       ],
       monday: [
         "Monday",
@@ -94,30 +94,9 @@ const NewCalenderContextProvider = ({
         "Thursday",
         "Friday",
         "Saturday",
-        "Sunday",
+        "Sunday"
-      ],
+      ]
-    },
+    }
-  };
-
-  const ISOToIndex = {
-    sunday: {
-      Sun: 0,
-      Mon: 1,
-      Tue: 2,
-      Wed: 3,
-      Thu: 4,
-      Fri: 5,
-      Sat: 6,
-    },
-    monday: {
-      Mon: -1,
-      Tue: 0,
-      Wed: 1,
-      Thu: 2,
-      Fri: 3,
-      Sat: 4,
-      Sun: 5,
-    },
   };
 
   const [selectedDate, setSelectedMonth] = useState<Date>(new Date());
@@ -133,18 +112,18 @@ const NewCalenderContextProvider = ({
     prevMonth: {
       date: prevMonth,
       endDay: getDate(endOfMonth(prevMonth)),
-      days: getDate(endOfMonth(prevMonth)),
+      days: getDate(endOfMonth(prevMonth))
     },
     startOfWeek: {
       sunday: {
         layout: weekDays.startOfWeek.sunday,
-        month: {} as Month,
+        month: {} as Month
       },
       monday: {
         layout: weekDays.startOfWeek.monday,
-        month: {} as Month,
+        month: {} as Month
-      },
+      }
-    },
+    }
   });
 
   //TODO Add a function that will populate the "MONTH" layout for the context. It should take in the start of the week (Sunday, Monday) and output the appropriate layout based on that preference.
@@ -172,19 +151,40 @@ const NewCalenderContextProvider = ({
   ): void => {
     const { endDay: endLastMonth } = prevMonth;
 
+    const ISOToIndex = {
+      sunday: {
+        Sun: 0,
+        Mon: 1,
+        Tue: 2,
+        Wed: 3,
+        Thu: 4,
+        Fri: 5,
+        Sat: 6
+      },
+      monday: {
+        Mon: -1,
+        Tue: 0,
+        Wed: 1,
+        Thu: 2,
+        Fri: 3,
+        Sat: 4,
+        Sun: 5
+      }
+    };
+
     const sundays = {
       week1: new Array(7).fill(null),
       week2: new Array(7).fill(null),
       week3: new Array(7).fill(null),
       week4: new Array(7).fill(null),
       week5: new Array(7).fill(null),
-      week6: new Array(7).fill(null),
+      week6: new Array(7).fill(null)
     };
 
     const sunStartDay = endLastMonth - (ISOToIndex.sunday[startOfMonth] - 1);
 
     let sunCurrDate = set(sub(selectedDate, { months: 1 }), {
-      date: sunStartDay,
+      date: sunStartDay
     });
 
     for (let week in sundays) {
@@ -193,7 +193,7 @@ const NewCalenderContextProvider = ({
       thisWeek.forEach((e, i, a) => {
         const day = {
           isOverflow: isOverflow(selectedDate, sunCurrDate),
-          date: sunCurrDate,
+          date: sunCurrDate
         };
         sunCurrDate = add(sunCurrDate, { days: 1 });
 
@@ -207,13 +207,13 @@ const NewCalenderContextProvider = ({
       week3: new Array(7).fill(null),
       week4: new Array(7).fill(null),
       week5: new Array(7).fill(null),
-      week6: new Array(7).fill(null),
+      week6: new Array(7).fill(null)
     };
 
     const monStartDay = endLastMonth - ISOToIndex.monday[startOfMonth];
 
     let monCurrDate = set(sub(selectedDate, { months: 1 }), {
-      date: monStartDay,
+      date: monStartDay
     });
 
     for (let week in mondays) {
@@ -222,7 +222,7 @@ const NewCalenderContextProvider = ({
       thisWeek.forEach((e, i, a) => {
         const day = {
           isOverflow: isOverflow(selectedDate, monCurrDate),
-          date: monCurrDate,
+          date: monCurrDate
         };
         monCurrDate = add(monCurrDate, { days: 1 });
 
@@ -248,7 +248,7 @@ const NewCalenderContextProvider = ({
   //TODO: Add a useEffect that will trigger the update function(s) to run when the selected date is updated.
 
   const calenderContextValues = {
-    selectedMonthInfo,
+    selectedMonthInfo
   };
 
   return (

pages/calendar/[...date].tsx

@@ -22,14 +22,14 @@ const DateRoute: React.FC<unknown> = () => {
       return {
         year: 0,
         month: 0,
-        day: 0,
+        day: 0
       };
     }
 
     const date = {
       year: 0,
       month: 0,
-      day: 0,
+      day: 0
     };
 
     if (/^(19|20)\d{2}$/.test(`${dateArr[0]}`)) {

pages/index.tsx

@@ -15,7 +15,7 @@ const IndexPage = (): JSX.Element => {
   const date = useRef<UpdateCalendarProps>({
     year: parseInt(format(new Date(), "y")),
     month: parseInt(format(new Date(), "M")),
-    day: parseInt(format(new Date(), "d")),
+    day: parseInt(format(new Date(), "d"))
   });
   return (
     <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">

theme/AppTheme.ts

@@ -4,7 +4,7 @@ import buttons from "./components/buttonStyles";
 
 const config: ThemeConfig = {
   initialColorMode: "dark",
-  useSystemColorMode: false,
+  useSystemColorMode: false
 };
 
 // const breakpoints = createBreakpoints({
@@ -29,19 +29,19 @@ const AppTheme = extendTheme({
       footer: "#0097a7",
       footerText: "black",
       content: "#2d3748",
-      patreon: "#FF424D",
+      patreon: "#FF424D"
-    },
+    }
   },
   styles: {
     global: {
       body: {
-        bg: "gray.900",
+        bg: "gray.900"
-      },
+      }
-    },
+    }
   },
   components: {
-    Button: buttons,
+    Button: buttons
-  },
+  }
   // breakpoints,
 });
 

theme/components/buttonStyles.ts

@@ -3,7 +3,7 @@ import {
   darken,
   mode,
   StyleFunctionProps,
-  whiten,
+  whiten
 } from "@chakra-ui/theme-tools";
 import { Dict } from "@chakra-ui/utils";
 
@@ -22,8 +22,8 @@ const buttonStyles = {
         bg: mode(
           whiten("brand.primary", 20),
           darken("brand.primary", 20)
-        )(props),
+        )(props)
-      },
+      }
     }),
     contactSecondary: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "brand.primary",
@@ -33,8 +33,8 @@ const buttonStyles = {
         bg: mode(
           whiten("brand.primary", 20),
           darken("brand.primary", 20)
-        )(props),
+        )(props)
-      },
+      }
     }),
     project: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "transparent",
@@ -50,8 +50,8 @@ const buttonStyles = {
           darken("brand.secondary", 20)
         )(props),
         boxShadow:
-          "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px",
+          "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px"
-      },
+      }
     }),
     nav: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "transparent",
@@ -61,16 +61,16 @@ const buttonStyles = {
         bg: mode(
           whiten("brand.secondary", 20),
           darken("brand.secondary", 20)
-        )(props),
+        )(props)
-      },
+      }
     }),
     stickyNav: (/* props: Dict<never> | StyleFunctionProps */) => ({
       bg: "transparent",
       fontSize: "md",
       px: "2",
       _hover: {
-        textDecoration: "underline",
+        textDecoration: "underline"
-      },
+      }
     }),
     credits: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "brand.main",
@@ -78,8 +78,8 @@ const buttonStyles = {
       p: 3,
       color: "whiteAlpha",
       _hover: {
-        bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props),
+        bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props)
-      },
+      }
     }),
     backToTop: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "rgba(23, 25, 35, 0.5)",
@@ -98,8 +98,8 @@ const buttonStyles = {
         boxShadow:
           "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px",
         color: "whiteAlpha.900",
-        border: "1px solid rgba(0, 134, 255, 1)",
+        border: "1px solid rgba(0, 134, 255, 1)"
-      },
+      }
     }),
     collapse: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "transparent",
@@ -114,8 +114,8 @@ const buttonStyles = {
           darken("brand.secondary", 20)
         )(props),
         color: "whiteAlpha.900",
-        textDecoration: "none",
+        textDecoration: "none"
-      },
+      }
     }),
     submit: (props: Dict<never> | StyleFunctionProps) => ({
       fontSize: "lg",
@@ -132,9 +132,9 @@ const buttonStyles = {
           )(props),
           boxShadow:
             "rgba(252, 129, 129, .95) 0px 0px 15px, rgba(252, 129, 129, 0.75) 0px 0px 3px 1px",
-          border: "1px solid #FC8181",
+          border: "1px solid #FC8181"
-        },
+        }
-      },
+      }
     }),
     mobileNav: (props: Dict<never> | StyleFunctionProps) => ({
       // bg: "transparent",
@@ -148,14 +148,14 @@ const buttonStyles = {
           darken("brand.secondary", 20)
         )(props),
         boxShadow:
-          "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px",
+          "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px"
       },
       _expanded: {
         bg: "brand.primary",
         boxShadow:
           "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px",
-        border: "1px solid #0068ff",
+        border: "1px solid #0068ff"
-      },
+      }
     }),
     patreon: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "brand.patreon",
@@ -166,12 +166,12 @@ const buttonStyles = {
         bg: mode(
           whiten("brand.patreon", 20),
           darken("brand.patreon", 20)
-        )(props),
+        )(props)
-      },
+      }
-    }),
+    })
   },
   // default values for `size` and `variant`
-  defaultProps: {},
+  defaultProps: {}
 };
 
 export default buttonStyles;

theme/layout/BackToTopButton.tsx

@@ -7,7 +7,7 @@ interface BackToTopButtonProps {
 }
 
 const BackToTopButton: FC<BackToTopButtonProps> = ({
-  show,
+  show
 }: BackToTopButtonProps) => {
   return (
     <Flex

theme/layout/Footer.tsx

@@ -7,7 +7,7 @@ import {
   HStack,
   // Image,
   Button,
-  BoxProps,
+  BoxProps
 } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
 // import BackToTopButton from "./BackToTopButton";

theme/layout/Header.tsx

@@ -5,7 +5,7 @@ import {
   Box,
   IconButton,
   Menu,
-  MenuButton,
+  MenuButton
 } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
 import DesktopNav from "./DesktopNav";
@@ -54,7 +54,7 @@ const Header = (): JSX.Element => {
     const iconType = {
       default: <Icon icon="bx:bx-menu-alt-right" />,
       hover: <Icon icon="bx:bx-menu" />,
-      open: <Icon icon="bx:bx-x" />,
+      open: <Icon icon="bx:bx-x" />
     };
 
     if (open) {
@@ -91,7 +91,7 @@ const Header = (): JSX.Element => {
         bg: "brand.main",
         boxShadow: open
           ? "none"
-          : "rgba(0, 134, 255, 0.9) 0px 0px 15px, rgba(0, 134, 255, 0.7) 0px 0px 3px 1px",
+          : "rgba(0, 134, 255, 0.9) 0px 0px 15px, rgba(0, 134, 255, 0.7) 0px 0px 3px 1px"
       }}
       h={open ? "125px" : "auto"}
     >
@@ -107,7 +107,7 @@ const Header = (): JSX.Element => {
         d={{ base: "flex", lg: "none" }}
         spacing="5px"
         _hover={{
-          cursor: "default",
+          cursor: "default"
         }}
       >
         <Heading as="h1" size="md">
@@ -140,7 +140,7 @@ const Header = (): JSX.Element => {
               height="auto"
               spacing="5px"
               _hover={{
-                cursor: "default",
+                cursor: "default"
               }}
             >
               <Heading as="h1" size="md">

theme/layout/MobileNav.tsx

@@ -4,7 +4,7 @@ import {
   Link,
   MenuDivider,
   MenuItem,
-  MenuList,
+  MenuList
 } from "@chakra-ui/react";
 import navItems, { NavItem } from "./navItems";
 
@@ -33,10 +33,10 @@ const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
             h="auto"
             p={0}
             _hover={{
-              backgroundColor: "none",
+              backgroundColor: "none"
             }}
             _focus={{
-              backgroundColor: "none",
+              backgroundColor: "none"
             }}
           >
             <Link onClick={() => updateOpen(false)} href={navItem[1]}>