From 3c8c9a672fd283cad0987395d4f3858799bca32b Mon Sep 17 00:00:00 2001 From: Paul Date: Tue, 22 Jun 2021 17:45:34 +0100 Subject: [PATCH] Add support for multiple attachment upload. --- package.json | 2 +- .../common/messaging/MessageBox.tsx | 22 ++++++++--- .../common/messaging/bars/FilePreview.tsx | 38 ++++++++++++++----- src/context/revoltjs/RevoltClient.tsx | 5 --- yarn.lock | 8 ++-- 5 files changed, 49 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 085cb0e9..d739a386 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "react-scroll": "^1.8.2", "react-tippy": "^1.4.0", "redux": "^4.1.0", - "revolt.js": "4.3.0", + "revolt.js": "4.3.1-alpha.0", "rimraf": "^3.0.2", "sass": "^1.35.1", "shade-blend-color": "^1.0.0", diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index e25ad13b..f678a277 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -50,6 +50,9 @@ const Action = styled.div` place-items: center; `; +// ! FIXME: add to app config and load from app config +export const CAN_UPLOAD_AT_ONCE = 5; + function MessageBox({ channel, draft, dispatcher }: Props) { const [ uploadState, setUploadState ] = useState({ type: 'none' }); const [typing, setTyping] = useState(false); @@ -133,7 +136,7 @@ function MessageBox({ channel, draft, dispatcher }: Props) { async function sendFile(content: string) { if (uploadState.type !== 'attached') return; - let attachments = []; + let attachments: string[] = []; const cancel = Axios.CancelToken.source(); const files = uploadState.files; @@ -141,8 +144,7 @@ function MessageBox({ channel, draft, dispatcher }: Props) { setUploadState({ type: "uploading", files, percent: 0, cancel }); try { - for (let i=0;i0)continue; // ! FIXME: temp, allow multiple uploads on server + for (let i=0;i CAN_UPLOAD_AT_ONCE) { + setUploadState({ + type: "attached", + files: files.slice(CAN_UPLOAD_AT_ONCE) + }); + } else { + setUploadState({ type: "none" }); + } } function startTyping() { diff --git a/src/components/common/messaging/bars/FilePreview.tsx b/src/components/common/messaging/bars/FilePreview.tsx index 605efbbb..8bd55d3a 100644 --- a/src/components/common/messaging/bars/FilePreview.tsx +++ b/src/components/common/messaging/bars/FilePreview.tsx @@ -1,9 +1,9 @@ import { Text } from "preact-i18n"; import styled from "styled-components"; -import { UploadState } from "../MessageBox"; +import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox"; import { useEffect, useState } from 'preact/hooks'; -import { XCircle, Plus, Share, X } from "@styled-icons/feather"; import { determineFileSize } from '../../../../lib/fileSize'; +import { XCircle, Plus, Share, X, FileText } from "@styled-icons/feather"; interface Props { state: UploadState, @@ -39,6 +39,10 @@ const Entry = styled.div` background: var(--secondary-background); } + &.fade { + opacity: 0.4; + } + span.fn { margin: auto; font-size: .8em; @@ -56,7 +60,7 @@ const Entry = styled.div` text-align: center; } - div { + div:first-child { position: relative; height: 0; @@ -69,7 +73,7 @@ const Entry = styled.div` opacity: 0; transition: 0.1s ease opacity; - background: rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.8); &:hover { opacity: 1; @@ -86,6 +90,14 @@ const Description = styled.div` color: var(--secondary-foreground); `; +const Divider = styled.div` + width: 4px; + height: 130px; + flex-shrink: 0; + border-radius: 4px; + background: var(--tertiary-background); +`; + const EmptyEntry = styled.div` width: 100px; height: 100px; @@ -102,11 +114,13 @@ const EmptyEntry = styled.div` } `; -function FileEntry({ file, remove }: { file: File, remove?: () => void }) { +function FileEntry({ file, remove, index }: { file: File, remove?: () => void, index: number }) { if (!file.type.startsWith('image/')) return ( - + = CAN_UPLOAD_AT_ONCE ? 'fade' : ''}>
- + + + {file.name} {determineFileSize(file.size)} @@ -121,7 +135,7 @@ function FileEntry({ file, remove }: { file: File, remove?: () => void }) { }, [ file ]); return ( - + = CAN_UPLOAD_AT_ONCE ? 'fade' : ''}> { remove &&
} {file.name} @@ -137,10 +151,14 @@ export default function FilePreview({ state, addFile, removeFile }: Props) { return ( - { state.files.map((file, index) => removeFile(index) : undefined} />) } + { state.files.map((file, index) => + <> + { index === CAN_UPLOAD_AT_ONCE && } + removeFile(index) : undefined} /> + + ) } { state.type === 'attached' && } - { state.files.length > 1 && state.type === 'attached' && Warning: Only first file will be uploaded, this will be changed in a future update. } { state.type === 'uploading' && ({state.percent}%) diff --git a/src/context/revoltjs/RevoltClient.tsx b/src/context/revoltjs/RevoltClient.tsx index 8718ef41..4de9d936 100644 --- a/src/context/revoltjs/RevoltClient.tsx +++ b/src/context/revoltjs/RevoltClient.tsx @@ -114,11 +114,6 @@ function Context({ auth, sync, children, dispatcher }: Props) { dispatcher({ type: "LOGOUT" }); delete client.user; - // ! FIXME: write procedure client.clear(); - client.users.clear(); - client.channels.clear(); - client.servers.clear(); - client.servers.members.clear(); dispatcher({ type: "RESET" }); openScreen({ id: "none" }); diff --git a/yarn.lock b/yarn.lock index fbae6d6b..31f59fe4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3369,10 +3369,10 @@ reusify@^1.0.4: resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== -revolt.js@4.3.0: - version "4.3.0" - resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.0.tgz#dc396470da82dd58eac74150ed9e3d64f67c28db" - integrity sha512-QFD0KQMk6e6bOioZJSSSnzgtx76yJLFSp9LyM1fIIelP02vrMpU1wO7s89lE+7jljh7SVgJqyCfZmlshdyb7Ew== +revolt.js@4.3.1-alpha.0: + version "4.3.1-alpha.0" + resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.1-alpha.0.tgz#21abb0706852468a0b7991a80d81093f547d25f3" + integrity sha512-YwDdDgioVYeBYkgZtgtXM37//96WmT18XVPJ7cBJzDQ3GWUKKPrw4VFjmi9FSh0ksfgfkSIrA7/hqmztZWbnVw== dependencies: "@insertish/mutable" "1.1.0" axios "^0.19.2"