feat(wip): MessagesManager

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "deno.enable": true,
+    "deno.disablePaths": [
+        "./thewhitesilk_data"
+    ]
+}

client/api/client_data/RecentChat.ts

@@ -1,6 +1,6 @@
 export default class RecentChat {
     declare id: string
     declare title: string
-    declare avatar: string | null
+    declare avatar?: string
     declare content: string
 }

client/ui/App.tsx

@@ -1,8 +1,6 @@
 import Client from "../api/Client.ts"
 import data from "../Data.ts"
 import ChatFragment from "./chat/ChatFragment.tsx"
-import ContactsListItem from "./main/ContactsListItem.jsx"
-import RecentsListItem from "./main/RecentsListItem.jsx"
 import useEventListener from './useEventListener.ts'
 import User from "../api/client_data/User.ts"
 import RecentChat from "../api/client_data/RecentChat.ts"
@@ -17,6 +15,8 @@ import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
 import RegisterDialog from "./dialog/RegisterDialog.tsx"
 import LoginDialog from "./dialog/LoginDialog.tsx"
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
+import ContactsList from "./main/ContactsList.tsx";
+import RecentsList from "./main/RecentsList.tsx";
 
 declare global {
     namespace React {
@@ -143,47 +143,15 @@ export default function App() {
             <div id="SideBar">
                 {
                     // 最近聊天
-                    <mdui-list style={{
+                    <RecentsList
-                        overflowY: 'auto',
+                        display={navigationItemSelected == "Recents"}
-                        paddingRight: '10px',
+                        recentsList={recentsList} />
-                        display: navigationItemSelected == "Recents" ? undefined : 'none'
-                    }}>
-                        {
-                            recentsList.map((v) =>
-                                <RecentsListItem
-                                    key={v.id}
-                                    nickName={v.title}
-                                    avatar={v.avatar}
-                                    content={v.content} />
-                            )
-                        }
-                    </mdui-list>
                 }
                 {
                     // 联系人列表
-                    <mdui-list style={{
+                    <ContactsList
-                        overflowY: 'auto',
+                        display={navigationItemSelected == "Contacts"}
-                        paddingRight: '10px',
+                        contactsMap={contactsMap} />
-                        display: navigationItemSelected == "Contacts" ? undefined : 'none'
-                    }}>
-                        <mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
-                            {
-                                Object.keys(contactsMap).map((v) =>
-                                    <mdui-collapse-item key={v} value={v}>
-                                        <mdui-list-subheader slot="header">{v}</mdui-list-subheader>
-                                        {
-                                            contactsMap[v].map((v2) =>
-                                                <ContactsListItem
-                                                    key={v2.id}
-                                                    nickName={v2.nickname}
-                                                    avatar={v2.avatar} />
-                                            )
-                                        }
-                                    </mdui-collapse-item>
-                                )
-                            }
-                        </mdui-collapse>
-                    </mdui-list>
                 }
             </div>
             {

client/ui/AppMobile.tsx

@@ -1,12 +1,8 @@
 import Client from "../api/Client.ts"
 import data from "../Data.ts"
-import ChatFragment from "./chat/ChatFragment.tsx"
-import ContactsListItem from "./main/ContactsListItem.jsx"
-import RecentsListItem from "./main/RecentsListItem.jsx"
 import useEventListener from './useEventListener.ts'
 import User from "../api/client_data/User.ts"
 import RecentChat from "../api/client_data/RecentChat.ts"
-import Avatar from "./Avatar.tsx"
 
 import * as React from 'react'
 import { Dialog, NavigationBar, TextField } from "mdui"
@@ -16,6 +12,8 @@ import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
 import RegisterDialog from "./dialog/RegisterDialog.tsx"
 import LoginDialog from "./dialog/LoginDialog.tsx"
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
+import ContactsList from "./main/ContactsList.tsx"
+import RecentsList from "./main/RecentsList.tsx"
 
 declare global {
     namespace React {
@@ -75,9 +73,9 @@ export default function AppMobile() {
 
     const userProfileDialogRef: React.MutableRefObject<Dialog | null> = React.useRef(null)
     const openMyUserProfileDialogButtonRef: React.MutableRefObject<HTMLElement | null> = React.useRef(null)
-/*    useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
+    /*    useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
-        userProfileDialogRef.current!.open = true
+            userProfileDialogRef.current!.open = true
-    })*/
+        })*/
 
     const [myUserProfileCache, setMyUserProfileCache]: [User, React.Dispatch<React.SetStateAction<User>>] = React.useState(null as unknown as User)
 
@@ -119,12 +117,12 @@ export default function AppMobile() {
             <UserProfileDialog
                 userProfileDialogRef={userProfileDialogRef}
                 user={myUserProfileCache} />
-            
+
             <mdui-navigation-bar scroll-target="#SideBar" label-visibility="selected" value="Recents" ref={navigationBarRef}>
                 <mdui-navigation-bar-item icon="watch_later--outlined" value="Recents">最近</mdui-navigation-bar-item>
                 <mdui-navigation-bar-item icon="contacts--outlined" value="Contacts">聯絡人</mdui-navigation-bar-item>
             </mdui-navigation-bar>
-            
+
             <div style={{
                 display: 'flex',
                 height: 'calc(100% - 80px)',
@@ -132,51 +130,15 @@ export default function AppMobile() {
             }} id="SideBar">
                 {
                     // 最近聊天
-                    <mdui-list style={{
+                    <RecentsList
-                        overflowY: 'auto',
+                        display={navigationItemSelected == "Recents"}
-                        marginLeft: '10px',
+                        recentsList={recentsList} />
-                        marginRight: '10px',
-                        width: '100%',
-                        display: navigationItemSelected == "Recents" ? undefined : 'none'
-                    }}>
-                        {
-                            recentsList.map((v) =>
-                                <RecentsListItem
-                                    key={v.id}
-                                    nickName={v.title}
-                                    avatar={v.avatar}
-                                    content={v.content} />
-                            )
-                        }
-                    </mdui-list>
                 }
                 {
                     // 联系人列表
-                    <mdui-list style={{
+                    <ContactsList
-                        overflowY: 'auto',
+                        display={navigationItemSelected == "Contacts"}
-                        marginLeft: '10px',
+                        contactsMap={contactsMap} />
-                        marginRight: '10px',
-                        width: '100%',
-                        display: navigationItemSelected == "Contacts" ? undefined : 'none'
-                    }}>
-                        <mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
-                            {
-                                Object.keys(contactsMap).map((v) =>
-                                    <mdui-collapse-item key={v} value={v}>
-                                        <mdui-list-subheader slot="header">{v}</mdui-list-subheader>
-                                        {
-                                            contactsMap[v].map((v2) =>
-                                                <ContactsListItem
-                                                    key={v2.id}
-                                                    nickName={v2.nickname}
-                                                    avatar={v2.avatar} />
-                                            )
-                                        }
-                                    </mdui-collapse-item>
-                                )
-                            }
-                        </mdui-collapse>
-                    </mdui-list>
                 }
             </div>
         </div>

client/ui/main/ContactsList.tsx

@@ -0,0 +1,40 @@
+import User from "../../api/client_data/User.ts"
+import ContactsListItem from "./ContactsListItem.jsx"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    contactsMap: { [key: string]: User[] }
+    display: boolean
+}
+
+export default function ContactsList({
+    contactsMap,
+    display,
+    ...props
+}: Args) {
+    return <mdui-list style={{
+        overflowY: 'auto',
+        marginLeft: '10px',
+        marginRight: '10px',
+        width: '100%',
+        display: display ? undefined : 'none'
+    }} {...props}>
+
+        <mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
+            {
+                Object.keys(contactsMap).map((v) =>
+                    <mdui-collapse-item key={v} value={v}>
+                        <mdui-list-subheader slot="header">{v}</mdui-list-subheader>
+                        {
+                            contactsMap[v].map((v2) =>
+                                <ContactsListItem
+                                    key={v2.id}
+                                    nickName={v2.nickname}
+                                    avatar={v2.avatar} />
+                            )
+                        }
+                    </mdui-collapse-item>
+                )
+            }
+        </mdui-collapse>
+    </mdui-list>
+}

client/ui/main/RecentsList.tsx

@@ -0,0 +1,31 @@
+import RecentChat from "../../api/client_data/RecentChat.ts"
+import User from "../../api/client_data/User.ts"
+import ContactsListItem from "./ContactsListItem.jsx"
+import RecentsListItem from "./RecentsListItem.jsx"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    recentsList: RecentChat[]
+    display: boolean
+}
+
+export default function RecentsList({
+    recentsList,
+    display,
+    ...props
+}: Args) {
+    return <mdui-list style={{
+        overflowY: 'auto',
+        paddingRight: '10px',
+        display: display ? undefined : 'none'
+    }}>
+        {
+            recentsList.map((v) =>
+                <RecentsListItem
+                    key={v.id}
+                    nickName={v.title}
+                    avatar={v.avatar}
+                    content={v.content} />
+            )
+        }
+    </mdui-list>
+}

server/data/Chat.ts

@@ -21,6 +21,7 @@ export default class Chat {
         db.exec(`
             CREATE TABLE IF NOT EXISTS ${Chat.table_name} (
                 /* 序号 */ count INTEGER PRIMARY KEY AUTOINCREMENT,
+                /* 類型 */ type TEXT NOT NULL,
                 /* Chat ID */ id TEXT NOT NULL,
                 /* 標題 (群組) */ title TEXT,
                 /* 頭像 (群組) */ avatar BLOB,
@@ -32,7 +33,7 @@ export default class Chat {
        return db
     }
     
-    private static findAllBeansByCondition(condition: string, ...args: SQLInputValue[]): ChatBean[] {
+    protected static findAllBeansByCondition(condition: string, ...args: SQLInputValue[]): ChatBean[] {
         return this.database.prepare(`SELECT * FROM ${Chat.table_name} WHERE ${condition}`).all(...args) as unknown as ChatBean[]
     }
     
@@ -45,15 +46,25 @@ export default class Chat {
         return new Chat(beans[0])
     }
 
-    static create(chatId: string) {
+    static create(chatId: string, type: 'private' | 'group') {
         const chat = new Chat(
             Chat.findAllBeansByCondition(
                 'count = ?', 
                 Chat.database.prepare(`INSERT INTO ${Chat.table_name} (
+                    type,
                     id,
-                    settings
+                    title,
+                    avatar,
+                    user_a_id,
+                    user_b_id,
+                    settings,
                 ) VALUES (?, ?);`).run(
+                    type,
                     chatId,
+                    null,
+                    null,
+                    null,
+                    null,
                     "{}"
                 ).lastInsertRowid
             )[0]
@@ -61,10 +72,6 @@ export default class Chat {
         return chat
     }
 
-    static createFromTwoUsers(userA: User, userB: User) {
-        return this.create([userA.bean.id, userB.bean.id].sort().join('-'))
-    }
-    
     declare bean: ChatBean
     constructor(bean: ChatBean) {
         this.bean = bean

server/data/ChatBean.ts

@@ -1,5 +1,10 @@
 export default class ChatBean {
+    declare type: "paivate" | "group"
     declare id: string
+    declare title?: string
+    declare avatar_file_hash?: string
+    declare user_a_id?: string
+    declare user_b_id?: string
     declare settings: string
 
     [key: string]: unknown

server/data/ChatPrivate.ts

@@ -0,0 +1,26 @@
+import Chat from "./Chat.ts"
+import User from "./User.ts";
+
+export default class ChatPrivate extends Chat {
+    static getChatIdByUsersId(userIdA: string, userIdB: string) {
+        return [userIdA, userIdB].sort().join('-')
+    }
+
+    static createForPrivate(userA: User, userB: User) {
+        return this.create(this.getChatIdByUsersId(userA.bean.id, userB.bean.id), 'private')
+    }
+    static findForPrivate() {
+
+    }
+
+    getTitleForPrivate(user: User, targetUser: User) {
+        const chat = Chat.findById(ChatPrivate.getChatIdByUsersId(user.bean.id, targetUser.bean.id))
+
+        if (chat?.bean.user_a_id == user.bean.id)
+            return targetUser.getNickName()
+        if (chat?.bean.user_b_id == user.bean.id)
+            return user.getNickName()
+
+        return "未知對話"
+    }
+}

server/data/MessagesManager.ts

@@ -0,0 +1,26 @@
+import { DatabaseSync, SQLInputValue } from "node:sqlite"
+import { Buffer } from "node:buffer"
+import path from 'node:path'
+import chalk from "chalk"
+
+import config from "../config.ts"
+import Chat from "./Chat.ts"
+
+export default class MessagesManager {
+    static table_name: string = "Messages"
+    static database: DatabaseSync = this.init()
+    
+    private static init(): DatabaseSync {
+        const db: DatabaseSync = new DatabaseSync(path.join(config.data_path, this.table_name + '.db'))
+        return db
+    }
+
+    static getInstance(chat: Chat) {
+        return new MessagesManager(chat)
+    }
+    
+    declare chat: Chat
+    constructor(chat: Chat) {
+        this.chat = chat
+    }
+}

server/data/User.ts

@@ -106,7 +106,7 @@ export default class User {
         User.database.prepare(`UPDATE ${User.table_name} SET ${key} = ? WHERE count = ?`).run(value, this.bean.count)
         this.bean[key] = value
     }
-    getUserName(): string | null {
+    getUserName() {
         return this.bean.username
     }
     setUserName(userName: string) {

server/data/UserBean.ts

@@ -2,10 +2,10 @@ export default class UserBean {
     declare count: number
     declare id: string
     declare password: string
-    declare username: string | null
+    declare username?: string
     declare registered_time: number
     declare nickname: string
-    declare avatar_file_hash: string | null
+    declare avatar_file_hash?: string
     declare settings: string
 
     [key: string]: unknown

server/main.ts

@@ -14,12 +14,6 @@ import FileManager from "./data/FileManager.ts"
 import path from "node:path"
 
 const app = express()
-app.use((req, res, next) => {
-    const url = req.originalUrl || req.url
-    if (/\.m?(j|t)sx?$/.test(url))
-        res.setHeader('Content-Type', 'application/javascript')
-    next()
-})
 app.use('/', express.static(config.data_path + '/page_compiled'))
 app.use('/uploaded_files/:hash', (req, res) => {
     const hash = req.params.hash as string