From 32b41620d8df933252f8fc6e6d9943e2b1020891 Mon Sep 17 00:00:00 2001 From: Ivan <8611739+IRBorisov@users.noreply.github.com> Date: Fri, 13 Dec 2024 13:10:03 +0300 Subject: [PATCH] R: Fix Rules of React violations --- .../DlgEditOperation/DlgEditOperation.tsx | 50 ++++++++++++------- .../frontend/src/hooks/useRSFormCache.ts | 36 ++----------- 2 files changed, 36 insertions(+), 50 deletions(-) diff --git a/rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx b/rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx index 64b6f65d..5e49d1ef 100644 --- a/rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx +++ b/rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx @@ -7,6 +7,7 @@ import { TabList, TabPanel, Tabs } from 'react-tabs'; import Modal from '@/components/ui/Modal'; import TabLabel from '@/components/ui/TabLabel'; import useRSFormCache from '@/hooks/useRSFormCache'; +import { LibraryItemID } from '@/models/library'; import { HelpTopic } from '@/models/miscellaneous'; import { ICstSubstitute, @@ -17,6 +18,7 @@ import { OperationType } from '@/models/oss'; import { SubstitutionValidator } from '@/models/ossAPI'; +import { ConstituentaID } from '@/models/rsform'; import TabArguments from './TabArguments'; import TabOperation from './TabOperation'; @@ -48,20 +50,17 @@ function DlgEditOperation({ hideWindow, oss, target, onSubmit }: DlgEditOperatio const initialInputs = useMemo(() => oss.graph.expandInputs([target.id]), [oss.graph, target.id]); const [inputs, setInputs] = useState(initialInputs); const inputOperations = useMemo(() => inputs.map(id => oss.operationByID.get(id)!), [inputs, oss.operationByID]); - const schemasIDs = useMemo( - () => inputOperations.map(operation => operation.result).filter(id => id !== null), - [inputOperations] - ); + + const [needPreload, setNeedPreload] = useState(false); + const [schemasIDs, setSchemaIDs] = useState([]); const [substitutions, setSubstitutions] = useState(target.substitutions); const [suggestions, setSuggestions] = useState([]); const cache = useRSFormCache(); const schemas = useMemo( - () => schemasIDs.map(id => cache.getSchema(id)).filter(item => item !== undefined), - // eslint-disable-next-line react-compiler/react-compiler - // eslint-disable-next-line react-hooks/exhaustive-deps - [schemasIDs, cache.getSchema] + () => schemasIDs.map(id => cache.data.find(item => item.id === id)).filter(item => item !== undefined), + [schemasIDs, cache.data] ); const isModified = useMemo( @@ -87,11 +86,30 @@ function DlgEditOperation({ hideWindow, oss, target, onSubmit }: DlgEditOperatio const canSubmit = useMemo(() => isModified && alias !== '', [isModified, alias]); + const getSchemaByCst = useCallback( + (id: ConstituentaID) => { + for (const schema of cache.data) { + const cst = schema.items.find(cst => cst.id === id); + if (cst) { + return schema; + } + } + return undefined; + }, + [cache.data] + ); + useEffect(() => { - cache.preload(schemasIDs); - // eslint-disable-next-line react-compiler/react-compiler - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [schemasIDs]); + setNeedPreload(true); + setSchemaIDs(inputOperations.map(operation => operation.result).filter(id => id !== null)); + }, [inputOperations]); + + useEffect(() => { + if (needPreload) { + setNeedPreload(false); + cache.preload(schemasIDs); + } + }, [schemasIDs, needPreload, cache]); useEffect(() => { if (cache.loading || schemas.length !== schemasIDs.length) { @@ -99,20 +117,18 @@ function DlgEditOperation({ hideWindow, oss, target, onSubmit }: DlgEditOperatio } setSubstitutions(prev => prev.filter(sub => { - const original = cache.getSchemaByCst(sub.original); + const original = getSchemaByCst(sub.original); if (!original || !schemasIDs.includes(original.id)) { return false; } - const substitution = cache.getSchemaByCst(sub.substitution); + const substitution = getSchemaByCst(sub.substitution); if (!substitution || !schemasIDs.includes(substitution.id)) { return false; } return true; }) ); - // eslint-disable-next-line react-compiler/react-compiler - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [schemasIDs, schemas, cache.loading]); + }, [schemasIDs, schemas, cache.loading, getSchemaByCst]); useEffect(() => { if (cache.loading || schemas.length !== schemasIDs.length) { diff --git a/rsconcept/frontend/src/hooks/useRSFormCache.ts b/rsconcept/frontend/src/hooks/useRSFormCache.ts index 6109d213..539e70b9 100644 --- a/rsconcept/frontend/src/hooks/useRSFormCache.ts +++ b/rsconcept/frontend/src/hooks/useRSFormCache.ts @@ -5,7 +5,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import { getRSFormDetails } from '@/backend/rsforms'; import { type ErrorData } from '@/components/info/InfoError'; import { LibraryItemID } from '@/models/library'; -import { ConstituentaID, IRSForm, IRSFormData } from '@/models/rsform'; +import { IRSForm, IRSFormData } from '@/models/rsform'; import { RSFormLoader } from '@/models/RSFormLoader'; function useRSFormCache() { @@ -20,34 +20,6 @@ function useRSFormCache() { setCache(prev => [...prev, schema]); } - const getSchema = useCallback((id: LibraryItemID) => cache.find(item => item.id === id), [cache]); - - const getSchemaByCst = useCallback( - (id: ConstituentaID) => { - for (const schema of cache) { - const cst = schema.items.find(cst => cst.id === id); - if (cst) { - return schema; - } - } - return undefined; - }, - [cache] - ); - - const getConstituenta = useCallback( - (id: ConstituentaID) => { - for (const schema of cache) { - const cst = schema.items.find(cst => cst.id === id); - if (cst) { - return cst; - } - } - return undefined; - }, - [cache] - ); - const preload = useCallback( (target: LibraryItemID[]) => setPending(prev => [...prev, ...target.filter(id => !prev.includes(id))]), [] @@ -76,11 +48,9 @@ function useRSFormCache() { } }) ); - // eslint-disable-next-line react-compiler/react-compiler - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [pending]); + }, [pending, cache, processing]); - return { preload, getSchema, getConstituenta, getSchemaByCst, loading, error, setError }; + return { preload, data: cache, loading, error, setError }; } export default useRSFormCache;