New prittier rule. No trailing commas.

2021-12-29 09:03:35 -06:00
parent c56dbb96d4
commit b44021effa
15 changed files with 118 additions and 115 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "trailingComma": "none"
+}
--- a/components/calender/CalenderNav.tsx
+++ b/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");
--- a/components/calender/DatePicker.tsx
+++ b/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"
+                                    }
                                  }
                                : "")}
                            />
--- a/components/calender/FormValidateEmoji.tsx
+++ b/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}`];
--- a/components/calender/index.tsx
+++ b/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 (
--- a/contexts/CalenderContext.tsx
+++ b/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 (
--- a/contexts/NewCalenderContext.tsx
+++ b/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",
-      ],
-    },
-  };
-
-  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,
-    },
+        "Sunday"
+      ]
+    }
  };

  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 (
--- a/pages/calendar/[...date].tsx
+++ b/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]}`)) {
--- a/pages/index.tsx
+++ b/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">
--- a/theme/AppTheme.ts
+++ b/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,
 });

--- a/theme/components/buttonStyles.ts
+++ b/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;
--- a/theme/layout/BackToTopButton.tsx
+++ b/theme/layout/BackToTopButton.tsx
@@ -7,7 +7,7 @@ interface BackToTopButtonProps {
 }

 const BackToTopButton: FC<BackToTopButtonProps> = ({
-  show,
+  show
 }: BackToTopButtonProps) => {
  return (
    <Flex
--- a/theme/layout/Footer.tsx
+++ b/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";
--- a/theme/layout/Header.tsx
+++ b/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">
--- a/theme/layout/MobileNav.tsx
+++ b/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]}>