More refactoring

src/modules/manager/domains/components/RoleAccessEditor.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
 import { Paginated } from "../../../../services/Paginated";
 import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef";
-import withRouter, { RouterProps } from "../../../../utils/withRouter";
 import roleService, {
   GetRoleSecurityAccess,
   GetSecurityAccess,
@@ -27,14 +26,11 @@ const initialAccessList: Paginated<GetSecurityAccess> = {
   data: [],
 };
 
-interface RoleAccessEditorProps extends RouterProps {
+interface RoleAccessEditorProps {
   role: any | undefined;
 }
 
-const RoleAccessEditorNoRouter: React.FC<RoleAccessEditorProps> = ({
-  role,
-  router,
-}) => {
+const RoleAccessEditor: React.FC<RoleAccessEditorProps> = ({ role }) => {
   const { t } = useTranslation();
   const [loaded, setLoaded] = useState(false);
   const [accessList, setAccessList] =
@@ -187,6 +183,4 @@ const RoleAccessEditorNoRouter: React.FC<RoleAccessEditorProps> = ({
   );
 };
 
-const RoleAccessEditor = withRouter(RoleAccessEditorNoRouter);
-
 export default RoleAccessEditor;

src/modules/manager/domains/components/RolesEditor.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import Column from "../../../../components/common/columns";
 import { Paginated } from "../../../../services/Paginated";
 import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef";
-import withRouter, { RouterProps } from "../../../../utils/withRouter";
+import { useParams } from "react-router-dom";
 import roleService, { GetRoleResponse } from "../serrvices/rolesService";
 import RolesTable from "./RolesTable";
 import Button, { ButtonType } from "../../../../components/common/Button";
@@ -18,17 +18,16 @@ const initialPagedData: Paginated<GetRoleResponse> = {
   data: [],
 };
 
-interface RolesEditorProps extends RouterProps {
+interface RolesEditorProps {
   selectedRole?: GetRoleResponse;
   onSelectRole?: (keyValue: any) => void;
   onUnselectRole?: () => void;
 }
 
-const RolesEditorTabNoRouter: React.FC<RolesEditorProps> = ({
+const RolesEditor: React.FC<RolesEditorProps> = ({
   selectedRole,
   onSelectRole,
   onUnselectRole,
-  router,
 }) => {
   const { t } = useTranslation();
   const [loaded, setLoaded] = useState(false);
@@ -43,9 +42,9 @@ const RolesEditorTabNoRouter: React.FC<RolesEditorProps> = ({
     () => new Map<string, string>(),
   );
 
-  const { domainId } = router.params;
+  const { domainId } = useParams<{ domainId: string }>();
   const domainGeneralIdRef = useMemo(
-    () => MakeGeneralIdRef(domainId),
+    () => MakeGeneralIdRef(domainId ? BigInt(domainId) : undefined),
     [domainId],
   );
 
@@ -171,6 +170,4 @@ const RolesEditorTabNoRouter: React.FC<RolesEditorProps> = ({
   );
 };
 
-const RolesEditor = withRouter(RolesEditorTabNoRouter);
-
 export default RolesEditor;

src/modules/manager/domains/components/SecurityRolesTab.tsx

@@ -2,16 +2,13 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import HorizontalTabs from "../../../../components/common/HorizionalTabs";
 import Tab from "../../../../components/common/Tab";
-import withRouter, { RouterProps } from "../../../../utils/withRouter";
 import RoleAccessEditor from "./RoleAccessEditor";
 import RolesEditor from "./RolesEditor";
 import UserRoleEditor from "./UserRoleEditor";
 import { GetRoleResponse } from "../serrvices/rolesService";
 import authentication from "../../../frame/services/authenticationService";
 
-interface SecurityRolesTabProps extends RouterProps {}
-
-const SecurityRolesTabNoRouter: React.FC<SecurityRolesTabProps> = () => {
+const SecurityRolesTab: React.FC = () => {
   const { t } = useTranslation();
   const [selectedRole, setSelectedRole] = useState<GetRoleResponse | undefined>(
     undefined,
@@ -64,6 +61,4 @@ const SecurityRolesTabNoRouter: React.FC<SecurityRolesTabProps> = () => {
   );
 };
 
-const SecurityRolesTab = withRouter(SecurityRolesTabNoRouter);
-
 export default SecurityRolesTab;

src/modules/manager/domains/components/UserRoleEditor.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import Column from "../../../../components/common/columns";
 import { Paginated } from "../../../../services/Paginated";
 import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef";
-import withRouter, { RouterProps } from "../../../../utils/withRouter";
 import UserRolesTable from "./UserRolesTable";
 import roleService, { RoleUser } from "../serrvices/rolesService";
 import Button, { ButtonType } from "../../../../components/common/Button";
@@ -18,14 +17,11 @@ const initialPagedData: Paginated<RoleUser> = {
   data: [],
 };
 
-interface UserRoleEditorProps extends RouterProps {
+interface UserRoleEditorProps {
   role: any | undefined;
 }
 
-const UserRoleEditorNoRouter: React.FC<UserRoleEditorProps> = ({
-  role,
-  router,
-}) => {
+const UserRoleEditor: React.FC<UserRoleEditorProps> = ({ role }) => {
   const { t } = useTranslation();
   const [loaded, setLoaded] = useState(false);
   const [pagedData, setPagedData] =
@@ -138,6 +134,4 @@ const UserRoleEditorNoRouter: React.FC<UserRoleEditorProps> = ({
   );
 };
 
-const UserRoleEditor = withRouter(UserRoleEditorNoRouter);
-
 export default UserRoleEditor;

src/modules/manager/glossary/Glossary.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { MakeGeneralIdRef } from "../../../utils/GeneralIdRef";
-import withRouter from "../../../utils/withRouter";
 import GlossariesTable from "./components/GlossariesTable";
 import glossariesService, {
   Glossary,
@@ -13,9 +12,9 @@ import Button, { ButtonType } from "../../../components/common/Button";
 import Loading from "../../../components/common/Loading";
 import Permission from "../../../components/common/Permission";
 
-const Glossaries: React.FC<any> = (props) => {
+const Glossaries: React.FC = () => {
   const { t } = useTranslation();
-  const glossaryId = props?.router?.params?.glossaryId;
+  const { glossaryId } = useParams<{ glossaryId: string }>();
 
   const [loaded, setLoaded] = useState(false);
   const [data, setData] = useState<Glossary | undefined>(undefined);
@@ -26,7 +25,7 @@ const Glossaries: React.FC<any> = (props) => {
     let parentItem: GeneralIdRef = SystemGlossaries;
 
     if (glossaryId !== undefined) {
-      parentItem = MakeGeneralIdRef(glossaryId);
+      parentItem = MakeGeneralIdRef(BigInt(glossaryId));
     }
 
     const result = await glossariesService.getGlossaryItem(parentItem);
@@ -102,7 +101,7 @@ const Glossaries: React.FC<any> = (props) => {
   const table = (
     <div>
       {t("Items")}
-      <GlossariesTable params={props.params} data={data} onDelete={onDelete} />
+      <GlossariesTable data={data} onDelete={onDelete} />
     </div>
   );
 
@@ -147,9 +146,7 @@ const Glossaries: React.FC<any> = (props) => {
   );
 };
 
-const HOCGlossaries = withRouter(Glossaries);
-
-export default HOCGlossaries;
+export default Glossaries;
 
 function concatinate(args: (unknown | undefined)[], seperator: string): string {
   let result = "";

src/modules/manager/glossary/components/GlossariesTable.tsx

@@ -5,14 +5,9 @@ import Table from "../../../../components/common/Table";
 import { Glossary } from "../services/glossaryService";
 import authentication from "../../../frame/services/authenticationService";
 
-export interface GlossaryParams {
-  id: number;
-}
-
 interface GlossariesTableProps {
   data?: Glossary;
   onDelete?: (keyValue: any) => void;
-  params: GlossaryParams;
 }
 
 interface CustomColumn extends Column<customField> {

src/modules/manager/sites/Sites.tsx

@@ -1,128 +1,165 @@
-import React, { Component } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
 import Column from "../../../components/common/columns";
 import { Paginated } from "../../../services/Paginated";
 import Button, { ButtonType } from "../../../components/common/Button";
-import withRouter from "../../../utils/withRouter";
 import siteService, { ReadSite } from "./services/sitessService";
 import SitesTable from "./components/SitesTable";
 import Loading from "../../../components/common/Loading";
 import Permission from "../../../components/common/Permission";
 
-interface SitesState {
-  loaded: boolean;
-  pagedData: Paginated<ReadSite>;
-  sortColumn: Column<ReadSite>;
-  filters: Map<string, string>;
-}
+const initialPagedData: Paginated<ReadSite> = {
+  page: 1,
+  pageSize: 10,
+  count: 0,
+  totalPages: 1,
+  data: [],
+};
 
-class LocSites extends Component<any, any, SitesState> {
-  state = {
-    loaded: false,
-    pagedData: { page: 1, pageSize: 10, count: 0, totalPages: 1, data: [] },
-    sortColumn: { key: "name", label: "Name", order: "asc" },
-    filters: new Map<string, string>(),
-  };
+const Sites: React.FC = () => {
+  const { t } = useTranslation();
+  const { organisationId } = useParams<{ organisationId: string }>();
 
-  componentDidMount = async () => {
-    const { page, pageSize } = this.state.pagedData;
-    await this.changePage(page, pageSize);
-  };
+  const [loaded, setLoaded] = useState(false);
+  const [pagedData, setPagedData] =
+    useState<Paginated<ReadSite>>(initialPagedData);
+  const [sortColumn, setSortColumn] = useState<Column<ReadSite>>({
+    key: "name",
+    label: t("Name"),
+    order: "asc",
+  });
+  const [filters, setFilters] = useState<Map<string, string>>(
+    () => new Map<string, string>(),
+  );
 
-  changePage = async (page: number, pageSize: number) => {
-    const { sortColumn, filters } = this.state;
-    const { organisationId } = this.props.router.params;
+  const updateFiltersWithOrganisationId = useCallback(
+    (nextFilters: Map<string, string>) => {
+      const updatedFilters = new Map(nextFilters);
+      if (organisationId) {
+        updatedFilters.set("organisationId", organisationId);
+      }
+      return updatedFilters;
+    },
+    [organisationId],
+  );
 
-    filters.set("organisationId", organisationId);
-
-    const pagedData = await siteService.getSites(
+  const changePage = useCallback(
+    async (page: number, pageSize: number) => {
+      const nextFilters = updateFiltersWithOrganisationId(filters);
+      const pagedDataResult = await siteService.getSites(
         page,
         pageSize,
         sortColumn.key,
         sortColumn.order === "asc",
-      filters,
+        nextFilters,
       );
-    if (pagedData) {
-      this.setState({ loaded: true, pagedData, filters });
+      if (pagedDataResult) {
+        setLoaded(true);
+        setFilters(nextFilters);
+        setPagedData(pagedDataResult);
       } else {
-      this.setState({ loaded: false });
+        setLoaded(false);
       }
-  };
+    },
+    [
+      filters,
+      sortColumn.key,
+      sortColumn.order,
+      updateFiltersWithOrganisationId,
+    ],
+  );
 
-  onSort = async (sortColumn: Column<ReadSite>) => {
-    const { page, pageSize } = this.state.pagedData;
-    const { filters } = this.state;
+  useEffect(() => {
+    void changePage(initialPagedData.page, initialPagedData.pageSize);
+  }, [changePage, organisationId]);
 
-    const { organisationId } = this.props.router.params;
-    filters.set("organisationId", organisationId);
+  const onSort = useCallback(
+    async (nextSortColumn: Column<ReadSite>) => {
+      const { page, pageSize } = pagedData;
+      const nextFilters = updateFiltersWithOrganisationId(filters);
+      const pagedDataResult = await siteService.getSites(
+        page,
+        pageSize,
+        nextSortColumn.key,
+        nextSortColumn.order === "asc",
+        nextFilters,
+      );
+      if (pagedDataResult) {
+        setLoaded(true);
+        setFilters(nextFilters);
+        setPagedData(pagedDataResult);
+        setSortColumn(nextSortColumn);
+      } else {
+        setLoaded(false);
+      }
+    },
+    [filters, pagedData, updateFiltersWithOrganisationId],
+  );
 
-    const pagedData = await siteService.getSites(
+  const onSearch = useCallback(
+    async (name: string, value: string) => {
+      const { page, pageSize } = pagedData;
+      const nextFilters = new Map(filters);
+      nextFilters.set(name, value);
+      const updatedFilters = updateFiltersWithOrganisationId(nextFilters);
+      const pagedDataResult = await siteService.getSites(
         page,
         pageSize,
         sortColumn.key,
         sortColumn.order === "asc",
-      filters,
+        updatedFilters,
       );
-    if (pagedData) {
-      this.setState({ loaded: true, pagedData, sortColumn });
+      if (pagedDataResult) {
+        setLoaded(true);
+        setFilters(updatedFilters);
+        setPagedData(pagedDataResult);
       } else {
-      this.setState({ loaded: false });
+        setLoaded(false);
       }
-  };
-
-  onSearch = async (name: string, value: string) => {
-    const { page, pageSize } = this.state.pagedData;
-    const { sortColumn, filters } = this.state;
-    filters.set(name, value);
-
-    const { organisationId } = this.props.router.params;
-    filters.set("organisationId", organisationId);
-
-    const pagedData = await siteService.getSites(
-      page,
-      pageSize,
+    },
+    [
+      filters,
+      pagedData,
       sortColumn.key,
-      sortColumn.order === "asc",
-      filters,
+      sortColumn.order,
+      updateFiltersWithOrganisationId,
+    ],
   );
-    if (pagedData) {
-      this.setState({ loaded: true, filters, pagedData });
-    } else {
-      this.setState({ loaded: false });
-    }
-  };
 
-  onDelete = async (item?: ReadSite) => {
+  const onDelete = useCallback(
+    async (item?: ReadSite) => {
       await siteService.deleteSite(item?.id, item?.guid);
+      await changePage(pagedData.page, pagedData.pageSize);
+    },
+    [changePage, pagedData.page, pagedData.pageSize],
+  );
 
-    this.componentDidMount();
-  };
-
-  render(): JSX.Element {
-    const { loaded, pagedData, sortColumn } = this.state;
+  const translatedSortColumn = useMemo(
+    () => ({ ...sortColumn, label: t("Name") }),
+    [sortColumn, t],
+  );
 
   return (
     <Loading loaded={loaded}>
       <Permission privilegeKey="AddSite">
         <div>
           <Button buttonType={ButtonType.primary} to="add">
-              Add
+            {t("Add")}
           </Button>
         </div>
       </Permission>
       <hr />
       <SitesTable
         data={pagedData}
-          sortColumn={sortColumn}
-          onChangePage={this.changePage}
-          onSort={this.onSort}
-          onSearch={this.onSearch}
-          onDelete={this.onDelete}
+        sortColumn={translatedSortColumn}
+        onChangePage={changePage}
+        onSort={onSort}
+        onSearch={onSearch}
+        onDelete={onDelete}
       />
     </Loading>
   );
-  }
-}
-
-const Sites = withRouter(LocSites);
+};
 
 export default Sites;

src/modules/manager/specifications/Specifications.tsx

@@ -1,8 +1,9 @@
-import React, { Component } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
 import Column from "../../../components/common/columns";
 import { Paginated } from "../../../services/Paginated";
 import Button, { ButtonType } from "../../../components/common/Button";
-import withRouter from "../../../utils/withRouter";
 import specificationService, {
   ReadSpecification,
 } from "./services/specificationService";
@@ -10,122 +11,155 @@ import SpecificationsTable from "./components/SpecificationsTable";
 import Loading from "../../../components/common/Loading";
 import Permission from "../../../components/common/Permission";
 
-interface SpecificationsState {
-  loaded: boolean;
-  pagedData: Paginated<ReadSpecification>;
-  sortColumn: Column<ReadSpecification>;
-  filters: Map<string, string>;
-}
+const initialPagedData: Paginated<ReadSpecification> = {
+  page: 1,
+  pageSize: 10,
+  count: 0,
+  totalPages: 1,
+  data: [],
+};
 
-class LocSpecifications extends Component<any, any, SpecificationsState> {
-  state = {
-    loaded: false,
-    pagedData: { page: 1, pageSize: 10, count: 0, totalPages: 1, data: [] },
-    sortColumn: { key: "name", label: "Name", order: "asc" },
-    filters: new Map<string, string>(),
-  };
+const Specifications: React.FC = () => {
+  const { t } = useTranslation();
+  const { siteId } = useParams<{ siteId: string }>();
 
-  componentDidMount = async () => {
-    const { page, pageSize } = this.state.pagedData;
-    await this.changePage(page, pageSize);
-  };
+  const [loaded, setLoaded] = useState(false);
+  const [pagedData, setPagedData] =
+    useState<Paginated<ReadSpecification>>(initialPagedData);
+  const [sortColumn, setSortColumn] = useState<Column<ReadSpecification>>({
+    key: "name",
+    label: t("Name"),
+    order: "asc",
+  });
+  const [filters, setFilters] = useState<Map<string, string>>(
+    () => new Map<string, string>(),
+  );
 
-  changePage = async (page: number, pageSize: number) => {
-    const { sortColumn, filters } = this.state;
-    const { siteId } = this.props.router.params;
-    filters.set("site.id", siteId);
+  const updateFiltersWithSiteId = useCallback(
+    (nextFilters: Map<string, string>) => {
+      const updatedFilters = new Map(nextFilters);
+      if (siteId) {
+        updatedFilters.set("site.id", siteId);
+      }
+      return updatedFilters;
+    },
+    [siteId],
+  );
 
-    const pagedData = await specificationService.GetSSpecifications(
+  const changePage = useCallback(
+    async (page: number, pageSize: number) => {
+      const nextFilters = updateFiltersWithSiteId(filters);
+      const pagedDataResult = await specificationService.GetSSpecifications(
         page,
         pageSize,
         sortColumn.key,
         sortColumn.order === "asc",
-      filters,
+        nextFilters,
       );
-    if (pagedData) {
-      this.setState({ loaded: true, pagedData, filters });
+      if (pagedDataResult) {
+        setLoaded(true);
+        setFilters(nextFilters);
+        setPagedData(pagedDataResult);
       } else {
-      this.setState({ loaded: false });
+        setLoaded(false);
       }
-  };
+    },
+    [filters, sortColumn.key, sortColumn.order, updateFiltersWithSiteId],
+  );
 
-  onSort = async (sortColumn: Column<ReadSpecification>) => {
-    const { page, pageSize } = this.state.pagedData;
-    const { filters } = this.state;
+  useEffect(() => {
+    void changePage(initialPagedData.page, initialPagedData.pageSize);
+  }, [changePage, siteId]);
 
-    const { siteId } = this.props.router.params;
-    filters.set("site.id", siteId);
+  const onSort = useCallback(
+    async (nextSortColumn: Column<ReadSpecification>) => {
+      const { page, pageSize } = pagedData;
+      const nextFilters = updateFiltersWithSiteId(filters);
+      const pagedDataResult = await specificationService.GetSSpecifications(
+        page,
+        pageSize,
+        nextSortColumn.key,
+        nextSortColumn.order === "asc",
+        nextFilters,
+      );
+      if (pagedDataResult) {
+        setLoaded(true);
+        setFilters(nextFilters);
+        setPagedData(pagedDataResult);
+        setSortColumn(nextSortColumn);
+      } else {
+        setLoaded(false);
+      }
+    },
+    [filters, pagedData, updateFiltersWithSiteId],
+  );
 
-    const pagedData = await specificationService.GetSSpecifications(
+  const onSearch = useCallback(
+    async (name: string, value: string) => {
+      const { page, pageSize } = pagedData;
+      const nextFilters = new Map(filters);
+      nextFilters.set(name, value);
+      const updatedFilters = updateFiltersWithSiteId(nextFilters);
+      const pagedDataResult = await specificationService.GetSSpecifications(
         page,
         pageSize,
         sortColumn.key,
         sortColumn.order === "asc",
-      filters,
+        updatedFilters,
       );
-    if (pagedData) {
-      this.setState({ loaded: true, pagedData, sortColumn });
+      if (pagedDataResult) {
+        setLoaded(true);
+        setFilters(updatedFilters);
+        setPagedData(pagedDataResult);
       } else {
-      this.setState({ loaded: false });
+        setLoaded(false);
       }
-  };
-
-  onSearch = async (name: string, value: string) => {
-    const { page, pageSize } = this.state.pagedData;
-    const { sortColumn, filters } = this.state;
-    filters.set(name, value);
-
-    const { siteId } = this.props.router.params;
-    filters.set("site.id", siteId);
-
-    const pagedData = await specificationService.GetSSpecifications(
-      page,
-      pageSize,
+    },
+    [
+      filters,
+      pagedData,
       sortColumn.key,
-      sortColumn.order === "asc",
-      filters,
+      sortColumn.order,
+      updateFiltersWithSiteId,
+    ],
   );
-    if (pagedData) {
-      this.setState({ loaded: true, filters, pagedData });
-    } else {
-      this.setState({ loaded: false });
-    }
-  };
 
-  onDelete = async (item?: ReadSpecification) => {
+  const onDelete = useCallback(
+    async (item?: ReadSpecification) => {
       const response = await specificationService.DeleteSpecification(
         item?.id,
         item?.guid,
       );
       if (response) {
-      this.componentDidMount();
+        await changePage(pagedData.page, pagedData.pageSize);
       }
-  };
+    },
+    [changePage, pagedData.page, pagedData.pageSize],
+  );
 
-  render(): JSX.Element {
-    const { loaded, pagedData, sortColumn } = this.state;
+  const translatedSortColumn = useMemo(
+    () => ({ ...sortColumn, label: t("Name") }),
+    [sortColumn, t],
+  );
 
   return (
     <Loading loaded={loaded}>
       <Permission privilegeKey="AddSpecification">
         <Button buttonType={ButtonType.primary} to="add">
-            Add
+          {t("Add")}
         </Button>
       </Permission>
       <hr />
       <SpecificationsTable
         data={pagedData}
-          sortColumn={sortColumn}
-          onChangePage={this.changePage}
-          onSort={this.onSort}
-          onSearch={this.onSearch}
-          onDelete={this.onDelete}
+        sortColumn={translatedSortColumn}
+        onChangePage={changePage}
+        onSort={onSort}
+        onSearch={onSearch}
+        onDelete={onDelete}
       />
     </Loading>
   );
-  }
-}
-
-const Specifications = withRouter(LocSpecifications);
+};
 
 export default Specifications;