From 02837e4b926118fc653770447234ecc5e1070dd9 Mon Sep 17 00:00:00 2001 From: Matthew WIlkinson Date: Tue, 19 Dec 2023 12:18:58 +0000 Subject: [PATCH] a --- app/components/channel-feed.jsx | 30 +++++++++++++++++++++++++++++ app/components/channel-replybox.jsx | 6 ++++++ app/routes/z.create-message.jsx | 5 +++-- package-lock.json | 21 ++++++++++++++++---- package.json | 3 ++- 5 files changed, 58 insertions(+), 7 deletions(-) diff --git a/app/components/channel-feed.jsx b/app/components/channel-feed.jsx index a3c1850..ed01eef 100644 --- a/app/components/channel-feed.jsx +++ b/app/components/channel-feed.jsx @@ -21,6 +21,7 @@ export default function ChannelFeed(props) { const channelId = channel.id; const messagesFetcher = useFetcher({ key: `messages-${channelId}` }); + const channelFetcher = useFetcher({ key: `channel-${channelId}` }); const [remainingMessages, setRemainingMessages] = useState(channel.remaining_messages); @@ -184,6 +185,35 @@ export default function ChannelFeed(props) { }, [messagesFetcher, fetchingMore]); + useEffect(() => { + const optimisticUuid = channelFetcher.data?.optimisticUuid; + + if (!optimisticUuid) { + return + } + + const response = channelFetcher.data; + + if (!!response?.id) { + + setMessages((prev) => { + let i = 0; + const update = [...prev]; + while(i < update.length) { + const msg = update[i]; + if (msg.optimisticUuid == optimisticUuid) { + msg.optimistic = false; + msg.id = msg.id; + update[i] = msg; + } + i++; + } + return update; + }, () => {}); + } + + }, [channelFetcher]); + useEffect(() => { if (page == 0) { return; diff --git a/app/components/channel-replybox.jsx b/app/components/channel-replybox.jsx index 12ffa8f..0ea83dc 100644 --- a/app/components/channel-replybox.jsx +++ b/app/components/channel-replybox.jsx @@ -5,6 +5,7 @@ import { CrossCircledIcon, CameraIcon, TrashIcon, FileIcon } from '@radix-ui/rea import { Image } from "@unpic/react"; import useAutosizeTextArea from './useAutosizeTextArea'; import './styles.channel-replybox.css'; +import { v4 as uuidv4 } from 'uuid'; function getVideoCover(file, seekTo = 0.0) { return new Promise((resolve, reject) => { @@ -70,6 +71,10 @@ export default function ChannelReplybox(props) { form.append("__action", "create_message"); + const optimisticUuid = uuidv4().stringify(); + + form.append("optimisticUuid", optimisticUuid); + const localFiles = files.map(f => { return { name: f.name, @@ -110,6 +115,7 @@ export default function ChannelReplybox(props) { parentId: replyingTo?.messageId, parentMessage: replyingTo?.message, files: localFiles ?? [], + optimisticUuid: optimisticUuid, }) restoreDefaults(); diff --git a/app/routes/z.create-message.jsx b/app/routes/z.create-message.jsx index 34555ab..e2616f2 100644 --- a/app/routes/z.create-message.jsx +++ b/app/routes/z.create-message.jsx @@ -27,17 +27,18 @@ export async function action({ request }) { const files = body.get("files"); const input = JSON.parse(body.get("input")); + const optimisticUuid = body.get("optimisticUuid"); const { communityHandle, channelId, text, parentId } = input; const [response, errors] = await createMessage(communityHandle, channelId, text, parentId, files, jwt); if (!!errors) { - return json({ errors: errors }); + return json({ optimisticUuid: optimisticUuid, errors: errors }); } if (!!response?.id) { - return json({ updated: true }); + return json({ optimisticUuid: optimisticUuid, ...response, }); } } if (type == "update_profile_pic") { const file = body.get("file"); diff --git a/package-lock.json b/package-lock.json index 8c6d678..4e86215 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,7 +49,8 @@ "remix-electron": "^2.0.0", "remix-utils": "^7.3.0", "source-map-support": "^0.5.21", - "twemoji": "^14.0.2" + "twemoji": "^14.0.2", + "uuid": "^9.0.1" }, "devDependencies": { "@remix-run/dev": "^2.1.0", @@ -18994,6 +18995,14 @@ "node": ">=14.18" } }, + "node_modules/remix-auth/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/remix-electron": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/remix-electron/-/remix-electron-2.0.0.tgz", @@ -20919,9 +20928,13 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], "bin": { "uuid": "dist/bin/uuid" } diff --git a/package.json b/package.json index 983eef7..fe24f8c 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,8 @@ "remix-electron": "^2.0.0", "remix-utils": "^7.3.0", "source-map-support": "^0.5.21", - "twemoji": "^14.0.2" + "twemoji": "^14.0.2", + "uuid": "^9.0.1" }, "devDependencies": { "@remix-run/dev": "^2.1.0",