B: Fix small bugs and refactor away useEffect

2025-06-26 13:00:39 +03:00 · 2025-02-05 12:43:16 +03:00 · 2025-02-05 12:43:16 +03:00 · 86f90149ee
commit 86f90149ee
parent df06e7a7b9
19 changed files with 40 additions and 93 deletions
--- a/rsconcept/frontend/src/backend/rsform/api.ts
+++ b/rsconcept/frontend/src/backend/rsform/api.ts
@ -1,6 +1,6 @@
 import { queryOptions } from '@tanstack/react-query';

-import { axiosDelete, axiosGet, axiosPatch, axiosPost } from '@/backend/apiTransport';
+import { axiosGet, axiosPatch, axiosPost } from '@/backend/apiTransport';
 import { DELAYS } from '@/backend/configuration';
 import { ILibraryItemReference, ILibraryItemVersioned, LibraryItemID, VersionID } from '@/models/library';
 import { ICstSubstitute, ICstSubstitutions } from '@/models/oss';
@ -182,7 +182,7 @@ export const rsformsApi = {
      }
    }),
  cstDelete: ({ itemID, data }: { itemID: LibraryItemID; data: IConstituentaList }) =>
-    axiosDelete<IConstituentaList, IRSFormDTO>({
+    axiosPatch<IConstituentaList, IRSFormDTO>({
      endpoint: `/api/rsforms/${itemID}/delete-multiple-cst`,
      request: {
        data: data,
--- a/rsconcept/frontend/src/components/info/BadgeConstituenta.tsx
+++ b/rsconcept/frontend/src/components/info/BadgeConstituenta.tsx
@ -22,7 +22,7 @@ function BadgeConstituenta({ value, prefixID, className, style }: BadgeConstitue

  return (
    <div
-      id={`${prefixID}${value.id}`}
+      id={prefixID ? `${prefixID}${value.id}` : undefined}
      className={clsx(
        'min-w-[3.1rem] max-w-[3.1rem]',
        'px-1',
--- a/rsconcept/frontend/src/components/select/PickConstituenta.tsx
+++ b/rsconcept/frontend/src/components/select/PickConstituenta.tsx
@ -1,7 +1,7 @@
 'use client';

 import clsx from 'clsx';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';

 import BadgeConstituenta from '@/components/info/BadgeConstituenta';
 import { CProps } from '@/components/props';
@ -12,16 +12,14 @@ import { CstMatchMode } from '@/models/miscellaneous';
 import { IConstituenta } from '@/models/rsform';
 import { matchConstituenta } from '@/models/rsformAPI';
 import { APP_COLORS } from '@/styling/color';
-import { prefixes } from '@/utils/constants';
 import { describeConstituenta } from '@/utils/labels';

 interface PickConstituentaProps extends CProps.Styling {
  id?: string;
+  items: IConstituenta[];
  value?: IConstituenta;
  onChange: (newValue: IConstituenta) => void;

-  prefixID: string;
-  data?: IConstituenta[];
  rows?: number;

  initialFilter?: string;
@ -34,11 +32,10 @@ const columnHelper = createColumnHelper<IConstituenta>();

 function PickConstituenta({
  id,
-  data,
+  items,
  value,
  initialFilter = '',
  rows = 4,
-  prefixID = prefixes.cst_list,
  describeFunc = describeConstituenta,
  matchFunc = (cst, filter) => matchConstituenta(cst, filter, CstMatchMode.ALL),
  onBeginFilter,
@ -46,21 +43,10 @@ function PickConstituenta({
  className,
  ...restProps
 }: PickConstituentaProps) {
-  const [filteredData, setFilteredData] = useState<IConstituenta[]>([]);
  const [filterText, setFilterText] = useState(initialFilter);

-  useEffect(() => {
-    if (!data) {
-      setFilteredData([]);
-    } else {
-      const newData = onBeginFilter ? data.filter(onBeginFilter) : data;
-      if (filterText) {
-        setFilteredData(newData.filter(cst => matchFunc(cst, filterText)));
-      } else {
-        setFilteredData(newData);
-      }
-    }
-  }, [data, filterText, matchFunc, onBeginFilter]);
+  const initialData = onBeginFilter ? items.filter(onBeginFilter) : items;
+  const filteredData = filterText === '' ? initialData : initialData.filter(cst => matchFunc(cst, filterText));

  const columns = [
    columnHelper.accessor('alias', {
@ -68,7 +54,7 @@ function PickConstituenta({
      size: 65,
      minSize: 65,
      maxSize: 65,
-      cell: props => <BadgeConstituenta value={props.row.original} prefixID={prefixID} />
+      cell: props => <BadgeConstituenta value={props.row.original} />
    }),
    columnHelper.accessor(cst => describeFunc(cst), {
      id: 'description',
--- a/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx
+++ b/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx
@ -22,9 +22,8 @@ interface PickMultiConstituentaProps extends CProps.Styling {
  onChange: React.Dispatch<React.SetStateAction<ConstituentaID[]>>;

  schema: IRSForm;
-  data: IConstituenta[];
+  items: IConstituenta[];

-  prefixID: string;
  rows?: number;
  noBorder?: boolean;
 }
@ -34,8 +33,7 @@ const columnHelper = createColumnHelper<IConstituenta>();
 function PickMultiConstituenta({
  id,
  schema,
-  data,
-  prefixID,
+  items,
  rows,
  noBorder,
  value,
@ -44,12 +42,13 @@ function PickMultiConstituenta({
  ...restProps
 }: PickMultiConstituentaProps) {
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [filtered, setFiltered] = useState<IConstituenta[]>(data);
  const [filterText, setFilterText] = useState('');

+  const [filtered, setFiltered] = useState<IConstituenta[]>(items);
+
  // TODO: extract graph fold logic to separate function
  const foldedGraph = (() => {
-    if (data.length === schema.items.length) {
+    if (items.length === schema.items.length) {
      return schema.graph;
    }
    const newGraph = new Graph();
@ -60,7 +59,7 @@ function PickMultiConstituenta({
      });
    });
    schema.items
-      .filter(item => data.find(cst => cst.id === item.id) === undefined)
+      .filter(item => items.find(cst => cst.id === item.id) === undefined)
      .forEach(item => {
        newGraph.foldNode(item.id);
      });
@ -80,17 +79,17 @@ function PickMultiConstituenta({
  }, [filtered, setRowSelection, value]);

  useEffect(() => {
-    if (data.length === 0) {
+    if (items.length === 0) {
      setFiltered([]);
    } else if (filterText) {
-      setFiltered(data.filter(cst => matchConstituenta(cst, filterText, CstMatchMode.ALL)));
+      setFiltered(items.filter(cst => matchConstituenta(cst, filterText, CstMatchMode.ALL)));
    } else {
-      setFiltered(data);
+      setFiltered(items);
    }
-  }, [filterText, data]);
+  }, [filterText, items]);

  function handleRowSelection(updater: React.SetStateAction<RowSelectionState>) {
-    if (!data) {
+    if (!items) {
      onChange([]);
    } else {
      const newRowSelection = typeof updater === 'function' ? updater(rowSelection) : updater;
@ -109,7 +108,7 @@ function PickMultiConstituenta({
      id: 'alias',
      header: () => <span className='pl-3'>Имя</span>,
      size: 65,
-      cell: props => <BadgeConstituenta value={props.row.original} prefixID={prefixID} />
+      cell: props => <BadgeConstituenta value={props.row.original} />
    }),
    columnHelper.accessor(cst => describeConstituenta(cst), {
      id: 'description',
@ -122,7 +121,7 @@ function PickMultiConstituenta({
    <div className={clsx(noBorder ? '' : 'border', className)} {...restProps}>
      <div className={clsx('px-3 flex justify-between items-center', 'clr-input', 'border-b', 'rounded-t-md')}>
        <div className='w-[24ch] select-none whitespace-nowrap'>
-          {data.length > 0 ? `Выбраны ${value.length} из ${data.length}` : 'Конституенты'}
+          {items.length > 0 ? `Выбраны ${value.length} из ${items.length}` : 'Конституенты'}
        </div>
        <SearchBar
          id='dlg_constituents_search'
--- a/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
+++ b/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
@ -25,7 +25,6 @@ interface PickSubstitutionsProps extends CProps.Styling {

  suggestions?: ICstSubstitute[];

-  prefixID: string;
  rows?: number;
  allowSelfSubstitution?: boolean;

@ -39,7 +38,6 @@ function PickSubstitutions({
  value,
  onChange,
  suggestions,
-  prefixID,
  rows,
  schemas,
  filter,
@ -162,9 +160,7 @@ function PickSubstitutions({
    columnHelper.accessor(item => item.substitution.alias, {
      id: 'left_alias',
      size: 65,
-      cell: props => (
-        <BadgeConstituenta value={props.row.original.substitution} prefixID={`${prefixID}_${props.row.index}_1_`} />
-      )
+      cell: props => <BadgeConstituenta value={props.row.original.substitution} />
    }),
    columnHelper.display({
      id: 'status',
@ -174,9 +170,7 @@ function PickSubstitutions({
    columnHelper.accessor(item => item.original.alias, {
      id: 'right_alias',
      size: 65,
-      cell: props => (
-        <BadgeConstituenta value={props.row.original.original} prefixID={`${prefixID}_${props.row.index}_2_`} />
-      )
+      cell: props => <BadgeConstituenta value={props.row.original.original} />
    }),
    columnHelper.accessor(item => item.original_source.alias, {
      id: 'right_schema',
--- a/rsconcept/frontend/src/components/ui/Checkbox.tsx
+++ b/rsconcept/frontend/src/components/ui/Checkbox.tsx
@ -64,7 +64,7 @@ function Checkbox({
      <div
        className={clsx(
          'max-w-[1rem] min-w-[1rem] h-4', //
-          'pt-[0.1rem] pl-[0.1rem]',
+          'pt-[0.05rem] pl-[0.05rem]',
          'border rounded-sm',
          'cc-animate-color',
          {
--- a/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
+++ b/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
@ -66,7 +66,7 @@ function CheckboxTristate({
      <div
        className={clsx(
          'w-4 h-4', //
-          'pt-[0.1rem] pl-[0.1rem]',
+          'pt-[0.05rem] pl-[0.05rem]',
          'border rounded-sm',
          'cc-animate-color',
          {
--- a/rsconcept/frontend/src/dialogs/DlgCstTemplate/TabArguments.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCstTemplate/TabArguments.tsx
@ -13,7 +13,6 @@ import NoData from '@/components/ui/NoData';
 import { IConstituenta, IRSForm } from '@/models/rsform';
 import { IArgumentValue } from '@/models/rslang';
 import { APP_COLORS } from '@/styling/color';
-import { prefixes } from '@/utils/constants';

 interface TabArgumentsProps {
  state: IArgumentsState;
@ -189,9 +188,8 @@ function TabArguments({ state, schema, partialUpdate }: TabArgumentsProps) {
      <PickConstituenta
        id='dlg_argument_picker'
        value={selectedCst}
-        data={schema.items}
+        items={schema.items}
        onChange={handleSelectConstituenta}
-        prefixID={prefixes.cst_modal_list}
        rows={7}
      />

--- a/rsconcept/frontend/src/dialogs/DlgCstTemplate/TabTemplate.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCstTemplate/TabTemplate.tsx
@ -9,7 +9,6 @@ import SelectSingle from '@/components/ui/SelectSingle';
 import TextArea from '@/components/ui/TextArea';
 import { CATEGORY_CST_TYPE, IConstituenta, IRSForm } from '@/models/rsform';
 import { applyFilterCategory } from '@/models/rsformAPI';
-import { prefixes } from '@/utils/constants';

 export interface ITemplateState {
  templateID?: number;
@ -101,9 +100,8 @@ function TabTemplate({ state, partialUpdate, templateSchema }: TabTemplateProps)
      <PickConstituenta
        id='dlg_template_picker'
        value={state.prototype}
-        data={filteredData}
+        items={filteredData}
        onChange={cst => partialUpdate({ prototype: cst })}
-        prefixID={prefixes.cst_template_ist}
        className='rounded-t-none'
        rows={8}
      />
--- a/rsconcept/frontend/src/dialogs/DlgEditOperation/TabSynthesis.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditOperation/TabSynthesis.tsx
@ -3,7 +3,6 @@ import TextArea from '@/components/ui/TextArea';
 import { ICstSubstitute } from '@/models/oss';
 import { IRSForm } from '@/models/rsform';
 import { APP_COLORS } from '@/styling/color';
-import { prefixes } from '@/utils/constants';

 interface TabSynthesisProps {
  validationText: string;
@ -27,7 +26,6 @@ function TabSynthesis({
    <div className='cc-fade-in cc-column mt-3'>
      <PickSubstitutions
        schemas={schemas}
-        prefixID={prefixes.dlg_cst_substitutes_list}
        rows={8}
        value={substitutions}
        onChange={setSubstitutions}
--- a/rsconcept/frontend/src/dialogs/DlgEditReference/TabEntityReference.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/TabEntityReference.tsx
@ -12,7 +12,6 @@ import { parseEntityReference, parseGrammemes } from '@/models/languageAPI';
 import { CstMatchMode } from '@/models/miscellaneous';
 import { IConstituenta, IRSForm } from '@/models/rsform';
 import { matchConstituenta } from '@/models/rsformAPI';
-import { prefixes } from '@/utils/constants';
 import { IGrammemeOption, SelectorGrammemes } from '@/utils/selectors';

 import { IReferenceInputState } from './DlgEditReference';
@ -63,9 +62,8 @@ function TabEntityReference({ initial, schema, onChangeValid, onChangeReference
        id='dlg_reference_entity_picker'
        initialFilter={initial.text}
        value={selectedCst}
-        data={schema.items}
+        items={schema.items}
        onChange={handleSelectConstituenta}
-        prefixID={prefixes.cst_modal_list}
        describeFunc={cst => cst.term_resolved}
        matchFunc={(cst, filter) => matchConstituenta(cst, filter, CstMatchMode.TERM)}
        onBeginFilter={cst => cst.term_resolved !== ''}
--- a/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabConstituents.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabConstituents.tsx
@ -4,7 +4,6 @@ import { useRSFormSuspense } from '@/backend/rsform/useRSForm';
 import PickMultiConstituenta from '@/components/select/PickMultiConstituenta';
 import { LibraryItemID } from '@/models/library';
 import { ConstituentaID } from '@/models/rsform';
-import { prefixes } from '@/utils/constants';

 interface TabConstituentsProps {
  itemID: LibraryItemID;
@ -16,14 +15,7 @@ function TabConstituents({ itemID, selected, setSelected }: TabConstituentsProps
  const { schema } = useRSFormSuspense({ itemID });

  return (
-    <PickMultiConstituenta
-      schema={schema}
-      data={schema.items}
-      rows={13}
-      prefixID={prefixes.cst_inline_synth_list}
-      value={selected}
-      onChange={setSelected}
-    />
+    <PickMultiConstituenta schema={schema} items={schema.items} rows={13} value={selected} onChange={setSelected} />
  );
 }

--- a/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabSubstitutions.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabSubstitutions.tsx
@ -5,7 +5,6 @@ import PickSubstitutions from '@/components/select/PickSubstitutions';
 import { LibraryItemID } from '@/models/library';
 import { ICstSubstitute } from '@/models/oss';
 import { ConstituentaID, IRSForm } from '@/models/rsform';
-import { prefixes } from '@/utils/constants';

 interface TabSubstitutionsProps {
  receiver: IRSForm;
@ -25,7 +24,6 @@ function TabSubstitutions({ sourceID, receiver, selected, substitutions, setSubs
      value={substitutions}
      onChange={setSubstitutions}
      rows={10}
-      prefixID={prefixes.cst_inline_synth_substitutes}
      schemas={schemas}
      filter={cst => cst.id !== source?.id || selected.includes(cst.id)}
    />
--- a/rsconcept/frontend/src/dialogs/DlgRelocateConstituents.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgRelocateConstituents.tsx
@ -18,7 +18,6 @@ import { IOperation, IOperationSchema } from '@/models/oss';
 import { getRelocateCandidates } from '@/models/ossAPI';
 import { ConstituentaID } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
-import { prefixes } from '@/utils/constants';

 export interface DlgRelocateConstituentsProps {
  oss: IOperationSchema;
@ -124,9 +123,8 @@ function DlgRelocateConstituents() {
          <PickMultiConstituenta
            noBorder
            schema={sourceData.schema}
-            data={filteredConstituents}
+            items={filteredConstituents}
            rows={12}
-            prefixID={prefixes.dlg_cst_constituents_list}
            value={selected}
            onChange={setSelected}
          />
--- a/rsconcept/frontend/src/dialogs/DlgSubstituteCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgSubstituteCst.tsx
@ -9,7 +9,6 @@ import { HelpTopic } from '@/models/miscellaneous';
 import { ICstSubstitute, ICstSubstitutions } from '@/models/oss';
 import { IRSForm } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
-import { prefixes } from '@/utils/constants';

 export interface DlgSubstituteCstProps {
  schema: IRSForm;
@ -43,7 +42,6 @@ function DlgSubstituteCst() {
        value={substitutions}
        onChange={setSubstitutions}
        rows={6}
-        prefixID={prefixes.dlg_cst_substitutes_list}
        schemas={[schema]}
      />
    </Modal>
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@ -14,7 +14,7 @@ import Indicator from '@/components/ui/Indicator';
 import Overlay from '@/components/ui/Overlay';
 import SubmitButton from '@/components/ui/SubmitButton';
 import TextArea from '@/components/ui/TextArea';
-import { ConstituentaID, CstType } from '@/models/rsform';
+import { CstType } from '@/models/rsform';
 import { isBaseSet, isBasicConcept, isFunctional } from '@/models/rsformAPI';
 import { IExpressionParse, ParsingStatus } from '@/models/rslang';
 import { useDialogsStore } from '@/stores/dialogs';
@ -31,7 +31,6 @@ interface FormConstituentaProps {
  toggleReset: boolean;

  onEditTerm: () => void;
-  onOpenEdit?: (cstID: ConstituentaID) => void;
 }

 function FormConstituenta({
@ -39,11 +38,10 @@ function FormConstituenta({
  id,

  toggleReset,
-  onEditTerm,
-  onOpenEdit
+  onEditTerm
 }: FormConstituentaProps) {
  const { cstUpdate } = useCstUpdate();
-  const { schema, activeCst } = useRSEdit();
+  const { schema, activeCst, navigateCst } = useRSEdit();
  const { isModified, setIsModified } = useModificationStore();
  const isProcessing = useMutatingRSForm();

@ -146,7 +144,7 @@ function FormConstituenta({
          maxHeight='8rem'
          placeholder='Обозначение для текстовых определений'
          schema={schema}
-          onOpenEdit={onOpenEdit}
+          onOpenEdit={navigateCst}
          value={term}
          initialValue={activeCst?.term_raw ?? ''}
          resolved={activeCst?.term_resolved ?? 'Конституента не выбрана'}
@ -191,7 +189,7 @@ function FormConstituenta({
                onChangeExpression={newValue => setExpression(newValue)}
                onChangeTypification={setTypification}
                onChangeLocalParse={setLocalParse}
-                onOpenEdit={onOpenEdit}
+                onOpenEdit={navigateCst}
                onShowTypeGraph={handleTypeGraph}
              />
            ) : null}
@ -203,7 +201,7 @@ function FormConstituenta({
                minHeight='3.75rem'
                maxHeight='8rem'
                schema={schema}
-                onOpenEdit={onOpenEdit}
+                onOpenEdit={navigateCst}
                value={textDefinition}
                initialValue={activeCst.definition_raw}
                resolved={activeCst.definition_resolved}
--- a/rsconcept/frontend/src/pages/RSFormPage/RSEditContext.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSEditContext.tsx
@ -193,7 +193,7 @@ export const RSEditState = ({
      navigateRSForm({ tab: activeTab, activeID: newCst.id });
      if (activeTab === RSTabID.CST_LIST) {
        setTimeout(() => {
-          const element = document.getElementById(`${prefixes.cst_list}${newCst.alias}`);
+          const element = document.getElementById(`${prefixes.cst_list}${newCst.id}`);
          if (element) {
            element.scrollIntoView({
              behavior: 'smooth',
--- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx
@ -36,7 +36,7 @@ function TableSideConstituents({
    }
    if (autoScroll) {
      setTimeout(() => {
-        const element = document.getElementById(`${prefixes.cst_side_table}${activeCst.alias}`);
+        const element = document.getElementById(`${prefixes.cst_side_table}${activeCst.id}`);
        if (element) {
          element.scrollIntoView({
            behavior: 'smooth',
--- a/rsconcept/frontend/src/utils/constants.ts
+++ b/rsconcept/frontend/src/utils/constants.ts
@ -125,15 +125,9 @@ export const prefixes = {
  page_size: 'page_size_',
  oss_list: 'oss_list_',
  cst_list: 'cst_list_',
-  cst_inline_synth_list: 'cst_inline_synth_list_',
-  cst_inline_synth_substitutes: 'cst_inline_synth_substitutes_',
  cst_side_table: 'cst_side_table_',
  cst_hidden_list: 'cst_hidden_list_',
-  cst_modal_list: 'cst_modal_list_',
-  cst_template_ist: 'cst_template_list_',
-  cst_wordform_list: 'cst_wordform_list_',
  cst_status_list: 'cst_status_list_',
-  cst_match_mode_list: 'cst_match_mode_list_',
  cst_source_list: 'cst_source_list_',
  cst_delete_list: 'cst_delete_list_',
  cst_dependant_list: 'cst_dependant_list_',
@ -150,7 +144,5 @@ export const prefixes = {
  user_subs: 'user_subs_',
  user_editors: 'user_editors_',
  wordform_list: 'wordform_list_',
-  rsedit_btn: 'rsedit_btn_',
-  dlg_cst_substitutes_list: 'dlg_cst_substitutes_list_',
-  dlg_cst_constituents_list: 'dlg_cst_constituents_list_'
+  rsedit_btn: 'rsedit_btn_'
 };