From 3acca715aad6ecacd384a7025fd6e65becccee5d Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Sat, 28 Dec 2024 02:10:05 +0000 Subject: [PATCH] chore: final improvements before PR merge --- .../Downloads/Release/PlatformDropdown.tsx | 6 +-- .../Release/PrebuiltDownloadButtons.tsx | 49 +++++++------------ .../Downloads/Release/ReleaseCodeBox.tsx | 2 +- .../__tests__/useDetectOS.test.mjs | 22 ++++----- apps/site/hooks/react-client/useDetectOS.ts | 6 ++- .../__tests__/matterProvider.test.mjs | 9 ++-- apps/site/reducers/releaseReducer.ts | 3 +- 7 files changed, 40 insertions(+), 57 deletions(-) diff --git a/apps/site/components/Downloads/Release/PlatformDropdown.tsx b/apps/site/components/Downloads/Release/PlatformDropdown.tsx index 419cb5f6b9a28..6acb57beb0872 100644 --- a/apps/site/components/Downloads/Release/PlatformDropdown.tsx +++ b/apps/site/components/Downloads/Release/PlatformDropdown.tsx @@ -57,12 +57,12 @@ const PlatformDropdown: FC = () => { ); return ( - + values={parsedPlatforms} - loading={release.os === 'LOADING'} + defaultValue={release.platform !== '' ? release.platform : undefined} + loading={release.os === 'LOADING' || release.platform === ''} placeholder={t('layouts.download.dropdown.unknown')} ariaLabel={t('layouts.download.dropdown.installMethod')} - defaultValue={release.platform} onChange={platform => platform && release.setPlatform(platform)} className="min-w-20" inline={true} diff --git a/apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx b/apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx index 8aee25d695491..8be309c5f46da 100644 --- a/apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx +++ b/apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx @@ -2,7 +2,7 @@ import { CloudArrowDownIcon } from '@heroicons/react/24/outline'; import { useTranslations } from 'next-intl'; -import { useContext, useMemo } from 'react'; +import { useContext } from 'react'; import type { FC } from 'react'; import Button from '@/components/Common/Button'; @@ -21,52 +21,37 @@ const PrebuiltDownloadButtons: FC = () => { const t = useTranslations(); const { release, os, platform } = useContext(ReleaseContext); - const { installerUrl, installerExt, binaryUrl, binaryExt } = useMemo(() => { - const installerUrl = getNodeDownloadUrl( - release.versionWithPrefix, - os, - platform || undefined, - 'installer' - ); + const installerUrl = platform + ? getNodeDownloadUrl(release.versionWithPrefix, os, platform, 'installer') + : ''; - const binaryUrl = getNodeDownloadUrl( - release.versionWithPrefix, - os, - platform || undefined, - 'binary' - ); - - return { - installerUrl, - binaryUrl, - installerExt: getExtension(installerUrl), - binaryExt: getExtension(binaryUrl), - }; - }, [os, platform, release.versionWithPrefix]); + const binaryUrl = platform + ? getNodeDownloadUrl(release.versionWithPrefix, os, platform, 'binary') + : ''; return (
- - - +
diff --git a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx index 105d91a53c4e5..8174d334c12bf 100644 --- a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx +++ b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx @@ -100,7 +100,7 @@ const ReleaseCodeBox: FC = () => { )} - + {parsedSnippets} diff --git a/apps/site/hooks/react-client/__tests__/useDetectOS.test.mjs b/apps/site/hooks/react-client/__tests__/useDetectOS.test.mjs index 214ab70a7c88a..41e683a44647e 100644 --- a/apps/site/hooks/react-client/__tests__/useDetectOS.test.mjs +++ b/apps/site/hooks/react-client/__tests__/useDetectOS.test.mjs @@ -23,7 +23,7 @@ describe('useDetectOS', () => { value: { userAgent: windowsUserAgent, userAgentData: { - getHighEntropyValues: jest.fn().mockResolvedValue({ bitness: 64 }), + getHighEntropyValues: jest.fn().mockResolvedValue({ bitness: '64' }), }, }, writable: true, @@ -34,17 +34,15 @@ describe('useDetectOS', () => { await waitFor(() => { expect(result.current).toStrictEqual({ os: 'WIN', - bitness: 64, - architecture: '', + bitness: '64', + architecture: 'x86', }); }); }); it('should detect WIN OS and 64 bitness from user agent', async () => { Object.defineProperty(global, 'navigator', { - value: { - userAgent: windowsUserAgent, - }, + value: { userAgent: windowsUserAgent }, writable: true, }); @@ -53,17 +51,15 @@ describe('useDetectOS', () => { await waitFor(() => { expect(result.current).toStrictEqual({ os: 'WIN', - bitness: 64, - architecture: '', + bitness: '64', + architecture: 'x86', }); }); }); it('should detect MAC OS and default bitness', async () => { Object.defineProperty(global, 'navigator', { - value: { - userAgent: macUserAgent, - }, + value: { userAgent: macUserAgent }, writable: true, }); @@ -72,8 +68,8 @@ describe('useDetectOS', () => { await waitFor(() => { expect(result.current).toStrictEqual({ os: 'MAC', - bitness: 64, - architecture: '', + bitness: '32', + architecture: 'x86', }); }); }); diff --git a/apps/site/hooks/react-client/useDetectOS.ts b/apps/site/hooks/react-client/useDetectOS.ts index 01d5e50f862ef..68854dee2abf5 100644 --- a/apps/site/hooks/react-client/useDetectOS.ts +++ b/apps/site/hooks/react-client/useDetectOS.ts @@ -25,6 +25,11 @@ const useDetectOS = () => { navigator.userAgent ); + // We immediately set the OS to LOADING, and then we update it with the detected OS. + // This is due to that initial render set within the state will indicate a mismatch from + // the server-side rendering versus what the initial state is from the client-side + setUserOSState(current => ({ ...current, os: detectOS() })); + // We attempt to get the high entropy values from the Browser and set the User OS State // based from the values we get from the Browser, if it fails we fallback to the User Agent // to determine the bitness and architecture of the User OS. @@ -37,7 +42,6 @@ const useDetectOS = () => { }) => { setUserOSState(current => ({ ...current, - os: detectOS(), bitness: bitness as UserBitness, architecture: architecture as UserArchitecture, })); diff --git a/apps/site/providers/__tests__/matterProvider.test.mjs b/apps/site/providers/__tests__/matterProvider.test.mjs index 4114da6537eeb..bfc0aba9faa74 100644 --- a/apps/site/providers/__tests__/matterProvider.test.mjs +++ b/apps/site/providers/__tests__/matterProvider.test.mjs @@ -8,18 +8,15 @@ const mockContext = { headings: [], readingTime: { text: '', minutes: 0, time: 0, words: 0 }, filename: '', - // @TODO: For some reason the initial value of the provider is flipping between - // LOADING and OTHER, although the initial state is LOADING, render() might be doing more - // than just initial rendering; This requires more investigation. - os: expect.any(String), + os: 'LOADING', architecture: '', - bitness: 64, + bitness: '', }; describe('MatterProvider', () => { it('renders the provider with the provided context value', () => { render( - + {value => { expect(value).toEqual(mockContext); diff --git a/apps/site/reducers/releaseReducer.ts b/apps/site/reducers/releaseReducer.ts index dc24e4db7ea2e..6b475f170e92c 100644 --- a/apps/site/reducers/releaseReducer.ts +++ b/apps/site/reducers/releaseReducer.ts @@ -9,7 +9,8 @@ export const releaseState: Types.ReleaseState = { // Until the User's OS is detected (or failed to be detected) os: 'LOADING', // The detected User Platform from a combination of Bitness and Architecture - platform: '', + // We set the default value to `x64` as it is the most common platform for modern systems + platform: 'x64', // The selected installation method when not choosing an installer or prebuilt binary installMethod: '', // The package manager field is always set by default to `NPM`