Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: migrate from useOnMount to Suspense #191

Merged
merged 2 commits into from
Jun 6, 2024
Merged

refactor: migrate from useOnMount to Suspense #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
429e479
refactor: migrate from `useOnMount` to `Suspense`
resir014 May 17, 2024
ab5247c
refactor: remove `import * as React` statement from tests
resir014 Jun 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions src/lib/hooks/use-on-mount.ts
View file
Open in desktop

This file was deleted.

25 changes: 5 additions & 20 deletions src/modules/bottom-bar/bottom-bar-clock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
import { createStyleObject } from '@capsizecss/core';
import fontMetrics from '@capsizecss/metrics/inter';
import { format } from 'date-fns';
import { useState } from 'react';
import { useClock } from '~/lib/hooks/use-clock';
import { useOnMount } from '~/lib/hooks/use-on-mount';

const styles = createStyleObject({
capHeight: 18,
Expand All @@ -15,23 +13,10 @@ const styles = createStyleObject({

export function BottomBarClock() {
const time = useClock();
const [mounted, setMounted] = useState<boolean>(false);

useOnMount(() => {
setMounted(true);
});

const renderClock = () => {
if (mounted) {
return (
<div className="flex items-center justify-center w-[96px] h-[32px] py-1 text-chungking-black bg-chungking-white rounded-full leading-none font-bold">
<span style={styles}>{format(time, 'HH:mm')}</span>
</div>
);
}

return null;
};

return <div className="flex items-center pl-4 text-right space-x-2">{renderClock()}</div>;
return (
<div className="flex items-center justify-center w-[96px] h-[32px] py-1 text-chungking-black bg-chungking-white rounded-full leading-none font-bold">
<span style={styles}>{format(time, 'HH:mm')}</span>
</div>
);
}
13 changes: 12 additions & 1 deletion src/modules/bottom-bar/bottom-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,23 @@
import { Suspense } from 'react';
import { BottomBarEvents } from './bottom-bar-events';
import { BottomBarClock } from './bottom-bar-clock';

function BottomBarClockFallback() {
return (
<div className="flex items-center justify-center w-[96px] h-[32px] bg-chungking-white rounded-full" />
);
}

export function BottomBar() {
return (
<div className="grid grid-cols-bottom-bar w-full h-full text-chungking-white bg-chungking-black border-t-2 border-chungking-white max-h-[64px]">
<BottomBarEvents />
<div className="flex items-center justify-end px-12">
<BottomBarClock />
<div className="flex items-center pl-4 text-right space-x-2">
<Suspense fallback={<BottomBarClockFallback />}>
<BottomBarClock />
</Suspense>
</div>
</div>
</div>
);
Expand Down
1 change: 0 additions & 1 deletion src/modules/flightsim/__tests__/flight-itinerary.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import * as React from 'react';
import { render } from '@testing-library/react';
import { FlightItinerary } from '../flight-itinerary';

Expand Down
1 change: 0 additions & 1 deletion src/modules/flightsim/__tests__/flight-progress.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import * as React from 'react';
import { render } from '@testing-library/react';
import { FlightProgress } from '../flight-progress';

Expand Down
89 changes: 30 additions & 59 deletions src/modules/pre-stream/pre-stream-deep-dip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import { Suspense } from 'react';
import clsx from 'clsx';
import { useOnMount } from '~/lib/hooks/use-on-mount';
import { DeepDip2Leaderboard } from '../deep-dip/leaderboard';
import { SceneWrapper } from '../scenes/scene-wrapper';
import { DD2Logo } from '../deep-dip/dd2-logo';
Expand All @@ -11,46 +10,7 @@ import { PrestreamCountdown } from './pre-stream-countdown';
import { PrestreamDate } from './pre-stream-date';

export function PreStreamDeepDipScene({ headerText, variant }: PreStreamSceneProps) {
const [isClientReady, setIsClientReady] = React.useState(false);

useOnMount(() => {
setIsClientReady(true);
});

const renderCountdown = (format?: string) => {
if (isClientReady) {
if (variant === 'pre-stream' || variant === 'pre-stream-cerveza') {
return (
<div className="flex items-center justify-center w-full p-4 rounded-md bg-chungking-blue-500">
<PrestreamCountdown
className="text-8xl leading-none text-chungking-white font-bold tabular-nums helper-alternate-digits"
timeFormat={format}
/>
</div>
);
}

return null;
}

return null;
};

const renderDateTime = () => {
if (isClientReady) {
return (
<div className="flex items-center justify-center space-x-2 w-full p-4 rounded-md bg-chungking-white">
<PrestreamDate
className="text-4xl leading-none text-chungking-black font-bold"
dateFormat="EEEE"
/>
<PrestreamDate className="text-4xl leading-none text-chungking-black" />
</div>
);
}

return null;
};
const isPrestream = variant === 'pre-stream' || variant === 'pre-stream-cerveza';

const getColorClassName = () => {
switch (variant) {
Expand All @@ -73,31 +33,30 @@ export function PreStreamDeepDipScene({ headerText, variant }: PreStreamScenePro
}
};

const renderWipeUpperLayer = () => {
if (isClientReady) {
return <PreStreamWipeUpperLayer variant={variant} />;
}
};

const renderWipeLowerLayer = () => {
if (isClientReady) {
return <PreStreamWipeLowerLayer className={getColorClassName()} variant={variant} />;
}
};

return (
<SceneWrapper>
<div className="grid grid-rows-scene-wrapper grid-cols-1 flex-1">
<div className="grid w-full relative">
<div className="absolute top-0 left-0 w-full h-full z-30">{renderWipeUpperLayer()}</div>
<div className="absolute top-0 left-0 w-full h-full z-30">
<Suspense>
<PreStreamWipeUpperLayer variant={variant} />
</Suspense>
</div>
<div className="grid grid-cols-12 gap-3 pt-[96px] pb-12 px-[128px] z-20">
<div className="flex flex-col items-start justify-between col-span-4 bg-chungking-black/90 rounded-lg">
<div className="flex flex-col items-center w-full space-y-4 px-6 pt-12">
<DD2Logo height={144} />
</div>
<div className="flex flex-col space-y-3 w-full px-6 pb-6">
{variant === 'pre-stream' ? (
renderCountdown('mm:ss')
{isPrestream ? (
<Suspense>
<div className="flex items-center justify-center w-full p-4 rounded-md bg-chungking-blue-500">
<PrestreamCountdown
className="text-8xl leading-none text-chungking-white font-bold tabular-nums helper-alternate-digits"
timeFormat="mm:ss"
/>
</div>
</Suspense>
) : (
<div
className={clsx(
Expand All @@ -108,12 +67,24 @@ export function PreStreamDeepDipScene({ headerText, variant }: PreStreamScenePro
<span className="text-4xl leading-none font-bold">{headerText}</span>
</div>
)}
{renderDateTime()}
<Suspense>
<div className="flex items-center justify-center space-x-2 w-full p-4 rounded-md bg-chungking-white">
<PrestreamDate
className="text-4xl leading-none text-chungking-black font-bold"
dateFormat="EEEE"
/>
<PrestreamDate className="text-4xl leading-none text-chungking-black" />
</div>
</Suspense>
</div>
</div>
<DeepDip2Leaderboard className="col-span-8" />
</div>
<div className="absolute top-0 left-0 w-full h-full z-10">{renderWipeLowerLayer()}</div>
<div className="absolute top-0 left-0 w-full h-full z-10">
<Suspense>
<PreStreamWipeLowerLayer className={getColorClassName()} variant={variant} />
</Suspense>
</div>
</div>
</div>
</SceneWrapper>
Expand Down
99 changes: 43 additions & 56 deletions src/modules/pre-stream/pre-stream-scene.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
/* eslint-disable no-negated-condition */
'use client';

import * as React from 'react';
import { useOnMount } from '~/lib/hooks/use-on-mount';
import { Suspense } from 'react';
import { SceneWrapper } from '../scenes/scene-wrapper';
import { useCurrentStream } from './utils/stream-schedule';
import { PrestreamCountdown } from './pre-stream-countdown';
Expand All @@ -17,12 +13,9 @@ export interface PreStreamSceneProps {
}

export function PreStreamScene({ headerText, variant = 'pre-stream' }: PreStreamSceneProps) {
const [isClientReady, setIsClientReady] = React.useState(false);
const { currentStream } = useCurrentStream();

useOnMount(() => {
setIsClientReady(true);
});
const isPrestream = variant === 'pre-stream' || variant === 'pre-stream-cerveza';

const getColorClassName = () => {
switch (variant) {
Expand All @@ -45,57 +38,38 @@ export function PreStreamScene({ headerText, variant = 'pre-stream' }: PreStream
}
};

const renderCountdown = (format?: string) => {
if (isClientReady) {
if (variant === 'pre-stream' || variant === 'pre-stream-cerveza') {
return (
<PrestreamCountdown
className="text-[216px] leading-none text-chungking-white font-bold tabular-nums helper-alternate-digits"
timeFormat={format}
/>
);
}

return null;
}

return null;
};

const renderDateTime = () => {
if (isClientReady) {
return (
<div className="flex flex-col space-y-2">
<PrestreamDate className="text-4xl leading-none text-chungking-white" dateFormat="EEEE" />
<PrestreamDate className="text-4xl leading-none text-chungking-white font-bold" />
</div>
);
}

return null;
};

const renderWipeUpperLayer = () => {
if (isClientReady) {
return <PreStreamWipeUpperLayer variant={variant} />;
}
};

const renderWipeLowerLayer = () => {
if (isClientReady) {
return <PreStreamWipeLowerLayer className={getColorClassName()} variant={variant} />;
}
};

return (
<SceneWrapper>
<div className="grid grid-rows-scene-wrapper grid-cols-1 flex-1">
<div className="grid w-full relative">
<div className="absolute top-0 left-0 w-full h-full z-30">{renderWipeUpperLayer()}</div>
<div className="absolute top-0 left-0 w-full h-full z-30">
<Suspense>
<PreStreamWipeUpperLayer variant={variant} />
</Suspense>
</div>
<div className="grid grid-cols-3 gap-8 w-full pt-[96px] pb-[24px] px-[128px] z-20">
<div className="flex flex-col justify-center relative">
<div className="flex flex-1 items-center">{renderDateTime()}</div>
<div className="flex flex-col absolute bottom-6 left-0">{renderCountdown('mm')}</div>
<div className="flex flex-1 items-center">
<Suspense>
<div className="flex flex-col space-y-2">
<PrestreamDate
className="text-4xl leading-none text-chungking-white"
dateFormat="EEEE"
/>
<PrestreamDate className="text-4xl leading-none text-chungking-white font-bold" />
</div>
</Suspense>
</div>
<div className="flex flex-col absolute bottom-6 left-0">
{isPrestream ? (
<Suspense>
<PrestreamCountdown
className="text-[216px] leading-none text-chungking-white font-bold tabular-nums helper-alternate-digits"
timeFormat="mm"
/>
</Suspense>
) : null}
</div>
</div>
<div className="flex flex-col col-span-2 justify-center relative">
<div className="flex flex-1 items-center">
Expand All @@ -106,10 +80,23 @@ export function PreStreamScene({ headerText, variant = 'pre-stream' }: PreStream
</span>
</div>
</div>
<div className="flex flex-col absolute bottom-6 left-0">{renderCountdown('ss')}</div>
<div className="flex flex-col absolute bottom-6 left-0">
{isPrestream ? (
<Suspense>
<PrestreamCountdown
className="text-[216px] leading-none text-chungking-white font-bold tabular-nums helper-alternate-digits"
timeFormat="ss"
/>
</Suspense>
) : null}
</div>
</div>
</div>
<div className="absolute top-0 left-0 w-full h-full z-10">{renderWipeLowerLayer()}</div>
<div className="absolute top-0 left-0 w-full h-full z-10">
<Suspense>
<PreStreamWipeLowerLayer className={getColorClassName()} variant={variant} />
</Suspense>
</div>
</div>
</div>
</SceneWrapper>
Expand Down
14 changes: 5 additions & 9 deletions src/pages/blocks/countdown-timer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
'use client';

import { useRouter } from 'next/router';
import { useMemo, useState } from 'react';
import { Suspense, useMemo } from 'react';
import Countdown from 'react-countdown';
import { OverlayLayout } from '~/layouts/overlay-layout';
import { useOnMount } from '~/lib/hooks/use-on-mount';
import { parseNumber } from '~/lib/query-parser';

export default function CountdownTimerPage() {
const router = useRouter();
const [isCountdownRendered, setIsCountdownRendered] = useState(false);

useOnMount(() => {
setIsCountdownRendered(true);
});

const minutes = useMemo(
() => (parseNumber(router.query.minutes) ?? 1) * 60 * 1000,
Expand All @@ -21,7 +17,7 @@ export default function CountdownTimerPage() {
return (
<OverlayLayout>
<div>
{isCountdownRendered ? (
<Suspense>
<Countdown
date={Date.now() + minutes}
precision={3}
Expand All @@ -32,7 +28,7 @@ export default function CountdownTimerPage() {
</p>
)}
/>
) : null}
</Suspense>
</div>
</OverlayLayout>
);
Expand Down
Loading
Loading