add own version of the DateTimeParam
This commit is contained in:
parent
f708dd6c51
commit
d62fb59503
|
@ -1,13 +1,9 @@
|
||||||
import React, { useRef } from 'react';
|
import React, { useRef } from 'react';
|
||||||
import { useQuery } from '@apollo/client';
|
import { useQuery } from '@apollo/client';
|
||||||
import {
|
import { useQueryParams, NumberParam, withDefault } from 'use-query-params';
|
||||||
useQueryParams,
|
|
||||||
NumberParam,
|
|
||||||
withDefault,
|
|
||||||
DateTimeParam,
|
|
||||||
} from 'use-query-params';
|
|
||||||
import useDateUtils from '@libs/date/useDateUtils';
|
import useDateUtils from '@libs/date/useDateUtils';
|
||||||
import useScrollToElement from '@libs/useScrollToElement';
|
import useScrollToElement from '@libs/useScrollToElement';
|
||||||
|
import DateTimeParam from '@libs/serialize-query-params/DateTimeParam';
|
||||||
import { validateRowsPerPage } from '@common/Table/helpers';
|
import { validateRowsPerPage } from '@common/Table/helpers';
|
||||||
import { ENNOBLEMENTS } from './queries';
|
import { ENNOBLEMENTS } from './queries';
|
||||||
import { LIMIT } from './constants';
|
import { LIMIT } from './constants';
|
||||||
|
@ -29,12 +25,13 @@ export interface Props {
|
||||||
function LatestSavedEnnoblements({ t, server }: Props) {
|
function LatestSavedEnnoblements({ t, server }: Props) {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const dateUtils = useDateUtils();
|
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({
|
const [query, setQuery] = useQueryParams({
|
||||||
page: withDefault(NumberParam, 0),
|
page: withDefault(NumberParam, 0),
|
||||||
limit: withDefault(NumberParam, LIMIT),
|
limit: withDefault(NumberParam, LIMIT),
|
||||||
ennobledAtGTE: withDefault(DateTimeParam, new Date(0)),
|
ennobledAtGTE: withDefault(dateTimeParam, dateTimeParam.newDecodedDate(0)),
|
||||||
ennobledAtLTE: withDefault(DateTimeParam, now.current),
|
ennobledAtLTE: withDefault(dateTimeParam, now.current),
|
||||||
});
|
});
|
||||||
const limit = validateRowsPerPage(query.limit);
|
const limit = validateRowsPerPage(query.limit);
|
||||||
useScrollToElement(document.documentElement, [query.page, limit]);
|
useScrollToElement(document.documentElement, [query.page, limit]);
|
||||||
|
@ -48,8 +45,8 @@ function LatestSavedEnnoblements({ t, server }: Props) {
|
||||||
offset: query.page * limit,
|
offset: query.page * limit,
|
||||||
sort: ['ennobledAt DESC'],
|
sort: ['ennobledAt DESC'],
|
||||||
filter: {
|
filter: {
|
||||||
ennobledAtGTE: query.ennobledAtGTE,
|
ennobledAtGTE: query.ennobledAtGTE.server,
|
||||||
ennobledAtLTE: query.ennobledAtLTE,
|
ennobledAtLTE: query.ennobledAtLTE.server,
|
||||||
},
|
},
|
||||||
server,
|
server,
|
||||||
},
|
},
|
||||||
|
@ -64,13 +61,13 @@ function LatestSavedEnnoblements({ t, server }: Props) {
|
||||||
{[
|
{[
|
||||||
{
|
{
|
||||||
id: 'ennobledAtGTE',
|
id: 'ennobledAtGTE',
|
||||||
value: dateUtils.date(query.ennobledAtGTE.getTime()),
|
value: query.ennobledAtGTE.display,
|
||||||
maxDate: dateUtils.date(query.ennobledAtLTE.getTime()),
|
maxDate: query.ennobledAtLTE.display,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'ennobledAtLTE',
|
id: 'ennobledAtLTE',
|
||||||
value: dateUtils.date(query.ennobledAtLTE.getTime()),
|
value: query.ennobledAtLTE.display,
|
||||||
minDate: dateUtils.date(query.ennobledAtGTE.getTime()),
|
minDate: query.ennobledAtGTE.display,
|
||||||
},
|
},
|
||||||
].map(({ id, value, maxDate, minDate }) => {
|
].map(({ id, value, maxDate, minDate }) => {
|
||||||
return (
|
return (
|
||||||
|
@ -86,7 +83,7 @@ function LatestSavedEnnoblements({ t, server }: Props) {
|
||||||
showTodayButton
|
showTodayButton
|
||||||
onChange={d => {
|
onChange={d => {
|
||||||
setQuery({
|
setQuery({
|
||||||
[id]: d ? dateUtils.zonedTimeToUTC(d) : undefined,
|
[id]: d ? d : undefined,
|
||||||
page: 0,
|
page: 0,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -139,6 +139,8 @@ export type EnnoblementFilter = {
|
||||||
villageID?: number[];
|
villageID?: number[];
|
||||||
ennobledAtGTE?: Date | string;
|
ennobledAtGTE?: Date | string;
|
||||||
ennobledAtLTE?: Date | string;
|
ennobledAtLTE?: Date | string;
|
||||||
|
ennobledAtGT?: Date | string;
|
||||||
|
ennobledAtLT?: Date | string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type EnnoblementsQueryVariables = QueryVariablesWithServer<
|
export type EnnoblementsQueryVariables = QueryVariablesWithServer<
|
||||||
|
|
47
src/libs/serialize-query-params/DateTimeParam.ts
Normal file
47
src/libs/serialize-query-params/DateTimeParam.ts
Normal file
|
@ -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;
|
||||||
|
};
|
||||||
|
}
|
Reference in New Issue
Block a user