R: useContext -> use hook
This commit is contained in:
parent
bfcaeb1ac5
commit
b63767a401
|
@ -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>');
|
||||
}
|
||||
|
|
|
@ -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>');
|
||||
}
|
||||
|
|
|
@ -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>');
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -8,8 +8,8 @@ import { colorBgSchemas } from '../../../colors';
|
|||
import { useRSEdit } from '../RSEditContext';
|
||||
|
||||
export function SchemasGuide() {
|
||||
const { items: libraryItems } = useLibrary();
|
||||
const { schema } = useRSEdit();
|
||||
const libraryItems = useLibrary().items;
|
||||
const schema = useRSEdit().schema;
|
||||
|
||||
const schemas = (() => {
|
||||
const processed = new Set<number>();
|
||||
|
|
|
@ -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>');
|
||||
}
|
||||
|
|
|
@ -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'>
|
||||
|
|
|
@ -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 { matchConstituenta } from '../../../models/rsformAPI';
|
||||
import { DependencyMode, useCstSearchStore } from '../../../stores/cstSearch';
|
||||
import { type IConstituenta } from '../../../models/rsform';
|
||||
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 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;
|
||||
const { activeCst, navigateCst } = useRSEdit();
|
||||
const items = useFilteredItems();
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user