From eb86aa99739bee5fae1b19f2ccc60f44da1324e0 Mon Sep 17 00:00:00 2001 From: ismail Date: Thu, 20 Jul 2023 13:45:30 +0300 Subject: [PATCH 1/2] Improve handling of time --- pages/_app.tsx | 11 ++++------- pages/_document.tsx | 5 +---- pages/checkout/[id].tsx | 5 ++--- pages/collection/[chainId]/[id].tsx | 7 +++---- pages/explore/explore.tsx | 11 +++++------ pages/index.tsx | 11 +++++------ pages/tokens/[id]/bid.tsx | 5 ++--- pages/tokens/[id]/index.tsx | 7 +++---- pages/tokens/[id]/offer.tsx | 12 ++---------- pages/users/[id]/bids/placed.tsx | 5 ++--- pages/users/[id]/bids/received.tsx | 7 +++---- pages/users/[id]/created.tsx | 7 +++---- pages/users/[id]/offers/auction.tsx | 5 ++--- pages/users/[id]/offers/fixed.tsx | 5 ++--- pages/users/[id]/on-sale.tsx | 7 +++---- pages/users/[id]/owned.tsx | 7 +++---- pages/users/[id]/trades/purchased.tsx | 5 ++--- pages/users/[id]/trades/sold.tsx | 5 ++--- 18 files changed, 49 insertions(+), 78 deletions(-) diff --git a/pages/_app.tsx b/pages/_app.tsx index 013c5032..a9b2a698 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,7 +1,7 @@ import { ApolloProvider } from '@apollo/client' import Bugsnag from '@bugsnag/js' import BugsnagPluginReact from '@bugsnag/plugin-react' -import { Box, ChakraProvider, useToast } from '@chakra-ui/react' +import { Box, ChakraProvider, useConst, useToast } from '@chakra-ui/react' import { LiteflowProvider } from '@liteflow/react' import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit' import '@rainbow-me/rainbowkit/styles.css' @@ -158,9 +158,10 @@ function AccountProvider(props: PropsWithChildren<{}>) { return {props.children} } -export type MyAppProps = { jwt: string | null; now: Date } +export type MyAppProps = { jwt: string | null } function MyApp({ Component, pageProps }: AppProps): JSX.Element { + const mountTime = useConst(() => new Date()) const router = useRouter() dayjs.locale(router.locale) usePageViews() @@ -228,7 +229,7 @@ function MyApp({ Component, pageProps }: AppProps): JSX.Element { > - + @@ -251,15 +252,11 @@ MyApp.getInitialProps = async ( appContext, )) as AppInitialProps<{}> // force type of props to empty object instead of any so TS will properly require MyAppProps to be returned by this function const jwt = appContext.ctx.req?.cookies?.[COOKIE_JWT_TOKEN] || null - // Generate the now time, rounded to the second to avoid re-rendering on the client - // TOFIX: find a better way to share the time between the app and document - const now = new Date(Math.floor(Date.now() / 1000) * 1000) return { ...initialProps, pageProps: { ...initialProps.pageProps, jwt, - now, }, } } diff --git a/pages/_document.tsx b/pages/_document.tsx index ef5199b3..c9db2a47 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -56,14 +56,11 @@ class MyDocument extends Document { const jwt = context.req?.cookies?.[COOKIE_JWT_TOKEN] || null // the `getClient` needs to be reset on every request as early as possible and before any rendering const apolloClient = getClient(jwt, true) - // Generate the now time, rounded to the second to avoid re-rendering on the client - // TOFIX: find a better way to share the time between the app and document - const now = new Date(Math.floor(Date.now() / 1000) * 1000) // properly type the AppTree with the props from MyApp const AppTree = context.AppTree as typeof context.AppTree & ComponentType> // This renders the page and wait for all requests to be resolved - await getDataFromTree() // This `defaultGetInitialProps` should be as late as possible and after the data are resolved by `getDataFromTree` + await getDataFromTree() // This `defaultGetInitialProps` should be as late as possible and after the data are resolved by `getDataFromTree` const initialProps = await context.defaultGetInitialProps(context) return { ...initialProps, diff --git a/pages/checkout/[id].tsx b/pages/checkout/[id].tsx index 22362af4..dc0c0b24 100644 --- a/pages/checkout/[id].tsx +++ b/pages/checkout/[id].tsx @@ -37,7 +37,7 @@ import useSigner from '../../hooks/useSigner' import SmallLayout from '../../layouts/small' type Props = { - now: string + now: Date } const CheckoutPage: NextPage = ({ now }) => { @@ -49,14 +49,13 @@ const CheckoutPage: NextPage = ({ now }) => { const { address } = useAccount() - const date = useMemo(() => new Date(now), [now]) const offerQuery = useCheckoutQuery({ variables: { id: offerId } }) const offer = offerQuery.data?.offer const assetQuery = useFetchAssetForCheckoutQuery({ variables: { - now: date, + now, address: address || '', chainId: offer?.asset.chainId || 0, collectionAddress: offer?.asset.collectionAddress || '', diff --git a/pages/collection/[chainId]/[id].tsx b/pages/collection/[chainId]/[id].tsx index 8db6e2e6..880792b1 100644 --- a/pages/collection/[chainId]/[id].tsx +++ b/pages/collection/[chainId]/[id].tsx @@ -54,7 +54,7 @@ import LargeLayout from '../../../layouts/large' import { removeEmptyFromObject } from '../../../utils' type Props = { - now: string + now: Date } const CollectionPage: FC = ({ now }) => { @@ -65,7 +65,6 @@ const CollectionPage: FC = ({ now }) => { const collectionAddress = useRequiredQueryParamSingle('id') const isSmall = useBreakpointValue({ base: true, md: false }) const { t } = useTranslation('templates') - const date = useMemo(() => new Date(now), [now]) const { address } = useAccount() const { data: collectionData, loading } = useFetchCollectionDetailsQuery({ variables: { @@ -82,13 +81,13 @@ const CollectionPage: FC = ({ now }) => { useFetchCollectionAssetsQuery({ variables: { collectionAddress, - now: date, + now, currentAccount: address || '', limit, offset, orderBy, chainId: chainId, - filter: convertFilterToAssetFilter(filter, date), + filter: convertFilterToAssetFilter(filter, now), }, }) diff --git a/pages/explore/explore.tsx b/pages/explore/explore.tsx index b88c3af6..28f3f9f5 100644 --- a/pages/explore/explore.tsx +++ b/pages/explore/explore.tsx @@ -16,7 +16,7 @@ import { NextPage } from 'next' import Trans from 'next-translate/Trans' import useTranslation from 'next-translate/useTranslation' import { useRouter } from 'next/router' -import { useCallback, useMemo } from 'react' +import { useCallback } from 'react' import Empty from '../../components/Empty/Empty' import ExploreTemplate from '../../components/Explore' import FilterAsset, { NoFilter } from '../../components/Filter/FilterAsset' @@ -51,31 +51,30 @@ import usePaginateQuery from '../../hooks/usePaginateQuery' import { removeEmptyFromObject } from '../../utils' type Props = { - now: string + now: Date } const ExplorePage: NextPage = ({ now }) => { const { query, pathname, push } = useRouter() const isSmall = useBreakpointValue({ base: true, md: false }) const { t } = useTranslation('templates') - const date = useMemo(() => new Date(now), [now]) const { address } = useAccount() const filter = useAssetFilterFromQuery() const orderBy = useOrderByQuery('CREATED_AT_DESC') const { page, limit, offset } = usePaginateQuery() const { data: assetsData, loading } = useFetchAllErc721And1155Query({ variables: { - now: date, + now, address: address || '', limit, offset, orderBy, - filter: convertFilterToAssetFilter(filter, date), + filter: convertFilterToAssetFilter(filter, now), }, }) const { data: totalCountData } = useFetchAllErc721And1155TotalCountQuery({ variables: { - filter: convertFilterToAssetFilter(filter, date), + filter: convertFilterToAssetFilter(filter, now), }, ssr: false, }) diff --git a/pages/index.tsx b/pages/index.tsx index 598c44dc..5603d494 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,22 +6,21 @@ import FeaturedHomeSection from 'components/HomeSection/Featured' import ResourcesHomeSection from 'components/HomeSection/Resources' import UsersHomeSection from 'components/HomeSection/Users' import { NextPage } from 'next' -import { useMemo } from 'react' import LargeLayout from '../layouts/large' type Props = { - now: number + now: Date } + const HomePage: NextPage = ({ now }) => { - const date = useMemo(() => new Date(now), [now]) return ( - + - - + + diff --git a/pages/tokens/[id]/bid.tsx b/pages/tokens/[id]/bid.tsx index 9f4045f4..4b2232e6 100644 --- a/pages/tokens/[id]/bid.tsx +++ b/pages/tokens/[id]/bid.tsx @@ -42,7 +42,7 @@ import useSigner from '../../../hooks/useSigner' import SmallLayout from '../../../layouts/small' type Props = { - now: string + now: Date } const BidPage: NextPage = ({ now }) => { @@ -53,11 +53,10 @@ const BidPage: NextPage = ({ now }) => { const { address } = useAccount() const assetId = useRequiredQueryParamSingle('id') - const date = useMemo(() => new Date(now), [now]) const { data, loading, previousData } = useBidOnAssetQuery({ variables: { id: assetId, - now: date, + now, address: address || '', }, }) diff --git a/pages/tokens/[id]/index.tsx b/pages/tokens/[id]/index.tsx index d0f081e0..2b30fa6a 100644 --- a/pages/tokens/[id]/index.tsx +++ b/pages/tokens/[id]/index.tsx @@ -65,7 +65,7 @@ import LargeLayout from '../../../layouts/large' import { formatError } from '../../../utils' type Props = { - now: string + now: Date } enum AssetTabs { @@ -89,13 +89,12 @@ const DetailPage: NextPage = ({ now: nowProp }) => { invariant(tokenId, 'tokenId is required') const chainId = parseInt(_chainId, 10) - const date = useMemo(() => new Date(nowProp), [nowProp]) const { data, refetch, loading, previousData } = useFetchAssetQuery({ variables: { chainId, collectionAddress, tokenId, - now: date, + now: nowProp, address: address || '', }, }) @@ -524,7 +523,7 @@ const DetailPage: NextPage = ({ now: nowProp }) => { {(!query.filter || query.filter === AssetTabs.bids) && ( = ({ now }) => { [assetId], ) - const date = useMemo(() => new Date(now), [now]) const { data, loading, previousData } = useOfferForAssetQuery({ variables: { chainId: chainId ? parseInt(chainId, 10) : 0, collectionAddress: collectionAddress || '', tokenId: tokenId || '', - now: date, + now, address: address || '', }, }) diff --git a/pages/users/[id]/bids/placed.tsx b/pages/users/[id]/bids/placed.tsx index c60798f1..6d7225f5 100644 --- a/pages/users/[id]/bids/placed.tsx +++ b/pages/users/[id]/bids/placed.tsx @@ -47,7 +47,7 @@ import LargeLayout from '../../../../layouts/large' import { dateFromNow, formatError } from '../../../../utils' type Props = { - now: string + now: Date } const BidPlacedPage: NextPage = ({ now }) => { @@ -62,7 +62,6 @@ const BidPlacedPage: NextPage = ({ now }) => { const userAddress = useRequiredQueryParamSingle('id') const ownerLoggedIn = useIsLoggedIn(userAddress) - const date = useMemo(() => new Date(now), [now]) const { data, refetch, loading, previousData } = useFetchUserBidsPlacedQuery({ variables: { address: userAddress, @@ -100,7 +99,7 @@ const BidPlacedPage: NextPage = ({ now }) => { return ( = ({ now }) => { @@ -62,7 +62,6 @@ const BidReceivedPage: NextPage = ({ now }) => { const userAddress = useRequiredQueryParamSingle('id') const ownerLoggedIn = useIsLoggedIn(userAddress) - const date = useMemo(() => new Date(now), [now]) const { data, refetch, loading, previousData } = useFetchUserBidsReceivedQuery({ variables: { @@ -70,7 +69,7 @@ const BidReceivedPage: NextPage = ({ now }) => { limit, offset, orderBy, - now: date, + now, }, }) @@ -103,7 +102,7 @@ const BidReceivedPage: NextPage = ({ now }) => { return ( = ({ now }) => { @@ -40,7 +40,6 @@ const CreatedPage: NextPage = ({ now }) => { const { address } = useAccount() const userAddress = useRequiredQueryParamSingle('id') - const date = useMemo(() => new Date(now), [now]) const { data, loading, previousData } = useFetchCreatedAssetsQuery({ variables: { address: userAddress, @@ -48,7 +47,7 @@ const CreatedPage: NextPage = ({ now }) => { limit, offset, orderBy, - now: date, + now, }, }) @@ -81,7 +80,7 @@ const CreatedPage: NextPage = ({ now }) => { return ( = ({ now }) => { @@ -63,7 +63,6 @@ const AuctionPage: NextPage = ({ now }) => { const userAddress = useRequiredQueryParamSingle('id') const ownerLoggedIn = useIsLoggedIn(userAddress) - const date = useMemo(() => new Date(now), [now]) const { data, refetch, loading, previousData } = useFetchUserAuctionsQuery({ variables: { address: userAddress, @@ -112,7 +111,7 @@ const AuctionPage: NextPage = ({ now }) => { return ( = ({ now }) => { @@ -60,7 +60,6 @@ const FixedPricePage: NextPage = ({ now }) => { const userAddress = useRequiredQueryParamSingle('id') const ownerLoggedIn = useIsLoggedIn(userAddress) - const date = useMemo(() => new Date(now), [now]) const { data, refetch, loading, previousData } = useFetchUserFixedPriceQuery({ variables: { address: userAddress, @@ -100,7 +99,7 @@ const FixedPricePage: NextPage = ({ now }) => { return ( = ({ now }) => { @@ -40,7 +40,6 @@ const OnSalePage: NextPage = ({ now }) => { const { address } = useAccount() const userAddress = useRequiredQueryParamSingle('id') - const date = useMemo(() => new Date(now), [now]) const { data, loading, previousData } = useFetchOnSaleAssetsQuery({ variables: { address: userAddress, @@ -48,7 +47,7 @@ const OnSalePage: NextPage = ({ now }) => { limit, offset, orderBy, - now: date, + now, }, }) @@ -81,7 +80,7 @@ const OnSalePage: NextPage = ({ now }) => { return ( = ({ now }) => { @@ -40,7 +40,6 @@ const OwnedPage: NextPage = ({ now }) => { const { address } = useAccount() const userAddress = useRequiredQueryParamSingle('id') - const date = useMemo(() => new Date(now), [now]) const { data, loading, previousData } = useFetchOwnedAssetsQuery({ variables: { address: userAddress, @@ -48,7 +47,7 @@ const OwnedPage: NextPage = ({ now }) => { limit, offset, orderBy, - now: date, + now, }, }) @@ -82,7 +81,7 @@ const OwnedPage: NextPage = ({ now }) => { return ( = ({ now }) => { @@ -60,7 +60,6 @@ const TradePurchasedPage: NextPage = ({ now }) => { const { address } = useAccount() const userAddress = useRequiredQueryParamSingle('id') - const date = useMemo(() => new Date(now), [now]) const { data, loading, previousData } = useFetchUserTradePurchasedQuery({ variables: { address: userAddress, @@ -86,7 +85,7 @@ const TradePurchasedPage: NextPage = ({ now }) => { return ( = ({ now }) => { @@ -57,7 +57,6 @@ const TradeSoldPage: NextPage = ({ now }) => { const { address } = useAccount() const userAddress = useRequiredQueryParamSingle('id') - const date = useMemo(() => new Date(now), [now]) const { data, loading, previousData } = useFetchUserTradeSoldQuery({ variables: { address: userAddress, @@ -82,7 +81,7 @@ const TradeSoldPage: NextPage = ({ now }) => { return ( Date: Thu, 7 Sep 2023 10:53:11 +0300 Subject: [PATCH 2/2] Merge prop fix --- pages/collection/[chainId]/[id].tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/collection/[chainId]/[id].tsx b/pages/collection/[chainId]/[id].tsx index 98e1191b..311565e1 100644 --- a/pages/collection/[chainId]/[id].tsx +++ b/pages/collection/[chainId]/[id].tsx @@ -103,7 +103,7 @@ const CollectionPage: FC = ({ now }) => { offset, orderBy, chainId: chainId, - filter: convertFilterToAssetFilter(filter, date), + filter: convertFilterToAssetFilter(filter, now), }, })