From cea8c2e9d30118348bc47aad3a79e2434ee5b447 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Tue, 24 Dec 2024 18:40:35 +0000 Subject: [PATCH] chore: final code review --- apps/site/components/Blog/BlogHeader/index.tsx | 14 ++++++-------- .../components/Common/AvatarGroup/Avatar/index.tsx | 3 +++ .../components/Common/ProgressionSidebar/index.tsx | 2 ++ .../components/Common/Skeleton/index.module.css | 6 +++--- apps/site/components/MDX/CodeTabs/index.tsx | 2 -- apps/site/components/withDownloadCategories.tsx | 6 +++--- apps/site/components/withProgressionSidebar.tsx | 4 +--- .../providers/__tests__/matterProvider.test.mjs | 3 +++ 8 files changed, 21 insertions(+), 19 deletions(-) diff --git a/apps/site/components/Blog/BlogHeader/index.tsx b/apps/site/components/Blog/BlogHeader/index.tsx index 11c3bc7ec9376..ae3de63c247e3 100644 --- a/apps/site/components/Blog/BlogHeader/index.tsx +++ b/apps/site/components/Blog/BlogHeader/index.tsx @@ -1,7 +1,5 @@ -'use client'; - import { RssIcon } from '@heroicons/react/24/solid'; -import { useTranslations } from 'next-intl'; +import { getTranslations } from 'next-intl/server'; import type { FC } from 'react'; import Link from '@/components/Link'; @@ -13,11 +11,11 @@ type BlogHeaderProps = { category: string; }; -const BlogHeader: FC = ({ category }) => { - const t = useTranslations(); - const currentFile = - siteConfig.rssFeeds.find(item => item.category === category)?.file ?? - 'blog.xml'; +const BlogHeader: FC = async ({ category }) => { + const t = await getTranslations(); + + const feed = siteConfig.rssFeeds.find(item => item.category === category); + const currentFile = feed ? feed.file : 'blog.xml'; return (
diff --git a/apps/site/components/Common/AvatarGroup/Avatar/index.tsx b/apps/site/components/Common/AvatarGroup/Avatar/index.tsx index 05f25b3fb1d93..3e7f98724cb80 100644 --- a/apps/site/components/Common/AvatarGroup/Avatar/index.tsx +++ b/apps/site/components/Common/AvatarGroup/Avatar/index.tsx @@ -16,6 +16,9 @@ export type AvatarProps = { url?: string; }; +// @TODO: We temporarily removed the Avatar Radix UI primitive, since it was causing flashing +// during initial load and not being able to render nicely when images are already cached. +// @see https://github.com/radix-ui/primitives/pull/3008 const Avatar = forwardRef< HTMLSpanElement, HTMLAttributes & AvatarProps diff --git a/apps/site/components/Common/ProgressionSidebar/index.tsx b/apps/site/components/Common/ProgressionSidebar/index.tsx index fde4076f4fcb9..2fdec5637c339 100644 --- a/apps/site/components/Common/ProgressionSidebar/index.tsx +++ b/apps/site/components/Common/ProgressionSidebar/index.tsx @@ -1,3 +1,5 @@ +'use client'; + import { useTranslations } from 'next-intl'; import type { ComponentProps, FC } from 'react'; import { useRef } from 'react'; diff --git a/apps/site/components/Common/Skeleton/index.module.css b/apps/site/components/Common/Skeleton/index.module.css index aa45bcd9326ef..389dc00ca4499 100644 --- a/apps/site/components/Common/Skeleton/index.module.css +++ b/apps/site/components/Common/Skeleton/index.module.css @@ -1,6 +1,7 @@ .skeleton { - @apply motion-safe:dark:animate-pulse-dark + @apply dark:animate-pulse-dark pointer-events-none + animate-pulse cursor-default select-none rounded-md @@ -8,8 +9,7 @@ bg-clip-border text-transparent shadow-none - outline-none - motion-safe:animate-pulse; + outline-none; } .skeleton[data-inline-skeleton] { diff --git a/apps/site/components/MDX/CodeTabs/index.tsx b/apps/site/components/MDX/CodeTabs/index.tsx index 76a5fb54409ce..9181715377a01 100644 --- a/apps/site/components/MDX/CodeTabs/index.tsx +++ b/apps/site/components/MDX/CodeTabs/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import * as TabsPrimitive from '@radix-ui/react-tabs'; import type { ComponentProps, FC, ReactElement } from 'react'; diff --git a/apps/site/components/withDownloadCategories.tsx b/apps/site/components/withDownloadCategories.tsx index bc9f97e9c96c2..ced8346b39d47 100644 --- a/apps/site/components/withDownloadCategories.tsx +++ b/apps/site/components/withDownloadCategories.tsx @@ -1,9 +1,9 @@ import { getLocale, getTranslations } from 'next-intl/server'; import type { FC, PropsWithChildren } from 'react'; +import { getClientContext } from '@/client-context'; import LinkTabs from '@/components/Common/LinkTabs'; import WithNodeRelease from '@/components/withNodeRelease'; -import { useClientContext } from '@/hooks/react-server'; import getDownloadSnippets from '@/next-data/downloadSnippets'; import getReleaseData from '@/next-data/releaseData'; import { defaultLocale } from '@/next.locales.mjs'; @@ -12,6 +12,7 @@ import type { NodeReleaseStatus } from '@/types'; import { getDownloadCategory, mapCategoriesToTabs } from '@/util/downloadUtils'; // By default the translated languages do not contain all the download snippets +// Hence we always merge any translated snippet with the fallbacks for missing snippets const fallbackSnippets = await getDownloadSnippets(defaultLocale.code); const WithDownloadCategories: FC = async ({ children }) => { @@ -20,8 +21,7 @@ const WithDownloadCategories: FC = async ({ children }) => { const releases = await getReleaseData(); const snippets = await getDownloadSnippets(locale); - // eslint-disable-next-line react-hooks/rules-of-hooks - const { pathname } = useClientContext(); + const { pathname } = getClientContext(); const { page, category, subCategory } = getDownloadCategory(pathname); const initialRelease: NodeReleaseStatus = pathname.includes('current') diff --git a/apps/site/components/withProgressionSidebar.tsx b/apps/site/components/withProgressionSidebar.tsx index 0a5e0565ca7e7..b71995a37c808 100644 --- a/apps/site/components/withProgressionSidebar.tsx +++ b/apps/site/components/withProgressionSidebar.tsx @@ -1,10 +1,8 @@ -'use client'; - import type { RichTranslationValues } from 'next-intl'; import type { FC } from 'react'; import ProgressionSidebar from '@/components/Common/ProgressionSidebar'; -import { useSiteNavigation } from '@/hooks/server'; +import { useSiteNavigation } from '@/hooks'; import type { NavigationKeys } from '@/types'; type WithProgressionSidebarProps = { diff --git a/apps/site/providers/__tests__/matterProvider.test.mjs b/apps/site/providers/__tests__/matterProvider.test.mjs index 0a90dc0fe0d77..4114da6537eeb 100644 --- a/apps/site/providers/__tests__/matterProvider.test.mjs +++ b/apps/site/providers/__tests__/matterProvider.test.mjs @@ -8,6 +8,9 @@ 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), architecture: '', bitness: 64,