diff --git a/ui/src/heap/NewCurioForm.tsx b/ui/src/heap/NewCurioForm.tsx index eb2a89b652..43abfcb979 100644 --- a/ui/src/heap/NewCurioForm.tsx +++ b/ui/src/heap/NewCurioForm.tsx @@ -1,6 +1,6 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState, useRef } from 'react'; import cn from 'classnames'; -import { intersection } from 'lodash'; +import { intersection, findLast } from 'lodash'; import { useForm } from 'react-hook-form'; import LinkIcon from '@/components/icons/LinkIcon'; import { useHeapPerms, useHeapState } from '@/state/heap/heap'; @@ -18,7 +18,11 @@ import { NewCurioFormSchema, TEXT, } from '@/types/heap'; +import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner'; +import { UploadErrorPopover } from '@/chat/ChatInput/ChatInput'; import { useHeapDisplayMode } from '@/state/settings'; +import { useFileStore } from '@/state/storage'; +import useFileUpload from '@/logic/useFileUpload'; import HeapTextInput from './HeapTextInput'; export default function NewCurioForm() { @@ -39,11 +43,36 @@ export default function NewCurioForm() { perms.writers.length === 0 || intersection(perms.writers, vessel.sects).length !== 0; - const { register, handleSubmit, reset, watch } = useForm({ - defaultValues: { - content: '', - }, - }); + const [uploadError, setUploadError] = useState(null); + const { loaded, hasCredentials, promptUpload } = useFileUpload(); + const fileId = useRef(`chat-input-${Math.floor(Math.random() * 1000000)}`); + const mostRecentFile = useFileStore((state) => + findLast(state.files, ['for', fileId.current]) + ); + const { register, handleSubmit, reset, watch, setValue } = + useForm({ + defaultValues: { + content: '', + }, + }); + + useEffect(() => { + if ( + mostRecentFile && + mostRecentFile.status === 'error' && + mostRecentFile.errorMessage + ) { + setUploadError(mostRecentFile.errorMessage); + } + + if (mostRecentFile && mostRecentFile.status === 'success') { + setValue('content', mostRecentFile.url, { + shouldDirty: true, + shouldTouch: true, + }); + } + }, [mostRecentFile, setValue]); + const { isPending, setPending, setReady } = useRequestState(); const onSubmit = useCallback( async ({ content }: NewCurioFormSchema) => { @@ -147,6 +176,31 @@ export default function NewCurioForm() { onKeyDown={onKeyDown} defaultValue={draftLink} /> + {loaded && hasCredentials ? ( + + ) : null} + {uploadError ? ( +
+ +
+ ) : null}