ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-11-28 19:55:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

groups: lift uploadError state to ChatPane, refactor nested ternary

Browse Source
This commit is contained in:
Patrick O'Sullivan 2022-03-31 11:04:24 -05:00
parent cc1048dd21
commit 846fe48e7a
2 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
pkg/interface/src/views/apps/chat/components/ChatInput.tsx
View File

@ -4,7 +4,6 @@ import VisibilitySensor from 'react-visibility-sensor';
import React, {
FC,
PropsWithChildren,
useCallback,
useEffect,
useRef,
useState
@ -37,6 +36,8 @@ type ChatInputProps = PropsWithChildren<
ourContact?: Contact;
placeholder: string;
onSubmit: (contents: Content[]) => void;
uploadError: string;
handleUploadError: (err: Error) => void;
}
>;
@ -90,11 +91,20 @@ const MobileSubmitButton = ({ enabled, onSubmit }) => (
);
export const ChatInput = React.forwardRef(
({ ourContact, hideAvatars, placeholder, onSubmit }: ChatInputProps, ref) => {
(
{
ourContact,
hideAvatars,
placeholder,
onSubmit,
uploadError,
handleUploadError
}: ChatInputProps,
ref
) => {
const chatEditor = useRef<CodeMirrorShim>(null);
useImperativeHandle(ref, () => chatEditor.current);
const [inCodeMode, setInCodeMode] = useState(false);
const [uploadError, setUploadError] = useState<string>('');
const [showPortal, setShowPortal] = useState(false);
const [visible, setVisible] = useState(false);
const innerRef = useRef<HTMLDivElement>(null);
@ -108,14 +118,10 @@ export const ChatInput = React.forwardRef(
useOutsideClick(innerRef, () => setShowPortal(false));
const handleError = useCallback((err: Error) => {
setUploadError(err.message);
}, []);
const { message, setMessage } = useChatStore();
const { canUpload, uploading, promptUpload, onPaste } = useFileUpload({
onSuccess: uploadSuccess,
onError: handleError
onError: handleUploadError
});
function uploadSuccess(url: string, source: FileUploadSource) {
@ -195,26 +201,25 @@ export const ChatInput = React.forwardRef(
color={inCodeMode ? 'blue' : 'black'}
/>
</IconBox>
{console.log({ uploadError })}
{canUpload && (
<IconBox>
{uploading ? (
uploadError != '' ? (
<Icon
icon="ExclaimationMark"
cursor="pointer"
onClick={() => setShowPortal(true)}
/>
) : (
<LoadingSpinner />
)
) : (
{uploadError == '' && uploading && <LoadingSpinner />}
{uploadError !== '' && (
<Icon
icon="ExclaimationMark"
cursor="pointer"
onClick={() => setShowPortal(true)}
/>
)}
{uploadError == '' && !uploading && (
<Icon
icon="Attachment"
cursor="pointer"
width="16"
height="16"
onClick={() =>
promptUpload(handleError).then(url =>
promptUpload(handleUploadError).then(url =>
uploadSuccess(url, 'direct')
)
}

11
pkg/interface/src/views/apps/chat/components/ChatPane.tsx
View File

@ -114,8 +114,15 @@ export function ChatPane(props: ChatPaneProps): ReactElement {
const graphTimesentMap = useGraphTimesent(id);
const ourContact = useOurContact();
const { restore, setMessage } = useChatStore(s => ({ setMessage: s.setMessage, restore: s.restore }));
const [uploadError, setUploadError] = useState<string>('');
const handleUploadError = useCallback((err: Error) => {
setUploadError(err.message);
}, []);
const { canUpload, drag } = useFileUpload({
onSuccess: url => onSubmit([{ url }])
onSuccess: url => onSubmit([{ url }]),
onError: handleUploadError
});
useEffect(() => {
@ -171,6 +178,8 @@ export function ChatPane(props: ChatPaneProps): ReactElement {
onSubmit={onSubmit}
ourContact={(promptShare.length === 0 && ourContact) || undefined}
placeholder="Message..."
uploadError={uploadError}
handleUploadError={handleUploadError}
/>
)}
</Col>