From ddb1cd9769882c854c28428f59567b299b63bc07 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 9 Jul 2024 23:22:54 +0800
Subject: [PATCH] feat: profiles page

---
 src/renderer/src/components/feed-icon.tsx     |   1 +
 src/renderer/src/hono.ts                      |   9 +-
 .../(with-layout)/feed/[id]/index.tsx         |   3 +-
 .../(with-layout)/profile/[id]/index.tsx      | 115 ++++++++++++++++++
 .../(with-layout)/profile/[id]}/layout.tsx    |   0
 .../(layer)/(subview)/profile/index.tsx       |  62 ----------
 6 files changed, 122 insertions(+), 68 deletions(-)
 create mode 100644 src/renderer/src/pages/(external)/(with-layout)/profile/[id]/index.tsx
 rename src/renderer/src/pages/{(main)/(layer)/(subview)/profile => (external)/(with-layout)/profile/[id]}/layout.tsx (100%)
 delete mode 100644 src/renderer/src/pages/(main)/(layer)/(subview)/profile/index.tsx

diff --git a/src/renderer/src/components/feed-icon.tsx b/src/renderer/src/components/feed-icon.tsx
index 3b3975203..3712dba42 100644
--- a/src/renderer/src/components/feed-icon.tsx
+++ b/src/renderer/src/components/feed-icon.tsx
@@ -21,6 +21,7 @@ export function FeedIcon({
     return (
       <Image
         src={image}
+        loading="lazy"
         className={cn("mr-2 shrink-0 rounded-sm", className)}
         style={{
           width: size,
diff --git a/src/renderer/src/hono.ts b/src/renderer/src/hono.ts
index 6ad0d67ef..a6988ebf4 100644
--- a/src/renderer/src/hono.ts
+++ b/src/renderer/src/hono.ts
@@ -551,7 +551,7 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                         view: number;
                         feedId: string;
                         category: string | null;
-                        isPrivate: boolean | null;
+                        isPrivate: boolean;
                     } | undefined;
                 };
             };
@@ -882,6 +882,7 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
         $get: {
             input: {
                 query: {
+                    userId?: string | undefined;
                     view?: string | undefined;
                 };
             };
@@ -909,7 +910,7 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                         ownerUserId: string | null;
                     };
                     category: string | null;
-                    isPrivate: boolean | null;
+                    isPrivate: boolean;
                 }[];
             };
             outputFormat: "json";
@@ -921,7 +922,7 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                     view: number;
                     url: string;
                     category?: string | null | undefined;
-                    isPrivate?: boolean | null | undefined;
+                    isPrivate?: boolean | undefined;
                 };
             };
             output: {
@@ -949,7 +950,7 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                     view: number;
                     feedId: string;
                     category?: string | null | undefined;
-                    isPrivate?: boolean | null | undefined;
+                    isPrivate?: boolean | undefined;
                 };
             };
             output: {
diff --git a/src/renderer/src/pages/(external)/(with-layout)/feed/[id]/index.tsx b/src/renderer/src/pages/(external)/(with-layout)/feed/[id]/index.tsx
index 101b6a85e..2cdd28cd3 100644
--- a/src/renderer/src/pages/(external)/(with-layout)/feed/[id]/index.tsx
+++ b/src/renderer/src/pages/(external)/(with-layout)/feed/[id]/index.tsx
@@ -69,6 +69,7 @@ export function Component() {
               {feed.data.feed.title}
               {" "}
               |
+              {" "}
               {APP_NAME}
             </title>
           </Helmet>
@@ -98,8 +99,6 @@ export function Component() {
           <a className="mb-8" href={`${DEEPLINK_SCHEME}add?id=${id}`}>
             <StyledButton>
               <FollowIcon className="mr-1 size-3" />
-              follow on
-              {" "}
               {APP_NAME}
             </StyledButton>
           </a>
diff --git a/src/renderer/src/pages/(external)/(with-layout)/profile/[id]/index.tsx b/src/renderer/src/pages/(external)/(with-layout)/profile/[id]/index.tsx
new file mode 100644
index 000000000..29bfc2207
--- /dev/null
+++ b/src/renderer/src/pages/(external)/(with-layout)/profile/[id]/index.tsx
@@ -0,0 +1,115 @@
+import { FeedIcon } from "@renderer/components/feed-icon"
+import { FollowIcon } from "@renderer/components/icons/follow"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@renderer/components/ui/avatar"
+import { StyledButton } from "@renderer/components/ui/button"
+import { useAuthQuery } from "@renderer/hooks/common"
+import { apiClient } from "@renderer/lib/api-fetch"
+import { APP_NAME } from "@renderer/lib/constants"
+import { defineQuery } from "@renderer/lib/defineQuery"
+import { capitalizeFirstLetter } from "@renderer/lib/utils"
+import { DEEPLINK_SCHEME } from "@shared/constants"
+import { Helmet } from "react-helmet-async"
+import { useParams } from "react-router-dom"
+import { parse } from "tldts"
+
+export function Component() {
+  const { id } = useParams()
+
+  const user = useAuthQuery(defineQuery(["profiles", id], async () => {
+    const res = await apiClient.profiles.$get({
+      query: { id: id! },
+    })
+    return res.data
+  }), {
+    enabled: !!id,
+  })
+
+  const subscriptions = useAuthQuery(defineQuery(["subscriptions", user.data?.id], async () => {
+    const res = await apiClient.subscriptions.$get({
+      query: { userId: user.data?.id },
+    })
+    const groupFolder = {} as Record<string, typeof res.data>
+
+    for (const subscription of (res.data || [])) {
+      if (!subscription.category && subscription.feeds) {
+        const { siteUrl } = subscription.feeds
+        if (!siteUrl) continue
+        const parsed = parse(siteUrl)
+        parsed.domain &&
+        (subscription.category = capitalizeFirstLetter(parsed.domain))
+      }
+      if (subscription.category) {
+        if (!groupFolder[subscription.category]) {
+          groupFolder[subscription.category] = []
+        }
+        groupFolder[subscription.category].push(subscription)
+      }
+    }
+
+    return groupFolder
+  }), {
+    enabled: !!user.data?.id,
+  })
+
+  return (
+    <>
+      {user.data && (
+        <div className="mx-auto mt-12 flex max-w-5xl flex-col items-center justify-center p-4 lg:p-0">
+          <Helmet>
+            <title>
+              {user.data.name}
+              {" "}
+              |
+              {" "}
+              {APP_NAME}
+            </title>
+          </Helmet>
+          <Avatar className="aspect-square size-16">
+            <AvatarImage src={user.data.image || undefined} />
+            <AvatarFallback>{user.data.name?.slice(0, 2)}</AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col items-center">
+            <div className="mb-2 mt-4 flex items-center text-2xl font-bold">
+              <h1>{user.data.name}</h1>
+            </div>
+            <div className="mb-8 text-sm text-zinc-500">
+              {user.data.handle}
+            </div>
+          </div>
+          <div className="mb-12 w-96 space-y-10">
+            {Object.keys(subscriptions.data || {}).map((category) => (
+              <div key={category}>
+                <div className="mb-4 flex items-center text-2xl font-bold">
+                  <h3>{category}</h3>
+                </div>
+                <div>
+                  {subscriptions.data?.[category].map((subscription) => (
+                    <div key={subscription.feedId} className="group relative border-b py-5">
+                      <a className="flex flex-1" href={subscription.feeds.siteUrl!} target="_blank">
+                        <FeedIcon feed={subscription.feeds} size={22} className="mr-3" />
+                        <div className="flex-1">
+                          <div className="truncate font-medium leading-none">{subscription.feeds?.title}</div>
+                          <div className="mt-1 line-clamp-1 text-xs text-zinc-500">{subscription.feeds?.description}</div>
+                        </div>
+                      </a>
+                      <a className="absolute left-full top-5 opacity-0 transition-opacity group-hover:opacity-100" href={`${DEEPLINK_SCHEME}add?id=${subscription.feeds?.id}`}>
+                        <StyledButton>
+                          <FollowIcon className="mr-1 size-3" />
+                          {APP_NAME}
+                        </StyledButton>
+                      </a>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/src/renderer/src/pages/(main)/(layer)/(subview)/profile/layout.tsx b/src/renderer/src/pages/(external)/(with-layout)/profile/[id]/layout.tsx
similarity index 100%
rename from src/renderer/src/pages/(main)/(layer)/(subview)/profile/layout.tsx
rename to src/renderer/src/pages/(external)/(with-layout)/profile/[id]/layout.tsx
diff --git a/src/renderer/src/pages/(main)/(layer)/(subview)/profile/index.tsx b/src/renderer/src/pages/(main)/(layer)/(subview)/profile/index.tsx
deleted file mode 100644
index 9b3df458f..000000000
--- a/src/renderer/src/pages/(main)/(layer)/(subview)/profile/index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useUser } from "@renderer/atoms/user"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@renderer/components/ui/avatar"
-import { StyledButton } from "@renderer/components/ui/button"
-import { useSignOut } from "@renderer/hooks/biz/useSignOut"
-import { views } from "@renderer/lib/constants"
-import { cn } from "@renderer/lib/utils"
-import { FeedList } from "@renderer/modules/feed-column/list"
-
-export function Component() {
-  const user = useUser()
-  const signOut = useSignOut()
-  return (
-    <div className="flex w-full gap-10 px-10 py-16">
-      <div className="flex min-w-40 flex-1 flex-col items-center gap-8 pt-20">
-        <Avatar className="aspect-square size-32">
-          <AvatarImage src={user?.image || undefined} />
-          <AvatarFallback>{user?.name?.slice(0, 2)}</AvatarFallback>
-        </Avatar>
-        <div className="text-4xl font-bold">{user?.name}</div>
-
-        <div>
-          <StyledButton
-            variant="outline"
-            onClick={() => {
-              signOut()
-            }}
-          >
-            Sign out
-          </StyledButton>
-        </div>
-      </div>
-
-      <div className="flex flex-[2] flex-col gap-8">
-        <div className="flex h-full flex-col gap-4">
-          <div className="text-2xl font-bold">Subscriptions</div>
-          <div className="overflow-y-auto">
-            {views.map((view, index) => (
-              <div key={view.name}>
-                <div className="mb-1 flex items-center gap-2 font-semibold">
-                  <span className={cn("flex", view.className)}>
-                    {view.icon}
-                  </span>
-                  <span>{view.name}</span>
-                </div>
-                <FeedList
-                  key={view.name}
-                  className="mb-4"
-                  view={index}
-                  hideTitle
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}