feat: 添加好友信息编辑

Sioncovy · May 25, 2024 · a4755ef · a4755ef
1 parent 7076d35
commit a4755ef
Show file tree

Hide file tree

Showing 11 changed files with 473 additions and 94 deletions.
diff --git a/src/apis/contact.ts b/src/apis/contact.ts
@@ -9,20 +9,42 @@ export async function queryRequestList(): Promise<Request[]> {
   return request.get('/contacts/requests')
 }
 
-export async function createRequest({ friendId, reason = '申请添加为好友' }: {
+export async function createRequest({
+  friendId,
+  reason = '申请添加为好友'
+}: {
   friendId: string
   reason?: string
 }): Promise<null> {
   return request.post('/contacts/requests', {
     friendId,
-    reason,
+    reason
   })
 }
 
-export async function approveRequest({ requestId }: { requestId: string }): Promise<null> {
+export async function approveRequest({
+  requestId
+}: {
+  requestId: string
+}): Promise<null> {
   return request.post(`/contacts/requests/${requestId}/approve`)
 }
 
-export async function rejectRequest({ requestId }: { requestId: string }): Promise<null> {
+export async function rejectRequest({
+  requestId
+}: {
+  requestId: string
+}): Promise<null> {
   return request.post(`/contacts/requests/${requestId}/reject`)
 }
+
+export async function queryContact(id: string): Promise<Contact> {
+  return request.get(`/contacts/${id}`)
+}
+
+export async function updateContact(
+  id: string,
+  data: Partial<Contact>
+): Promise<Contact> {
+  return request.put(`/contacts/${id}`, data)
+}
diff --git a/src/apis/user.ts b/src/apis/user.ts
@@ -9,14 +9,18 @@ export async function queryUserInfo(username: string): Promise<UserPublic> {
   return request.get(`/users/${username}`)
 }
 
-export async function login(data: Pick<User, 'username' | 'password'>): Promise<{
+export async function login(
+  data: Pick<User, 'username' | 'password'>
+): Promise<{
   accessToken: string
   // uploadToken: string
   userInfo: UserPublic
 }> {
   return request.post('/users/login', data)
 }
 
-export async function register(data: Pick<User, 'username' | 'password'>): Promise<void> {
+export async function register(
+  data: Pick<User, 'username' | 'password'>
+): Promise<void> {
   return request.post('/users/register', data)
 }
diff --git a/src/components/ContactInfo/index.tsx b/src/components/ContactInfo/index.tsx
@@ -1,13 +1,16 @@
-import { Button, Card, Flex, Modal, Typography } from 'antd'
+import { Button, Card, Flex, Modal, Typography, message } from 'antd'
 import { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import styles from './index.module.less'
 import type { Contact } from '@/typings'
 import { mailpenDatabase } from '@/storages'
 import { useThemeToken } from '@/hooks'
+import FormModal from '../FormModal'
+import { updateContact } from '@/apis'
 
 interface ContactInfoProps {
   contact: Contact
+  refresh: () => void
 }
 
 function ContactInfo(props: ContactInfoProps) {
@@ -16,76 +19,156 @@ function ContactInfo(props: ContactInfoProps) {
   const { token } = useThemeToken()
   const navigate = useNavigate()
   const [useModal, modalContext] = Modal.useModal()
+  const [messageApi, messageContextHolder] = message.useMessage()
+  const [editOpen, setEditOpen] = useState(false)
 
   useEffect(() => {
-    if (!props.contact)
-      return
+    if (!props.contact) return
     setContact(props.contact)
   }, [props.contact])
 
-  if (!contact)
-    return null
+  if (!contact) return null
 
   return (
     <Flex justify="center">
       {modalContext}
+      {messageContextHolder}
       <Flex gap={40} className={styles.container}>
         <Flex gap={8} vertical className={styles.left}>
           <img className={styles.avatar} src={contact.avatar} />
           <Flex vertical gap={0}>
-            <Typography.Text style={{ fontSize: token.fontSizeHeading4, color: token.colorTextTertiary, marginBottom: -token.marginXS }}>
+            <Typography.Text
+              style={{
+                fontSize: token.fontSizeHeading4,
+                color: token.colorTextTertiary,
+                marginBottom: -token.marginXS
+              }}
+            >
               {contact.username}
             </Typography.Text>
-            <Typography.Text style={{ fontSize: token.fontSizeHeading3 }}>{contact.nickname}</Typography.Text>
+            <Typography.Text style={{ fontSize: token.fontSizeHeading3 }}>
+              {contact.nickname}
+            </Typography.Text>
           </Flex>
           <Flex vertical gap={0}>
             <div style={{ fontSize: token.fontSizeHeading5 }}>四川·乐山</div>
-            <Typography.Text style={{ fontSize: token.fontSizeHeading5 }}>{contact.email}</Typography.Text>
+            <Typography.Text style={{ fontSize: token.fontSizeHeading5 }}>
+              {contact.email}
+            </Typography.Text>
           </Flex>
           <Flex vertical gap={8}>
             <Button
               block
               onClick={async () => {
-                const chat = await mailpenDatabase.chats.findOne({ selector: { _id: username } }).exec()
+                const chat = await mailpenDatabase.chats
+                  .findOne({ selector: { _id: username } })
+                  .exec()
                 if (!chat && username) {
                   await mailpenDatabase.chats.insert({
                     _id: username,
-                    name: contact.remark || contact.nickname || contact.username,
+                    name:
+                      contact.remark || contact.nickname || contact.username,
                     avatar: contact.avatar,
                     message: null,
                     count: 0,
                     createdAt: new Date().toISOString(),
                     updatedAt: new Date().toISOString(),
-                    pinned: false,
+                    pinned: false
                   })
                 }
                 navigate(`/chat/${username}`)
               }}
             >
               去聊天
             </Button>
-            <Button
-              block
-              danger
-              onClick={async () => {
-                useModal.confirm({
-                  title: '删除好友',
-                  content: '确定要删除该好友吗？',
-                  onOk: async () => {
-                    navigate('/contacts')
-                  },
-                })
-              }}
-            >
-              删除好友
-            </Button>
+            <Flex gap={8}>
+              <Button
+                block
+                onClick={() => {
+                  setEditOpen(true)
+                }}
+              >
+                编辑
+              </Button>
+              <Button
+                block
+                danger
+                onClick={async () => {
+                  useModal.confirm({
+                    title: '删除好友',
+                    content: '确定要删除该好友吗？',
+                    onOk: async () => {
+                      navigate('/contacts')
+                    }
+                  })
+                }}
+              >
+                删除好友
+              </Button>
+            </Flex>
           </Flex>
         </Flex>
         <Card className={styles.right}>
-          <div style={{ color: token.colorTextSecondary, marginBottom: token.marginXS }}>个人简介</div>
-          <Typography.Text style={{ fontSize: token.fontSizeHeading5 }}>{contact.bio}</Typography.Text>
+          <div
+            style={{
+              color: token.colorTextSecondary,
+              marginBottom: token.marginXS
+            }}
+          >
+            个人简介
+          </div>
+          <Typography.Text style={{ fontSize: token.fontSizeHeading5 }}>
+            {contact.bio}
+          </Typography.Text>
         </Card>
       </Flex>
+      <FormModal
+        title="编辑好友信息"
+        open={editOpen}
+        centered
+        onClose={() => setEditOpen(false)}
+        onConfirm={(values) => {
+          console.log(values)
+          setEditOpen(false)
+          updateContact(contact._id, values)
+            .then(() => {
+              props.refresh()
+              messageApi.success('编辑成功')
+            })
+            .catch((error) => {
+              console.log('✨  ~ ContactInfo ~ error:', error)
+              messageApi.error(error.message)
+            })
+        }}
+        initValues={{
+          remark: contact.remark,
+          star: contact.star
+        }}
+        items={[
+          {
+            type: 'input',
+            label: '备注',
+            name: 'remark',
+            placeholder: '请输入对好友的备注'
+          },
+          {
+            type: 'switch',
+            label: '星标好友',
+            name: 'star'
+          }
+          // {
+          //   type: 'select',
+          //   label: '分组',
+          //   name: 'group',
+          //   options: [
+          //     { label: '家人', value: '家人' },
+          //     { label: '朋友', value: '朋友' },
+          //     { label: '同事', value: '同事' }
+          //   ],
+          //   placeholder: '请选择分组'
+          // }
+        ]}
+      />
     </Flex>
   )
 }

diff --git a/src/components/FormModal/index.module.less b/src/components/FormModal/index.module.less
@@ -0,0 +1 @@
+@import url('@/themes/index.less');