R: Remove redundant useEffect

rsconcept/frontend/src/features/rsform/dialogs/DlgEditReference/DlgEditReference.tsx

@@ -36,7 +36,7 @@ export enum TabID {
 }
 
 function DlgEditReference() {
-  const { schema, initial, onSave } = useDialogsStore(state => state.props as DlgEditReferenceProps);
+  const { initial, onSave } = useDialogsStore(state => state.props as DlgEditReferenceProps);
   const [activeTab, setActiveTab] = useState(initial.type === ReferenceType.ENTITY ? TabID.ENTITY : TabID.SYNTACTIC);
   const [reference, setReference] = useState('');
   const [isValid, setIsValid] = useState(false);
@@ -70,16 +70,11 @@ function DlgEditReference() {
         </TabList>
 
         <TabPanel>
-          <TabEntityReference
+          <TabEntityReference onChangeReference={setReference} onChangeValid={setIsValid} />
-            initial={initial}
-            schema={schema}
-            onChangeReference={setReference}
-            onChangeValid={setIsValid}
-          />
         </TabPanel>
 
         <TabPanel>
-          <TabSyntacticReference initial={initial} onChangeReference={setReference} onChangeValid={setIsValid} />
+          <TabSyntacticReference onChangeReference={setReference} onChangeValid={setIsValid} />
         </TabPanel>
       </Tabs>
     </ModalForm>

rsconcept/frontend/src/features/rsform/dialogs/DlgEditReference/TabEntityReference.tsx

@@ -3,26 +3,26 @@
 import { useEffect, useState } from 'react';
 
 import { Label, TextInput } from '@/components/Input';
+import { useDialogsStore } from '@/stores/dialogs';
 
 import { PickConstituenta } from '../../components/PickConstituenta';
 import SelectMultiGrammeme from '../../components/SelectMultiGrammeme';
 import SelectWordForm from '../../components/SelectWordForm';
 import { IGrammemeOption, ReferenceType } from '../../models/language';
 import { parseEntityReference, parseGrammemes, supportedGrammeOptions } from '../../models/languageAPI';
-import { IConstituenta, IRSForm } from '../../models/rsform';
+import { IConstituenta } from '../../models/rsform';
 import { matchConstituenta } from '../../models/rsformAPI';
 import { CstMatchMode } from '../../stores/cstSearch';
 
-import { IReferenceInputState } from './DlgEditReference';
+import { DlgEditReferenceProps } from './DlgEditReference';
 
 interface TabEntityReferenceProps {
-  initial: IReferenceInputState;
-  schema: IRSForm;
   onChangeValid: (newValue: boolean) => void;
   onChangeReference: (newValue: string) => void;
 }
 
-function TabEntityReference({ initial, schema, onChangeValid, onChangeReference }: TabEntityReferenceProps) {
+function TabEntityReference({ onChangeValid, onChangeReference }: TabEntityReferenceProps) {
+  const { schema, initial } = useDialogsStore(state => state.props as DlgEditReferenceProps);
   const [selectedCst, setSelectedCst] = useState<IConstituenta | undefined>(undefined);
   const [alias, setAlias] = useState('');
   const [term, setTerm] = useState('');

rsconcept/frontend/src/features/rsform/dialogs/DlgEditReference/TabSyntacticReference.tsx

@@ -3,19 +3,20 @@
 import { useEffect, useState } from 'react';
 
 import { TextInput } from '@/components/Input';
+import { useDialogsStore } from '@/stores/dialogs';
 
 import { ReferenceType } from '../../models/language';
 import { parseSyntacticReference } from '../../models/languageAPI';
 
-import { IReferenceInputState } from './DlgEditReference';
+import { DlgEditReferenceProps } from './DlgEditReference';
 
 interface TabSyntacticReferenceProps {
-  initial: IReferenceInputState;
   onChangeValid: (newValue: boolean) => void;
   onChangeReference: (newValue: string) => void;
 }
 
-function TabSyntacticReference({ initial, onChangeValid, onChangeReference }: TabSyntacticReferenceProps) {
+function TabSyntacticReference({ onChangeValid, onChangeReference }: TabSyntacticReferenceProps) {
+  const { initial } = useDialogsStore(state => state.props as DlgEditReferenceProps);
   const [nominal, setNominal] = useState('');
   const [offset, setOffset] = useState(1);
 

rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx

@@ -14,7 +14,7 @@ import { promptUnsaved } from '@/utils/utils';
 import { useCstUpdate } from '../../../backend/useCstUpdate';
 import { useMutatingRSForm } from '../../../backend/useMutatingRSForm';
 import { useRSEdit } from '../RSEditContext';
-import ViewConstituents from '../ViewConstituents';
+import { ViewConstituents } from '../ViewConstituents';
 
 import EditorControls from './EditorControls';
 import FormConstituenta from './FormConstituenta';
@@ -135,11 +135,7 @@ function EditorConstituenta() {
             />
           ) : null}
         </div>
-        <ViewConstituents
+        <ViewConstituents isMounted={showList} isBottom={isNarrow} />
-          isMounted={showList} //
-          expression={activeCst?.definition_formal ?? ''}
-          isBottom={isNarrow}
-        />
       </div>
     </>
   );

rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx

@@ -17,12 +17,11 @@ interface ConstituentsSearchProps {
   schema: IRSForm;
   dense?: boolean;
   activeID?: number;
-  activeExpression: string;
 
-  onChange: React.Dispatch<React.SetStateAction<IConstituenta[]>>;
+  onChange: (newValue: IConstituenta[]) => void;
 }
 
-function ConstituentsSearch({ schema, activeID, activeExpression, dense, onChange }: ConstituentsSearchProps) {
+export function ConstituentsSearch({ schema, activeID, dense, onChange }: ConstituentsSearchProps) {
   const query = useCstSearchStore(state => state.query);
   const filterMatch = useCstSearchStore(state => state.match);
   const filterSource = useCstSearchStore(state => state.source);
@@ -32,25 +31,13 @@ function ConstituentsSearch({ schema, activeID, activeExpression, dense, onChang
   const setSource = useCstSearchStore(state => state.setSource);
   const toggleInherited = useCstSearchStore(state => state.toggleInherited);
 
+  const graphFiltered = activeID ? applyGraphQuery(schema, activeID, filterSource) : schema.items;
+  const queryFiltered = query ? graphFiltered.filter(cst => matchConstituenta(cst, query, filterMatch)) : graphFiltered;
+  const inheritanceFiltered = !includeInherited ? queryFiltered.filter(cst => !cst.is_inherited) : queryFiltered;
+
   useEffect(() => {
-    if (schema.items.length === 0) {
+    onChange(inheritanceFiltered);
-      onChange([]);
+  }, [inheritanceFiltered, onChange]);
-      return;
-    }
-    let result: IConstituenta[] = [];
-    if (!activeID) {
-      result = schema.items;
-    } else {
-      result = applyGraphQuery(schema, activeID, filterSource);
-    }
-    if (query) {
-      result = result.filter(cst => matchConstituenta(cst, query, filterMatch));
-    }
-    if (!includeInherited) {
-      result = result.filter(cst => !cst.is_inherited);
-    }
-    onChange(result);
-  }, [query, onChange, filterSource, activeExpression, schema.items, schema, filterMatch, activeID, includeInherited]);
 
   return (
     <div className='flex border-b clr-input rounded-t-md'>
@@ -76,29 +63,27 @@ function ConstituentsSearch({ schema, activeID, activeExpression, dense, onChang
   );
 }
 
-export default ConstituentsSearch;
-
 // ====== Internals =========
 /**
  * Filter list of  {@link ILibraryItem} to a given graph query.
  */
-export function applyGraphQuery(target: IRSForm, start: number, mode: DependencyMode): IConstituenta[] {
+function applyGraphQuery(target: IRSForm, pivot: number, mode: DependencyMode): IConstituenta[] {
   if (mode === DependencyMode.ALL) {
     return target.items;
   }
   const ids: number[] | undefined = (() => {
     switch (mode) {
       case DependencyMode.OUTPUTS: {
-        return target.graph.nodes.get(start)?.outputs;
+        return target.graph.nodes.get(pivot)?.outputs;
       }
       case DependencyMode.INPUTS: {
-        return target.graph.nodes.get(start)?.inputs;
+        return target.graph.nodes.get(pivot)?.inputs;
       }
       case DependencyMode.EXPAND_OUTPUTS: {
-        return target.graph.expandAllOutputs([start]);
+        return target.graph.expandAllOutputs([pivot]);
       }
       case DependencyMode.EXPAND_INPUTS: {
-        return target.graph.expandAllInputs([start]);
+        return target.graph.expandAllInputs([pivot]);
       }
     }
     return undefined;

rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx

@@ -12,19 +12,18 @@ import { PARAMETER } from '@/utils/constants';
 import { IConstituenta } from '../../../models/rsform';
 import { useRSEdit } from '../RSEditContext';
 
-import ConstituentsSearch from './ConstituentsSearch';
+import { ConstituentsSearch } from './ConstituentsSearch';
 import TableSideConstituents from './TableSideConstituents';
 
 // Window width cutoff for dense search bar
 const COLUMN_DENSE_SEARCH_THRESHOLD = 1100;
 
 interface ViewConstituentsProps {
-  expression: string;
   isBottom?: boolean;
   isMounted: boolean;
 }
 
-function ViewConstituents({ expression, isBottom, isMounted }: ViewConstituentsProps) {
+export function ViewConstituents({ isBottom, isMounted }: ViewConstituentsProps) {
   const windowSize = useWindowSize();
   const role = useRoleStore(state => state.role);
   const listHeight = useFitHeight(!isBottom ? '8.2rem' : role !== UserRole.READER ? '42rem' : '35rem', '10rem');
@@ -53,7 +52,6 @@ function ViewConstituents({ expression, isBottom, isMounted }: ViewConstituentsP
         dense={windowSize.width && windowSize.width < COLUMN_DENSE_SEARCH_THRESHOLD ? true : undefined}
         schema={schema}
         activeID={activeCst?.id}
-        activeExpression={expression}
         onChange={setFilteredData}
       />
       <TableSideConstituents
@@ -66,5 +64,3 @@ function ViewConstituents({ expression, isBottom, isMounted }: ViewConstituentsP
     </div>
   );
 }
-
-export default ViewConstituents;

rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/index.tsx

@@ -1 +1 @@
-export { default } from './ViewConstituents';
+export { ViewConstituents } from './ViewConstituents';

rsconcept/frontend/src/hooks/usePartialUpdate.ts

@@ -1,17 +0,0 @@
-'use client';
-
-import { useReducer } from 'react';
-
-function usePartialUpdate<ValueType>(initialValue: ValueType) {
-  const [value, updateValue] = useReducer(
-    (data: ValueType, newData: Partial<ValueType>) => ({
-      ...data,
-      ...newData
-    }),
-    initialValue
-  );
-
-  return [value, updateValue] as [ValueType, typeof updateValue];
-}
-
-export default usePartialUpdate;