fix exhaustive-deps warnings for custom hooks

This commit is contained in:
Michael Peters 2023-01-11 20:13:53 -08:00
parent b615e6ccba
commit 33d5987269
9 changed files with 35 additions and 26 deletions

View File

@ -50,8 +50,8 @@ const ImageEditInput: FC<ImageEditInputProps> = (props: ImageEditInputProps) =>
return './img/error.png'; return './img/error.png';
} }
}, },
[value, setValid, isMounted, setMessage],
'./img/loading.svg', './img/loading.svg',
[value],
); );
useEffect(() => { useEffect(() => {

View File

@ -28,7 +28,7 @@ const TokenRow: FC<TokenRowProps> = (props: TokenRowProps) => {
const guildMeta = useRecoilValue(guildMetaState(guild.id)); const guildMeta = useRecoilValue(guildMetaState(guild.id));
const [guildSocketConfigs] = useOneTimeAsyncAction(async () => await guild.fetchSocketConfigs(), null, [guild]); const [guildSocketConfigs] = useOneTimeAsyncAction(async () => await guild.fetchSocketConfigs(), [guild], null);
const iconSrc = useRecoilValueSoftImgSrc( const iconSrc = useRecoilValueSoftImgSrc(
guildResourceSoftImgSrcState({ guildResourceSoftImgSrcState({
guildId: guild.id, guildId: guild.id,

View File

@ -70,7 +70,7 @@ const AddGuildOverlay: FC<AddGuildOverlayProps> = (props: AddGuildOverlayProps)
const [avatarInputMessage, setAvatarInputMessage] = useState<string | null>(null); const [avatarInputMessage, setAvatarInputMessage] = useState<string | null>(null);
const [avatarInputValid, setAvatarInputValid] = useState<boolean>(false); const [avatarInputValid, setAvatarInputValid] = useState<boolean>(false);
const [exampleAvatarBuff, exampleAvatarBuffError] = useOneTimeAsyncAction(async () => await fs.readFile(exampleAvatarPath), null, [exampleAvatarPath]); const [exampleAvatarBuff, exampleAvatarBuffError] = useOneTimeAsyncAction(async () => await fs.readFile(exampleAvatarPath), [exampleAvatarPath], null);
useEffect(() => { useEffect(() => {
if (exampleAvatarBuff) { if (exampleAvatarBuff) {
@ -103,7 +103,7 @@ const AddGuildOverlay: FC<AddGuildOverlayProps> = (props: AddGuildOverlayProps)
setOverlay(null); setOverlay(null);
return { result: newGuild, errorMessage: null }; return { result: newGuild, errorMessage: null };
}, [displayName, avatarBuff, displayNameInputValid, avatarInputValid, setOverlay]); }, [guildsManager, validationErrorMessage, expired, displayName, avatarBuff, setCurrGuildId, setOverlay, addGuildData]);
const errorMessage = useMemo(() => { const errorMessage = useMemo(() => {
if (validationErrorMessage) return validationErrorMessage; if (validationErrorMessage) return validationErrorMessage;
@ -114,11 +114,22 @@ const AddGuildOverlay: FC<AddGuildOverlayProps> = (props: AddGuildOverlayProps)
return ( return (
<Overlay childRootRef={rootRef}> <Overlay childRootRef={rootRef}>
<div ref={rootRef} className="content add-guild"> <div ref={rootRef} className="content add-guild">
<InvitePreview name={addGuildData.name} iconSrc={addGuildData.iconSrc} url={addGuildData.url} expiresFromNow={addGuildData.expires ? moment.duration(addGuildData.expires - Date.now(), 'ms') : null} /> <InvitePreview
name={addGuildData.name}
iconSrc={addGuildData.iconSrc}
url={addGuildData.url}
expiresFromNow={addGuildData.expires ? moment.duration(addGuildData.expires - Date.now(), 'ms') : null}
/>
<div className="divider" /> <div className="divider" />
<div className="personalization"> <div className="personalization">
<div className="avatar"> <div className="avatar">
<ImageEditInput maxSize={Globals.MAX_AVATAR_SIZE} value={avatarBuff} setValue={setAvatarBuff} setValid={setAvatarInputValid} setMessage={setAvatarInputMessage} /> <ImageEditInput
maxSize={Globals.MAX_AVATAR_SIZE}
value={avatarBuff}
setValue={setAvatarBuff}
setValid={setAvatarInputValid}
setMessage={setAvatarInputMessage}
/>
</div> </div>
<div className="display-name"> <div className="display-name">
<TextInput <TextInput

View File

@ -89,7 +89,7 @@ const ChannelOverlay: FC<ChannelOverlayProps> = (props: ChannelOverlayProps) =>
setOverlay(null); setOverlay(null);
return { result: null, errorMessage: null }; return { result: null, errorMessage: null };
}, },
[guild, edited, validationErrorMessage, name, flavorText, setOverlay], [guild, edited, channel, validationErrorMessage, name, flavorText, setOverlay],
{ start: channel ? 'Modify Channel' : 'Create Channel' }, { start: channel ? 'Modify Channel' : 'Create Channel' },
); );

View File

@ -99,7 +99,7 @@ const PersonalizeOverlay: FC<PersonalizeOverlayProps> = (props: PersonalizeOverl
setOverlay(null); setOverlay(null);
return { result: null, errorMessage: null }; return { result: null, errorMessage: null };
}, },
[validationErrorMessage, displayName, savedDisplayName, avatarBuff, savedAvatarBuff, setOverlay], [validationErrorMessage, displayName, savedDisplayName, guild, avatarBuff, savedAvatarBuff, setOverlay],
); );
//if (saveFailed) return 'Unable to save personalization'; //if (saveFailed) return 'Unable to save personalization';

View File

@ -61,8 +61,8 @@ function useShake(ms: number): [shaking: boolean, doShake: () => void] {
// runs an Async action one time (updates when deps changes) // runs an Async action one time (updates when deps changes)
export function useOneTimeAsyncAction<T, V>( export function useOneTimeAsyncAction<T, V>(
actionFunc: () => Promise<T>, actionFunc: () => Promise<T>,
initialValue: V,
deps: DependencyList, deps: DependencyList,
initialValue: V,
): [value: T | V, error: unknown | null] { ): [value: T | V, error: unknown | null] {
const isMounted = useRef(false); const isMounted = useRef(false);
@ -241,8 +241,8 @@ export function useDownloadButton(
setText(textMapping.success); setText(textMapping.success);
}, },
// TODO: look into this warning // eslint-disable-next-line react-hooks/exhaustive-deps
[downloadName, fetchBuff, ...fetchBuffDeps, filePath, fileBuffer], [shaking, doShake, downloadName, fetchBuff, ...fetchBuffDeps, filePath, fileBuffer, textMapping.pendingFetch, textMapping.notReadyFetch, textMapping.errorFetch, textMapping.errorSave, textMapping.success],
); );
return [callable, text, shaking]; return [callable, text, shaking];

View File

@ -61,7 +61,7 @@ const GuildListContainer: FC = () => {
} else { } else {
setOverlay(<AddGuildOverlay addGuildData={addGuildData} />); setOverlay(<AddGuildOverlay addGuildData={addGuildData} />);
} }
}, []); }, [setOverlay]);
return ( return (
<div className="guild-list-container"> <div className="guild-list-container">

View File

@ -42,8 +42,8 @@ const AttachmentPreview: FC<AttachmentPreviewProps> = (props: AttachmentPreviewP
return './img/file-improved.svg'; return './img/file-improved.svg';
} }
}, },
'./img/loading.svg',
[attachmentBuff], [attachmentBuff],
'./img/loading.svg',
); );
return ( return (

View File

@ -30,13 +30,11 @@ import EnsuredFetchable from './fetchable-ensured';
import { EventEmitter } from 'tsee'; import { EventEmitter } from 'tsee';
import { AutoVerifierChangesType } from './auto-verifier'; import { AutoVerifierChangesType } from './auto-verifier';
import { IDQuery, PartialMessageListQuery } from './auto-verifier-with-args'; import { IDQuery, PartialMessageListQuery } from './auto-verifier-with-args';
import Util from './util';
/** the general guild class. This handles connecting a RAM, PersonalDB, and Socket guild together using fetchable-pair-verifiers and some manual caching to nicely update messages */ /** the general guild class. This handles connecting a RAM, PersonalDB, and Socket guild together using fetchable-pair-verifiers and some manual caching to nicely update messages */
export default class CombinedGuild export default class CombinedGuild
extends EventEmitter<Connectable & Conflictable> extends EventEmitter<Connectable & Conflictable>
implements AsyncGuaranteedFetchable, AsyncRequestable implements AsyncGuaranteedFetchable, AsyncRequestable {
{
private readonly ramGuild: RAMGuild; private readonly ramGuild: RAMGuild;
private readonly personalDBGuild: PersonalDBGuild; private readonly personalDBGuild: PersonalDBGuild;
private readonly socketGuild: SocketGuild; private readonly socketGuild: SocketGuild;
@ -62,8 +60,8 @@ export default class CombinedGuild
const diskSocket = new PairVerifierFetchable(this.personalDBGuild, this.socketGuild, 'disk-socket'); const diskSocket = new PairVerifierFetchable(this.personalDBGuild, this.socketGuild, 'disk-socket');
const ramDiskSocket = new PairVerifierFetchable(this.ramGuild, diskSocket, 'ram-disk'); const ramDiskSocket = new PairVerifierFetchable(this.ramGuild, diskSocket, 'ram-disk');
// TODO: I think this unverify is causing the RARE ALERTs // TODO: I think this unverify is causing the RARE ALERTs
// do we need to unverify on connect? or just disconnect? // do we need to unverify on connect? or just disconnect?
// connect/Disconnect // connect/Disconnect
this.socketGuild.on('connect', () => { this.socketGuild.on('connect', () => {
LOG.info(`g#${this.id} connected`); LOG.info(`g#${this.id} connected`);
@ -356,22 +354,22 @@ export default class CombinedGuild
// fetched through the triple-cache system (RAM -> Disk -> Server) // fetched through the triple-cache system (RAM -> Disk -> Server)
async fetchMetadata(): Promise<GuildMetadata> { async fetchMetadata(): Promise<GuildMetadata> {
// xUtil.failSometimes(0.05); // for testing // xUtil.failSometimes(0.05); // for testing
LOG.debug(`g#${this.id}: fetch metadata`); LOG.debug(`g#${this.id}: fetch metadata`);
return await this.fetchable.fetchMetadata(); return await this.fetchable.fetchMetadata();
} }
async fetchMembers(): Promise<Member[]> { async fetchMembers(): Promise<Member[]> {
// xUtil.failSometimes(0.05); // for testing // xUtil.failSometimes(0.05); // for testing
LOG.debug(`g#${this.id}: fetch members`); LOG.debug(`g#${this.id}: fetch members`);
return await this.fetchable.fetchMembers(); return await this.fetchable.fetchMembers();
} }
async fetchChannels(): Promise<Channel[]> { async fetchChannels(): Promise<Channel[]> {
// xUtil.failSometimes(0.05); // for testing // xUtil.failSometimes(0.05); // for testing
LOG.debug(`g#${this.id}: fetch channels`); LOG.debug(`g#${this.id}: fetch channels`);
return await this.fetchable.fetchChannels(); return await this.fetchable.fetchChannels();
} }
async fetchMessagesRecent(channelId: string, number: number): Promise<Message[]> { async fetchMessagesRecent(channelId: string, number: number): Promise<Message[]> {
// xUtil.failSometimes(0.05); // for testing // xUtil.failSometimes(0.05); // for testing
LOG.debug(`g#${this.id}: fetch recent messages ch#${channelId.slice(0, 4)}, ${number}`); LOG.debug(`g#${this.id}: fetch recent messages ch#${channelId.slice(0, 4)}, ${number}`);
const members = await this.grabRAMMembersMap(); const members = await this.grabRAMMembersMap();
const channels = await this.grabRAMChannelsMap(); const channels = await this.grabRAMChannelsMap();
const messages = await this.fetchable.fetchMessagesRecent(channelId, number); const messages = await this.fetchable.fetchMessagesRecent(channelId, number);
@ -382,7 +380,7 @@ export default class CombinedGuild
} }
async fetchMessagesBefore(channelId: string, messageOrderId: string, number: number): Promise<Message[]> { async fetchMessagesBefore(channelId: string, messageOrderId: string, number: number): Promise<Message[]> {
// xUtil.failSometimes(0.05); // for testing // xUtil.failSometimes(0.05); // for testing
LOG.debug(`g#${this.id}: fetch messages before ch#${channelId.slice(0, 4)}, mo#${messageOrderId}, ${number}`); LOG.debug(`g#${this.id}: fetch messages before ch#${channelId.slice(0, 4)}, mo#${messageOrderId}, ${number}`);
const members = await this.grabRAMMembersMap(); const members = await this.grabRAMMembersMap();
const channels = await this.grabRAMChannelsMap(); const channels = await this.grabRAMChannelsMap();
const messages = await this.fetchable.fetchMessagesBefore(channelId, messageOrderId, number); const messages = await this.fetchable.fetchMessagesBefore(channelId, messageOrderId, number);
@ -393,7 +391,7 @@ export default class CombinedGuild
} }
async fetchMessagesAfter(channelId: string, messageOrderId: string, number: number): Promise<Message[]> { async fetchMessagesAfter(channelId: string, messageOrderId: string, number: number): Promise<Message[]> {
// xUtil.failSometimes(0.05); // for testing // xUtil.failSometimes(0.05); // for testing
LOG.debug(`g#${this.id}: fetch messages after ch#${channelId.slice(0, 4)}, mo#${messageOrderId}, ${number}`); LOG.debug(`g#${this.id}: fetch messages after ch#${channelId.slice(0, 4)}, mo#${messageOrderId}, ${number}`);
const members = await this.grabRAMMembersMap(); const members = await this.grabRAMMembersMap();
const channels = await this.grabRAMChannelsMap(); const channels = await this.grabRAMChannelsMap();
const messages = await this.fetchable.fetchMessagesAfter(channelId, messageOrderId, number); const messages = await this.fetchable.fetchMessagesAfter(channelId, messageOrderId, number);
@ -404,12 +402,12 @@ export default class CombinedGuild
} }
async fetchResource(resourceId: string): Promise<Resource> { async fetchResource(resourceId: string): Promise<Resource> {
// xUtil.failSometimes(0.05); // for testing // xUtil.failSometimes(0.05); // for testing
LOG.debug(`g#${this.id}: fetch resource r#${resourceId.slice(0, 4)}`); LOG.debug(`g#${this.id}: fetch resource r#${resourceId.slice(0, 4)}`);
return await this.fetchable.fetchResource(resourceId); return await this.fetchable.fetchResource(resourceId);
} }
async fetchTokens(): Promise<Token[]> { async fetchTokens(): Promise<Token[]> {
// xUtil.failSometimes(0.05); // for testing // xUtil.failSometimes(0.05); // for testing
LOG.debug(`g#${this.id}: fetch tokens`); LOG.debug(`g#${this.id}: fetch tokens`);
const members = await this.grabRAMMembersMap(); const members = await this.grabRAMMembersMap();
const tokens = await this.fetchable.fetchTokens(); const tokens = await this.fetchable.fetchTokens();
for (const token of tokens) { for (const token of tokens) {