R: Decouple setters from onChange events

rsconcept/frontend/src/components/select/SelectMultiGrammeme.tsx

@@ -11,11 +11,11 @@ interface SelectMultiGrammemeProps
   extends Omit<SelectMultiProps<IGrammemeOption>, 'value' | 'onChange'>,
     CProps.Styling {
   value: IGrammemeOption[];
-  setValue: React.Dispatch<React.SetStateAction<IGrammemeOption[]>>;
+  onChangeValue: (newValue: IGrammemeOption[]) => void;
   placeholder?: string;
 }
 
-function SelectMultiGrammeme({ value, setValue, ...restProps }: SelectMultiGrammemeProps) {
+function SelectMultiGrammeme({ value, onChangeValue, ...restProps }: SelectMultiGrammemeProps) {
   const [options, setOptions] = useState<IGrammemeOption[]>([]);
 
   useEffect(() => {
@@ -29,7 +29,7 @@ function SelectMultiGrammeme({ value, setValue, ...restProps }: SelectMultiGramm
     <SelectMulti
       options={options}
       value={value}
-      onChange={newValue => setValue([...newValue].sort(compareGrammemeOptions))}
+      onChange={newValue => onChangeValue([...newValue].sort(compareGrammemeOptions))}
       {...restProps}
     />
   );

rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx

@@ -157,7 +157,7 @@ function DataTable<TData extends RowData>({
             enableRowSelection={enableRowSelection}
             enableSorting={enableSorting}
             headPosition={headPosition}
-            setLastSelected={setLastSelected}
+            resetLastSelected={() => setLastSelected(undefined)}
           />
         ) : null}
 
@@ -168,7 +168,7 @@ function DataTable<TData extends RowData>({
           conditionalRowStyles={conditionalRowStyles}
           enableRowSelection={enableRowSelection}
           lastSelected={lastSelected}
-          setLastSelected={setLastSelected}
+          onChangeLastSelected={setLastSelected}
           onRowClicked={onRowClicked}
           onRowDoubleClicked={onRowDoubleClicked}
         />

rsconcept/frontend/src/components/ui/DataTable/SelectAll.tsx

@@ -4,12 +4,12 @@ import CheckboxTristate from '@/components/ui/CheckboxTristate';
 
 interface SelectAllProps<TData> {
   table: Table<TData>;
-  setLastSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
+  resetLastSelected: () => void;
 }
 
-function SelectAll<TData>({ table, setLastSelected }: SelectAllProps<TData>) {
+function SelectAll<TData>({ table, resetLastSelected }: SelectAllProps<TData>) {
   function handleChange(value: boolean | null) {
-    setLastSelected(undefined);
+    resetLastSelected();
     table.toggleAllPageRowsSelected(value !== false);
   }
 

rsconcept/frontend/src/components/ui/DataTable/SelectRow.tsx

@@ -4,12 +4,12 @@ import Checkbox from '@/components/ui/Checkbox';
 
 interface SelectRowProps<TData> {
   row: Row<TData>;
-  setLastSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
+  onChangeLastSelected: (newValue: string | undefined) => void;
 }
 
-function SelectRow<TData>({ row, setLastSelected }: SelectRowProps<TData>) {
+function SelectRow<TData>({ row, onChangeLastSelected }: SelectRowProps<TData>) {
   function handleChange(value: boolean) {
-    setLastSelected(row.id);
+    onChangeLastSelected(row.id);
     row.toggleSelected(value);
   }
 

rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx

@@ -14,7 +14,7 @@ interface TableBodyProps<TData> {
   conditionalRowStyles?: IConditionalStyle<TData>[];
 
   lastSelected: string | undefined;
-  setLastSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
+  onChangeLastSelected: (newValue: string | undefined) => void;
 
   onRowClicked?: (rowData: TData, event: CProps.EventMouse) => void;
   onRowDoubleClicked?: (rowData: TData, event: CProps.EventMouse) => void;
@@ -27,7 +27,7 @@ function TableBody<TData>({
   enableRowSelection,
   conditionalRowStyles,
   lastSelected,
-  setLastSelected,
+  onChangeLastSelected,
   onRowClicked,
   onRowDoubleClicked
 }: TableBodyProps<TData>) {
@@ -49,9 +49,9 @@ function TableBody<TData>({
           newSelection[row.id] = !target.getIsSelected();
         });
         table.setRowSelection(prev => ({ ...prev, ...newSelection }));
-        setLastSelected(undefined);
+        onChangeLastSelected(undefined);
       } else {
-        setLastSelected(target.id);
+        onChangeLastSelected(target.id);
         target.toggleSelected(!target.getIsSelected());
       }
     }
@@ -83,7 +83,7 @@ function TableBody<TData>({
         >
           {enableRowSelection ? (
             <td key={`select-${row.id}`} className='pl-3 pr-1 align-middle border-y'>
-              <SelectRow row={row} setLastSelected={setLastSelected} />
+              <SelectRow row={row} onChangeLastSelected={onChangeLastSelected} />
             </td>
           ) : null}
           {row.getVisibleCells().map((cell: Cell<TData, unknown>) => (

rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx

@@ -8,7 +8,7 @@ interface TableHeaderProps<TData> {
   headPosition?: string;
   enableRowSelection?: boolean;
   enableSorting?: boolean;
-  setLastSelected: React.Dispatch<React.SetStateAction<string | undefined>>;
+  resetLastSelected: () => void;
 }
 
 function TableHeader<TData>({
@@ -16,7 +16,7 @@ function TableHeader<TData>({
   headPosition,
   enableRowSelection,
   enableSorting,
-  setLastSelected
+  resetLastSelected
 }: TableHeaderProps<TData>) {
   return (
     <thead
@@ -30,7 +30,7 @@ function TableHeader<TData>({
         <tr key={headerGroup.id}>
           {enableRowSelection ? (
             <th className='pl-3 pr-1 align-middle'>
-              <SelectAll table={table} setLastSelected={setLastSelected} />
+              <SelectAll table={table} resetLastSelected={resetLastSelected} />
             </th>
           ) : null}
           {headerGroup.headers.map((header: Header<TData, unknown>) => (

rsconcept/frontend/src/dialogs/DlgCreateOperation/DlgCreateOperation.tsx

@@ -103,15 +103,15 @@ function DlgCreateOperation({ hideWindow, oss, onCreate, initialInputs }: DlgCre
         <TabInputOperation
           oss={oss}
           alias={alias}
-          setAlias={setAlias}
+          onChangeAlias={setAlias}
           comment={comment}
-          setComment={setComment}
+          onChangeComment={setComment}
           title={title}
-          setTitle={setTitle}
+          onChangeTitle={setTitle}
           attachedID={attachedID}
-          setAttachedID={setAttachedID}
+          onChangeAttachedID={setAttachedID}
           createSchema={createSchema}
-          setCreateSchema={setCreateSchema}
+          onChangeCreateSchema={setCreateSchema}
         />
       </TabPanel>
     ),
@@ -124,11 +124,11 @@ function DlgCreateOperation({ hideWindow, oss, onCreate, initialInputs }: DlgCre
         <TabSynthesisOperation
           oss={oss}
           alias={alias}
-          setAlias={setAlias}
+          onChangeAlias={setAlias}
           comment={comment}
-          setComment={setComment}
+          onChangeComment={setComment}
           title={title}
-          setTitle={setTitle}
+          onChangeTitle={setTitle}
           inputs={inputs}
           setInputs={setInputs}
         />

rsconcept/frontend/src/dialogs/DlgCreateOperation/TabInputOperation.tsx

@@ -18,29 +18,29 @@ import { sortItemsForOSS } from '@/models/ossAPI';
 interface TabInputOperationProps {
   oss: IOperationSchema;
   alias: string;
-  setAlias: React.Dispatch<React.SetStateAction<string>>;
+  onChangeAlias: (newValue: string) => void;
   title: string;
-  setTitle: React.Dispatch<React.SetStateAction<string>>;
+  onChangeTitle: (newValue: string) => void;
   comment: string;
-  setComment: React.Dispatch<React.SetStateAction<string>>;
+  onChangeComment: (newValue: string) => void;
   attachedID: LibraryItemID | undefined;
-  setAttachedID: React.Dispatch<React.SetStateAction<LibraryItemID | undefined>>;
+  onChangeAttachedID: (newValue: LibraryItemID | undefined) => void;
   createSchema: boolean;
-  setCreateSchema: React.Dispatch<React.SetStateAction<boolean>>;
+  onChangeCreateSchema: (newValue: boolean) => void;
 }
 
 function TabInputOperation({
   oss,
   alias,
-  setAlias,
+  onChangeAlias,
   title,
-  setTitle,
+  onChangeTitle,
   comment,
-  setComment,
+  onChangeComment,
   attachedID,
-  setAttachedID,
+  onChangeAttachedID,
   createSchema,
-  setCreateSchema
+  onChangeCreateSchema
 }: TabInputOperationProps) {
   const baseFilter = useCallback((item: ILibraryItem) => !oss.schemas.includes(item.id), [oss]);
   const library = useLibrary();
@@ -48,9 +48,9 @@ function TabInputOperation({
 
   useEffect(() => {
     if (createSchema) {
-      setAttachedID(undefined);
+      onChangeAttachedID(undefined);
     }
-  }, [createSchema, setAttachedID]);
+  }, [createSchema, onChangeAttachedID]);
 
   return (
     <AnimateFade className='cc-column'>
@@ -58,7 +58,7 @@ function TabInputOperation({
         id='operation_title'
         label='Полное название'
         value={title}
-        onChange={event => setTitle(event.target.value)}
+        onChange={event => onChangeTitle(event.target.value)}
         disabled={attachedID !== undefined}
       />
       <div className='flex gap-6'>
@@ -67,7 +67,7 @@ function TabInputOperation({
           label='Сокращение'
           className='w-[16rem]'
           value={alias}
-          onChange={event => setAlias(event.target.value)}
+          onChange={event => onChangeAlias(event.target.value)}
           disabled={attachedID !== undefined}
         />
 
@@ -77,7 +77,7 @@ function TabInputOperation({
           noResize
           rows={3}
           value={comment}
-          onChange={event => setComment(event.target.value)}
+          onChange={event => onChangeComment(event.target.value)}
           disabled={attachedID !== undefined}
         />
       </div>
@@ -90,13 +90,13 @@ function TabInputOperation({
             noHover
             noPadding
             icon={<IconReset size='1.25rem' className='icon-primary' />}
-            onClick={() => setAttachedID(undefined)}
+            onClick={() => onChangeAttachedID(undefined)}
             disabled={attachedID == undefined}
           />
         </div>
         <Checkbox
           value={createSchema}
-          setValue={setCreateSchema}
+          setValue={onChangeCreateSchema}
           label='Создать новую схему'
           titleHtml='Создать пустую схему для загрузки'
         />
@@ -106,7 +106,7 @@ function TabInputOperation({
           items={sortedItems}
           value={attachedID}
           itemType={LibraryItemType.RSFORM}
-          onSelectValue={setAttachedID}
+          onSelectValue={onChangeAttachedID}
           rows={8}
           baseFilter={baseFilter}
         />

rsconcept/frontend/src/dialogs/DlgCreateOperation/TabSynthesisOperation.tsx

@@ -10,11 +10,11 @@ import PickMultiOperation from '../../components/select/PickMultiOperation';
 interface TabSynthesisOperationProps {
   oss: IOperationSchema;
   alias: string;
-  setAlias: React.Dispatch<React.SetStateAction<string>>;
+  onChangeAlias: (newValue: string) => void;
   title: string;
-  setTitle: React.Dispatch<React.SetStateAction<string>>;
+  onChangeTitle: (newValue: string) => void;
   comment: string;
-  setComment: React.Dispatch<React.SetStateAction<string>>;
+  onChangeComment: (newValue: string) => void;
   inputs: OperationID[];
   setInputs: React.Dispatch<React.SetStateAction<OperationID[]>>;
 }
@@ -22,11 +22,11 @@ interface TabSynthesisOperationProps {
 function TabSynthesisOperation({
   oss,
   alias,
-  setAlias,
+  onChangeAlias,
   title,
-  setTitle,
+  onChangeTitle,
   comment,
-  setComment,
+  onChangeComment,
   inputs,
   setInputs
 }: TabSynthesisOperationProps) {
@@ -36,7 +36,7 @@ function TabSynthesisOperation({
         id='operation_title'
         label='Полное название'
         value={title}
-        onChange={event => setTitle(event.target.value)}
+        onChange={event => onChangeTitle(event.target.value)}
       />
       <div className='flex gap-6'>
         <TextInput
@@ -44,7 +44,7 @@ function TabSynthesisOperation({
           label='Сокращение'
           className='w-[16rem]'
           value={alias}
-          onChange={event => setAlias(event.target.value)}
+          onChange={event => onChangeAlias(event.target.value)}
         />
 
         <TextArea
@@ -53,7 +53,7 @@ function TabSynthesisOperation({
           noResize
           rows={3}
           value={comment}
-          onChange={event => setComment(event.target.value)}
+          onChange={event => onChangeComment(event.target.value)}
         />
       </div>
 

rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx

@@ -141,11 +141,11 @@ function DlgEditOperation({ hideWindow, oss, target, onSubmit }: DlgEditOperatio
       <TabPanel>
         <TabOperation
           alias={alias}
-          setAlias={setAlias}
+          onChangeAlias={setAlias}
           comment={comment}
-          setComment={setComment}
+          onChangeComment={setComment}
           title={title}
-          setTitle={setTitle}
+          onChangeTitle={setTitle}
         />
       </TabPanel>
     ),

rsconcept/frontend/src/dialogs/DlgEditOperation/TabOperation.tsx

@@ -4,21 +4,21 @@ import AnimateFade from '@/components/wrap/AnimateFade';
 
 interface TabOperationProps {
   alias: string;
-  setAlias: React.Dispatch<React.SetStateAction<string>>;
+  onChangeAlias: (newValue: string) => void;
   title: string;
-  setTitle: React.Dispatch<React.SetStateAction<string>>;
+  onChangeTitle: (newValue: string) => void;
   comment: string;
-  setComment: React.Dispatch<React.SetStateAction<string>>;
+  onChangeComment: (newValue: string) => void;
 }
 
-function TabOperation({ alias, setAlias, title, setTitle, comment, setComment }: TabOperationProps) {
+function TabOperation({ alias, onChangeAlias, title, onChangeTitle, comment, onChangeComment }: TabOperationProps) {
   return (
     <AnimateFade className='cc-column'>
       <TextInput
         id='operation_title'
         label='Полное название'
         value={title}
-        onChange={event => setTitle(event.target.value)}
+        onChange={event => onChangeTitle(event.target.value)}
       />
       <div className='flex gap-6'>
         <TextInput
@@ -26,7 +26,7 @@ function TabOperation({ alias, setAlias, title, setTitle, comment, setComment }:
           label='Сокращение'
           className='w-[16rem]'
           value={alias}
-          onChange={event => setAlias(event.target.value)}
+          onChange={event => onChangeAlias(event.target.value)}
         />
 
         <TextArea
@@ -35,7 +35,7 @@ function TabOperation({ alias, setAlias, title, setTitle, comment, setComment }:
           noResize
           rows={3}
           value={comment}
-          onChange={event => setComment(event.target.value)}
+          onChange={event => onChangeComment(event.target.value)}
         />
       </div>
     </AnimateFade>

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

@@ -45,7 +45,12 @@ function DlgEditReference({ hideWindow, schema, initial, onSave }: DlgEditRefere
   const entityPanel = useMemo(
     () => (
       <TabPanel>
-        <TabEntityReference initial={initial} schema={schema} setReference={setReference} setIsValid={setIsValid} />
+        <TabEntityReference
+          initial={initial}
+          schema={schema}
+          onChangeReference={setReference}
+          onChangeValid={setIsValid}
+        />
       </TabPanel>
     ),
     [initial, schema]
@@ -54,7 +59,7 @@ function DlgEditReference({ hideWindow, schema, initial, onSave }: DlgEditRefere
   const syntacticPanel = useMemo(
     () => (
       <TabPanel>
-        <TabSyntacticReference initial={initial} setReference={setReference} setIsValid={setIsValid} />
+        <TabSyntacticReference initial={initial} onChangeReference={setReference} onChangeValid={setIsValid} />
       </TabPanel>
     ),
     [initial]

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

@@ -21,11 +21,11 @@ import { IReferenceInputState } from './DlgEditReference';
 interface TabEntityReferenceProps {
   initial: IReferenceInputState;
   schema: IRSForm;
-  setIsValid: React.Dispatch<React.SetStateAction<boolean>>;
+  onChangeValid: (newValue: boolean) => void;
-  setReference: React.Dispatch<React.SetStateAction<string>>;
+  onChangeReference: (newValue: string) => void;
 }
 
-function TabEntityReference({ initial, schema, setIsValid, setReference }: TabEntityReferenceProps) {
+function TabEntityReference({ initial, schema, onChangeValid, onChangeReference }: TabEntityReferenceProps) {
   const [selectedCst, setSelectedCst] = useState<IConstituenta | undefined>(undefined);
   const [alias, setAlias] = useState('');
   const [term, setTerm] = useState('');
@@ -43,9 +43,9 @@ function TabEntityReference({ initial, schema, setIsValid, setReference }: TabEn
 
   // Produce result
   useEffect(() => {
-    setIsValid(alias !== '' && selectedGrams.length > 0);
+    onChangeValid(alias !== '' && selectedGrams.length > 0);
-    setReference(`@{${alias}|${selectedGrams.map(gram => gram.value).join(',')}}`);
+    onChangeReference(`@{${alias}|${selectedGrams.map(gram => gram.value).join(',')}}`);
-  }, [alias, selectedGrams, setIsValid, setReference]);
+  }, [alias, selectedGrams, onChangeValid, onChangeReference]);
 
   // Update term when alias changes
   useEffect(() => {
@@ -105,7 +105,7 @@ function TabEntityReference({ initial, schema, setIsValid, setReference }: TabEn
           className='flex-grow'
           menuPlacement='top'
           value={selectedGrams}
-          setValue={setSelectedGrams}
+          onChangeValue={setSelectedGrams}
         />
       </div>
     </AnimateFade>

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

@@ -11,11 +11,11 @@ import { IReferenceInputState } from './DlgEditReference';
 
 interface TabSyntacticReferenceProps {
   initial: IReferenceInputState;
-  setIsValid: React.Dispatch<React.SetStateAction<boolean>>;
+  onChangeValid: (newValue: boolean) => void;
-  setReference: React.Dispatch<React.SetStateAction<string>>;
+  onChangeReference: (newValue: string) => void;
 }
 
-function TabSyntacticReference({ initial, setIsValid, setReference }: TabSyntacticReferenceProps) {
+function TabSyntacticReference({ initial, onChangeValid, onChangeReference }: TabSyntacticReferenceProps) {
   const [nominal, setNominal] = useState('');
   const [offset, setOffset] = useState(1);
 
@@ -39,9 +39,9 @@ function TabSyntacticReference({ initial, setIsValid, setReference }: TabSyntact
   }, [initial]);
 
   useEffect(() => {
-    setIsValid(nominal !== '' && offset !== 0);
+    onChangeValid(nominal !== '' && offset !== 0);
-    setReference(`@{${offset}|${nominal}}`);
+    onChangeReference(`@{${offset}|${nominal}}`);
-  }, [nominal, offset, setIsValid, setReference]);
+  }, [nominal, offset, onChangeValid, onChangeReference]);
 
   return (
     <AnimateFade className='flex flex-col gap-2'>

rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx

@@ -170,7 +170,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
           placeholder='Выберите граммемы'
           className='min-w-[15rem] h-fit'
           value={inputGrams}
-          setValue={setInputGrams}
+          onChangeValue={setInputGrams}
         />
       </div>
 

rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx

@@ -150,8 +150,8 @@ function LibraryPage() {
   const viewLocations = useMemo(
     () => (
       <ViewSideLocation
-        active={options.location}
+        activeLocation={options.location}
-        setActive={options.setLocation}
+        onChangeActiveLocation={options.setLocation}
         subfolders={subfolders}
         folderTree={library.folders}
         toggleFolderMode={toggleFolderMode}
@@ -200,11 +200,11 @@ function LibraryPage() {
         filtered={items.length}
         hasCustomFilter={hasCustomFilter}
         query={query}
-        setQuery={setQuery}
+        onChangeQuery={setQuery}
         path={path}
-        setPath={setPath}
+        onChangePath={setPath}
         head={head}
-        setHead={setHead}
+        onChangeHead={setHead}
         isVisible={isVisible}
         isOwned={isOwned}
         toggleOwned={toggleOwned}
@@ -212,7 +212,7 @@ function LibraryPage() {
         isEditor={isEditor}
         toggleEditor={toggleEditor}
         filterUser={filterUser}
-        setFilterUser={setFilterUser}
+        onChangeFilterUser={setFilterUser}
         resetFilter={resetFilter}
         folderMode={options.folderMode}
         toggleFolderMode={toggleFolderMode}

rsconcept/frontend/src/pages/LibraryPage/ToolbarSearch.tsx

@@ -36,11 +36,11 @@ interface ToolbarSearchProps {
   hasCustomFilter: boolean;
 
   query: string;
-  setQuery: React.Dispatch<React.SetStateAction<string>>;
+  onChangeQuery: (newValue: string) => void;
   path: string;
-  setPath: React.Dispatch<React.SetStateAction<string>>;
+  onChangePath: (newValue: string) => void;
   head: LocationHead | undefined;
-  setHead: React.Dispatch<React.SetStateAction<LocationHead | undefined>>;
+  onChangeHead: (newValue: LocationHead | undefined) => void;
 
   folderMode: boolean;
   toggleFolderMode: () => void;
@@ -52,7 +52,7 @@ interface ToolbarSearchProps {
   isEditor: boolean | undefined;
   toggleEditor: () => void;
   filterUser: UserID | undefined;
-  setFilterUser: React.Dispatch<React.SetStateAction<UserID | undefined>>;
+  onChangeFilterUser: (newValue: UserID | undefined) => void;
 
   resetFilter: () => void;
 }
@@ -63,11 +63,11 @@ function ToolbarSearch({
   hasCustomFilter,
 
   query,
-  setQuery,
+  onChangeQuery,
   path,
-  setPath,
+  onChangePath,
   head,
-  setHead,
+  onChangeHead,
 
   folderMode,
   toggleFolderMode,
@@ -79,7 +79,7 @@ function ToolbarSearch({
   isEditor,
   toggleEditor,
   filterUser,
-  setFilterUser,
+  onChangeFilterUser,
 
   resetFilter
 }: ToolbarSearchProps) {
@@ -95,9 +95,9 @@ function ToolbarSearch({
   const handleChange = useCallback(
     (newValue: LocationHead | undefined) => {
       headMenu.hide();
-      setHead(newValue);
+      onChangeHead(newValue);
     },
-    [headMenu, setHead]
+    [headMenu, onChangeHead]
   );
 
   const handleToggleFolder = useCallback(() => {
@@ -170,7 +170,7 @@ function ToolbarSearch({
                 className='min-w-[15rem] text-sm'
                 items={users}
                 value={filterUser}
-                onSelectValue={setFilterUser}
+                onSelectValue={onChangeFilterUser}
               />
             </motion.div>
           </Dropdown>
@@ -191,7 +191,7 @@ function ToolbarSearch({
           noBorder
           className={clsx('min-w-[7rem] sm:min-w-[10rem] max-w-[20rem]', folderMode && 'flex-grow')}
           value={query}
-          onChange={setQuery}
+          onChange={onChangeQuery}
         />
         {!folderMode ? (
           <div ref={headMenu.ref} className='flex items-center h-full py-1 select-none'>
@@ -250,7 +250,7 @@ function ToolbarSearch({
             noBorder
             className='w-[4.5rem] sm:w-[5rem] flex-grow'
             value={path}
-            onChange={setPath}
+            onChange={onChangePath}
           />
         ) : null}
       </div>

rsconcept/frontend/src/pages/LibraryPage/ViewSideLocation.tsx

@@ -22,8 +22,8 @@ import { information } from '@/utils/labels';
 interface ViewSideLocationProps {
   folderTree: FolderTree;
   subfolders: boolean;
-  active: string;
+  activeLocation: string;
-  setActive: React.Dispatch<React.SetStateAction<string>>;
+  onChangeActiveLocation: (newValue: string) => void;
   toggleFolderMode: () => void;
   toggleSubfolders: () => void;
   onRenameLocation: () => void;
@@ -31,9 +31,9 @@ interface ViewSideLocationProps {
 
 function ViewSideLocation({
   folderTree,
-  active,
+  activeLocation,
   subfolders,
-  setActive: setActive,
+  onChangeActiveLocation,
   toggleFolderMode,
   toggleSubfolders,
   onRenameLocation
@@ -44,16 +44,18 @@ function ViewSideLocation({
   const windowSize = useWindowSize();
 
   const canRename = useMemo(() => {
-    if (active.length <= 3 || !user) {
+    if (activeLocation.length <= 3 || !user) {
       return false;
     }
     if (user.is_staff) {
       return true;
     }
     const owned = items.filter(item => item.owner == user.id);
-    const located = owned.filter(item => item.location == active || item.location.startsWith(`${active}/`));
+    const located = owned.filter(
+      item => item.location == activeLocation || item.location.startsWith(`${activeLocation}/`)
+    );
     return located.length !== 0;
-  }, [active, user, items]);
+  }, [activeLocation, user, items]);
 
   const animations = useMemo(() => animateSideMinWidth(windowSize.isSmall ? '10rem' : '15rem'), [windowSize]);
   const maxHeight = useMemo(() => calculateHeight('4.5rem'), [calculateHeight]);
@@ -68,10 +70,10 @@ function ViewSideLocation({
           .then(() => toast.success(information.pathReady))
           .catch(console.error);
       } else {
-        setActive(target.getPath());
+        onChangeActiveLocation(target.getPath());
       }
     },
-    [setActive]
+    [onChangeActiveLocation]
   );
 
   return (
@@ -109,7 +111,7 @@ function ViewSideLocation({
         </div>
       </div>
       <SelectLocation
-        value={active}
+        value={activeLocation}
         folderTree={folderTree}
         prefix={prefixes.folders_list}
         onClick={handleClickFolder}

rsconcept/frontend/src/pages/OssPage/EditorOssCard/EditorOssCard.tsx

@@ -15,7 +15,7 @@ import OssStats from './OssStats';
 
 interface EditorOssCardProps {
   isModified: boolean;
-  setIsModified: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsModified: (newValue: boolean) => void;
   onDestroy: () => void;
 }
 

rsconcept/frontend/src/pages/OssPage/EditorOssCard/FormOSS.tsx

@@ -18,7 +18,7 @@ import { useOssEdit } from '../OssEditContext';
 interface FormOSSProps {
   id?: string;
   isModified: boolean;
-  setIsModified: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsModified: (newValue: boolean) => void;
 }
 
 function FormOSS({ id, isModified, setIsModified }: FormOSSProps) {

rsconcept/frontend/src/pages/OssPage/EditorOssGraph/EditorOssGraph.tsx

@@ -6,7 +6,7 @@ import OssFlow from './OssFlow';
 
 interface EditorOssGraphProps {
   isModified: boolean;
-  setIsModified: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsModified: (newValue: boolean) => void;
 }
 
 function EditorOssGraph({ isModified, setIsModified }: EditorOssGraphProps) {

rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx

@@ -34,7 +34,7 @@ import ToolbarOssGraph from './ToolbarOssGraph';
 
 interface OssFlowProps {
   isModified: boolean;
-  setIsModified: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsModified: (newValue: boolean) => void;
 }
 
 function OssFlow({ isModified, setIsModified }: OssFlowProps) {

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

@@ -55,7 +55,7 @@ export interface IOssEditContext extends ILibraryItemEditor {
   isAttachedToOSS: boolean;
 
   showTooltip: boolean;
-  setShowTooltip: React.Dispatch<React.SetStateAction<boolean>>;
+  setShowTooltip: (newValue: boolean) => void;
 
   setOwner: (newOwner: UserID) => void;
   setAccessPolicy: (newPolicy: AccessPolicy) => void;

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

@@ -21,7 +21,7 @@ const SIDELIST_LAYOUT_THRESHOLD = 1000; // px
 interface EditorConstituentaProps {
   activeCst?: IConstituenta;
   isModified: boolean;
-  setIsModified: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsModified: (newValue: boolean) => void;
   onOpenEdit: (cstID: ConstituentaID) => void;
 }
 

rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx

@@ -31,7 +31,7 @@ interface FormConstituentaProps {
 
   isModified: boolean;
   toggleReset: boolean;
-  setIsModified: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsModified: (newValue: boolean) => void;
 
   onRename: () => void;
   onEditTerm: () => void;
@@ -225,9 +225,9 @@ function FormConstituenta({
                 activeCst={state}
                 disabled={disabled || state.is_inherited}
                 toggleReset={toggleReset}
-                onChange={newValue => setExpression(newValue)}
+                onChangeExpression={newValue => setExpression(newValue)}
-                setTypification={setTypification}
+                onChangeTypification={setTypification}
-                setLocalParse={setLocalParse}
+                onChangeLocalParse={setLocalParse}
                 onOpenEdit={onOpenEdit}
               />
             </AnimateFade>

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

@@ -2,7 +2,7 @@
 
 import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import { AnimatePresence } from 'framer-motion';
-import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import BadgeHelp from '@/components/info/BadgeHelp';
@@ -39,9 +39,9 @@ interface EditorRSExpressionProps {
   disabled?: boolean;
   toggleReset?: boolean;
 
-  setTypification: (typification: string) => void;
+  onChangeTypification: (typification: string) => void;
-  setLocalParse: React.Dispatch<React.SetStateAction<IExpressionParse | undefined>>;
+  onChangeLocalParse: (typification: IExpressionParse | undefined) => void;
-  onChange: (newValue: string) => void;
+  onChangeExpression: (newValue: string) => void;
   onOpenEdit?: (cstID: ConstituentaID) => void;
 }
 
@@ -50,9 +50,9 @@ function EditorRSExpression({
   disabled,
   value,
   toggleReset,
-  setTypification,
+  onChangeTypification,
-  setLocalParse,
+  onChangeLocalParse,
-  onChange,
+  onChangeExpression,
   onOpenEdit,
   ...restProps
 }: EditorRSExpressionProps) {
@@ -74,20 +74,20 @@ function EditorRSExpression({
   }, [activeCst, resetParse, toggleReset]);
 
   function handleChange(newValue: string) {
-    onChange(newValue);
+    onChangeExpression(newValue);
     setIsModified(newValue !== activeCst.definition_formal);
   }
 
   function handleCheckExpression(callback?: (parse: IExpressionParse) => void) {
     parser.checkConstituenta(value, activeCst, parse => {
-      setLocalParse(parse);
+      onChangeLocalParse(parse);
       if (parse.errors.length > 0) {
         onShowError(parse.errors[0], parse.prefixLen);
       } else {
         rsInput.current?.view?.focus();
       }
       setIsModified(false);
-      setTypification(
+      onChangeTypification(
         labelTypification({
           isValid: parse.parseResult,
           resultType: parse.typification,

rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorRSFormCard.tsx

@@ -15,7 +15,7 @@ import ToolbarRSFormCard from './ToolbarRSFormCard';
 
 interface EditorRSFormCardProps {
   isModified: boolean;
-  setIsModified: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsModified: (newValue: boolean) => void;
   onDestroy: () => void;
 }
 

rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/FormRSForm.tsx

@@ -18,7 +18,7 @@ import ToolbarVersioning from './ToolbarVersioning';
 interface FormRSFormProps {
   id?: string;
   isModified: boolean;
-  setIsModified: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsModified: (newValue: boolean) => void;
 }
 
 function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {