michael/cordis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Convert ReactHelper to just export functions

Browse Source
This commit is contained in:
Michael Peters 2021-12-30 21:28:30 -06:00
parent 7acb245c76
commit 6fe1016047
20 changed files with 504 additions and 519 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/webapp/elements/components/infinite-scroll.tsx
View File

@ -1,5 +1,5 @@
import React, { Dispatch, FC, ReactNode, SetStateAction, useEffect } from 'react';
import ReactHelper from '../require/react-helper';
import { useColumnReverseInfiniteScroll } from '../require/react-helper';
import Retry from './retry';
export interface InfiniteScrollProps {
@ -39,7 +39,7 @@ const InfiniteScroll: FC<InfiniteScrollProps> = (props: InfiniteScrollProps) =>
onLoadCallable,
fetchAboveRetry,
fetchBelowRetry
] = ReactHelper.useColumnReverseInfiniteScroll(
] = useColumnReverseInfiniteScroll(
600,
fetchAboveCallable,
fetchBelowCallable,

6
src/client/webapp/elements/components/input-image-edit.tsx
View File

@ -7,7 +7,7 @@ import React, { FC, useEffect, useRef } from 'react';
import ElementsUtil from '../require/elements-util';
import * as FileType from 'file-type';
import ReactHelper from '../require/react-helper';
import { useIsMountedRef, useOneTimeAsyncAction } from '../require/react-helper';
interface ImageEditInputProps {
@ -27,11 +27,11 @@ const ImageEditInput: FC<ImageEditInputProps> = (props: ImageEditInputProps) =>
const acceptedExtTypes = [ 'png', 'jpg', 'jpeg' ];
const isMounted = ReactHelper.useIsMountedRef();
const isMounted = useIsMountedRef();
const imgRef = useRef<HTMLImageElement>(null);
const [ imgSrc ] = ReactHelper.useOneTimeAsyncAction(
const [ imgSrc ] = useOneTimeAsyncAction(
async () => {
if (!value) {
setValid(false);

4
src/client/webapp/elements/components/overlay.tsx
View File

@ -4,7 +4,7 @@ import Logger from '../../../../logger/logger';
const LOG = Logger.create(__filename, electronConsole);
import React, { FC, RefObject, useCallback, useEffect } from "react";
import ReactHelper from '../require/react-helper';
import { useCloseWhenEscapeOrClickedOrContextOutsideEffect } from '../require/react-helper';
interface OverlayProps {
childRootRef?: RefObject<HTMLElement>; // clicks outside this ref will close the overlay
@ -15,7 +15,7 @@ const Overlay: FC<OverlayProps> = (props: OverlayProps) => {
const { childRootRef, close, children } = props;
if (childRootRef) {
ReactHelper.useCloseWhenEscapeOrClickedOrContextOutsideEffect(childRootRef, close);
useCloseWhenEscapeOrClickedOrContextOutsideEffect(childRootRef, close);
}
const keyDownHandler = useCallback((e: KeyboardEvent) => {

4
src/client/webapp/elements/components/retry.tsx
View File

@ -4,7 +4,7 @@ import Logger from '../../../../logger/logger';
const LOG = Logger.create(__filename, electronConsole);
import React, { FC } from 'react';
import ReactHelper from '../require/react-helper';
import { useAsyncSubmitButton } from '../require/react-helper';
import Button from './button';
export interface RetryProps {
@ -16,7 +16,7 @@ export interface RetryProps {
const Retry: FC<RetryProps> = (props: RetryProps) => {
const { error, text, retryFunc } = props;
const [ retryCallable, buttonText, buttonShaking ] = ReactHelper.useAsyncSubmitButton(
const [ retryCallable, buttonText, buttonShaking ] = useAsyncSubmitButton(
async () => {
await retryFunc(); // error handled by effect
return { result: null, errorMessage: null };

4
src/client/webapp/elements/contexts/components/context-menu.tsx
View File

@ -1,6 +1,6 @@
import React, { FC, ReactNode, RefObject, useRef } from 'react'
import { IAlignment } from '../../require/elements-util';
import ReactHelper from '../../require/react-helper';
import { useCloseWhenEscapeOrClickedOrContextOutsideEffect } from '../../require/react-helper';
import Context from './context';
export interface ContextMenuProps {
@ -17,7 +17,7 @@ const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
const rootRef = useRef<HTMLDivElement>(null);
ReactHelper.useCloseWhenEscapeOrClickedOrContextOutsideEffect(rootRef, close);
useCloseWhenEscapeOrClickedOrContextOutsideEffect(rootRef, close);
return (
<Context rootRef={rootRef} relativeToRef={relativeToRef} relativeToPos={relativeToPos} alignment={alignment}>

4
src/client/webapp/elements/contexts/components/context.tsx
View File

@ -1,6 +1,6 @@
import React, { FC, ReactNode, RefObject, useRef } from 'react';
import { IAlignment } from '../../require/elements-util';
import ReactHelper from '../../require/react-helper';
import { useAlignment } from '../../require/react-helper';
export interface ContextProps {
rootRef?: RefObject<HTMLDivElement>;
@ -16,7 +16,7 @@ const Context: FC<ContextProps> = (props: ContextProps) => {
const myRootRef = useRef<HTMLDivElement>(null);
const [ className ] = ReactHelper.useAlignment(
const [ className ] = useAlignment(
rootRef ?? myRootRef, relativeToRef ?? null, relativeToPos ?? null, alignment, 'context react'
);

6
src/client/webapp/elements/contexts/context-menu-image.tsx
View File

@ -1,6 +1,6 @@
import React, { FC, useMemo } from 'react';
import * as electron from 'electron';
import ReactHelper from '../require/react-helper';
import { useAsyncSubmitButton, useDownloadButton } from '../require/react-helper';
import ContextMenu from './components/context-menu';
import * as FileType from 'file-type';
import sharp from 'sharp';
@ -20,7 +20,7 @@ const ImageContextMenu: FC<ImageContextMenuProps> = (props: ImageContextMenuProp
// TODO: Integrate shaking
const [ copyCallable, copyText, copyShaking ] = ReactHelper.useAsyncSubmitButton(
const [ copyCallable, copyText, copyShaking ] = useAsyncSubmitButton(
async () => {
const type = await FileType.fromBuffer(resourceBuff);
if (!type) {
@ -45,7 +45,7 @@ const ImageContextMenu: FC<ImageContextMenuProps> = (props: ImageContextMenuProp
}
);
const [ saveCallable, saveText, saveShaking ] = ReactHelper.useDownloadButton(
const [ saveCallable, saveText, saveShaking ] = useDownloadButton(
resourceName, resourceBuff,
{
start: 'Save Image' + previewText,

4
src/client/webapp/elements/displays/display-guild-invites.tsx
View File

@ -8,7 +8,7 @@ import CombinedGuild from '../../guild-combined';
import Display from '../components/display';
import InvitePreview from '../components/invite-preview';
import { Member, Token } from '../../data-types';
import ReactHelper from '../require/react-helper';
import { useAsyncSubmitButton } from '../require/react-helper';
import { Duration } from 'moment';
import moment from 'moment';
import DropdownInput from '../components/input-dropdown';
@ -44,7 +44,7 @@ const GuildInvitesDisplay: FC<GuildInvitesDisplayProps> = (props: GuildInvitesDi
}
}, [ expiresFromNowText ]);
const [ createTokenFunc, tokenButtonText, tokenButtonShaking, _, createTokenFailMessage ] = ReactHelper.useAsyncSubmitButton(
const [ createTokenFunc, tokenButtonText, tokenButtonShaking, _, createTokenFailMessage ] = useAsyncSubmitButton(
async () => {
try {
const createdToken = await guild.requestDoCreateToken(expiresFromNowText === 'never' ? null : expiresFromNowText)

4
src/client/webapp/elements/lists/components/channel-element.tsx
View File

@ -8,7 +8,7 @@ import { Channel, Member } from '../../../data-types';
import CombinedGuild from '../../../guild-combined';
import ChannelOverlay from '../../overlays/overlay-channel';
import BaseElements from '../../require/base-elements';
import ReactHelper from '../../require/react-helper';
import { useContextHover } from '../../require/react-helper';
import BasicHover, { BasicHoverSide } from '../../contexts/context-hover-basic';
export interface ChannelElementProps {
@ -27,7 +27,7 @@ const ChannelElement: FC<ChannelElementProps> = (props: ChannelElementProps) =>
const baseClassName = activeChannel?.id === channel.id ? 'channel text active' : 'channel text';
const [ modifyContextHover, modifyMouseEnterCallable, modifyMouseLeaveCallable ] = ReactHelper.useContextHover(
const [ modifyContextHover, modifyMouseEnterCallable, modifyMouseLeaveCallable ] = useContextHover(
() => {
return (
<BasicHover side={BasicHoverSide.RIGHT} relativeToRef={modifyRef}>

4
src/client/webapp/elements/lists/components/guild-list-element.tsx
View File

@ -6,7 +6,7 @@ import BasicHover, { BasicHoverSide } from '../../contexts/context-hover-basic';
import BaseElements from '../../require/base-elements';
import { IAlignment } from '../../require/elements-util';
import GuildSubscriptions from '../../require/guild-subscriptions';
import ReactHelper, { useContextClickContextMenu } from '../../require/react-helper';
import { useContextClickContextMenu, useContextHover } from '../../require/react-helper';
export interface GuildListElementProps {
guildsManager: GuildsManager;
@ -26,7 +26,7 @@ const GuildListElement: FC<GuildListElementProps> = (props: GuildListElementProp
const [ selfMember ] = GuildSubscriptions.useSelfMemberSubscription(guild);
const [ iconSrc ] = GuildSubscriptions.useSoftImageSrcResourceSubscription(guild, guildMeta?.iconResourceId ?? null);
const [ contextHover, mouseEnterCallable, mouseLeaveCallable ] = ReactHelper.useContextHover(() => {
const [ contextHover, mouseEnterCallable, mouseLeaveCallable ] = useContextHover(() => {
if (!guildMeta) return null;
if (!selfMember) return null;
const nameStyle = selfMember.roleColor ? { color: selfMember.roleColor } : {};

6
src/client/webapp/elements/lists/components/message-element.tsx
View File

@ -6,7 +6,7 @@ import ImageContextMenu from '../../contexts/context-menu-image';
import ImageOverlay from '../../overlays/overlay-image';
import ElementsUtil, { IAlignment } from '../../require/elements-util';
import GuildSubscriptions from '../../require/guild-subscriptions';
import ReactHelper, { useContextClickContextMenu } from '../../require/react-helper';
import { useContextClickContextMenu, useDownloadButton, useOneTimeAsyncAction } from '../../require/react-helper';
interface ResourceElementProps {
guild: CombinedGuild;
@ -17,7 +17,7 @@ interface ResourceElementProps {
const ResourceElement: FC<ResourceElementProps> = (props: ResourceElementProps) => {
const { guild, resourceId, resourceName } = props;
const [ callable, text, shaking ] = ReactHelper.useDownloadButton(
const [ callable, text, shaking ] = useDownloadButton(
resourceName,
{ guild, resourceId },
{
@ -94,7 +94,7 @@ const MessageElement: FC<MessageElementProps> = (props: MessageElementProps) =>
return message.isContinued(prevMessage) ? 'message-react continued' : 'message-react';
}, [ message, prevMessage ]);
const [ avatarSrc ] = ReactHelper.useOneTimeAsyncAction(
const [ avatarSrc ] = useOneTimeAsyncAction(
async () => {
if (message.isContinued(prevMessage)) return './img/loading.svg'; // don't load for elements that won't use it
if (!(message.member instanceof Member)) return './img/error.png'; // TODO: Make this a nicer 'unknown' image

6
src/client/webapp/elements/overlays/overlay-add-guild.tsx
View File

@ -13,7 +13,7 @@ import SubmitOverlayLower from '../components/submit-overlay-lower';
import path from 'path';
import CombinedGuild from '../../guild-combined';
import InvitePreview from '../components/invite-preview';
import ReactHelper from '../require/react-helper';
import { useAsyncSubmitButton, useOneTimeAsyncAction } from '../require/react-helper';
import * as fs from 'fs/promises';
import Button from '../components/button';
import Overlay from '../components/overlay';
@ -74,7 +74,7 @@ const AddGuildOverlay: FC<AddGuildOverlayProps> = (props: AddGuildOverlayProps)
const [ avatarInputMessage, setAvatarInputMessage ] = useState<string | null>(null);
const [ avatarInputValid, setAvatarInputValid ] = useState<boolean>(false);
const [ exampleAvatarBuff, exampleAvatarBuffError ] = ReactHelper.useOneTimeAsyncAction(
const [ exampleAvatarBuff, exampleAvatarBuffError ] = useOneTimeAsyncAction(
async () => await fs.readFile(exampleAvatarPath),
null,
[ exampleAvatarPath ]
@ -93,7 +93,7 @@ const AddGuildOverlay: FC<AddGuildOverlayProps> = (props: AddGuildOverlayProps)
return null;
}, [ exampleAvatarBuffError, avatarBuff, displayNameInputValid, displayNameInputMessage, avatarInputValid, avatarInputMessage ]);
const [ submitFunc, submitButtonText, submitButtonShaking, _, submitFailMessage ] = ReactHelper.useAsyncSubmitButton(
const [ submitFunc, submitButtonText, submitButtonShaking, _, submitFailMessage ] = useAsyncSubmitButton(
async () => {
if (validationErrorMessage || !avatarBuff) return { result: null, errorMessage: 'Validation failed' };
if (expired) return { result: null, errorMessage: 'Token expired' };

4
src/client/webapp/elements/overlays/overlay-channel.tsx
View File

@ -10,7 +10,7 @@ import TextInput from '../components/input-text';
import SubmitOverlayLower from '../components/submit-overlay-lower';
import Globals from '../../globals';
import { Channel } from '../../data-types';
import ReactHelper from '../require/react-helper';
import { useAsyncSubmitButton } from '../require/react-helper';
import Button from '../components/button';
import Overlay from '../components/overlay';
@ -61,7 +61,7 @@ const ChannelOverlay: FC<ChannelOverlayProps> = (props: ChannelOverlayProps) =>
return null;
}, [ nameInputValid, nameInputMessage, flavorTextInputValid, flavorTextInputMessage ]);
const [ submitFunc, submitButtonText, submitButtonShaking, submitFailMessage ] = ReactHelper.useAsyncSubmitButton(
const [ submitFunc, submitButtonText, submitButtonShaking, submitFailMessage ] = useAsyncSubmitButton(
async () => {
if (validationErrorMessage) return { result: null, errorMessage: 'Invalid input' };

4
src/client/webapp/elements/overlays/overlay-personalize.tsx
View File

@ -11,7 +11,7 @@ import ImageEditInput from '../components/input-image-edit';
import TextInput from '../components/input-text';
import SubmitOverlayLower from '../components/submit-overlay-lower';
import GuildSubscriptions from '../require/guild-subscriptions';
import ReactHelper from '../require/react-helper';
import { useAsyncSubmitButton } from '../require/react-helper';
import Button from '../components/button';
import Overlay from '../components/overlay';
@ -66,7 +66,7 @@ const PersonalizeOverlay: FC<PersonalizeOverlayProps> = (props: PersonalizeOverl
return null;
}, [ displayNameInputValid, displayNameInputMessage, avatarInputValid, avatarInputMessage ]);
const [ submitFunc, submitButtonText, submitButtonShaking, submitFailMessage ] = ReactHelper.useAsyncSubmitButton(
const [ submitFunc, submitButtonText, submitButtonShaking, submitFailMessage ] = useAsyncSubmitButton(
async (isMounted: MutableRefObject<boolean>) => {
if (validationErrorMessage) return { result: null, errorMessage: 'Invalid input' };

12
src/client/webapp/elements/require/guild-subscriptions.ts
View File

@ -12,7 +12,7 @@ import { Conflictable, Connectable } from "../../guild-types";
import { EventEmitter } from 'tsee';
import { IDQuery, PartialMessageListQuery } from '../../auto-verifier-with-args';
import { Token, Channel } from '../../data-types';
import ReactHelper from './react-helper';
import { useIsMountedRef, useOneTimeAsyncAction } from './react-helper';
import Globals from '../../globals';
import ElementsUtil from './elements-util';
@ -76,7 +76,7 @@ export default class GuildSubscriptions {
): [ fetchRetryCallable: () => Promise<void> ] {
const { guild, onFetch, onFetchError, bindEventsFunc, unbindEventsFunc } = subscriptionParams;
const isMounted = ReactHelper.useIsMountedRef();
const isMounted = useIsMountedRef();
const fetchManagerFunc = useCallback(async () => {
if (!isMounted.current) return;
@ -116,7 +116,7 @@ export default class GuildSubscriptions {
): [value: T | null, fetchError: unknown | null, events: EventEmitter<SingleSubscriptionEvents>] {
const { updatedEventName, updatedEventArgsMap, conflictEventName, conflictEventArgsMap } = eventMappingParams;
const isMounted = ReactHelper.useIsMountedRef();
const isMounted = useIsMountedRef();
const [ fetchError, setFetchError ] = useState<unknown | null>(null);
const [ value, setValue ] = useState<T | null>(null);
@ -202,7 +202,7 @@ export default class GuildSubscriptions {
sortFunc
} = eventMappingParams;
const isMounted = ReactHelper.useIsMountedRef();
const isMounted = useIsMountedRef();
const [ fetchError, setFetchError ] = useState<unknown | null>(null);
const [ value, setValue ] = useState<T[] | null>(null);
@ -335,7 +335,7 @@ export default class GuildSubscriptions {
sortFunc
} = eventMappingParams;
const isMounted = ReactHelper.useIsMountedRef();
const isMounted = useIsMountedRef();
const [ value, setValue ] = useState<T[] | null>(null);
@ -577,7 +577,7 @@ export default class GuildSubscriptions {
static useSoftImageSrcResourceSubscription(guild: CombinedGuild, resourceId: string | null): [ imgSrc: string, resource: Resource | null, fetchError: unknown | null ] {
const [ resource, fetchError ] = GuildSubscriptions.useResourceSubscription(guild, resourceId);
const [ imgSrc ] = ReactHelper.useOneTimeAsyncAction(
const [ imgSrc ] = useOneTimeAsyncAction(
async () => {
if (fetchError) return './img/error.png';
if (!resource) return './img/loading.svg';

923
src/client/webapp/elements/require/react-helper.tsx
View File

File diff suppressed because it is too large Load Diff

4
src/client/webapp/elements/sections/connection-info.tsx
View File

@ -8,7 +8,7 @@ import { Member } from '../../data-types';
import CombinedGuild from '../../guild-combined';
import MemberElement, { DummyMember } from '../lists/components/member-element';
import ConnectionInfoContextMenu from '../contexts/context-menu-connection-info';
import ReactHelper from '../require/react-helper';
import { useContextMenu } from '../require/react-helper';
export interface ConnectionInfoProps {
guild: CombinedGuild;
@ -34,7 +34,7 @@ const ConnectionInfo: FC<ConnectionInfoProps> = (props: ConnectionInfoProps) =>
return selfMember;
}, [ selfMember ]);
const [ contextMenu, toggleContextMenu ] = ReactHelper.useContextMenu((close: () => void) => {
const [ contextMenu, toggleContextMenu ] = useContextMenu((close: () => void) => {
if (!selfMember) return null;
return (
<ConnectionInfoContextMenu

6
src/client/webapp/elements/sections/guild-list-container.tsx
View File

@ -7,7 +7,7 @@ import React, { Dispatch, FC, ReactNode, SetStateAction, useRef } from 'react';
import CombinedGuild from '../../guild-combined';
import GuildsManager from '../../guilds-manager';
import GuildList from '../lists/guild-list';
import ReactHelper from '../require/react-helper';
import { useAsyncVoidCallback, useContextHover } from '../require/react-helper';
import fs from 'fs/promises';
import AddGuildOverlay from '../overlays/overlay-add-guild';
import ErrorMessageOverlay from '../overlays/overlay-error-message';
@ -27,7 +27,7 @@ const GuildListContainer: FC<GuildListContainerProps> = (props: GuildListContain
const addGuildRef = useRef<HTMLDivElement>(null);
const [ contextHover, onMouseEnter, onMouseLeave ] = ReactHelper.useContextHover(() => {
const [ contextHover, onMouseEnter, onMouseLeave ] = useContextHover(() => {
return (
<BasicHover relativeToRef={addGuildRef} side={BasicHoverSide.RIGHT}>
<div className="add-guild-hover">
@ -38,7 +38,7 @@ const GuildListContainer: FC<GuildListContainerProps> = (props: GuildListContain
);
}, []);
const [ onAddGuildClickCallback ] = ReactHelper.useAsyncVoidCallback(async () => {
const [ onAddGuildClickCallback ] = useAsyncVoidCallback(async () => {
// TODO: Change this to a file input
// We'll probably have to do this eventually for PWA.
const result = await electronRemote.dialog.showOpenDialog({

4
src/client/webapp/elements/sections/guild-title.tsx
View File

@ -2,7 +2,7 @@ import React, { Dispatch, FC, ReactNode, SetStateAction, useMemo, useRef } from
import { GuildMetadata, Member } from '../../data-types';
import CombinedGuild from '../../guild-combined';
import GuildTitleContextMenu from '../contexts/context-menu-guild-title';
import ReactHelper from '../require/react-helper';
import { useContextMenu } from '../require/react-helper';
export interface GuildTitleProps {
guild: CombinedGuild;
@ -26,7 +26,7 @@ const GuildTitle: FC<GuildTitleProps> = (props: GuildTitleProps) => {
);
}, [ selfMember ]);
const [ contextMenu, toggleContextMenu ] = ReactHelper.useContextMenu((close: () => void) => {
const [ contextMenu, toggleContextMenu ] = useContextMenu((close: () => void) => {
if (!guildMeta) return null;
if (!selfMember) return null;
return (

10
src/client/webapp/elements/sections/send-message.tsx
View File

@ -7,7 +7,7 @@ import React, { ClipboardEvent, FC, FormEvent, KeyboardEvent, RefObject, useCall
import { Channel } from '../../data-types';
import CombinedGuild from '../../guild-combined';
import BaseElements from '../require/base-elements';
import ReactHelper from '../require/react-helper';
import { useAsyncVoidCallback, useDocumentDropTarget, useIsMountedRef, useOneTimeAsyncAction } from '../require/react-helper';
import * as FileType from 'file-type';
import ElementsUtil from '../require/elements-util';
import FileInput from '../components/input-file';
@ -21,7 +21,7 @@ export interface AttachmentPreviewProps {
const AttachmentPreview: FC<AttachmentPreviewProps> = (props: AttachmentPreviewProps) => {
const { attachmentBuff, attachmentName, remove } = props;
const [ attachmentImgSrc ] = ReactHelper.useOneTimeAsyncAction(
const [ attachmentImgSrc ] = useOneTimeAsyncAction(
async () => {
const type = await FileType.fromBuffer(attachmentBuff);
if (!type) return './img/file-improved.svg';
@ -54,7 +54,7 @@ export interface SendMessageProps {
const SendMessage: FC<SendMessageProps> = (props: SendMessageProps) => {
const { guild, channel } = props;
const isMounted = ReactHelper.useIsMountedRef();
const isMounted = useIsMountedRef();
const contentEditableRef = useRef<HTMLDivElement>(null);
const [ text, setText ] = useState<string>('');
@ -63,7 +63,7 @@ const SendMessage: FC<SendMessageProps> = (props: SendMessageProps) => {
const [ attachmentBuff, setAttachmentBuff ] = useState<Buffer | null>(null);
const [ attachmentName, setAttachmentName ] = useState<string | null>(null);
const [ sendCallable ] = ReactHelper.useAsyncVoidCallback(
const [ sendCallable ] = useAsyncVoidCallback(
async (isMounted: RefObject<boolean>) => {
if (!enabled) return;
setEnabled(false);
@ -120,7 +120,7 @@ const SendMessage: FC<SendMessageProps> = (props: SendMessageProps) => {
setAttachmentName(null);
}, []);
const [ attachmentDropTarget ] = ReactHelper.useDocumentDropTarget('Upload to #' + channel.name, setAttachmentBuff, setAttachmentName);
const [ attachmentDropTarget ] = useDocumentDropTarget('Upload to #' + channel.name, setAttachmentBuff, setAttachmentName);
const attachmentPreview = useMemo(() => {
if (!attachmentBuff || !attachmentName) return null;