🐛 fix: fix discover ssr hydration error (#5605)

* fix assistant page ssr error * refactor useSearchParams * refactor to fix discover ssr error
lobehub · Jan 27, 2025 · e3702a6 · e3702a6
1 parent 3c54b72
commit e3702a6
Show file tree

Hide file tree

Showing 10 changed files with 242 additions and 178 deletions.
diff --git a/src/app/(main)/discover/(list)/(home)/features/AssistantList.tsx b/src/app/(main)/discover/(list)/(home)/features/AssistantList.tsx
@@ -1,5 +1,4 @@
 import { Grid } from '@lobehub/ui';
-import Link from 'next/link';
 import { memo } from 'react';
 import urlJoin from 'url-join';
 
@@ -11,14 +10,21 @@ const AssistantList = memo<{ data: DiscoverAssistantItem[] }>(({ data }) => {
   return (
     <Grid maxItemWidth={280} rows={4}>
       {data.slice(0, 8).map((item) => (
-        <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
-          <Card showCategory {...item} />
-        </Link>
+        <Card
+          href={urlJoin('/discover/assistant/', item.identifier)}
+          key={item.identifier}
+          showCategory
+          {...item}
+        />
       ))}
       {data.slice(8, 16).map((item) => (
-        <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
-          <Card showCategory variant={'compact'} {...item} />
-        </Link>
+        <Card
+          href={urlJoin('/discover/assistant/', item.identifier)}
+          key={item.identifier}
+          showCategory
+          variant={'compact'}
+          {...item}
+        />
       ))}
     </Grid>
   );

diff --git a/src/app/(main)/discover/(list)/(home)/features/ModelList.tsx b/src/app/(main)/discover/(list)/(home)/features/ModelList.tsx
@@ -1,5 +1,4 @@
 import { Grid } from '@lobehub/ui';
-import Link from 'next/link';
 import { memo } from 'react';
 import urlJoin from 'url-join';
 
@@ -11,9 +10,7 @@ const ModelList = memo<{ data: DiscoverModelItem[] }>(({ data }) => {
   return (
     <Grid maxItemWidth={280} rows={4}>
       {data.map((item) => (
-        <Link href={urlJoin('/discover/model/', item.identifier)} key={item.identifier}>
-          <Card {...item} />
-        </Link>
+        <Card {...item} href={urlJoin('/discover/model/', item.identifier)} key={item.identifier} />
       ))}
     </Grid>
   );

diff --git a/src/app/(main)/discover/(list)/(home)/features/PluginList.tsx b/src/app/(main)/discover/(list)/(home)/features/PluginList.tsx
@@ -1,5 +1,4 @@
 import { Grid } from '@lobehub/ui';
-import Link from 'next/link';
 import { memo } from 'react';
 import urlJoin from 'url-join';
 
@@ -11,9 +10,13 @@ const PluginList = memo<{ data: DiscoverPlugintem[] }>(({ data }) => {
   return (
     <Grid maxItemWidth={280} rows={4}>
       {data.map((item) => (
-        <Link href={urlJoin('/discover/plugin/', item.identifier)} key={item.identifier}>
-          <Card showCategory variant={'compact'} {...item} />
-        </Link>
+        <Card
+          showCategory
+          variant={'compact'}
+          {...item}
+          href={urlJoin('/discover/plugin/', item.identifier)}
+          key={item.identifier}
+        />
       ))}
     </Grid>
   );

diff --git a/src/app/(main)/discover/(list)/assistants/features/Card.tsx b/src/app/(main)/discover/(list)/assistants/features/Card.tsx
@@ -3,6 +3,7 @@ import { Skeleton, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { startCase } from 'lodash-es';
 import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
 import qs from 'query-string';
 import { CSSProperties, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
@@ -26,8 +27,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     opacity: ${isDarkMode ? 0.9 : 0.4};
   `,
   container: css`
-    cursor: pointer;
-
     position: relative;
 
     overflow: hidden;
@@ -64,18 +63,19 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 export interface AssistantCardProps
   extends Omit<DiscoverAssistantItem, 'suggestions' | 'socialData' | 'config'> {
   className?: string;
+  href: string;
   showCategory?: boolean;
   style?: CSSProperties;
   variant?: 'default' | 'compact';
 }
 
 const AssistantCard = memo<AssistantCardProps>(
-  ({ showCategory, className, meta, createdAt, author, variant, style }) => {
+  ({ showCategory, className, meta, createdAt, author, variant, style, href }) => {
     const { avatar, title, description, tags = [], category } = meta;
     const { cx, styles, theme } = useStyles();
     const categoryItem = useCategoryItem(category, 12);
     const isCompact = variant === 'compact';
-
+    const router = useRouter();
     const user = (
       <Flexbox
         align={'center'}
@@ -90,60 +90,79 @@ const AssistantCard = memo<AssistantCardProps>(
 
     return (
       <Flexbox className={cx(styles.container, className)} gap={24} style={style}>
-        {!isCompact && <CardBanner avatar={avatar} />}
-        <Flexbox gap={12} padding={16}>
-          <Flexbox
-            align={isCompact ? 'flex-start' : 'flex-end'}
-            gap={16}
-            horizontal
-            justify={'space-between'}
-            style={{ position: 'relative' }}
-            width={'100%'}
+        {!isCompact && (
+          <div
+            onClick={() => {
+              router.push(href);
+            }}
           >
-            <Flexbox
-              gap={8}
-              style={{ overflow: 'hidden', paddingTop: isCompact ? 4 : 0, position: 'relative' }}
-            >
-              <Title
-                className={styles.title}
-                ellipsis={{ rows: 1, tooltip: title }}
-                level={3}
-                style={{ fontSize: isCompact ? 16 : 18 }}
-              >
-                {title}
-              </Title>
-              {isCompact && user}
-            </Flexbox>
-            {isCompact ? (
-              <Avatar avatar={avatar} size={40} style={{ display: 'block' }} title={title} />
-            ) : (
-              <Center
-                flex={'none'}
-                height={64}
-                style={{
-                  background: theme.colorBgContainer,
-                  borderRadius: '50%',
-                  marginTop: -6,
-                  overflow: 'hidden',
-                  zIndex: 2,
-                }}
-                width={64}
+            <CardBanner avatar={avatar} />
+          </div>
+        )}
+        <Flexbox gap={12} padding={16}>
+          <Link href={href}>
+            <Flexbox gap={12}>
+              <Flexbox
+                align={isCompact ? 'flex-start' : 'flex-end'}
+                gap={16}
+                horizontal
+                justify={'space-between'}
+                style={{ position: 'relative' }}
+                width={'100%'}
               >
-                <Avatar avatar={avatar} size={56} style={{ display: 'block' }} title={title} />
-              </Center>
-            )}
-          </Flexbox>
-          {!isCompact && (
-            <Flexbox gap={8} horizontal style={{ fontSize: 12 }}>
-              {user}
-              <time className={styles.time} dateTime={new Date(createdAt).toISOString()}>
-                {createdAt}
-              </time>
+                <Flexbox
+                  gap={8}
+                  style={{
+                    overflow: 'hidden',
+                    paddingTop: isCompact ? 4 : 0,
+                    position: 'relative',
+                  }}
+                >
+                  <Title
+                    className={styles.title}
+                    ellipsis={{ rows: 1, tooltip: title }}
+                    level={3}
+                    style={{ fontSize: isCompact ? 16 : 18 }}
+                  >
+                    {title}
+                  </Title>
+                  {isCompact && user}
+                </Flexbox>
+
+                {isCompact ? (
+                  <Avatar avatar={avatar} size={40} style={{ display: 'block' }} title={title} />
+                ) : (
+                  <Center
+                    flex={'none'}
+                    height={64}
+                    style={{
+                      background: theme.colorBgContainer,
+                      borderRadius: '50%',
+                      marginTop: -6,
+                      overflow: 'hidden',
+                      zIndex: 2,
+                    }}
+                    width={64}
+                  >
+                    <Avatar avatar={avatar} size={56} style={{ display: 'block' }} title={title} />
+                  </Center>
+                )}
+              </Flexbox>
+
+              {!isCompact && (
+                <Flexbox gap={8} horizontal style={{ fontSize: 12 }}>
+                  {user}
+                  <time className={styles.time} dateTime={new Date(createdAt).toISOString()}>
+                    {createdAt}
+                  </time>
+                </Flexbox>
+              )}
+              <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
+                {description}
+              </Paragraph>
             </Flexbox>
-          )}
-          <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
-            {description}
-          </Paragraph>
+          </Link>
+
           <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
             {showCategory && categoryItem ? (
               <Link href={urlJoin('/discover/assistants', categoryItem.key)}>

diff --git a/src/app/(main)/discover/(list)/assistants/features/List.tsx b/src/app/(main)/discover/(list)/assistants/features/List.tsx
@@ -2,7 +2,6 @@
 
 import { Grid } from '@lobehub/ui';
 import { Empty } from 'antd';
-import Link from 'next/link';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
@@ -42,9 +41,13 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
           data={all}
           initialItemCount={24}
           itemContent={(_, item) => (
-            <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
-              <Card showCategory variant={'compact'} {...item} />
-            </Link>
+            <Card
+              href={urlJoin('/discover/assistant/', item.identifier)}
+              key={item.identifier}
+              showCategory
+              variant={'compact'}
+              {...item}
+            />
           )}
           style={{
             minHeight: '75vh',
@@ -59,9 +62,12 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
       <Title>{t('assistants.recentSubmits')}</Title>
       <Grid maxItemWidth={280} rows={4}>
         {recent.map((item) => (
-          <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
-            <Card showCategory={!category} {...item} />
-          </Link>
+          <Card
+            href={urlJoin('/discover/assistant/', item.identifier)}
+            key={item.identifier}
+            showCategory={!category}
+            {...item}
+          />
         ))}
       </Grid>
       {last && last?.length > 0 && (
@@ -71,9 +77,13 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
             data={last}
             initialItemCount={12}
             itemContent={(_, item) => (
-              <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
-                <Card showCategory={!category} variant={'compact'} {...item} />
-              </Link>
+              <Card
+                href={urlJoin('/discover/assistant/', item.identifier)}
+                key={item.identifier}
+                showCategory={!category}
+                variant={'compact'}
+                {...item}
+              />
             )}
             style={{
               minHeight: '75vh',