Replaced moment with dayjs fixed issue #34

.gitpod.yml

@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run start
+vscode:
+  extensions:
+    - dbaeumer.vscode-eslint
+

package.json

@@ -5,9 +5,12 @@
   "dependencies": {
     "@chakra-ui/icons": "^1.0.13",
     "@chakra-ui/react": "^1.0.0",
+    "@date-io/date-fns": "^1.3.13",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@faker-js/faker": "^5.5.3",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/pickers": "^3.3.10",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.1",
     "@testing-library/user-event": "^12.0.2",
@@ -18,11 +21,12 @@
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.3",
     "axios": "^0.21.1",
+    "date-fns": "^2.28.0",
+    "dayjs": "^1.10.7",
     "framer-motion": "^4.0.0",
-    "moment": "^2.29.1",
     "puppeteer": "^10.1.0",
     "react": "^17.0.2",
-    "react-datetime": "^3.0.4",
+    "react-dayjs-picker": "^1.3.0",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/components/GraphWrapper/graphWrapper.test.tsx

@@ -12,8 +12,11 @@ import { queryEntities } from "../../services/queryEntity";
 import constants from "../../utils/constants";
 import { useGlobalStore } from "../../store/global";
 
-const { defaultStartTimestamp, defaultStepValue, defaultEndTimestamp } =
-  constants;
+const {
+  defaultStartTimestamp,
+  defaultStepValue,
+  defaultEndTimestamp,
+} = constants;
 
 const TestComponent = () => {
   const { changeRoute } = useGlobalStore();

src/components/GraphWrapper/index.tsx

@@ -20,8 +20,11 @@ interface PageProps {
 
 const GraphWrapper: React.FC<PageProps> = (props: PageProps) => {
   const { selectedRoutePath } = props;
-  const { selectedStartTimestamp, selectedEndTimestamp, selectedStepValue } =
-    useTimeQuerierStore();
+  const {
+    selectedStartTimestamp,
+    selectedEndTimestamp,
+    selectedStepValue,
+  } = useTimeQuerierStore();
 
   const { data, error, status } = useFetch<apiResponse<queryResponse>>(
     queryEntities(

src/components/ReusableGraph/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import moment from "moment";
+import dayjs from "dayjs";
 import {
   VStack,
   Alert,
@@ -63,9 +63,7 @@ const ReusableGraph: React.FC<reusableGraphProps> = ({
           dataKey="timestamp"
           domain={["dataMin", "dataMax"]}
           tickMargin={10}
-          tickFormatter={(unixTime) =>
-            moment(unixTime).format("D MMM HH:mm:ss")
-          }
+          tickFormatter={(unixTime) => dayjs(unixTime).format("D MMM HH:mm:ss")}
           interval={0}
           type="number"
         />

src/components/RouteSelector/routeSelector.test.tsx

@@ -8,11 +8,8 @@ import { getRoutes } from "../../services/getRoutes";
 import { truncate } from "../../utils/stringManipulation";
 
 jest.mock("axios");
-jest.mock(
-  "react-virtualized-auto-sizer",
-  () =>
-    ({ children }: any) =>
-      children({ height: 600, width: 600 })
+jest.mock("react-virtualized-auto-sizer", () => ({ children }: any) =>
+  children({ height: 600, width: 600 })
 );
 
 const mockedAxios = axios as jest.Mocked<typeof axios>;

src/components/TimeQuerier/index.tsx

@@ -13,28 +13,35 @@ import {
   Alert,
   AlertIcon,
 } from "@chakra-ui/react";
-import moment from "moment";
-import Datetime from "react-datetime";
 import constants from "../../utils/constants";
 import { useTimeQuerierStore } from "../../store/timeQuerier";
+import dayjs from "dayjs";
+import DateFnsUtils from "@date-io/date-fns";
+import {
+  MuiPickersUtilsProvider,
+  KeyboardDatePicker,
+} from "@material-ui/pickers";
 
 const TimeQuerier: React.FC = () => {
   const styles = useStyleConfig("DateTime", {});
-  const { selectedStartTimestamp, selectedEndTimestamp, changeTimeQuerier } =
-    useTimeQuerierStore();
+  const {
+    selectedStartTimestamp,
+    selectedEndTimestamp,
+    changeTimeQuerier,
+  } = useTimeQuerierStore();
   const { defaultStepValue, minStepValue, dateFormat, timeFormat } = constants;
-  const [startTime, setStartTime] = useState(moment(selectedStartTimestamp));
-  const [endTime, setEndTime] = useState(moment(selectedEndTimestamp));
+  const [startTime, setStartTime] = useState(dayjs(selectedStartTimestamp));
+  const [endTime, setEndTime] = useState(dayjs(selectedEndTimestamp));
   const [stepTime, setStepTime] = useState(defaultStepValue);
   const [error, setError] = useState<undefined | string>(undefined);
 
-  const handleStartChange = (date: moment.Moment | string) => {
+  const handleStartChange = (date: dayjs.Dayjs | string) => {
     if (typeof date !== "string") {
       setStartTime(date);
       setError(undefined);
     }
   };
-  const handleEndChange = (date: moment.Moment | string) => {
+  const handleEndChange = (date: dayjs.Dayjs | string) => {
     if (typeof date !== "string") {
       setEndTime(date);
       setError(undefined);
@@ -44,13 +51,13 @@ const TimeQuerier: React.FC = () => {
     if (valueAsString !== "" && valueAsNumber >= minStepValue)
       setStepTime(valueAsNumber);
   };
-  const valid = (current: moment.Moment) => {
-    return current.isBefore(moment());
+  const valid = (current: dayjs.Dayjs) => {
+    return current.isBefore(dayjs());
   };
   const handleFetchTimeSeriesData = () => {
     if (
       endTime.isBefore(startTime) ||
-      endTime.isAfter(moment()) ||
+      endTime.isAfter(dayjs()) ||
       stepTime < minStepValue
     )
       setError("Kindy check your input");
@@ -74,14 +81,21 @@ const TimeQuerier: React.FC = () => {
       >
         <Text>Start Time</Text>
         <Box sx={styles}>
-          <Datetime
-            value={startTime}
-            dateFormat={dateFormat}
-            timeFormat={timeFormat}
-            inputProps={{ className: "custom-datepicker start-time" }}
-            onChange={handleStartChange}
-            isValidDate={valid}
-          />
+          <MuiPickersUtilsProvider utils={DateFnsUtils}>
+            <KeyboardDatePicker
+              disableToolbar
+              variant="inline"
+              format="MM/dd/yyyy"
+              margin="normal"
+              id="date-picker-inline"
+              value={startTime}
+              isValidDate={valid}
+              onChange={handleStartChange}
+              KeyboardButtonProps={{
+                "aria-label": "change date",
+              }}
+            />
+          </MuiPickersUtilsProvider>
         </Box>
       </Box>
       <Box
@@ -93,14 +107,21 @@ const TimeQuerier: React.FC = () => {
       >
         <Text>End Time</Text>
         <Box sx={styles}>
-          <Datetime
-            value={endTime}
-            dateFormat={dateFormat}
-            timeFormat={timeFormat}
-            inputProps={{ className: "custom-datepicker end-time" }}
-            onChange={handleEndChange}
-            isValidDate={valid}
-          />
+          <MuiPickersUtilsProvider utils={DateFnsUtils}>
+            <KeyboardDatePicker
+              disableToolbar
+              variant="inline"
+              format="MM/dd/yyyy"
+              margin="normal"
+              id="date-picker-inline"
+              value={endTime}
+              isValidDate={valid}
+              onChange={handleEndChange}
+              KeyboardButtonProps={{
+                "aria-label": "change date",
+              }}
+            />
+          </MuiPickersUtilsProvider>
         </Box>
       </Box>
       <Box

src/components/TimeQuerier/timeQuerier.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import moment from "moment";
+import dayjs from "dayjs";
 import { fireEvent } from "@testing-library/react";
 import TimeQuerier from "./";
 import { render } from "../../utils/customRender";
@@ -21,12 +21,12 @@ describe("TimeQuerier Component", () => {
     expect(getByDisplayValue(defaultStepValue.toString(10))).toBeTruthy();
     expect(
       getByDisplayValue(
-        moment(defaultStartTimestamp).format(`${dateFormat} ${timeFormat}`)
+        dayjs(defaultStartTimestamp).format(`${dateFormat} ${timeFormat}`)
       )
     ).toBeTruthy();
     expect(
       getByDisplayValue(
-        moment(defaultEndTimestamp).format(`${dateFormat} ${timeFormat}`)
+        dayjs(defaultEndTimestamp).format(`${dateFormat} ${timeFormat}`)
       )
     ).toBeTruthy();
   });

src/e2e.test.ts

@@ -1,6 +1,6 @@
 import { routeResponse } from "./utils/types";
 import puppeteer from "puppeteer";
-import moment from "moment";
+import dayjs from "dayjs";
 import constants from "./utils/constants";
 import { getActiveMachines } from "./services/getActiveMachines";
 import { getRoutes } from "./services/getRoutes";
@@ -50,12 +50,12 @@ describe("E2E test for Dashboard", () => {
     );
     const graph = page.$('[data-testid="graph-info"]');
     const startTime = await page.$(
-      `input[class="custom-datepicker start-time"][value="${moment(
+      `input[class="custom-datepicker start-time"][value="${dayjs(
         defaultStartTimestamp
       ).format(`${dateFormat} ${timeFormat}"`)}]`
     );
     const endTime = await page.$(
-      `input[value="${moment(defaultEndTimestamp).format(
+      `input[value="${dayjs(defaultEndTimestamp).format(
         `${dateFormat} ${timeFormat}"`
       )}]`
     );
@@ -165,7 +165,7 @@ describe("E2E test for Dashboard", () => {
 
     await page.goto("http://localhost:5000");
     const startTime = await page.$(".start-time");
-    const newStart = moment().subtract(1, "days").subtract(1, "hours");
+    const newStart = dayjs().subtract(1, "days").subtract(1, "hours");
     if (startTime) {
       await startTime.click();
     }
@@ -176,7 +176,7 @@ describe("E2E test for Dashboard", () => {
     );
     await nextStart?.evaluate((b) => b.click());
     const start = await page.$(
-      `input[class="custom-datepicker start-time"][value="${moment(
+      `input[class="custom-datepicker start-time"][value="${dayjs(
         newStart
       ).format(`${dateFormat} ${timeFormat}`)}"]`
     );
@@ -189,7 +189,7 @@ describe("E2E test for Dashboard", () => {
 
     await page.goto("http://localhost:5000");
     const endTime = await page.$(".end-time");
-    const newEnd = moment().subtract(2, "days");
+    const newEnd = dayjs().subtract(2, "days");
     if (endTime) {
       await endTime.click();
     }
@@ -202,7 +202,7 @@ describe("E2E test for Dashboard", () => {
       return b.click();
     });
     const end = await page.$(
-      `input[class="custom-datepicker end-time"][value="${moment(newEnd).format(
+      `input[class="custom-datepicker end-time"][value="${dayjs(newEnd).format(
         `${dateFormat} ${timeFormat}"`
       )}]`
     );
@@ -226,7 +226,7 @@ describe("E2E test for Dashboard", () => {
 
     await page.goto("http://localhost:5000");
     const endTime = await page.$(".end-time");
-    const newEnd = moment().subtract(2, "days");
+    const newEnd = dayjs().subtract(2, "days");
     if (endTime) {
       await endTime.click();
     }
@@ -252,7 +252,7 @@ describe("E2E test for Dashboard", () => {
     await entities[0].click();
     if (await page.$('[data-testid="graph"]')) {
       const startTime = await page.$(".start-time");
-      const newStart = moment().subtract(1, "days").subtract(1, "hours");
+      const newStart = dayjs().subtract(1, "days").subtract(1, "hours");
       if (startTime) {
         await startTime.click();
       }

src/mock/mockGraph.ts

@@ -1,12 +1,12 @@
 import faker from "@faker-js/faker";
-import moment from "moment";
+import dayjs from "dayjs";
 
 /* Custom Generator
    Generate a datapoint with the given keys
    with random values using faker
 */
 const dataGenerator = () => ({
-  timestamp: moment(faker.date.past()).unix(),
+  timestamp: dayjs(faker.date.past()).unix(),
   value: faker.datatype.number,
 });
 

src/theme/components/DateTime.ts

@@ -26,10 +26,9 @@ export const DateTime = {
     },
     ".rdtPicker td.rdtDay:hover,.rdtPicker thead tr:first-of-type th:hover\
     ,.rdtPicker .rdtTimeToggle:hover,.rdtCounter .rdtBtn:hover\
-    ,td.rdtMonth:hover, td.rdtYear:hover,.rdtSwitch:hover":
-      {
-        bg: mode("#eee", "darkPrimary")(props),
-      },
+    ,td.rdtMonth:hover, td.rdtYear:hover,.rdtSwitch:hover": {
+      bg: mode("#eee", "darkPrimary")(props),
+    },
     ".rdtPicker td.rdtDisabled:hover": {
       bg: "none",
     },

src/theme/index.ts

@@ -9,7 +9,6 @@ import { Heading } from "./components/Heading";
 import { extendTheme } from "@chakra-ui/react";
 // Global style overrides
 import styles from "./global";
-import "react-datetime/css/react-datetime.css";
 //Branding style ovverides
 import branding from "./branding";
 

src/utils/constants.ts

@@ -1,12 +1,12 @@
-import moment from "moment";
+import dayjs from "dayjs";
 
 export default {
   defaultSelectedMachine: null,
   backendBaseUrl: "http://localhost:9990/api/v1",
   defaultStepValue: 15,
   minStepValue: 1,
-  defaultStartTimestamp: moment().subtract(1, "h").toISOString(),
-  defaultEndTimestamp: moment().toISOString(),
+  defaultStartTimestamp: dayjs().subtract(1, "h").toISOString(),
+  defaultEndTimestamp: dayjs().toISOString(),
   dateFormat: "DD/MM/yyyy",
   timeFormat: "h:mm A",
   graphDataLimit: 6000,