Client: rewrite indexing components to typescript

packages/client/src/components/dialogs/ReorderIndexDialog/index.tsx

@@ -28,17 +28,32 @@ import React from "react";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 
-import { ModalDialog } from "@docspace/shared/components/modal-dialog";
+import {
+  ModalDialog,
+  ModalDialogType,
+} from "@docspace/shared/components/modal-dialog";
 import { Text } from "@docspace/shared/components/text";
-import { Button } from "@docspace/shared/components/button";
+import { Button, ButtonSize } from "@docspace/shared/components/button";
 import { isMobile } from "react-device-detect";
 
+import DialogsStore from "SRC_DIR/store/DialogsStore";
+import SelectedFolderStore from "SRC_DIR/store/SelectedFolderStore";
+import FilesActionsStore from "SRC_DIR/store/FilesActionsStore";
+import { TSelectedFolder } from "@docspace/client/src/store/SelectedFolderStore";
+
+export interface ReorderIndexDialogProps {
+  reorder: (id: number | string | null) => void;
+  setIsVisible: (visible: boolean) => void;
+  visible: boolean;
+  selectedFolder: TSelectedFolder;
+}
+
 const ReorderIndexDialog = ({
   visible,
   setIsVisible,
   reorder,
   selectedFolder,
-}) => {
+}: ReorderIndexDialogProps) => {
   const { t, ready } = useTranslation(["Files", "Common"]);
 
   const onClose = () => {
@@ -51,7 +66,13 @@ const ReorderIndexDialog = ({
   };
 
   return (
-    <ModalDialog isLarge isLoading={!ready} visible={visible} onClose={onClose}>
+    <ModalDialog
+      displayType={ModalDialogType.modal}
+      isLarge
+      isLoading={!ready}
+      visible={visible}
+      onClose={onClose}
+    >
       <ModalDialog.Header>{t("Common:Warning")}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text fontSize="13px" fontWeight={400} noSelect>
@@ -63,7 +84,7 @@ const ReorderIndexDialog = ({
           id="create-room"
           key="OkButton"
           label={t("Files:Reorder")}
-          size="normal"
+          size={ButtonSize.normal}
           primary
           onClick={onReorder}
           scale={isMobile}
@@ -72,7 +93,7 @@ const ReorderIndexDialog = ({
           id="cancel-share-folder"
           key="CancelButton"
           label={t("Common:CancelButton")}
-          size="normal"
+          size={ButtonSize.normal}
           onClick={onClose}
           scale={isMobile}
         />
@@ -82,7 +103,15 @@ const ReorderIndexDialog = ({
 };
 
 export default inject(
-  ({ dialogsStore, filesActionsStore, selectedFolderStore }) => {
+  ({
+    dialogsStore,
+    filesActionsStore,
+    selectedFolderStore,
+  }: {
+    dialogsStore: DialogsStore;
+    filesActionsStore: FilesActionsStore;
+    selectedFolderStore: SelectedFolderStore;
+  }) => {
     const { reorderDialogVisible, setReorderDialogVisible } = dialogsStore;
     const selectedFolder = selectedFolderStore.getSelectedFolder();
     const { reorder } = filesActionsStore;

packages/client/src/pages/Home/Section/Header/index.js

@@ -80,7 +80,7 @@ import {
   getCategoryUrl,
 } from "SRC_DIR/helpers/utils";
 import TariffBar from "SRC_DIR/components/TariffBar";
-import TableIndexHeader from "../IndexHeader";
+import IndexMenu from "../IndexHeader";
 
 const StyledContainer = styled.div`
   width: 100%;
@@ -851,7 +851,7 @@ const SectionHeaderContent = (props) => {
     isMobileView: currentDeviceType === DeviceType.mobile,
   };
 
-  const tableIndexHeaderProps = {
+  const indexMenuProps = {
     setIsIndexEditingMode,
     t,
     setReorderDialogVisible,
@@ -954,7 +954,7 @@ const SectionHeaderContent = (props) => {
           {tableGroupMenuVisible ? (
             <TableGroupMenu {...tableGroupMenuProps} withComboBox />
           ) : isIndexEditingMode ? (
-            <TableIndexHeader {...tableIndexHeaderProps} />
+            <IndexMenu {...indexMenuProps} />
           ) : (
             <div className="header-container">
               <Navigation

packages/client/src/pages/Home/Section/IndexHeader/index.tsx

@@ -25,16 +25,23 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import { Text } from "@docspace/shared/components/text";
+import { TTranslation } from "@docspace/shared/types";
 import RoundedArrowSvgUrl from "PUBLIC_DIR/images/rounded arrow.react.svg?url";
 import CrossIconSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";
 import { IconButton } from "@docspace/shared/components/icon-button";
 import { StyledTableIndexMenu } from "./StyledIndexHeader";
 
-const TableIndexHeader = ({
+export interface IndexMenuProps {
+  setIsIndexEditingMode: (mode: boolean) => void;
+  setReorderDialogVisible: (visible: boolean) => void;
+  t: TTranslation;
+}
+
+const IndexMenu = ({
   setIsIndexEditingMode,
   t,
   setReorderDialogVisible,
-}) => {
+}: IndexMenuProps) => {
   return (
     <StyledTableIndexMenu>
       <div className="table-header_index-container">
@@ -49,10 +56,10 @@ const TableIndexHeader = ({
         >
           <IconButton
             className="table-header_reorder-icon"
-            size="16"
+            size={16}
             onClick={() => {}}
             iconName={RoundedArrowSvgUrl}
-            isFill={true}
+            isFill
             isClickable={false}
           />
           <Text fontSize="12px" lineHeight="16px" fontWeight={600}>
@@ -62,7 +69,7 @@ const TableIndexHeader = ({
       </div>
       <IconButton
         className="table-header_cross-icon"
-        size="16"
+        size={16}
         onClick={() => setIsIndexEditingMode(false)}
         iconName={CrossIconSvgUrl}
         isFill
@@ -72,4 +79,4 @@ const TableIndexHeader = ({
   );
 };
 
-export default TableIndexHeader;
+export default IndexMenu;

packages/client/src/store/IndexingStore.ts

@@ -25,20 +25,23 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import { makeAutoObservable } from "mobx";
+import InfoPanelStore from "SRC_DIR/store/InfoPanelStore";
 
 class IndexingStore {
   infoPanelStore;
 
-  isIndexEditingMode = false;
-  isIndexing = false;
-  updateSelection = [];
+  isIndexEditingMode: boolean = false;
 
-  constructor(infoPanelStore) {
+  isIndexing: boolean = false;
+
+  updateSelection: any[] = [];
+
+  constructor(infoPanelStore: InfoPanelStore) {
     this.infoPanelStore = infoPanelStore;
     makeAutoObservable(this);
   }
 
-  setIsIndexing = (indexing) => {
+  setIsIndexing = (indexing: boolean) => {
     // turn off the mode if we are no longer in indexed folders
     const { setIsVisible } = this.infoPanelStore;
     if (!indexing && this.isIndexEditingMode) this.setIsIndexEditingMode(false);
@@ -47,13 +50,14 @@ class IndexingStore {
     this.isIndexing = indexing;
   };
 
-  setUpdateSelection = (selection) => {
+  setUpdateSelection = (selection: any[]) => {
     this.updateSelection = selection;
   };
 
-  setUpdateItems = (items) => {
+  setUpdateItems = (items: any) => {
     const newSelection = [...this.updateSelection];
 
+    // eslint-disable-next-line no-restricted-syntax
     for (const item of items) {
       const exist = this.updateSelection.find(
         (selectionItem) =>
@@ -61,13 +65,14 @@ class IndexingStore {
           selectionItem.fileExst === item.fileExst,
       );
 
+      // eslint-disable-next-line no-continue
       if (exist) continue;
       newSelection.push(item);
     }
     this.setUpdateSelection(newSelection);
   };
 
-  setIsIndexEditingMode = (mode) => {
+  setIsIndexEditingMode = (mode: boolean) => {
     if (!mode) {
       this.setUpdateSelection([]);
     }