From fdecd3764d3b966de6845ca5444d56543970c68e Mon Sep 17 00:00:00 2001 From: Rohit Patil Date: Fri, 21 Jan 2022 05:22:51 +0000 Subject: [PATCH 1/3] fixes : replace moment with dayjs issue #34 --- .gitpod.yml | 11 +++++++++ package.json | 2 ++ src/components/ReusableGraph/index.tsx | 6 ++--- src/components/TimeQuerier/index.tsx | 23 +++++++++++-------- .../TimeQuerier/timeQuerier.test.tsx | 6 ++--- src/e2e.test.ts | 18 +++++++-------- src/mock/mockGraph.ts | 4 ++-- src/utils/constants.ts | 6 ++--- yarn.lock | 10 ++++++++ 9 files changed, 55 insertions(+), 31 deletions(-) create mode 100644 .gitpod.yml diff --git a/.gitpod.yml b/.gitpod.yml new file mode 100644 index 0000000..156d0b5 --- /dev/null +++ b/.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 + diff --git a/package.json b/package.json index b4b4152..022c948 100644 --- a/package.json +++ b/package.json @@ -18,11 +18,13 @@ "@types/react-virtualized-auto-sizer": "^1.0.0", "@types/react-window": "^1.8.3", "axios": "^0.21.1", + "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", diff --git a/src/components/ReusableGraph/index.tsx b/src/components/ReusableGraph/index.tsx index 6cf4475..6c15da3 100644 --- a/src/components/ReusableGraph/index.tsx +++ b/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 = ({ 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" /> diff --git a/src/components/TimeQuerier/index.tsx b/src/components/TimeQuerier/index.tsx index 7aa7060..ccd4eb8 100644 --- a/src/components/TimeQuerier/index.tsx +++ b/src/components/TimeQuerier/index.tsx @@ -13,28 +13,31 @@ 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"; 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); - 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 +47,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"); diff --git a/src/components/TimeQuerier/timeQuerier.test.tsx b/src/components/TimeQuerier/timeQuerier.test.tsx index 38a4d1c..b1fa46b 100644 --- a/src/components/TimeQuerier/timeQuerier.test.tsx +++ b/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(); }); diff --git a/src/e2e.test.ts b/src/e2e.test.ts index 36f2d56..f1eb5bf 100644 --- a/src/e2e.test.ts +++ b/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(); } diff --git a/src/mock/mockGraph.ts b/src/mock/mockGraph.ts index 2fdbfc6..9b65355 100644 --- a/src/mock/mockGraph.ts +++ b/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, }); diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 4d740f7..8617200 100644 --- a/src/utils/constants.ts +++ b/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, diff --git a/yarn.lock b/yarn.lock index 44ab270..d339649 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4916,6 +4916,11 @@ data-urls@^2.0.0: whatwg-mimetype "^2.3.0" whatwg-url "^8.0.0" +dayjs@^1.10.7: + version "1.10.7" + resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468" + integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig== + debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9: version "2.6.9" resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz" @@ -10420,6 +10425,11 @@ react-datetime@^3.0.4: dependencies: prop-types "^15.5.7" +react-dayjs-picker@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/react-dayjs-picker/-/react-dayjs-picker-1.3.0.tgz#9478794cf79661436c98fdd1deb9022b0a61aabb" + integrity sha512-2HKdzJND7up18wSru8/Qv79U0U96J5JAM01MvmkI4CPZtYk9iUhidc9iR24UrNGULvfK4kmHMzKrHVncGeMrEA== + react-dev-utils@^11.0.3: version "11.0.4" resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz" From 34b93822aa9a7029ff164c46636cc1ce155f4857 Mon Sep 17 00:00:00 2001 From: Rohit Patil Date: Fri, 21 Jan 2022 05:27:46 +0000 Subject: [PATCH 2/3] fixes : replace moment with dayjs issue#34 --- src/components/GraphWrapper/graphWrapper.test.tsx | 7 +++++-- src/components/GraphWrapper/index.tsx | 7 +++++-- src/components/RouteSelector/routeSelector.test.tsx | 7 ++----- src/theme/components/DateTime.ts | 7 +++---- 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/components/GraphWrapper/graphWrapper.test.tsx b/src/components/GraphWrapper/graphWrapper.test.tsx index ae58cd1..8a39168 100644 --- a/src/components/GraphWrapper/graphWrapper.test.tsx +++ b/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(); diff --git a/src/components/GraphWrapper/index.tsx b/src/components/GraphWrapper/index.tsx index fea4ba4..9b99864 100644 --- a/src/components/GraphWrapper/index.tsx +++ b/src/components/GraphWrapper/index.tsx @@ -20,8 +20,11 @@ interface PageProps { const GraphWrapper: React.FC = (props: PageProps) => { const { selectedRoutePath } = props; - const { selectedStartTimestamp, selectedEndTimestamp, selectedStepValue } = - useTimeQuerierStore(); + const { + selectedStartTimestamp, + selectedEndTimestamp, + selectedStepValue, + } = useTimeQuerierStore(); const { data, error, status } = useFetch>( queryEntities( diff --git a/src/components/RouteSelector/routeSelector.test.tsx b/src/components/RouteSelector/routeSelector.test.tsx index 9718198..1141faf 100644 --- a/src/components/RouteSelector/routeSelector.test.tsx +++ b/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; diff --git a/src/theme/components/DateTime.ts b/src/theme/components/DateTime.ts index aa89ac5..6e42c43 100644 --- a/src/theme/components/DateTime.ts +++ b/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", }, From 65e4bb6ee641841e1f47f8328a0928b170e5c250 Mon Sep 17 00:00:00 2001 From: Rohit Patil Date: Fri, 21 Jan 2022 19:06:44 +0000 Subject: [PATCH 3/3] replaced react-datetime with @material-ui/pickers issue #34 --- package.json | 6 +- src/components/TimeQuerier/index.tsx | 52 ++++-- src/theme/index.ts | 1 - yarn.lock | 262 +++++++++++++++++++++++++-- 4 files changed, 285 insertions(+), 36 deletions(-) diff --git a/package.json b/package.json index 022c948..e60a6e9 100644 --- a/package.json +++ b/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,12 +21,11 @@ "@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", diff --git a/src/components/TimeQuerier/index.tsx b/src/components/TimeQuerier/index.tsx index ccd4eb8..435b8c2 100644 --- a/src/components/TimeQuerier/index.tsx +++ b/src/components/TimeQuerier/index.tsx @@ -13,10 +13,14 @@ import { Alert, AlertIcon, } from "@chakra-ui/react"; -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", {}); @@ -77,14 +81,21 @@ const TimeQuerier: React.FC = () => { > Start Time - + + + { > End Time - + + +