Move moment methods to DateTimeUtils

uwblueprint · Mar 4, 2022 · 12398ad · 12398ad
1 parent 5ab2df2
commit 12398ad
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 15 deletions.
diff --git a/frontend/src/components/admin/ShiftCalendar/ShiftCalendar.tsx b/frontend/src/components/admin/ShiftCalendar/ShiftCalendar.tsx
@@ -6,7 +6,6 @@ import FullCalendar, {
 } from "@fullcalendar/react";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
-import moment from "moment";
 import React, { useState } from "react";
 import {
   Box,
@@ -21,6 +20,7 @@ import {
 } from "@chakra-ui/react";
 import colors from "../../../theme/colors";
 import "./ShiftCalendar.css";
+import { getTime, getWeekday } from "../../../utils/DateTimeUtils";
 
 type Event = {
   id: string;
@@ -96,18 +96,21 @@ const ShiftCalendar = ({ shifts }: ShiftCalendarProps): React.ReactElement => {
           <ModalCloseButton />
           <ModalBody>
             {selectedEvent
-              ? `Are you sure you want to delete the event on ${moment(
+              ? `Are you sure you want to delete the event on ${getWeekday(
                   selectedEvent.start,
-                ).format("dddd")} from ${moment(selectedEvent.start).format(
-                  "hh:mm A",
-                )} to ${moment(selectedEvent.end).format("hh:mm A")}?`
+                )} from ${getTime(selectedEvent.start)} to ${getTime(
+                  selectedEvent.end,
+                )}?`
               : ""}
           </ModalBody>
           <ModalFooter>
             <Button colorScheme="gray" mr={3} onClick={closeModal}>
               Cancel
             </Button>
-            <Button colorScheme="red" onClick={() => deleteEvent(events)}>
+            <Button
+              colorScheme="red"
+              onClick={() => deleteEvent(events.slice())}
+            >
               Delete
             </Button>
           </ModalFooter>
@@ -118,7 +121,7 @@ const ShiftCalendar = ({ shifts }: ShiftCalendarProps): React.ReactElement => {
         dayHeaderFormat={{ weekday: "short" }}
         editable
         eventChange={(arg: EventChangeArg) =>
-          changeEvent(arg.event as Event, arg.oldEvent as Event, events)
+          changeEvent(arg.event as Event, arg.oldEvent as Event, events.slice())
         }
         eventClick={(arg: EventClickArg) => deleteDialog(arg.event as Event)}
         eventColor={colors.violet}

diff --git a/frontend/src/components/pages/Default.tsx b/frontend/src/components/pages/Default.tsx
@@ -8,8 +8,6 @@ import {
   TabList,
   Tabs,
   Tab,
-  Container,
-  Divider,
 } from "@chakra-ui/react";
 
 import * as Routes from "../../constants/Routes";
@@ -18,7 +16,6 @@ import SampleContext from "../../contexts/SampleContext";
 
 import Logout from "../auth/Logout";
 import RefreshCredentials from "../auth/RefreshCredentials";
-import ShiftCalendar from "../admin/ShiftCalendar/ShiftCalendar";
 
 type ButtonProps = { text: string; path: string };
 
@@ -215,10 +212,6 @@ const DesignSystemDisplay = () => {
 const Default = (): React.ReactElement => {
   return (
     <div style={{ textAlign: "center", paddingTop: "20px" }}>
-      <Container maxW="container.lg">
-        <ShiftCalendar shifts={[]} />
-        <Divider my={4} />
-      </Container>
       <Text textStyle="display-large">Default Page</Text>
       <div className="btn-group" style={{ paddingRight: "10px" }}>
         <Logout />

diff --git a/frontend/src/components/pages/admin/posting/CreatePostingShiftsPage.tsx b/frontend/src/components/pages/admin/posting/CreatePostingShiftsPage.tsx
@@ -5,7 +5,7 @@ import ShiftCalendar from "../../../admin/ShiftCalendar/ShiftCalendar";
 const CreatePostingShiftsPage = (): React.ReactElement => {
   return (
     <Container maxW="container.lg">
-      <ShiftCalendar />
+      <ShiftCalendar shifts={[]} />
       <Divider my={4} />
     </Container>
   );

diff --git a/frontend/src/utils/DateTimeUtils.ts b/frontend/src/utils/DateTimeUtils.ts
@@ -1,3 +1,4 @@
+import moment from "moment";
 import { FilterType } from "../types/DateFilterTypes";
 
 // eslint-disable-next-line import/prefer-default-export
@@ -32,3 +33,11 @@ export const dateInRange = (start: string, filterType: FilterType): boolean => {
       (filterType === "week" ? MS_PER_WEEK : MS_PER_WEEK * 4)
   );
 };
+
+export const getWeekday = (dateStringInput: Date): string => {
+  return moment(dateStringInput).format("dddd");
+};
+
+export const getTime = (dateStringInput: Date): string => {
+  return moment(dateStringInput).format("hh:mm A");
+};