diff --git a/package.json b/package.json index 95752a1..fda3e29 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,6 @@ "date-fns": "^2.30.0", "idb-keyval": "^6.2.1", "lucide-react": "^0.263.0", - "mem": "^9.0.2", "nanoid": "^4.0.2", "peerjs": "^1.4.7", "react-markdown": "^8.0.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6de0736..ee14f84 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,9 +41,6 @@ dependencies: lucide-react: specifier: ^0.263.0 version: 0.263.0(react@18.2.0) - mem: - specifier: ^9.0.2 - version: 9.0.2 nanoid: specifier: ^4.0.2 version: 4.0.2 @@ -5112,6 +5109,7 @@ packages: engines: {node: '>=6'} dependencies: p-defer: 1.0.0 + dev: true /map-obj@1.0.1: resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==} @@ -5275,14 +5273,6 @@ packages: p-is-promise: 2.1.0 dev: true - /mem@9.0.2: - resolution: {integrity: sha512-F2t4YIv9XQUBHt6AOJ0y7lSmP1+cY7Fm1DRh9GClTGzKST7UWLMx6ly9WZdLH/G/ppM5RL4MlQfRT71ri9t19A==} - engines: {node: '>=12.20'} - dependencies: - map-age-cleaner: 0.1.3 - mimic-fn: 4.0.0 - dev: false - /memorystream@0.3.1: resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==} engines: {node: '>= 0.10.0'} @@ -5587,6 +5577,7 @@ packages: /mimic-fn@4.0.0: resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==} engines: {node: '>=12'} + dev: true /mimic-response@3.1.0: resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==} @@ -6021,6 +6012,7 @@ packages: /p-defer@1.0.0: resolution: {integrity: sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==} engines: {node: '>=4'} + dev: true /p-is-promise@2.1.0: resolution: {integrity: sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==} diff --git a/src/domain/MessageList.ts b/src/domain/MessageList.ts index b7e6141..3655151 100644 --- a/src/domain/MessageList.ts +++ b/src/domain/MessageList.ts @@ -2,129 +2,123 @@ import { Remesh } from 'remesh' import { ListModule } from 'remesh/modules/list' import { nanoid } from 'nanoid' import { from, map, tap, merge } from 'rxjs' -import mem from 'mem' import Storage from './externs/Storage' +import { type Message } from '@/types' -export interface Message { - id: string - [key: string]: any -} +const MessageListDomain = Remesh.domain({ + name: 'MessageListDomain', + impl: (domain) => { + const storage = domain.getExtern(Storage) + const storageKey = `${storage.name}.MESSAGE_LIST` -const MessageListDomain = () => - Remesh.domain({ - name: 'MessageListDomain', - impl: (domain) => { - const storage = domain.getExtern(Storage) - const storageKey = `${storage.name}.MESSAGE_LIST` + const MessageListModule = ListModule(domain, { + name: 'MessageListModule', + key: (message) => message.id + }) - const MessageListModule = ListModule(domain, { - name: 'MessageListModule', - key: (message) => message.id - }) + const ListQuery = MessageListModule.query.ItemListQuery - const ListQuery = MessageListModule.query.ItemListQuery + const ItemQuery = MessageListModule.query.ItemQuery - const ItemQuery = MessageListModule.query.ItemQuery + const ChangeListEvent = domain.event({ + name: 'MessageList.ChangeListEvent', + impl: ({ get }) => { + return get(ListQuery()) + } + }) - const ChangeListEvent = domain.event({ - name: 'MessageList.ChangeListEvent', - impl: ({ get }) => { - return get(ListQuery()) - } - }) + const CreateItemEvent = domain.event({ + name: 'MessageList.CreateItemEvent' + }) - const CreateItemEvent = domain.event({ - name: 'MessageList.CreateItemEvent' - }) + const CreateItemCommand = domain.command({ + name: 'MessageList.CreateItemCommand', + impl: (_, message: Omit) => { + const newMessage = { ...message, id: nanoid() } + return [MessageListModule.command.AddItemCommand(newMessage), CreateItemEvent(newMessage), ChangeListEvent()] + } + }) - const CreateItemCommand = domain.command({ - name: 'MessageList.CreateItemCommand', - impl: (_, message: Omit) => { - const newMessage = { ...message, id: nanoid() } as T - return [MessageListModule.command.AddItemCommand(newMessage), CreateItemEvent(newMessage), ChangeListEvent()] - } - }) + const UpdateItemEvent = domain.event({ + name: 'MessageList.UpdateItemEvent' + }) - const UpdateItemEvent = domain.event({ - name: 'MessageList.UpdateItemEvent' - }) + const UpdateItemCommand = domain.command({ + name: 'MessageList.UpdateItemCommand', + impl: (_, message: Message) => { + return [MessageListModule.command.UpdateItemCommand(message), UpdateItemEvent(message), ChangeListEvent()] + } + }) - const UpdateItemCommand = domain.command({ - name: 'MessageList.UpdateItemCommand', - impl: (_, message: T) => { - return [MessageListModule.command.UpdateItemCommand(message), UpdateItemEvent(message), ChangeListEvent()] - } - }) + const DeleteItemEvent = domain.event({ + name: 'MessageList.DeleteItemEvent' + }) - const DeleteItemEvent = domain.event({ - name: 'MessageList.DeleteItemEvent' - }) + const DeleteItemCommand = domain.command({ + name: 'MessageList.DeleteItemCommand', + impl: (_, id: string) => { + return [MessageListModule.command.DeleteItemCommand(id), DeleteItemEvent(id), ChangeListEvent()] + } + }) - const DeleteItemCommand = domain.command({ - name: 'MessageList.DeleteItemCommand', - impl: (_, id: string) => { - return [MessageListModule.command.DeleteItemCommand(id), DeleteItemEvent(id), ChangeListEvent()] - } - }) + const ClearListEvent = domain.event({ + name: 'MessageList.ClearListEvent' + }) - const ClearListEvent = domain.event({ - name: 'MessageList.ClearListEvent' - }) + const ClearListCommand = domain.command({ + name: 'MessageList.ClearListCommand', + impl: () => { + return [MessageListModule.command.DeleteAllCommand(), ClearListEvent(), ChangeListEvent()] + } + }) - const ClearListCommand = domain.command({ - name: 'MessageList.ClearListCommand', - impl: () => { - return [MessageListModule.command.DeleteAllCommand(), ClearListEvent(), ChangeListEvent()] - } - }) + const InitListEvent = domain.event({ + name: 'MessageList.InitListEvent' + }) - const InitListEvent = domain.event({ - name: 'MessageList.InitListEvent' - }) + const InitListCommand = domain.command({ + name: 'MessageList.InitListCommand', + impl: (_, messages: Message[]) => { + return [MessageListModule.command.SetListCommand(messages), InitListEvent(messages)] + } + }) - const InitListCommand = domain.command({ - name: 'MessageList.InitListCommand', - impl: (_, messages: T[]) => { - return [MessageListModule.command.SetListCommand(messages), InitListEvent(messages)] - } - }) + domain.effect({ + name: 'FormStorageToStateEffect', + impl: () => { + return from(storage.get(storageKey)).pipe(map((messages) => InitListCommand(messages ?? []))) + } + }) - domain.effect({ - name: 'FormStorageToStateEffect', - impl: () => { - return from(storage.get(storageKey)).pipe(map((messages) => InitListCommand(messages ?? []))) - } - }) + domain.effect({ + name: 'FormStateToStorageEffect', + impl: ({ fromEvent }) => { + const createItem$ = fromEvent(ChangeListEvent).pipe( + tap(async (messages) => await storage.set(storageKey, messages)) + ) + return merge(createItem$).pipe(map(() => null)) + } + }) - domain.effect({ - name: 'FormStateToStorageEffect', - impl: ({ fromEvent }) => { - const createItem$ = fromEvent(ChangeListEvent).pipe( - tap(async (messages) => await storage.set(storageKey, messages)) - ) - return merge(createItem$).pipe(map(() => null)) - } - }) - - return { - query: { - ItemQuery, - ListQuery - }, - command: { - CreateItemCommand, - UpdateItemCommand, - DeleteItemCommand, - ClearListCommand - }, - event: { - CreateItemEvent, - UpdateItemEvent, - DeleteItemEvent, - ClearListEvent - } + return { + query: { + ItemQuery, + ListQuery + }, + command: { + CreateItemCommand, + UpdateItemCommand, + DeleteItemCommand, + ClearListCommand + }, + event: { + CreateItemEvent, + UpdateItemEvent, + DeleteItemEvent, + ClearListEvent } } - })() + } +}) -export default mem(MessageListDomain) +export default MessageListDomain diff --git a/src/views/Footer/index.tsx b/src/views/Footer/index.tsx index 90ec981..b1d490e 100644 --- a/src/views/Footer/index.tsx +++ b/src/views/Footer/index.tsx @@ -6,11 +6,10 @@ import MessageInput from '@/components/MessageInput' import MessageInputDomain from '@/domain/MessageInput' import MessageListDomain from '@/domain/MessageList' import { MESSAGE_MAX_LENGTH } from '@/constants' -import { type Message } from '@/types' const Footer: FC = () => { const send = useRemeshSend() - const messageListDomain = useRemeshDomain(MessageListDomain()) + const messageListDomain = useRemeshDomain(MessageListDomain()) const messageInputDomain = useRemeshDomain(MessageInputDomain()) const text = useRemeshQuery(messageInputDomain.query.MessageQuery()) const isPreview = useRemeshQuery(messageInputDomain.query.PreviewQuery()) diff --git a/src/views/Main/index.tsx b/src/views/Main/index.tsx index e52d439..9dfeb74 100644 --- a/src/views/Main/index.tsx +++ b/src/views/Main/index.tsx @@ -3,10 +3,9 @@ import { useRemeshDomain, useRemeshQuery } from 'remesh-react' import MessageList from '@/components/MessageList' import MessageItem from '@/components/MessageItem' import MessageListDomain from '@/domain/MessageList' -import { type Message } from '@/types' const Main: FC = () => { - const messageListDomain = useRemeshDomain(MessageListDomain()) + const messageListDomain = useRemeshDomain(MessageListDomain()) const messageList = useRemeshQuery(messageListDomain.query.ListQuery()) return (