R: useContext -> use hook

rsconcept/frontend/src/app/Navigation/NavigationContext.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, use, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 
 export interface NavigationProps {
@@ -23,9 +23,9 @@ interface INavigationContext {
   setIsBlocked: (value: boolean) => void;
 }
 
-const NavigationContext = createContext<INavigationContext | null>(null);
+export const NavigationContext = createContext<INavigationContext | null>(null);
 export const useConceptNavigation = () => {
-  const context = useContext(NavigationContext);
+  const context = use(NavigationContext);
   if (!context) {
     throw new Error('useConceptNavigation has to be used within <NavigationState>');
   }

rsconcept/frontend/src/features/oss/pages/OssPage/OssEditContext.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, use, useEffect, useState } from 'react';
 
 import { urls, useConceptNavigation } from '@/app';
 import { useAuthSuspense } from '@/features/auth';
@@ -44,9 +44,9 @@ export interface IOssEditContext {
   setSelected: React.Dispatch<React.SetStateAction<number[]>>;
 }
 
-const OssEditContext = createContext<IOssEditContext | null>(null);
+export const OssEditContext = createContext<IOssEditContext | null>(null);
 export const useOssEdit = () => {
-  const context = useContext(OssEditContext);
+  const context = use(OssEditContext);
   if (context === null) {
     throw new Error('useOssEdit has to be used within <OssEditState>');
   }

rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/TemplateContext.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useState } from 'react';
+import { createContext, use, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { useDialogsStore } from '@/stores/dialogs';
@@ -25,9 +25,9 @@ export interface ITemplateContext {
   onChangeFilterCategory: (newFilterCategory: IConstituenta | null) => void;
 }
 
-const TemplateContext = createContext<ITemplateContext | null>(null);
+export const TemplateContext = createContext<ITemplateContext | null>(null);
 export const useTemplateContext = () => {
-  const context = useContext(TemplateContext);
+  const context = use(TemplateContext);
   if (context === null) {
     throw new Error('useTemplateContext has to be used within <TemplateState>');
   }

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

@@ -18,7 +18,7 @@ interface EditorControlsProps {
 }
 
 export function EditorControls({ constituenta, disabled, onEditTerm }: EditorControlsProps) {
-  const { schema } = useRSEdit();
+  const schema = useRSEdit().schema;
   const { isModified } = useModificationStore();
   const isProcessing = useMutatingRSForm();
 

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

@@ -61,7 +61,7 @@ export function EditorRSExpression({
   onShowTypeGraph,
   ...restProps
 }: EditorRSExpressionProps) {
-  const { schema } = useRSEdit();
+  const schema = useRSEdit().schema;
 
   const [isModified, setIsModified] = useState(false);
   const rsInput = useRef<ReactCodeMirrorRef>(null);

rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx

@@ -8,8 +8,8 @@ import { colorBgSchemas } from '../../../colors';
 import { useRSEdit } from '../RSEditContext';
 
 export function SchemasGuide() {
-  const { items: libraryItems } = useLibrary();
+  const libraryItems = useLibrary().items;
-  const { schema } = useRSEdit();
+  const schema = useRSEdit().schema;
 
   const schemas = (() => {
     const processed = new Set<number>();

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, use, useEffect, useState } from 'react';
 
 import { urls, useConceptNavigation } from '@/app';
 import { useAuthSuspense } from '@/features/auth';
@@ -66,9 +66,9 @@ export interface IRSEditContext {
   promptTemplate: () => void;
 }
 
-const RSEditContext = createContext<IRSEditContext | null>(null);
+export const RSEditContext = createContext<IRSEditContext | null>(null);
 export const useRSEdit = () => {
-  const context = useContext(RSEditContext);
+  const context = use(RSEditContext);
   if (context === null) {
     throw new Error('useRSEdit has to be used within <RSEditState>');
   }

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

@@ -24,7 +24,7 @@ export function ConstituentsSearch({ dense }: ConstituentsSearchProps) {
   const setSource = useCstSearchStore(state => state.setSource);
   const toggleInherited = useCstSearchStore(state => state.toggleInherited);
 
-  const { schema } = useRSEdit();
+  const schema = useRSEdit().schema;
 
   return (
     <div className='flex border-b clr-input rounded-t-md'>

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

@@ -9,11 +9,11 @@ import { PARAMETER, prefixes } from '@/utils/constants';
 
 import { BadgeConstituenta } from '../../../components/BadgeConstituenta';
 import { describeConstituenta } from '../../../labels';
-import { type IConstituenta, type IRSForm } from '../../../models/rsform';
+import { type IConstituenta } from '../../../models/rsform';
-import { matchConstituenta } from '../../../models/rsformAPI';
-import { DependencyMode, useCstSearchStore } from '../../../stores/cstSearch';
 import { useRSEdit } from '../RSEditContext';
 
+import { useFilteredItems } from './useFilteredItems';
+
 const DESCRIPTION_MAX_SYMBOLS = 280;
 
 interface TableSideConstituentsProps {
@@ -24,16 +24,8 @@ interface TableSideConstituentsProps {
 const columnHelper = createColumnHelper<IConstituenta>();
 
 export function TableSideConstituents({ autoScroll = true, maxHeight }: TableSideConstituentsProps) {
-  const { schema, activeCst, navigateCst } = useRSEdit();
+  const { activeCst, navigateCst } = useRSEdit();
-
+  const items = useFilteredItems();
-  const query = useCstSearchStore(state => state.query);
-  const filterMatch = useCstSearchStore(state => state.match);
-  const filterSource = useCstSearchStore(state => state.source);
-  const includeInherited = useCstSearchStore(state => state.includeInherited);
-
-  const graphFiltered = activeCst ? applyGraphQuery(schema, activeCst.id, filterSource) : schema.items;
-  const queryFiltered = query ? graphFiltered.filter(cst => matchConstituenta(cst, query, filterMatch)) : graphFiltered;
-  const items = !includeInherited ? queryFiltered.filter(cst => !cst.is_inherited) : queryFiltered;
 
   useEffect(() => {
     if (!activeCst) {
@@ -125,34 +117,3 @@ export function TableSideConstituents({ autoScroll = true, maxHeight }: TableSid
     />
   );
 }
-
-// ====== Internals =========
-/**
- * Filter list of  {@link ILibraryItem} to a given graph query.
- */
-function applyGraphQuery(target: IRSForm, pivot: number, mode: DependencyMode): IConstituenta[] {
-  if (mode === DependencyMode.ALL) {
-    return target.items;
-  }
-  const ids = (() => {
-    switch (mode) {
-      case DependencyMode.OUTPUTS: {
-        return target.graph.nodes.get(pivot)?.outputs;
-      }
-      case DependencyMode.INPUTS: {
-        return target.graph.nodes.get(pivot)?.inputs;
-      }
-      case DependencyMode.EXPAND_OUTPUTS: {
-        return target.graph.expandAllOutputs([pivot]);
-      }
-      case DependencyMode.EXPAND_INPUTS: {
-        return target.graph.expandAllInputs([pivot]);
-      }
-    }
-  })();
-  if (ids) {
-    return target.items.filter(cst => ids.find(id => id === cst.id));
-  } else {
-    return target.items;
-  }
-}

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

@@ -0,0 +1,48 @@
+import { type IConstituenta, type IRSForm } from '../../../models/rsform';
+import { matchConstituenta } from '../../../models/rsformAPI';
+import { DependencyMode, useCstSearchStore } from '../../../stores/cstSearch';
+import { useRSEdit } from '../RSEditContext';
+
+export function useFilteredItems() {
+  const { schema, activeCst } = useRSEdit();
+
+  const query = useCstSearchStore(state => state.query);
+  const filterMatch = useCstSearchStore(state => state.match);
+  const filterSource = useCstSearchStore(state => state.source);
+  const includeInherited = useCstSearchStore(state => state.includeInherited);
+
+  const graphFiltered = activeCst ? applyGraphQuery(schema, activeCst.id, filterSource) : schema.items;
+  const queryFiltered = query ? graphFiltered.filter(cst => matchConstituenta(cst, query, filterMatch)) : graphFiltered;
+  const items = !includeInherited ? queryFiltered.filter(cst => !cst.is_inherited) : queryFiltered;
+  return items;
+}
+
+/**
+ * Filter list of  {@link ILibraryItem} to a given graph query.
+ */
+function applyGraphQuery(target: IRSForm, pivot: number, mode: DependencyMode): IConstituenta[] {
+  if (mode === DependencyMode.ALL) {
+    return target.items;
+  }
+  const ids = (() => {
+    switch (mode) {
+      case DependencyMode.OUTPUTS: {
+        return target.graph.nodes.get(pivot)?.outputs;
+      }
+      case DependencyMode.INPUTS: {
+        return target.graph.nodes.get(pivot)?.inputs;
+      }
+      case DependencyMode.EXPAND_OUTPUTS: {
+        return target.graph.expandAllOutputs([pivot]);
+      }
+      case DependencyMode.EXPAND_INPUTS: {
+        return target.graph.expandAllInputs([pivot]);
+      }
+    }
+  })();
+  if (ids) {
+    return target.items.filter(cst => ids.find(id => id === cst.id));
+  } else {
+    return target.items;
+  }
+}