diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx index f183848c..a5af7f07 100644 --- a/src/app/features/room/RoomInput.tsx +++ b/src/app/features/room/RoomInput.tsx @@ -189,7 +189,7 @@ export const RoomInput = forwardRef( } setSelectedFiles({ type: 'PUT', - items: fileItems, + item: fileItems, }); }, [setSelectedFiles, room] @@ -227,7 +227,7 @@ export const RoomInput = forwardRef( const uploads = Array.isArray(upload) ? upload : [upload]; setSelectedFiles({ type: 'DELETE', - items: selectedFiles.filter((f) => uploads.find((u) => u === f.file)), + item: selectedFiles.filter((f) => uploads.find((u) => u === f.file)), }); uploads.forEach((u) => roomUploadAtomFamily.remove(u)); }, @@ -436,7 +436,11 @@ export const RoomInput = forwardRef( isEncrypted={!!fileItem.encInfo} fileItem={fileItem} setMetadata={(metadata) => - setSelectedFiles({ type: 'MODIFY', item: fileItem, metadata }) + setSelectedFiles({ + type: 'REPLACE', + item: fileItem, + replacement: { ...fileItem, metadata }, + }) } onRemove={handleRemoveUpload} /> diff --git a/src/app/state/list.ts b/src/app/state/list.ts new file mode 100644 index 00000000..4377e532 --- /dev/null +++ b/src/app/state/list.ts @@ -0,0 +1,42 @@ +import { atom } from 'jotai'; + +export type ListAction = + | { + type: 'PUT'; + item: T | T[]; + } + | { + type: 'REPLACE'; + item: T; + replacement: T; + } + | { + type: 'DELETE'; + item: T | T[]; + }; + +export const createListAtom = () => { + const baseListAtom = atom([]); + return atom], undefined>( + (get) => get(baseListAtom), + (get, set, action) => { + const items = get(baseListAtom); + const newItems = Array.isArray(action.item) ? action.item : [action.item]; + if (action.type === 'DELETE') { + set( + baseListAtom, + items.filter((item) => !newItems.includes(item)) + ); + return; + } + if (action.type === 'PUT') { + set(baseListAtom, [...items, ...newItems]); + return; + } + if (action.type === 'REPLACE') { + set(baseListAtom, items.map((item) => item === action.item ? action.replacement : item)); + } + } + ); +}; +export type TListAtom = ReturnType>; \ No newline at end of file diff --git a/src/app/state/room/roomInputDrafts.ts b/src/app/state/room/roomInputDrafts.ts index 855aa61a..5d8ec8c7 100644 --- a/src/app/state/room/roomInputDrafts.ts +++ b/src/app/state/room/roomInputDrafts.ts @@ -5,6 +5,7 @@ import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment'; import { IEventRelation } from 'matrix-js-sdk'; import { createUploadAtomFamily } from '../upload'; import { TUploadContent } from '../../utils/matrix'; +import { createListAtom } from '../list'; export type TUploadMetadata = { markedAsSpoiler: boolean; @@ -17,48 +18,10 @@ export type TUploadItem = { encInfo: EncryptedAttachmentInfo | undefined; }; -export type UploadListAction = - | { - type: 'PUT'; - items: TUploadItem[]; - } - | { - type: 'DELETE'; - items: TUploadItem[]; - } - | { - type: 'MODIFY'; - item: TUploadItem; - metadata: TUploadMetadata; - }; - -export const createUploadListAtom = () => { - const baseListAtom = atom([]); - return atom( - (get) => get(baseListAtom), - (get, set, action) => { - const items = get(baseListAtom); - if (action.type === 'DELETE') { - set( - baseListAtom, - items.filter((item) => !action.items.includes(item)) - ); - return; - } - if (action.type === 'PUT') { - set(baseListAtom, [...items, ...action.items]); - return; - } - if (action.type === 'MODIFY') { - set(baseListAtom, items.map((item) => item === action.item ? {...item, metadata: action.metadata} : item)); - } - } - ); -}; -export type TUploadListAtom = ReturnType; +export type TUploadListAtom = ReturnType>; export const roomIdToUploadItemsAtomFamily = atomFamily( - createUploadListAtom + createListAtom ); export const roomUploadAtomFamily = createUploadAtomFamily();