import { motion } from 'framer-motion' ; import * as React from 'react' ; import { useMutation , useQueryClient } from 'react-query' ; import { checkout } from '~lib/actions' ; import { Checkin } from '~lib/db' ; import { useArea , useCheckins , useDelayedLoading } from '~lib/hooks' ; import { FixedBottomBar } from '~ui/blocks/BottomBar/BottomBar' ; import { CheckinCard , CheckinCardContainer } from '~ui/blocks/CheckinCard' ; import { LastCheckins } from '~ui/blocks/LastCheckins/LastCheckins' ; import { Loading } from '~ui/blocks/Loading' ; import { PastCheckin } from '~ui/blocks/PastCheckin/PastCheckin' ; import { Box , Callout , Text } from '~ui/core' ; import { MobileApp } from '~ui/layouts/MobileApp' ; import usePageLocale from '~locales/usePageLocale' ; export default function MyCheckinsPage ( ) { const { t } = usePageLocale ( 'my-checkins' ) ; const checkinsInfo = useCheckins ( ) ; const [ isLoading , setIsLoading ] = useDelayedLoading ( false ) ; const mutation = useMutation ( checkout ) ; const queryClient = useQueryClient ( ) ; const handleCheckout = React . useCallback ( async ( checkins ) => { setIsLoading ( true ) ; await Promise . all ( checkins . map ( ( checkin ) => mutation . mutate ( { queryClient , checkin : { id : checkin . id } } ) ) ) ; setIsLoading ( false ) ; } , [ setIsLoading , mutation , queryClient ] ) ; const sortedCheckins = React . useMemo ( ( ) => { return checkinsInfo . data ?. sort ( ( c1 , c2 ) => c1 . enteredAt . getTime ( ) - c2 . enteredAt . getTime ( ) ) ; } , [ checkinsInfo . data ] ) ; const groupedCheckins = React . useMemo ( ( ) => { return sortedCheckins ?. reduce ( ( result , checkin ) => { if ( ! checkin . proxyCheckin ) { result . unshift ( [ checkin ] ) ; } else { result [ 0 ] . push ( checkin ) ; } return result ; } , [ ] ) ; } , [ sortedCheckins ] ) ; const lastCheckin = React . useMemo ( ( ) => { if ( ! sortedCheckins ) { return ; } if ( sortedCheckins . length < 1 ) { return ; } return sortedCheckins [ sortedCheckins . length - 1 ] ; } , [ sortedCheckins ] ) ; const area = useArea ( lastCheckin ?. areaId ) ; return ( < MobileApp pageTitle = { t ( 'pageTitle' ) } logoVariant = "sticky" secondaryLogo = { area ?. data ?. affiliateLogo } > { checkinsInfo . status === 'success' && checkinsInfo . data . length === 0 && ( < Box my = { 10 } > < Text variant = "h2" as = "h2" color = "bluegrey.500" textAlign = "center" > { t ( 'noCheckinsYet' ) } < /Text> < /Box>)} < CheckinCardContainer > { groupedCheckins ?. map ( ( checkins , i ) => ( < motion . div key = { checkins [ 0 ] . id } initial = { { y : i < 25 ? window . innerHeight + i * - 50 : 0 , opacity : i !== 0 && i < 25 ? 0 : 1 , } } animate = { { y : 0 , opacity : 1 } } transition = { { type : 'spring' , mass : 3 , damping : i > 0 ? 30 : 25 , delay : i > 0 && 0.75 , } } > < CheckinCard css = { { flexGrow : i > 0 ? 0 : 1 } } > { i === 0 ? ( < > < Loading show = { isLoading } / > < LastCheckins checkins = { checkins } onCheckout = { handleCheckout } / > { mutation . error && ( < Callout variant = "danger" > < Text > { mutation . error instanceof TypeError ? ( < p > { t ( 'couldNotCheckinNoInternet' ) } < /p>) : (<p>{t('couldNotCheckin')}</p > ) } < p > { t ( 'couldNotCheckinWellCheckYouOut' ) } < /p> < /Text> < /Callout>)} < />) : (<PastCheckin t={t} checkins={checkins}/ > ) } < /CheckinCard> < /motion.div>))} < /CheckinCardContainer> < FixedBottomBar / > < /MobileApp>); }