From 4721633bb9459ea4ce7b3fbcbe031ba7dca92086 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Thu, 13 Jul 2023 23:51:15 +0100
Subject: [PATCH] feat: server side rendering home sidebar

---
 src/components/home/HomeFeed.tsx          |   4 +-
 src/components/home/HomeSidebar.tsx       | 102 +++++++++-------------
 src/components/home/ShowMoreContainer.tsx |  32 +++++++
 src/queries/home.server.ts                |  15 ++--
 4 files changed, 84 insertions(+), 69 deletions(-)
 create mode 100644 src/components/home/ShowMoreContainer.tsx

diff --git a/src/components/home/HomeFeed.tsx b/src/components/home/HomeFeed.tsx
index c2129726..2a42f83a 100644
--- a/src/components/home/HomeFeed.tsx
+++ b/src/components/home/HomeFeed.tsx
@@ -412,7 +412,9 @@ export const HomeFeed = ({ type }: { type?: FeedType }) => {
               }}
             ></VirtuosoGrid>
 
-            {feed.isFetching && feed.hasNextPage && !isServerSide && <Loader />}
+            {feed.isFetching && feed.hasNextPage && !isServerSide() && (
+              <Loader />
+            )}
           </div>
         )}
       </div>
diff --git a/src/components/home/HomeSidebar.tsx b/src/components/home/HomeSidebar.tsx
index 7614f6da..aee21c72 100644
--- a/src/components/home/HomeSidebar.tsx
+++ b/src/components/home/HomeSidebar.tsx
@@ -1,22 +1,17 @@
-"use client"
-
-import { useState } from "react"
-
 import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
 import { SearchInput } from "~/components/common/SearchInput"
 import { Avatar } from "~/components/ui/Avatar"
 import { UniLink } from "~/components/ui/UniLink"
 import { getSiteLink } from "~/lib/helpers"
-import { useTranslation } from "~/lib/i18n/client"
-import { useGetShowcase } from "~/queries/home"
+import { getTranslation } from "~/lib/i18n"
+import { getShowcase } from "~/queries/home.server"
 
 import { FollowAllButton } from "../common/FollowAllButton"
+import ShowMoreContainer from "./ShowMoreContainer"
 
-export function HomeSidebar({ hideSearch }: { hideSearch?: boolean }) {
-  const showcaseSites = useGetShowcase()
-  const { t } = useTranslation("index")
-
-  const [showcaseMore, setShowcaseMore] = useState(false)
+export async function HomeSidebar({ hideSearch }: { hideSearch?: boolean }) {
+  const showcaseSites = await getShowcase()
+  const { t } = await getTranslation("index")
 
   return (
     <div className="w-80 pl-10 hidden lg:block space-y-10">
@@ -25,60 +20,47 @@ export function HomeSidebar({ hideSearch }: { hideSearch?: boolean }) {
         <div className="text-zinc-700 space-y-3">
           <p className="font-bold text-lg">{t("Suggested creators for you")}</p>
           <FollowAllButton
-            characterIds={showcaseSites.data
+            characterIds={showcaseSites
               ?.map((s: { characterId?: string }) => s.characterId)
               .filter(Boolean)
               .map(Number)}
-            siteIds={showcaseSites.data?.map(
-              (s: { handle: string }) => s.handle,
-            )}
+            siteIds={showcaseSites?.map((s: { handle: string }) => s.handle)}
           />
-          {showcaseSites.isLoading && <p>{t("Loading")}...</p>}
-          <ul
-            className={`overflow-y-clip relative text-left space-y-4 ${
-              showcaseMore ? "" : "max-h-[540px]"
-            }`}
-          >
-            <div
-              className={`absolute bottom-0 h-14 left-0 right-0 bg-gradient-to-t from-white via-white flex items-end justify-center font-bold cursor-pointer z-[1] text-sm ${
-                showcaseMore ? "hidden" : ""
-              }`}
-              onClick={() => setShowcaseMore(true)}
-            >
-              {t("Show more")}
-            </div>
-            {showcaseSites.data?.map((site) => (
-              <li className="flex align-middle" key={site.handle}>
-                <UniLink
-                  href={getSiteLink({
-                    subdomain: site.handle,
-                  })}
-                  className="inline-flex align-middle w-full"
-                >
-                  <CharacterFloatCard siteId={site.handle}>
-                    <span className="w-10 h-10 inline-block">
-                      <Avatar
-                        cid={site?.characterId}
-                        images={site?.metadata?.content?.avatars || []}
-                        size={40}
-                        name={site?.metadata?.content?.name}
-                      ></Avatar>
-                    </span>
-                  </CharacterFloatCard>
-                  <span className="ml-3 min-w-0 flex-1 justify-center inline-flex flex-col">
-                    <span className="truncate w-full inline-block font-medium">
-                      {site?.metadata?.content?.name}
-                    </span>
-                    {site?.metadata?.content?.bio && (
-                      <span className="text-gray-500 text-xs truncate w-full inline-block mt-1">
-                        {site.metadata.content?.bio}
+          <ShowMoreContainer>
+            <>
+              {showcaseSites?.map((site) => (
+                <li className="flex align-middle" key={site.handle}>
+                  <UniLink
+                    href={getSiteLink({
+                      subdomain: site.handle,
+                    })}
+                    className="inline-flex align-middle w-full"
+                  >
+                    <CharacterFloatCard siteId={site.handle}>
+                      <span className="w-10 h-10 inline-block">
+                        <Avatar
+                          cid={site?.characterId}
+                          images={site?.metadata?.content?.avatars || []}
+                          size={40}
+                          name={site?.metadata?.content?.name}
+                        ></Avatar>
                       </span>
-                    )}
-                  </span>
-                </UniLink>
-              </li>
-            ))}
-          </ul>
+                    </CharacterFloatCard>
+                    <span className="ml-3 min-w-0 flex-1 justify-center inline-flex flex-col">
+                      <span className="truncate w-full inline-block font-medium">
+                        {site?.metadata?.content?.name}
+                      </span>
+                      {site?.metadata?.content?.bio && (
+                        <span className="text-gray-500 text-xs truncate w-full inline-block mt-1">
+                          {site.metadata.content?.bio}
+                        </span>
+                      )}
+                    </span>
+                  </UniLink>
+                </li>
+              ))}
+            </>
+          </ShowMoreContainer>
         </div>
       </div>
     </div>
diff --git a/src/components/home/ShowMoreContainer.tsx b/src/components/home/ShowMoreContainer.tsx
new file mode 100644
index 00000000..aa92e5fe
--- /dev/null
+++ b/src/components/home/ShowMoreContainer.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import { useState } from "react"
+
+import { useTranslation } from "~/lib/i18n/client"
+
+export default function ShowMoreContainer({
+  children,
+}: {
+  children: JSX.Element
+}) {
+  const [showcaseMore, setShowcaseMore] = useState(false)
+  const { t } = useTranslation("index")
+
+  return (
+    <ul
+      className={`overflow-y-clip relative text-left space-y-4 ${
+        showcaseMore ? "" : "max-h-[540px]"
+      }`}
+    >
+      <div
+        className={`absolute bottom-0 h-14 left-0 right-0 bg-gradient-to-t from-white via-white flex items-end justify-center font-bold cursor-pointer z-[1] text-sm ${
+          showcaseMore ? "hidden" : ""
+        }`}
+        onClick={() => setShowcaseMore(true)}
+      >
+        {t("Show more")}
+      </div>
+      {children}
+    </ul>
+  )
+}
diff --git a/src/queries/home.server.ts b/src/queries/home.server.ts
index 4c56493c..136aa3bd 100644
--- a/src/queries/home.server.ts
+++ b/src/queries/home.server.ts
@@ -24,12 +24,11 @@ export const prefetchGetFeed = async (
   })
 }
 
-export const prefetchGetShowcase = async (queryClient: QueryClient) => {
-  const key = ["getShowcase"]
-  await queryClient.fetchQuery(key, async () => {
-    return cacheGet({
-      key,
-      getValueFun: () => homeModel.getShowcase(),
-    })
-  })
+export const getShowcase = async () => {
+  return cacheGet({
+    key: "getShowcase",
+    noUpdate: true,
+    expireTime: 10 * 60,
+    getValueFun: () => homeModel.getShowcase(),
+  }) as Promise<ReturnType<typeof homeModel.getShowcase>>
 }