refactor: improve config and user

Author: sxzz

src/actions/user.tsx

@@ -1,4 +1,5 @@
 import { Action, ActionPanel, Icon, showHUD } from '@raycast/api'
+import { Login } from '../views/login'
 
 export const openProfile = (username: string) => [
   <Action.OpenInBrowser
@@ -25,3 +26,13 @@ export const openProfile = (username: string) => [
     />
   </ActionPanel.Submenu>,
 ]
+
+export const loginNewUser = (
+  <Action.Push
+    key="userUser"
+    title="登录新用户"
+    target={<Login />}
+    icon={Icon.Plus}
+    shortcut={{ modifiers: ['cmd'], key: 'n' }}
+  />
+)

src/components/user-select.tsx

@@ -1,11 +1,22 @@
 import { Form } from '@raycast/api'
 import { useUsers } from '../hooks/user'
+import type { ConfigUser } from '../utils/config'
 
-export function UserSelect() {
-  const { users } = useUsers()
+export function UserSelect({
+  onChange,
+}: {
+  onChange?: (user: ConfigUser | undefined) => void
+}) {
+  const { users, findUser } = useUsers()
+
+  const handleChange = (userId: string) => {
+    if (!onChange) return
+    const user = findUser(userId)
+    onChange(user)
+  }
 
   return (
-    <Form.Dropdown id="userId" title="用户">
+    <Form.Dropdown id="userId" title="用户" onChange={handleChange}>
       {users.map((user) => (
         <Form.Dropdown.Item
           key={user.userId}

src/hooks/config.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react'
+import { defaultConfig, readConfig, writeConfig } from '../utils/config'
+import type { Config } from '../utils/config'
+
+export const useConfig = () => {
+  const [config, setState] = useState<Config>(defaultConfig)
+  const [ready, setReady] = useState(false)
+
+  const setConfig = async (config: Config) => {
+    await writeConfig(config)
+    await reload()
+  }
+
+  const reload = async () => {
+    setState(await readConfig())
+    setReady(true)
+  }
+
+  useEffect(() => {
+    reload()
+  }, [])
+
+  return {
+    config,
+    ready,
+    setConfig,
+    reload,
+  }
+}

src/hooks/user.ts

@@ -1,31 +1,67 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { JikeClient } from 'jike-sdk'
-import { getConfig } from '../utils/config'
+import { getUserIndex } from '../utils/user'
+import { useConfig } from './config'
 import type { ConfigUser } from '../utils/config'
 
 export function useUsers() {
-  const [users, setUsers] = useState<ConfigUser[]>([])
+  const { config, ready, setConfig, reload } = useConfig()
+  const { users } = config
+  const noUser = ready ? users.length === 0 : false
 
-  const update = () => getConfig().then((cfg) => setUsers(cfg.users))
+  const findUser = (userId: string) => users.find((u) => u.userId === userId)
 
-  const findUser = (userId: string) =>
-    useMemo(() => users.find((u) => u.userId === userId), [users])
-
-  useEffect(() => {
-    update()
-  }, [])
+  const setUsers = async (users: ConfigUser[]) =>
+    setConfig({ ...config, users })
 
   return {
+    ready,
     users,
-    update,
+    noUser,
+    reload,
     findUser,
+    setUsers,
   }
 }
 
-export function useClient(user?: ConfigUser) {
-  const client = useMemo(() => user && JikeClient.fromJSON(user), [user])
+export function useClient(user: ConfigUser): JikeClient
+export function useClient(user: ConfigUser | undefined): JikeClient | undefined
+export function useClient(
+  user: ConfigUser | undefined
+): JikeClient | undefined {
+  return useMemo(() => user && JikeClient.fromJSON(user), [user])
+}
+
+interface UseUser<isUser extends boolean = false> {
+  user: ConfigUser | (isUser extends true ? never : undefined)
+  client: JikeClient | (isUser extends true ? never : undefined)
+  setUser: (newUser: ConfigUser | undefined) => Promise<void>
+}
+export function useUser(userId: string): UseUser<false>
+export function useUser(user: ConfigUser): UseUser<true>
+export function useUser(userId: string | ConfigUser): UseUser<boolean> {
+  const { users, findUser, setUsers } = useUsers()
+  const user =
+    typeof userId === 'string'
+      ? useMemo(() => findUser(userId), [users, userId])
+      : userId
+  const client = useClient(user)
+  const index = useMemo(() => getUserIndex(users, user), [users, user])
+
+  const setUser = (newUser: ConfigUser | undefined) => {
+    if (index === -1) throw new Error('User not found')
+
+    if (newUser) {
+      users[index] = newUser
+    } else {
+      users.splice(index, 1)
+    }
+    return setUsers(users)
+  }
 
   return {
+    user,
     client,
+    setUser,
   }
 }

src/utils/config.ts

@@ -8,17 +8,12 @@ export interface Config {
   users: ConfigUser[]
 }
 
+export const defaultConfig: Config = { users: [] }
 export const configPath = path.resolve(environment.supportPath, 'config.json')
 
-export const getConfig = async () => {
-  const defaultConfig: Config = { users: [] }
+export const readConfig = async () => {
   return (await readJSON<Config>(configPath)) || defaultConfig
 }
 
-export const updateConfig = async (
-  update: (cfg: Config) => void | Config | Promise<Config | void>
-) => {
-  let cfg = await getConfig()
-  cfg = (await update(cfg)) || cfg
-  await writeJSON(configPath, cfg)
-}
+export const writeConfig = async (config: Config) =>
+  writeJSON(configPath, config)

src/utils/user.ts

@@ -1,10 +1,10 @@
 import type { ConfigUser } from './config'
 
-export const isSameUser = (left: ConfigUser, right: ConfigUser) =>
+export const isSameUser = (left: ConfigUser, right: ConfigUser | undefined) =>
   // left.endpointUrl === right.endpointUrl &&
-  left.userId === right.userId
+  left.userId === right?.userId
 
-export const findUser = (users: ConfigUser[], user: ConfigUser) => {
-  const index = users.findIndex((u) => isSameUser(user, u))
-  return [users[index], index] as const
-}
+export const getUserIndex = (
+  users: ConfigUser[],
+  user: ConfigUser | undefined
+) => users.findIndex((u) => isSameUser(u, user))

src/views/like-top.tsx

@@ -10,9 +10,10 @@ import {
 import { limit } from 'jike-sdk'
 import { useEffect, useMemo, useState } from 'react'
 import { UserSelect } from '../components/user-select'
-import { useClient, useUsers } from '../hooks/user'
+import { useUser, useUsers } from '../hooks/user'
 import { handleError } from '../utils/errors'
 import { openProfile } from '../actions/user'
+import { NoUser } from './no-user'
 import type { Entity, JikePostWithDetail } from 'jike-sdk'
 
 export interface LikeTopForm {
@@ -23,12 +24,11 @@ export interface LikeTopForm {
 
 export function LikeTop() {
   const { push } = useNavigation()
+  const { noUser } = useUsers()
 
-  const onSubmit = (form: LikeTopForm) => {
-    push(<LikeTopResult {...form} />)
-  }
+  const onSubmit = (form: LikeTopForm) => push(<LikeTopResult {...form} />)
 
-  return (
+  return !noUser ? (
     <Form
       navigationTitle="点赞排行榜"
       actions={
@@ -42,6 +42,8 @@ export function LikeTop() {
       <Form.TextField id="postCount" title="动态数量" defaultValue="0" />
       <Form.Description text="统计多少条最近发布的动态，0 为所有动态" />
     </Form>
+  ) : (
+    <NoUser />
   )
 }
 
@@ -55,6 +57,7 @@ function LikeTopResult({ userId, topCount, postCount }: LikeTopForm) {
   const [loading, setLoading] = useState(false)
   const [posts, setPosts] = useState<JikePostWithDetail[]>([])
   const [likeStat, setLikeStat] = useState<LikeStat[]>([])
+  const { client } = useUser(userId)
 
   const countRanking = useMemo(
     () =>
@@ -67,10 +70,6 @@ function LikeTopResult({ userId, topCount, postCount }: LikeTopForm) {
   )
   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
 

src/views/login/index.tsx

@@ -1,9 +1,9 @@
 import { popToRoot, useNavigation } from '@raycast/api'
 import { JikeClient } from 'jike-sdk'
 import { useMemo } from 'react'
-import { updateConfig } from '../../utils/config'
-import { isSameUser } from '../../utils/user'
+import { getUserIndex } from '../../utils/user'
 import { handleError } from '../../utils/errors'
+import { useUsers } from '../../hooks/user'
 import { FormEndpointInfo } from './form-endpoint-info'
 import { FormAuth } from './form-auth'
 import type { AuthForm } from './form-auth'
@@ -19,6 +19,7 @@ export function Login() {
 
 function Auth({ endpointInfo }: { endpointInfo: EndpointInfo }) {
   const client = useMemo(() => new JikeClient(endpointInfo), [endpointInfo])
+  const { users, setUsers } = useUsers()
 
   const onLogin = async ({
     areaCode,
@@ -36,15 +37,13 @@ function Auth({ endpointInfo }: { endpointInfo: EndpointInfo }) {
 
       const user = await client.toJSON()
 
-      // Save
-      await updateConfig(async (cfg) => {
-        const index = cfg.users.findIndex((_auth) => isSameUser(user, _auth))
-        if (index > -1) {
-          cfg.users[index] = user
-        } else {
-          cfg.users.push(user)
-        }
-      })
+      const idx = getUserIndex(users, user)
+      if (idx > -1) {
+        users[idx] = user
+      } else {
+        users.push(user)
+      }
+      setUsers(users)
 
       popToRoot()
       return user.screenName

src/views/no-user.tsx

@@ -0,0 +1,17 @@
+import { ActionPanel, Detail } from '@raycast/api'
+import { loginNewUser } from '../actions/user'
+
+export function NoUser() {
+  const contents = `
+# 请先登录账号
+
+**您需要登录账号后，才可以进行本操作**
+`
+  return (
+    <Detail
+      markdown={contents}
+      navigationTitle="未登录账号"
+      actions={<ActionPanel>{loginNewUser}</ActionPanel>}
+    />
+  )
+}

src/views/post.tsx

@@ -6,34 +6,37 @@ import {
   showToast,
   useNavigation,
 } from '@raycast/api'
-import { ApiOptions, JikeClient } from 'jike-sdk'
+import { ApiOptions } from 'jike-sdk'
+import { useState } from 'react'
 import { handleError } from '../utils/errors'
-import { useUsers } from '../hooks/user'
 import { UserSelect } from '../components/user-select'
+import { useClient, useUsers } from '../hooks/user'
+import { NoUser } from './no-user'
+import type { ConfigUser } from '../utils/config'
 
 export function Post() {
   const { pop } = useNavigation()
-  const { findUser } = useUsers()
+  const { noUser } = useUsers()
+  const [user, setUser] = useState<ConfigUser>()
+  const client = useClient(user)
 
-  const submit = async ({
-    userId,
-    content,
-  }: {
-    userId: string
-    content: string
-  }) => {
-    if (content.trim().length === 0) {
+  const submit = async ({ content }: { content: string }) => {
+    if (!user) {
+      await showToast({
+        title: '请选择用户',
+        style: Toast.Style.Failure,
+      })
+      return
+    } else if (content.trim().length === 0) {
       await showToast({
         title: '内容不能为空',
         style: Toast.Style.Failure,
       })
       return
     }
 
-    const user = findUser(userId)!
-    const client = JikeClient.fromJSON(user)
     try {
-      await client.createPost(ApiOptions.PostType.ORIGINAL, content)
+      await client!.createPost(ApiOptions.PostType.ORIGINAL, content)
     } catch (err) {
       handleError(err)
       return
@@ -46,7 +49,7 @@ export function Post() {
     pop()
   }
 
-  return (
+  return !noUser ? (
     <Form
       navigationTitle="发布动态"
       actions={
@@ -55,7 +58,7 @@ export function Post() {
         </ActionPanel>
       }
     >
-      <UserSelect />
+      <UserSelect onChange={setUser} />
 
       <Form.TextArea
         id="content"
@@ -64,5 +67,7 @@ export function Post() {
         autoFocus
       />
     </Form>
+  ) : (
+    <NoUser />
   )
 }