From 39de868383957ff8de2190c46a6309657998afc4 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 13 Oct 2023 11:09:04 -0500 Subject: [PATCH 1/3] Upload: switch requires to imports --- src/components/upload.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/upload.tsx b/src/components/upload.tsx index 3c52f24e10..fdca2669b2 100644 --- a/src/components/upload.tsx +++ b/src/components/upload.tsx @@ -1,3 +1,12 @@ +import bookIcon from '@tabler/icons/book.svg'; +import fileCodeIcon from '@tabler/icons/file-code.svg'; +import fileSpreadsheetIcon from '@tabler/icons/file-spreadsheet.svg'; +import fileTextIcon from '@tabler/icons/file-text.svg'; +import fileZipIcon from '@tabler/icons/file-zip.svg'; +import defaultIcon from '@tabler/icons/paperclip.svg'; +import presentationIcon from '@tabler/icons/presentation.svg'; +import xIcon from '@tabler/icons/x.svg'; +import zoomInIcon from '@tabler/icons/zoom-in.svg'; import clsx from 'clsx'; import { List as ImmutableList } from 'immutable'; import React, { useState } from 'react'; @@ -12,14 +21,6 @@ import Motion from 'soapbox/features/ui/util/optional-motion'; import { useAppDispatch } from 'soapbox/hooks'; import { Attachment } from 'soapbox/types/entities'; -const bookIcon = require('@tabler/icons/book.svg'); -const fileCodeIcon = require('@tabler/icons/file-code.svg'); -const fileSpreadsheetIcon = require('@tabler/icons/file-spreadsheet.svg'); -const fileTextIcon = require('@tabler/icons/file-text.svg'); -const fileZipIcon = require('@tabler/icons/file-zip.svg'); -const defaultIcon = require('@tabler/icons/paperclip.svg'); -const presentationIcon = require('@tabler/icons/presentation.svg'); - export const MIMETYPE_ICONS: Record = { 'application/x-freearc': fileZipIcon, 'application/x-bzip': fileZipIcon, @@ -163,7 +164,7 @@ const Upload: React.FC = ({ {(withPreview && mediaType !== 'unknown' && Boolean(media.url)) && ( = ({ {onDelete && ( Date: Fri, 13 Oct 2023 11:12:49 -0500 Subject: [PATCH 2/3] Upload: swap out deprecated Icon for UI Icon --- src/components/upload.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/upload.tsx b/src/components/upload.tsx index fdca2669b2..4a7a85ee2c 100644 --- a/src/components/upload.tsx +++ b/src/components/upload.tsx @@ -15,8 +15,7 @@ import { spring } from 'react-motion'; import { openModal } from 'soapbox/actions/modals'; import Blurhash from 'soapbox/components/blurhash'; -import Icon from 'soapbox/components/icon'; -import { HStack, IconButton } from 'soapbox/components/ui'; +import { HStack, Icon, IconButton } from 'soapbox/components/ui'; import Motion from 'soapbox/features/ui/util/optional-motion'; import { useAppDispatch } from 'soapbox/hooks'; import { Attachment } from 'soapbox/types/entities'; From d71bb8a6731b366f1ae0452ee4a67d54dceece7d Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 13 Oct 2023 11:16:43 -0500 Subject: [PATCH 3/3] ComposeForm: pass onSubmit through UploadForm to ComposeUpload --- src/features/compose/components/compose-form.tsx | 2 +- src/features/compose/components/upload-form.tsx | 5 +++-- src/features/compose/components/upload.tsx | 13 ++++--------- 3 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx index db583569f4..5ffdb734c3 100644 --- a/src/features/compose/components/compose-form.tsx +++ b/src/features/compose/components/compose-form.tsx @@ -223,7 +223,7 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab const composeModifiers = !condensed && ( - + = ({ composeId }) => { +const UploadForm: React.FC = ({ composeId, onSubmit }) => { const mediaIds = useCompose(composeId).media_attachments.map((item: AttachmentEntity) => item.id); return ( @@ -22,7 +23,7 @@ const UploadForm: React.FC = ({ composeId }) => { {mediaIds.map((id: string) => ( - + ))} diff --git a/src/features/compose/components/upload.tsx b/src/features/compose/components/upload.tsx index d1896067c8..4cb1635535 100644 --- a/src/features/compose/components/upload.tsx +++ b/src/features/compose/components/upload.tsx @@ -1,26 +1,21 @@ import React from 'react'; -import { useHistory } from 'react-router-dom'; -import { undoUploadCompose, changeUploadCompose, submitCompose } from 'soapbox/actions/compose'; +import { undoUploadCompose, changeUploadCompose } from 'soapbox/actions/compose'; import Upload from 'soapbox/components/upload'; import { useAppDispatch, useCompose, useInstance } from 'soapbox/hooks'; interface IUploadCompose { id: string; composeId: string; + onSubmit?(): void; } -const UploadCompose: React.FC = ({ composeId, id }) => { - const history = useHistory(); +const UploadCompose: React.FC = ({ composeId, id, onSubmit }) => { const dispatch = useAppDispatch(); const { description_limit: descriptionLimit } = useInstance(); const media = useCompose(composeId).media_attachments.find(item => item.id === id)!; - const handleSubmit = () => { - dispatch(submitCompose(composeId, history)); - }; - const handleDescriptionChange = (description: string) => { dispatch(changeUploadCompose(composeId, media.id, { description })); }; @@ -34,7 +29,7 @@ const UploadCompose: React.FC = ({ composeId, id }) => { media={media} onDelete={handleDelete} onDescriptionChange={handleDescriptionChange} - onSubmit={handleSubmit} + onSubmit={onSubmit} descriptionLimit={descriptionLimit} withPreview />