add own version of the DateTimeParam

src/features/ServerPage/features/EnnoblementsPage/components/LatestSavedEnnoblements/LatestSavedEnnoblements.tsx

@@ -1,13 +1,9 @@
 import React, { useRef } from 'react';
 import { useQuery } from '@apollo/client';
-import {
-  useQueryParams,
-  NumberParam,
-  withDefault,
-  DateTimeParam,
-} from 'use-query-params';
+import { useQueryParams, NumberParam, withDefault } from 'use-query-params';
 import useDateUtils from '@libs/date/useDateUtils';
 import useScrollToElement from '@libs/useScrollToElement';
+import DateTimeParam from '@libs/serialize-query-params/DateTimeParam';
 import { validateRowsPerPage } from '@common/Table/helpers';
 import { ENNOBLEMENTS } from './queries';
 import { LIMIT } from './constants';
@@ -29,12 +25,13 @@ export interface Props {
 function LatestSavedEnnoblements({ t, server }: Props) {
   const classes = useStyles();
   const dateUtils = useDateUtils();
-  const now = useRef(new Date());
+  const dateTimeParam = new DateTimeParam({ dateUtils });
+  const now = useRef(dateTimeParam.newDecodedDate(new Date().getTime()));
   const [query, setQuery] = useQueryParams({
     page: withDefault(NumberParam, 0),
     limit: withDefault(NumberParam, LIMIT),
-    ennobledAtGTE: withDefault(DateTimeParam, new Date(0)),
-    ennobledAtLTE: withDefault(DateTimeParam, now.current),
+    ennobledAtGTE: withDefault(dateTimeParam, dateTimeParam.newDecodedDate(0)),
+    ennobledAtLTE: withDefault(dateTimeParam, now.current),
   });
   const limit = validateRowsPerPage(query.limit);
   useScrollToElement(document.documentElement, [query.page, limit]);
@@ -48,8 +45,8 @@ function LatestSavedEnnoblements({ t, server }: Props) {
       offset: query.page * limit,
       sort: ['ennobledAt DESC'],
       filter: {
-        ennobledAtGTE: query.ennobledAtGTE,
-        ennobledAtLTE: query.ennobledAtLTE,
+        ennobledAtGTE: query.ennobledAtGTE.server,
+        ennobledAtLTE: query.ennobledAtLTE.server,
       },
       server,
     },
@@ -64,13 +61,13 @@ function LatestSavedEnnoblements({ t, server }: Props) {
         {[
           {
             id: 'ennobledAtGTE',
-            value: dateUtils.date(query.ennobledAtGTE.getTime()),
-            maxDate: dateUtils.date(query.ennobledAtLTE.getTime()),
+            value: query.ennobledAtGTE.display,
+            maxDate: query.ennobledAtLTE.display,
           },
           {
             id: 'ennobledAtLTE',
-            value: dateUtils.date(query.ennobledAtLTE.getTime()),
-            minDate: dateUtils.date(query.ennobledAtGTE.getTime()),
+            value: query.ennobledAtLTE.display,
+            minDate: query.ennobledAtGTE.display,
           },
         ].map(({ id, value, maxDate, minDate }) => {
           return (
@@ -86,7 +83,7 @@ function LatestSavedEnnoblements({ t, server }: Props) {
               showTodayButton
               onChange={d => {
                 setQuery({
-                  [id]: d ? dateUtils.zonedTimeToUTC(d) : undefined,
+                  [id]: d ? d : undefined,
                   page: 0,
                 });
               }}

src/libs/graphql/types.ts

@@ -139,6 +139,8 @@ export type EnnoblementFilter = {
   villageID?: number[];
   ennobledAtGTE?: Date | string;
   ennobledAtLTE?: Date | string;
+  ennobledAtGT?: Date | string;
+  ennobledAtLT?: Date | string;
 };
 
 export type EnnoblementsQueryVariables = QueryVariablesWithServer<

src/libs/serialize-query-params/DateTimeParam.ts

@@ -0,0 +1,47 @@
+import { QueryParamConfig } from 'use-query-params';
+import DateUtils from '@libs/date/DateUtils';
+import { getEncodedValue } from './helpers';
+
+type Decoded = {
+  display: Date;
+  server: Date;
+};
+
+export default class DateTimeParam
+  implements QueryParamConfig<Date, Decoded | undefined> {
+  private dateUtils: DateUtils;
+  constructor({ dateUtils }: { dateUtils: DateUtils }) {
+    this.dateUtils = dateUtils;
+  }
+
+  public newDecodedDate = (val: any): Decoded => {
+    return {
+      server: new Date(val),
+      display: this.dateUtils.date(val),
+    };
+  };
+
+  public encode = (
+    date: Date | null | undefined
+  ): string | null | undefined => {
+    if (!date) {
+      return undefined;
+    }
+
+    return this.dateUtils.zonedTimeToUTC(date).toISOString();
+  };
+
+  public decode = (
+    input: string | (string | null)[] | null | undefined
+  ): Decoded | undefined => {
+    const dateString = getEncodedValue(input);
+    if (dateString === null) return undefined;
+
+    const decoded = this.newDecodedDate(dateString);
+    if (isNaN(decoded.server.getTime()) || isNaN(decoded.server.getTime())) {
+      return undefined;
+    }
+
+    return decoded;
+  };
+}