feat: add like top

sxzz · sxzz · commit 46fdc01a83e3 · 2022-05-23T09:15:14.000+08:00
diff --git a/package.json b/package.json
@@ -29,6 +29,12 @@
       "title": "User List",
       "description": "List all users",
       "mode": "view"
+    },
+    {
+      "name": "like-top",
+      "title": "Like Top",
+      "description": "Leaderboard of likes",
+      "mode": "view"
     }
   ],
   "scripts": {
diff --git a/src/actions/user.tsx b/src/actions/user.tsx
@@ -0,0 +1,27 @@
+import { Action, ActionPanel, Icon, showHUD } from '@raycast/api'
+
+export const openProfile = (username: string) => [
+  <Action.OpenInBrowser
+    key="open"
+    title="打开用户页 (macOS App)"
+    icon="📲"
+    url={`jike://page.jk/user/${username}`}
+    onOpen={() => showHUD('已打开')}
+  />,
+  <ActionPanel.Submenu
+    key="openWith"
+    title="打开用户页 (其他客户端)"
+    icon={Icon.Window}
+  >
+    <Action.OpenInBrowser
+      title="PC Web 端"
+      url={`https://web.okjike.com/u/${username}`}
+      onOpen={() => showHUD('已打开')}
+    />
+    <Action.OpenInBrowser
+      title="手机 Web 端"
+      url={`https://m.okjike.com/users/${username}`}
+      onOpen={() => showHUD('已打开')}
+    />
+  </ActionPanel.Submenu>,
+]
diff --git a/src/components/user-select.tsx b/src/components/user-select.tsx
@@ -0,0 +1,18 @@
+import { Form } from '@raycast/api'
+import { useUsers } from '../hooks/user'
+
+export function UserSelect() {
+  const { users } = useUsers()
+
+  return (
+    <Form.Dropdown id="userId" title="用户">
+      {users.map((user) => (
+        <Form.Dropdown.Item
+          key={user.userId}
+          title={user.screenName}
+          value={user.userId}
+        />
+      ))}
+    </Form.Dropdown>
+  )
+}
diff --git a/src/hooks/user.ts b/src/hooks/user.ts
@@ -0,0 +1,31 @@
+import { useEffect, useMemo, useState } from 'react'
+import { JikeClient } from 'jike-sdk'
+import { getConfig } from '../utils/config'
+import type { ConfigUser } from '../utils/config'
+
+export function useUsers() {
+  const [users, setUsers] = useState<ConfigUser[]>([])
+
+  const update = () => getConfig().then((cfg) => setUsers(cfg.users))
+
+  const findUser = (userId: string) =>
+    useMemo(() => users.find((u) => u.userId === userId), [users])
+
+  useEffect(() => {
+    update()
+  }, [])
+
+  return {
+    users,
+    update,
+    findUser,
+  }
+}
+
+export function useClient(user?: ConfigUser) {
+  const client = useMemo(() => user && JikeClient.fromJSON(user), [user])
+
+  return {
+    client,
+  }
+}
diff --git a/src/like-top.tsx b/src/like-top.tsx
@@ -0,0 +1,3 @@
+import { LikeTop } from './views/like-top'
+
+export default LikeTop
diff --git a/src/views/like-top.tsx b/src/views/like-top.tsx
@@ -0,0 +1,165 @@
+import {
+  Action,
+  ActionPanel,
+  Form,
+  List,
+  Toast,
+  showToast,
+  useNavigation,
+} from '@raycast/api'
+import { limit } from 'jike-sdk'
+import { useEffect, useMemo, useState } from 'react'
+import { UserSelect } from '../components/user-select'
+import { useClient, useUsers } from '../hooks/user'
+import { handleError } from '../utils/errors'
+import { openProfile } from '../actions/user'
+import type { Entity, JikePostWithDetail } from 'jike-sdk'
+
+export interface LikeTopForm {
+  userId: string
+  topCount: string
+  postCount: string
+}
+
+export function LikeTop() {
+  const { push } = useNavigation()
+
+  const onSubmit = (form: LikeTopForm) => {
+    push(<LikeTopResult {...form} />)
+  }
+
+  return (
+    <Form
+      navigationTitle="点赞排行榜"
+      actions={
+        <ActionPanel>
+          <Action.SubmitForm onSubmit={onSubmit} />
+        </ActionPanel>
+      }
+    >
+      <UserSelect />
+      <Form.TextField id="topCount" title="排名数量" defaultValue="50" />
+      <Form.TextField id="postCount" title="动态数量" defaultValue="0" />
+      <Form.Description text="统计多少条最近发布的动态，0 为所有动态" />
+    </Form>
+  )
+}
+
+function LikeTopResult({ userId, topCount, postCount }: LikeTopForm) {
+  interface LikeStat {
+    user: Entity.User
+    count: number
+  }
+  type UserMap = Record<string, LikeStat>
+
+  const [loading, setLoading] = useState(false)
+  const [posts, setPosts] = useState<JikePostWithDetail[]>([])
+  const [likeStat, setLikeStat] = useState<LikeStat[]>([])
+
+  const countRanking = useMemo(
+    () =>
+      likeStat
+        ? [...new Set(Object.values(likeStat).map(({ count }) => count))].sort(
+            (a, b) => b - a
+          )
+        : [],
+    [likeStat]
+  )
+  const getRanking = (count: number) => countRanking.indexOf(count) + 1
+
+  const { findUser } = useUsers()
+  const user = findUser(userId)
+  const { client } = useClient(user)
+
+  const fetchResult = async (ab: AbortController) => {
+    if (!client) return
+
+    setLoading(true)
+    let toast = await showToast({
+      title: '正在获取',
+      message: '正在获取动态',
+      style: Toast.Style.Animated,
+    })
+    try {
+      const posts = await client.getSelf().queryPersonalUpdate({
+        limit:
+          +postCount > 0 ? limit.limitMaxCount(+postCount) : limit.limitNone(),
+      })
+      setPosts(posts)
+
+      const userMap: UserMap = {}
+      for (const [i, post] of posts.entries()) {
+        if (ab.signal.aborted) {
+          toast = await showToast({
+            title: '已取消',
+            style: Toast.Style.Failure,
+          })
+          return
+        }
+        toast.message = `正在获取点赞数据 (${i + 1} / ${posts.length})`
+
+        const users = await post.listLikedUsers()
+        for (const user of users) {
+          const id = user.id
+          if (!userMap[id]) userMap[id] = { user, count: 1 }
+          else userMap[id].count++
+        }
+      }
+      setLikeStat(
+        Object.values(userMap)
+          .sort((a, b) => b.count - a.count)
+          .slice(0, +topCount)
+      )
+      toast.hide()
+    } catch (err) {
+      toast.hide()
+      handleError(err)
+      return
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    const ab = new AbortController()
+    fetchResult(ab)
+    return () => ab.abort()
+  }, [client, postCount, topCount])
+
+  const renderRanking = (rank: number) => {
+    switch (rank) {
+      case 1:
+        return { icon: '🥇' }
+      case 2:
+        return { icon: '🥈' }
+      case 3:
+        return { icon: '🥉' }
+      default:
+        return { text: String(rank) }
+    }
+  }
+  return (
+    <List isLoading={loading}>
+      {likeStat.map(({ user, count }) => (
+        <List.Item
+          key={user.id}
+          icon={user.avatarImage.thumbnailUrl}
+          title={user.screenName}
+          subtitle={`点赞 ${count} 次，${((count / posts.length) * 100).toFixed(
+            2
+          )}%`}
+          accessories={[renderRanking(getRanking(count))]}
+          actions={
+            <ActionPanel>
+              {...openProfile(user.username)}
+              <Action.CopyToClipboard
+                title="复制昵称"
+                content={user.screenName}
+              />
+            </ActionPanel>
+          }
+        />
+      ))}
+    </List>
+  )
+}
diff --git a/src/views/post.tsx b/src/views/post.tsx
@@ -7,18 +7,13 @@ import {
   useNavigation,
 } from '@raycast/api'
 import { ApiOptions, JikeClient } from 'jike-sdk'
-import { useEffect, useState } from 'react'
-import { getConfig } from '../utils/config'
 import { handleError } from '../utils/errors'
-import type { ConfigUser } from '../utils/config'
+import { useUsers } from '../hooks/user'
+import { UserSelect } from '../components/user-select'
 
 export function Post() {
   const { pop } = useNavigation()
-  const [users, setUsers] = useState<ConfigUser[]>([])
-
-  useEffect(() => {
-    getConfig().then((cfg) => setUsers(cfg.users))
-  }, [])
+  const { findUser } = useUsers()
 
   const submit = async ({
     userId,
@@ -35,7 +30,7 @@ export function Post() {
       return
     }
 
-    const user = users.find((u) => u.userId === userId)!
+    const user = findUser(userId)!
     const client = JikeClient.fromJSON(user)
     try {
       await client.createPost(ApiOptions.PostType.ORIGINAL, content)
@@ -60,15 +55,7 @@ export function Post() {
         </ActionPanel>
       }
     >
-      <Form.Dropdown id="userId" title="用户">
-        {users.map((user) => (
-          <Form.Dropdown.Item
-            key={user.userId}
-            title={user.screenName}
-            value={user.userId}
-          />
-        ))}
-      </Form.Dropdown>
+      <UserSelect />
 
       <Form.TextArea
         id="content"
diff --git a/src/views/user-detail.tsx b/src/views/user-detail.tsx
@@ -6,13 +6,13 @@ import {
   List,
   Toast,
   confirmAlert,
-  showHUD,
   showToast,
 } from '@raycast/api'
 import { JikeClient } from 'jike-sdk'
 import { handleError } from '../utils/errors'
 import { updateConfig } from '../utils/config'
 import { findUser } from '../utils/user'
+import { openProfile } from '../actions/user'
 import type { ConfigUser } from '../utils/config'
 import type { ReactNode } from 'react'
 import type { Entity } from 'jike-sdk'
@@ -69,30 +69,7 @@ export function UserDetail({ user, actions, onRefresh }: UserDetailProps) {
   }
 
   const itemActions = (user: ConfigUser) => [
-    <Action.OpenInBrowser
-      key="open"
-      title="打开用户页 (macOS App)"
-      icon="📲"
-      url={`jike://page.jk/user/${user.username}`}
-      onOpen={() => showHUD('已打开')}
-    />,
-
-    <ActionPanel.Submenu
-      key="openWith"
-      title="打开用户页 (通过其他客户端)"
-      icon={Icon.Window}
-    >
-      <Action.OpenInBrowser
-        title="PC Web 端"
-        url={`https://web.okjike.com/u/${user.username}`}
-        onOpen={() => showHUD('已打开')}
-      />
-      <Action.OpenInBrowser
-        title="手机 Web 端"
-        url={`https://m.okjike.com/users/${user.username}`}
-        onOpen={() => showHUD('已打开')}
-      />
-    </ActionPanel.Submenu>,
+    ...openProfile(user.username),
 
     <Action
       key="refresh"
diff --git a/src/views/user-list.tsx b/src/views/user-list.tsx
@@ -1,19 +1,16 @@
 import { useEffect, useMemo, useState } from 'react'
 import { Action, ActionPanel, Icon, List } from '@raycast/api'
-import { getConfig } from '../utils/config'
+import { useUsers } from '../hooks/user'
 import { UserDetail } from './user-detail'
 import { Login } from './login'
-import type { ConfigUser } from '../utils/config'
 
 export function UserList() {
-  const [users, setUsers] = useState<ConfigUser[]>([])
+  const { users, update } = useUsers()
   const [loading, setLoading] = useState(false)
 
   const refreshList = async () => {
     setLoading(true)
-    await getConfig()
-      .then((config) => setUsers(config.users))
-      .finally(() => setLoading(false))
+    await update().finally(() => setLoading(false))
   }
 
   useEffect(() => {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { LikeTop } from './views/like-top'`
	`2`	`+`
	`3`	`+export default LikeTop`