matty
63bee46b53
Some checks failed
Runtime: memoize selectors in report modal, event discussion, followed tag filter, and upload form to avoid unnecessary allocations. Bundle: lazy-load crypto icons (500+ SVGs), remove datepicker CSS from main entry (already in lazy wrapper), drop unused Inter 200/300 weights. Stability: add null guards in compose upload and conversation components, add keyboard handler to reply mentions button, surface local translation unavailability instead of swallowing errors. Fix eggplant button: preferences toggle was still writing to the old showWrenchButton setting key, so the eggplant reaction button could never be enabled.
65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import clsx from 'clsx';
|
|
import React, { useCallback, useMemo, useRef } from 'react';
|
|
|
|
import { changeMediaOrder } from '@/actions/compose';
|
|
import HStack from '@/components/ui/hstack';
|
|
import { useAppDispatch } from '@/hooks/use-app-dispatch';
|
|
import { useCompose } from '@/hooks/use-compose';
|
|
|
|
import Upload from './upload';
|
|
import UploadProgress from './upload-progress';
|
|
|
|
interface IUploadForm {
|
|
composeId: string;
|
|
onSubmit(): void;
|
|
}
|
|
|
|
const UploadForm: React.FC<IUploadForm> = ({ composeId, onSubmit }) => {
|
|
const dispatch = useAppDispatch();
|
|
|
|
const { isUploading, mediaAttachments } = useCompose(composeId);
|
|
|
|
const mediaIds = useMemo(() => mediaAttachments.map((item) => item.id), [mediaAttachments]);
|
|
|
|
const dragItem = useRef<string | null>();
|
|
const dragOverItem = useRef<string | null>();
|
|
|
|
const handleDragStart = useCallback((id: string) => {
|
|
dragItem.current = id;
|
|
}, [dragItem]);
|
|
|
|
const handleDragEnter = useCallback((id: string) => {
|
|
dragOverItem.current = id;
|
|
}, [dragOverItem]);
|
|
|
|
const handleDragEnd = useCallback(() => {
|
|
dispatch(changeMediaOrder(composeId, dragItem.current!, dragOverItem.current!));
|
|
dragItem.current = null;
|
|
dragOverItem.current = null;
|
|
}, [dragItem, dragOverItem]);
|
|
|
|
if (!isUploading && !mediaIds.length) return null;
|
|
|
|
return (
|
|
<div className='overflow-hidden'>
|
|
<UploadProgress composeId={composeId} />
|
|
|
|
<HStack wrap className={clsx('overflow-hidden', mediaIds.length > 0 && 'm-[-5px]')}>
|
|
{mediaIds.map((id: string) => (
|
|
<Upload
|
|
id={id}
|
|
key={id}
|
|
composeId={composeId}
|
|
onSubmit={onSubmit}
|
|
onDragStart={handleDragStart}
|
|
onDragEnter={handleDragEnter}
|
|
onDragEnd={handleDragEnd}
|
|
/>
|
|
))}
|
|
</HStack>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { UploadForm as default };
|