Improve handling of time

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 <ApolloProvider client={client}>{props.children}</ApolloProvider>
 }
 
-export type MyAppProps = { jwt: string | null; now: Date }
+export type MyAppProps = { jwt: string | null }
 
 function MyApp({ Component, pageProps }: AppProps<MyAppProps>): JSX.Element {
+  const mountTime = useConst(() => new Date())
   const router = useRouter()
   dayjs.locale(router.locale)
   usePageViews()
@@ -228,7 +229,7 @@ function MyApp({ Component, pageProps }: AppProps<MyAppProps>): JSX.Element {
               >
                 <AccountProvider>
                   <Layout>
-                    <Component {...pageProps} />
+                    <Component {...pageProps} now={mountTime} />
                   </Layout>
                 </AccountProvider>
               </LiteflowProvider>
@@ -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,
     },
   }
 }

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<AppInitialProps<MyAppProps>>
     // This renders the page and wait for all requests to be resolved
-    await getDataFromTree(<AppTree pageProps={{ jwt, now }} />) // This `defaultGetInitialProps` should be as late as possible and after the data are resolved by `getDataFromTree`
+    await getDataFromTree(<AppTree pageProps={{ jwt }} />) // This `defaultGetInitialProps` should be as late as possible and after the data are resolved by `getDataFromTree`
     const initialProps = await context.defaultGetInitialProps(context)
     return {
       ...initialProps,

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<Props> = ({ now }) => {
@@ -49,14 +49,13 @@ const CheckoutPage: NextPage<Props> = ({ 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 || '',

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<Props> = ({ now }) => {
@@ -65,7 +65,6 @@ const CollectionPage: FC<Props> = ({ 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<Props> = ({ now }) => {
     useFetchCollectionAssetsQuery({
       variables: {
         collectionAddress,
-        now: date,
+        now,
         currentAccount: address || '',
         limit,
         offset,
         orderBy,
         chainId: chainId,
-        filter: convertFilterToAssetFilter(filter, date),
+        filter: convertFilterToAssetFilter(filter, now),
       },
     })
 

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<Props> = ({ 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<AssetsOrderBy>('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,
   })

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<Props> = ({ now }) => {
-  const date = useMemo(() => new Date(now), [now])
   return (
     <LargeLayout>
       <Stack spacing={12}>
-        <FeaturedHomeSection date={date} />
+        <FeaturedHomeSection date={now} />
         <CollectionsHomeSection />
         <UsersHomeSection />
-        <AuctionsHomeSection date={date} />
-        <AssetsHomeSection date={date} />
+        <AuctionsHomeSection date={now} />
+        <AssetsHomeSection date={now} />
         <ResourcesHomeSection />
       </Stack>
     </LargeLayout>

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<Props> = ({ now }) => {
@@ -53,11 +53,10 @@ const BidPage: NextPage<Props> = ({ 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 || '',
     },
   })

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<Props> = ({ 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<Props> = ({ now: nowProp }) => {
               <Box h={96} overflowY="auto" py={6}>
                 {(!query.filter || query.filter === AssetTabs.bids) && (
                   <BidList
-                    now={date}
+                    now={nowProp}
                     chainId={chainId}
                     collectionAddress={collectionAddress}
                     tokenId={tokenId}

pages/tokens/[id]/offer.tsx

@@ -47,14 +47,7 @@ import SmallLayout from '../../../layouts/small'
 import { isSameAddress } from '../../../utils'
 
 type Props = {
-  assetId: string
-  now: string
-  currentAccount: string | null
-  meta: {
-    title: string
-    description: string
-    image: string
-  }
+  now: Date
 }
 
 enum SaleType {
@@ -81,13 +74,12 @@ const OfferPage: NextPage<Props> = ({ 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 || '',
     },
   })

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<Props> = ({ now }) => {
@@ -62,7 +62,6 @@ const BidPlacedPage: NextPage<Props> = ({ 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<Props> = ({ now }) => {
   return (
     <LargeLayout>
       <UserProfileTemplate
-        now={date}
+        now={now}
         signer={signer}
         currentAccount={address}
         address={userAddress}

pages/users/[id]/bids/received.tsx

@@ -47,7 +47,7 @@ import LargeLayout from '../../../../layouts/large'
 import { dateFromNow, formatError } from '../../../../utils'
 
 type Props = {
-  now: string
+  now: Date
 }
 
 const BidReceivedPage: NextPage<Props> = ({ now }) => {
@@ -62,15 +62,14 @@ const BidReceivedPage: NextPage<Props> = ({ now }) => {
   const userAddress = useRequiredQueryParamSingle('id')
   const ownerLoggedIn = useIsLoggedIn(userAddress)
 
-  const date = useMemo(() => new Date(now), [now])
   const { data, refetch, loading, previousData } =
     useFetchUserBidsReceivedQuery({
       variables: {
         address: userAddress,
         limit,
         offset,
         orderBy,
-        now: date,
+        now,
       },
     })
 
@@ -103,7 +102,7 @@ const BidReceivedPage: NextPage<Props> = ({ now }) => {
   return (
     <LargeLayout>
       <UserProfileTemplate
-        now={date}
+        now={now}
         signer={signer}
         currentAccount={address}
         address={userAddress}

pages/users/[id]/created.tsx

@@ -27,7 +27,7 @@ import useSigner from '../../../hooks/useSigner'
 import LargeLayout from '../../../layouts/large'
 
 type Props = {
-  now: string
+  now: Date
 }
 
 const CreatedPage: NextPage<Props> = ({ now }) => {
@@ -40,15 +40,14 @@ const CreatedPage: NextPage<Props> = ({ now }) => {
   const { address } = useAccount()
   const userAddress = useRequiredQueryParamSingle('id')
 
-  const date = useMemo(() => new Date(now), [now])
   const { data, loading, previousData } = useFetchCreatedAssetsQuery({
     variables: {
       address: userAddress,
       currentAddress: address || '',
       limit,
       offset,
       orderBy,
-      now: date,
+      now,
     },
   })
 
@@ -81,7 +80,7 @@ const CreatedPage: NextPage<Props> = ({ now }) => {
   return (
     <LargeLayout>
       <UserProfileTemplate
-        now={date}
+        now={now}
         signer={signer}
         currentAccount={address}
         address={userAddress}