Next round of refactoring done

public/locales/en/common.json

@@ -2,6 +2,7 @@
   "Activate": "Activate",
   "Add": "Add",
   "AddDomain": "Add Domain",
+  "AddUser": "Add User",
   "Address": "Address",
   "Admin": "Admin",
   "AnEmailWithPasswordResetLinkHasBeenSent": "An email with a password reset link has been sent.",
@@ -15,16 +16,22 @@
   "BlockedIPs": "Blocked IPs",
   "Cancel": "Cancel",
   "Changes": "Changes",
+  "Confirm": "Confirm",
+  "ConfirmEmailResent": "Confirm e-mail resent",
   "ClientDomainManager": "Client Domain Manager",
   "ClientDomains": "Client Domains",
   "Comment": "Comment",
   "ConfirmPassword": "Confirm Password",
   "CustomFieldManager": "Custom Field Manager",
   "CustomFields": "Custom Fields",
+  "Created": "Created",
   "DisableAuthenticator": "Disable Authenticator",
   "DisplayName": "Display Name",
+  "Domain": "Domain",
+  "Email": "Email",
   "Edit": "Edit",
   "EditDomain": "Edit Domain",
+  "EditUser": "Edit User",
   "e-print": "e-print",
   "e-suite": "e-suite",
   "e-suiteLogo": "e-suite logo",
@@ -45,6 +52,7 @@
   "IPAddress": "IP Address",
   "IPAddressUnblocked": "IP Address '{{ip}}' unblocked.",
   "Items": "Items",
+  "LastUpdated": "Last Updated",
   "Loading": "Loading",
   "LoggingOut": "Logging out",
   "MailTemplates": "Mail Templates",
@@ -62,6 +70,7 @@
   "PasswordsMustMatch": "You need to confirm by typing exactly the same as the new password",
   "PressAgainToUnblock": "Press again to unblock",
   "ResetPassword": "Reset Password",
+  "ResendConfirm": "Resend Confirm",
   "RoleAccess": "Role Access",
   "RoleAccessUpdated": "Role access updated successfully.",
   "SecurityRoles": "Security Roles",

src/modules/manager/domains/Domains.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Column from "../../../components/common/columns";
 import { Paginated } from "../../../services/Paginated";
@@ -30,29 +30,32 @@ const Domains: React.FC = () => {
     () => new Map<string, string>(),
   );
 
+  const changePage = useCallback(
+    async (page: number, pageSize: number) => {
+      const pagedDataResult = await domainsService.getDomains(
+        page,
+        pageSize,
+        sortColumn.key,
+        sortColumn.order === "asc",
+        filters,
+      );
+      if (pagedDataResult) {
+        setLoaded(true);
+        setPagedData(pagedDataResult);
+      } else {
+        setLoaded(false);
+      }
+    },
+    [filters, sortColumn.key, sortColumn.order],
+  );
+
   useEffect(() => {
     const loadInitial = async () => {
       await changePage(initialPagedData.page, initialPagedData.pageSize);
     };
 
     void loadInitial();
-  }, []);
+  }, [changePage]);
-
-  const changePage = async (page: number, pageSize: number) => {
-    const pagedDataResult = await domainsService.getDomains(
-      page,
-      pageSize,
-      sortColumn.key,
-      sortColumn.order === "asc",
-      filters,
-    );
-    if (pagedDataResult) {
-      setLoaded(true);
-      setPagedData(pagedDataResult);
-    } else {
-      setLoaded(false);
-    }
-  };
 
   const onSort = async (nextSortColumn: Column<GetDomain>) => {
     const { page, pageSize } = pagedData;

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

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
-import Column from "../../../../components/common/columns";
 import { Paginated } from "../../../../services/Paginated";
 import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef";
 import withRouter, { RouterProps } from "../../../../utils/withRouter";
@@ -40,98 +39,106 @@ const RoleAccessEditorNoRouter: React.FC<RoleAccessEditorProps> = ({
   const [loaded, setLoaded] = useState(false);
   const [accessList, setAccessList] =
     useState<Paginated<GetSecurityAccess>>(initialAccessList);
-  const [accessRightsForRole, setAccessRightsForRole] =
-    useState<Paginated<GetRoleSecurityAccess>>(initialPagedData);
   const [pagedData, setPagedData] =
     useState<Paginated<GetRoleSecurityAccess>>(initialPagedData);
-  const [sortColumn] = useState<Column<GetRoleSecurityAccess>>({
+  const roleGeneralIdRef = useMemo(
-    key: "name",
+    () => MakeGeneralIdRef(role?.id, role?.guid),
-    label: t("Name"),
+    [role?.id, role?.guid],
-    order: "asc",
+  );
-  });
 
-  const isItemSelected = (
+  const isItemSelected = useCallback(
-    securityAccess: string,
+    (
-    roleAccessList: unknown[] | undefined,
+      securityAccess: string,
-  ): boolean => {
+      roleAccessList: unknown[] | undefined,
-    if (roleAccessList === undefined) return false;
+    ): boolean => {
+      if (roleAccessList === undefined) return false;
 
-    const filtered = roleAccessList.filter(
+      const filtered = roleAccessList.filter(
-      (x) => (x as any).securityAccess === securityAccess,
+        (x) => (x as any).securityAccess === securityAccess,
-    );
+      );
-    return filtered.length > 0;
+      return filtered.length > 0;
-  };
+    },
+    [],
+  );
 
-  const compileAccessRightsPagedData = (
+  const compileAccessRightsPagedData = useCallback(
-    masterList: GetSecurityAccess[] | undefined,
+    (
-    roleAccessList: unknown[] | undefined,
+      masterList: GetSecurityAccess[] | undefined,
-  ): Paginated<GetRoleSecurityAccess> => {
+      roleAccessList: unknown[] | undefined,
-    if (masterList === undefined) {
+    ): Paginated<GetRoleSecurityAccess> => {
-      return initialPagedData;
+      if (masterList === undefined) {
-    }
+        return initialPagedData;
+      }
+
+      if (roleAccessList === undefined) {
+        return {
+          page: 1,
+          pageSize: 10,
+          count: 0,
+          totalPages: 1,
+          data: masterList as GetRoleSecurityAccess[],
+        };
+      }
+
+      const accessRightsForRoleData = masterList.map((value) => {
+        const item: any = value;
+        item.selected = isItemSelected(item.securityAccess, roleAccessList);
+        return item;
+      });
 
-    if (roleAccessList === undefined) {
       return {
         page: 1,
         pageSize: 10,
         count: 0,
         totalPages: 1,
-        data: masterList as GetRoleSecurityAccess[],
+        data: accessRightsForRoleData,
       };
-    }
+    },
+    [isItemSelected],
+  );
 
-    const accessRightsForRoleData = masterList.map((value) => {
+  const changePage = useCallback(
-      const item: any = value;
+    async (nextAccessList?: Paginated<GetSecurityAccess>) => {
-      item.selected = isItemSelected(item.securityAccess, roleAccessList);
+      const list = nextAccessList || accessList;
-      return item;
-    });
 
-    return {
+      const roleAccessFilters = new Map<string, string>();
-      page: 1,
+      roleAccessFilters.set("roleId", String(role?.id));
-      pageSize: 10,
+      const accessRightsResponse = await roleService.getRoleAccess(
-      count: 0,
+        0,
-      totalPages: 1,
+        10,
-      data: accessRightsForRoleData,
+        "name",
-    };
+        true,
-  };
+        roleAccessFilters,
-
-  const changePage = async (nextAccessList?: Paginated<GetSecurityAccess>) => {
-    const list = nextAccessList || accessList;
-
-    const roleAccessFilters = new Map<string, string>();
-    roleAccessFilters.set("roleId", String(role?.id));
-    const accessRightsResponse = await roleService.getRoleAccess(
-      0,
-      10,
-      "name",
-      true,
-      roleAccessFilters,
-    );
-
-    if (accessRightsResponse) {
-      const nextPagedData = compileAccessRightsPagedData(
-        list?.data,
-        accessRightsResponse?.data,
       );
-      if (nextPagedData) {
-        setLoaded(true);
-        setAccessRightsForRole(accessRightsResponse);
-        setPagedData(nextPagedData);
-      }
-    } else {
-      setLoaded(false);
-    }
-  };
 
-  const updatePage = async (nextAccessList?: Paginated<GetSecurityAccess>) => {
+      if (accessRightsResponse) {
-    if (nextAccessList && nextAccessList.count === 0) {
+        const nextPagedData = compileAccessRightsPagedData(
-      const list = await roleService.getAccessList(0, 10, "name", true);
+          list?.data,
-      setAccessList(list);
+          accessRightsResponse?.data,
-      await changePage(list);
+        );
-    } else {
+        if (nextPagedData) {
-      await changePage(nextAccessList);
+          setLoaded(true);
-    }
+          setPagedData(nextPagedData);
-  };
+        }
+      } else {
+        setLoaded(false);
+      }
+    },
+    [accessList, compileAccessRightsPagedData, role?.id],
+  );
+
+  const updatePage = useCallback(
+    async (nextAccessList?: Paginated<GetSecurityAccess>) => {
+      if (nextAccessList && nextAccessList.count === 0) {
+        const list = await roleService.getAccessList(0, 10, "name", true);
+        setAccessList(list);
+        await changePage(list);
+      } else {
+        await changePage(nextAccessList);
+      }
+    },
+    [changePage],
+  );
 
   useEffect(() => {
     const loadInitial = async () => {
@@ -144,10 +151,9 @@ const RoleAccessEditorNoRouter: React.FC<RoleAccessEditorProps> = ({
     };
 
     void loadInitial();
-  }, [role?.id]);
+  }, [accessList, updatePage, role?.id]);
 
   const handleSave = async (additions: string[], deletions: string[]) => {
-    const roleGeneralIdRef = MakeGeneralIdRef(role?.id, role?.guid);
     let response = undefined;
 
     if (additions.length > 0) {

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Column from "../../../../components/common/columns";
 import { Paginated } from "../../../../services/Paginated";
@@ -44,7 +44,30 @@ const RolesEditorTabNoRouter: React.FC<RolesEditorProps> = ({
   );
 
   const { domainId } = router.params;
-  const domainGeneralIdRef = MakeGeneralIdRef(domainId);
+  const domainGeneralIdRef = useMemo(
+    () => MakeGeneralIdRef(domainId),
+    [domainId],
+  );
+
+  const changePage = useCallback(
+    async (page: number, pageSize: number) => {
+      const pagedDataResult = await roleService.getRoles(
+        page,
+        pageSize,
+        sortColumn.key,
+        sortColumn.order === "asc",
+        domainGeneralIdRef,
+        filters,
+      );
+      if (pagedDataResult) {
+        setLoaded(true);
+        setPagedData(pagedDataResult);
+      } else {
+        setLoaded(false);
+      }
+    },
+    [domainGeneralIdRef, filters, sortColumn.key, sortColumn.order],
+  );
 
   useEffect(() => {
     const loadInitial = async () => {
@@ -52,24 +75,7 @@ const RolesEditorTabNoRouter: React.FC<RolesEditorProps> = ({
     };
 
     void loadInitial();
-  }, [domainId]);
+  }, [changePage, domainId]);
-
-  const changePage = async (page: number, pageSize: number) => {
-    const pagedDataResult = await roleService.getRoles(
-      page,
-      pageSize,
-      sortColumn.key,
-      sortColumn.order === "asc",
-      domainGeneralIdRef,
-      filters,
-    );
-    if (pagedDataResult) {
-      setLoaded(true);
-      setPagedData(pagedDataResult);
-    } else {
-      setLoaded(false);
-    }
-  };
 
   const onSort = async (nextSortColumn: Column<GetRoleResponse>) => {
     const { page, pageSize } = pagedData;

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Column from "../../../../components/common/columns";
 import { Paginated } from "../../../../services/Paginated";
@@ -39,31 +39,37 @@ const UserRoleEditorNoRouter: React.FC<UserRoleEditorProps> = ({
     () => new Map<string, string>(),
   );
 
-  const roleGeneralIdRef = MakeGeneralIdRef(role?.id, role?.guid);
+  const roleGeneralIdRef = useMemo(
+    () => MakeGeneralIdRef(role?.id, role?.guid),
+    [role?.id, role?.guid],
+  );
 
-  const getRoleUsers = async (
+  const getRoleUsers = useCallback(
-    page: number,
+    async (
-    pageSize: number,
+      page: number,
-    nextSortColumn: Column<RoleUser>,
+      pageSize: number,
-    nextFilters: Map<string, string>,
+      nextSortColumn: Column<RoleUser>,
-  ) => {
+      nextFilters: Map<string, string>,
-    const pagedDataResult = await roleService.getRoleUsers(
+    ) => {
-      page,
+      const pagedDataResult = await roleService.getRoleUsers(
-      pageSize,
+        page,
-      nextSortColumn.key,
+        pageSize,
-      nextSortColumn.order === "asc",
+        nextSortColumn.key,
-      roleGeneralIdRef,
+        nextSortColumn.order === "asc",
-      nextFilters,
+        roleGeneralIdRef,
-    );
+        nextFilters,
-    if (pagedDataResult) {
+      );
-      setLoaded(true);
+      if (pagedDataResult) {
-      setFilters(nextFilters);
+        setLoaded(true);
-      setPagedData(pagedDataResult);
+        setFilters(nextFilters);
-      setSortColumn(nextSortColumn);
+        setPagedData(pagedDataResult);
-    } else {
+        setSortColumn(nextSortColumn);
-      setLoaded(false);
+      } else {
-    }
+        setLoaded(false);
-  };
+      }
+    },
+    [roleGeneralIdRef],
+  );
 
   useEffect(() => {
     const loadInitial = async () => {
@@ -76,7 +82,7 @@ const UserRoleEditorNoRouter: React.FC<UserRoleEditorProps> = ({
     };
 
     void loadInitial();
-  }, [role?.id]);
+  }, [getRoleUsers, role?.id, sortColumn]);
 
   const changePage = async (page: number, pageSize: number) => {
     await getRoleUsers(page, pageSize, sortColumn, filters);

src/modules/manager/forms/Forms.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Button, { ButtonType } from "../../../components/common/Button";
 import Column from "../../../components/common/columns";
@@ -28,21 +28,24 @@ const Forms: React.FC = () => {
     new Map<string, string>(),
   );
 
-  const changePage = async (page: number, pageSize: number) => {
+  const changePage = useCallback(
-    const data = await formsService.getForms(
+    async (page: number, pageSize: number) => {
-      page,
+      const data = await formsService.getForms(
-      pageSize,
+        page,
-      sortColumn.key,
+        pageSize,
-      sortColumn.order === "asc",
+        sortColumn.key,
-      filters,
+        sortColumn.order === "asc",
-    );
+        filters,
-    if (data) {
+      );
-      setLoaded(true);
+      if (data) {
-      setPagedData(data);
+        setLoaded(true);
-    } else {
+        setPagedData(data);
-      setLoaded(false);
+      } else {
-    }
+        setLoaded(false);
-  };
+      }
+    },
+    [filters, sortColumn.key, sortColumn.order],
+  );
 
   const onSort = async (newSortColumn: Column<GetFormResponse>) => {
     const { page, pageSize } = pagedData;
@@ -91,9 +94,8 @@ const Forms: React.FC = () => {
   };
 
   useEffect(() => {
-    const { page, pageSize } = pagedData;
+    changePage(pagedData.page, pagedData.pageSize);
-    changePage(page, pageSize);
+  }, [changePage, pagedData.page, pagedData.pageSize]);
-  }, [pagedData]);
 
   return (
     <Loading loaded={loaded}>

src/modules/manager/sequence/sequence.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import sequenceService, { ReadSequence } from "./services/sequenceService";
 import SequenceTable from "./components/squenceTable";
@@ -27,21 +27,24 @@ const Sequence: React.FC = () => {
     new Map<string, string>(),
   );
 
-  const changePage = async (page: number, pageSize: number) => {
+  const changePage = useCallback(
-    const data = await sequenceService.getSequences(
+    async (page: number, pageSize: number) => {
-      page,
+      const data = await sequenceService.getSequences(
-      pageSize,
+        page,
-      sortColumn.key,
+        pageSize,
-      sortColumn.order === "asc",
+        sortColumn.key,
-      filters,
+        sortColumn.order === "asc",
-    );
+        filters,
-    if (data) {
+      );
-      setLoaded(true);
+      if (data) {
-      setPagedData(data);
+        setLoaded(true);
-    } else {
+        setPagedData(data);
-      setLoaded(false);
+      } else {
-    }
+        setLoaded(false);
-  };
+      }
+    },
+    [filters, sortColumn.key, sortColumn.order],
+  );
 
   const onSort = async (newSortColumn: Column<ReadSequence>) => {
     const { page, pageSize } = pagedData;
@@ -90,9 +93,8 @@ const Sequence: React.FC = () => {
   };
 
   useEffect(() => {
-    const { page, pageSize } = pagedData;
+    changePage(pagedData.page, pagedData.pageSize);
-    changePage(page, pageSize);
+  }, [changePage, pagedData.page, pagedData.pageSize]);
-  }, []);
 
   return (
     <Loading loaded={loaded}>

src/modules/manager/sites/components/SitesTable.tsx

@@ -17,7 +17,6 @@ const SitesTable: React.FC<PublishedTableProps<ReadSite>> = ({
   onSort,
 }) => {
   const { t } = useTranslation();
-  const canViewSpecification = authentication.hasAccess("ViewSpecification");
 
   const columns: Column<ReadSite>[] = useMemo(
     () => [
@@ -37,7 +36,7 @@ const SitesTable: React.FC<PublishedTableProps<ReadSite>> = ({
       { key: "address", label: t("Address"), order: "asc" },
       { key: "status", label: t("Status"), order: "asc" },
     ],
-    [t, canViewSpecification],
+    [t],
   );
 
   const raiseSort = (sortCol: Column<ReadSite>) => {

src/modules/manager/specifications/Specifications.tsx

@@ -1,106 +1,130 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import Column from '../../../components/common/columns';
+import Column from "../../../components/common/columns";
-import { Paginated } from '../../../services/Paginated';
+import { Paginated } from "../../../services/Paginated";
-import Button, { ButtonType } from '../../../components/common/Button';
+import Button, { ButtonType } from "../../../components/common/Button";
-import withRouter from '../../../utils/withRouter';
+import withRouter from "../../../utils/withRouter";
-import specificationService, { ReadSpecification } from './services/specificationService';
+import specificationService, {
-import SpecificationsTable from './components/SpecificationsTable';
+  ReadSpecification,
-import Loading from '../../../components/common/Loading';
+} from "./services/specificationService";
-import Permission from '../../../components/common/Permission';
+import SpecificationsTable from "./components/SpecificationsTable";
+import Loading from "../../../components/common/Loading";
+import Permission from "../../../components/common/Permission";
 
-interface SpecificationsState{
+interface SpecificationsState {
-    loaded: boolean;
+  loaded: boolean;
-    pagedData : Paginated<ReadSpecification>,
+  pagedData: Paginated<ReadSpecification>;
-    sortColumn : Column<ReadSpecification>,
+  sortColumn: Column<ReadSpecification>;
-    filters: Map<string, string>;
+  filters: Map<string, string>;
 }
 
 class LocSpecifications extends Component<any, any, SpecificationsState> {
-    state = {
+  state = {
-        loaded : false,
+    loaded: false,
-        pagedData : { page: 1,
+    pagedData: { page: 1, pageSize: 10, count: 0, totalPages: 1, data: [] },
-            pageSize : 10,
+    sortColumn: { key: "name", label: "Name", order: "asc" },
-            count: 0,
+    filters: new Map<string, string>(),
-            totalPages: 1,
+  };
-            data: []
+
-        },
+  componentDidMount = async () => {
-        sortColumn: { key: "name", label: "Name", order: "asc" },
+    const { page, pageSize } = this.state.pagedData;
-        filters: new Map<string, string>()
+    await this.changePage(page, pageSize);
+  };
+
+  changePage = async (page: number, pageSize: number) => {
+    const { sortColumn, filters } = this.state;
+    const { siteId } = this.props.router.params;
+    filters.set("site.id", siteId);
+
+    const pagedData = await specificationService.GetSSpecifications(
+      page,
+      pageSize,
+      sortColumn.key,
+      sortColumn.order === "asc",
+      filters,
+    );
+    if (pagedData) {
+      this.setState({ loaded: true, pagedData, filters });
+    } else {
+      this.setState({ loaded: false });
     }
+  };
 
-    componentDidMount = async () => {
+  onSort = async (sortColumn: Column<ReadSpecification>) => {
-        const { page, pageSize } = this.state.pagedData;
+    const { page, pageSize } = this.state.pagedData;
-        await this.changePage(page, pageSize);
+    const { filters } = this.state;
+
+    const { siteId } = this.props.router.params;
+    filters.set("site.id", siteId);
+
+    const pagedData = await specificationService.GetSSpecifications(
+      page,
+      pageSize,
+      sortColumn.key,
+      sortColumn.order === "asc",
+      filters,
+    );
+    if (pagedData) {
+      this.setState({ loaded: true, pagedData, sortColumn });
+    } else {
+      this.setState({ loaded: false });
     }
+  };
 
-    changePage = async (page: number, pageSize: number) => {
+  onSearch = async (name: string, value: string) => {
-        const { sortColumn, filters } = this.state;
+    const { page, pageSize } = this.state.pagedData;
-        const { siteId } = this.props.router.params;
+    const { sortColumn, filters } = this.state;
-        filters.set("site.id", siteId);
+    filters.set(name, value);
 
-        const pagedData = await specificationService.GetSSpecifications(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
+    const { siteId } = this.props.router.params;
-        if (pagedData) {
+    filters.set("site.id", siteId);
-            this.setState({ loaded: true, pagedData, filters });
+
-        }
+    const pagedData = await specificationService.GetSSpecifications(
-        else {
+      page,
-            this.setState({ loaded: false });
+      pageSize,
-        }
+      sortColumn.key,
+      sortColumn.order === "asc",
+      filters,
+    );
+    if (pagedData) {
+      this.setState({ loaded: true, filters, pagedData });
+    } else {
+      this.setState({ loaded: false });
     }
+  };
 
-    onSort = async (sortColumn: Column<ReadSpecification>) => {
+  onDelete = async (item?: ReadSpecification) => {
-        const { page, pageSize } = this.state.pagedData;
+    const response = await specificationService.DeleteSpecification(
-        const { filters } = this.state;
+      item?.id,
-
+      item?.guid,
-        const { siteId } = this.props.router.params;
+    );
-        filters.set("site.id", siteId);
+    if (response) {
-
+      this.componentDidMount();
-        const pagedData = await specificationService.GetSSpecifications(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
-        if (pagedData) {
-            this.setState({ loaded: true, pagedData, sortColumn });
-        }
-        else {
-            this.setState({ loaded: false });
-        }
     }
+  };
 
-    onSearch = async (name: string, value: string) => {
+  render(): JSX.Element {
-        const { page, pageSize } = this.state.pagedData;
+    const { loaded, pagedData, sortColumn } = this.state;
-        const { sortColumn, filters } = this.state;
-        filters.set(name, value);
 
-        const { siteId } = this.props.router.params;
+    return (
-        filters.set("site.id", siteId);
+      <Loading loaded={loaded}>
-
+        <Permission privilegeKey="AddSpecification">
-        const pagedData = await specificationService.GetSSpecifications(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
+          <Button buttonType={ButtonType.primary} to="add">
-        if (pagedData) {
+            Add
-            this.setState({ loaded: true, filters, pagedData });
+          </Button>
-        }
+        </Permission>
-        else {
+        <hr />
-            this.setState({ loaded: false });
+        <SpecificationsTable
-        }
+          data={pagedData}
-    };
+          sortColumn={sortColumn}
-
+          onChangePage={this.changePage}
-    onDelete = async (item?: ReadSpecification) => {
+          onSort={this.onSort}
-        const response = await specificationService.DeleteSpecification(item?.id, item?.guid);
+          onSearch={this.onSearch}
-        if (response) {
+          onDelete={this.onDelete}
-            this.componentDidMount();
+        />
-        }
+      </Loading>
-    }
+    );
-
+  }
-    render(): JSX.Element {
+}
-        const { loaded, pagedData, sortColumn } = this.state;
-
-        return (
-            <Loading loaded={loaded}>
-                <Permission privilegeKey="AddSpecification">
-                    <Button buttonType={ButtonType.primary} to="add">Add</Button>
-                </Permission>
-                <hr/>
-                <SpecificationsTable data={pagedData} sortColumn={sortColumn} onChangePage={this.changePage} onSort={this.onSort} onSearch={this.onSearch} onDelete={this.onDelete}/>
-            </Loading>
-        );
-    }
-};
 
 const Specifications = withRouter(LocSpecifications);
 

src/modules/manager/specifications/components/SpecificationsTable.tsx

@@ -1,45 +1,62 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import Column from "../../../../components/common/columns";
-import Table, { PublishedTableProps } from "../../../../components/common/Table";
+import Table, {
+  PublishedTableProps,
+} from "../../../../components/common/Table";
 import authentication from "../../../frame/services/authenticationService";
 import { ReadSpecification } from "../services/specificationService";
 
-class SpecificationsTable extends React.Component<PublishedTableProps<ReadSpecification>> {
+const SpecificationsTable: React.FC<PublishedTableProps<ReadSpecification>> = ({
-    columns: Column<ReadSpecification>[] = [{ key: "name", label: "Name", order: "asc" }];
+  data,
+  sortColumn,
+  onChangePage,
+  onSearch,
+  onDelete,
+  onSort,
+}) => {
+  const { t } = useTranslation();
 
-    raiseSort = (sortColumn: Column<ReadSpecification>) => {
+  const columns: Column<ReadSpecification>[] = useMemo(
-        this.setState({ sortColumn });
+    () => [{ key: "name", label: t("Name"), order: "asc" }],
-        if (this.props.onSort !== undefined) this.props.onSort(sortColumn);
+    [t],
+  );
+
+  const raiseSort = (sortCol: Column<ReadSpecification>) => {
+    if (onSort !== undefined) onSort(sortCol);
+  };
+
+  const handleAuditParams = (item: any) => {
+    return {
+      entityName: "e_suite.Database.Core.Tables.Printer.Specification",
+      primaryKey: `{"Id":${item.id}}`,
     };
+  };
 
-    handleAuditParams = (item: any) => {
+  const editPath = authentication.hasAccess("EditSpecification")
-        return {
+    ? "{0}"
-            entityName: "e_suite.Database.Core.Tables.Printer.Specification",
+    : undefined;
-            primaryKey: '{"Id":' + item.id + "}",
+  const doDelete = authentication.hasAccess("DeleteSpecification")
-        };
+    ? onDelete
-    };
+    : undefined;
+  const showAudit = authentication.hasAccess("ViewAuditLog")
+    ? handleAuditParams
+    : undefined;
 
-    render() {
+  return (
-        const { data, sortColumn, onChangePage, onSearch, onDelete } = this.props;
+    <Table
-        const editPath = authentication.hasAccess("EditSpecification") ? "{0}" : undefined;
+      data={data}
-        const doDelete = authentication.hasAccess("DeleteSpecification") ? onDelete : undefined;
+      keyName="id"
-        const showAudit = authentication.hasAccess("ViewAuditLog") ? this.handleAuditParams : undefined;
+      columns={columns}
-
+      sortColumn={sortColumn}
-        return (
+      editPath={editPath}
-            <Table
+      onSort={raiseSort}
-                data={data}
+      onChangePage={onChangePage}
-                keyName="id"
+      onSearch={onSearch}
-                columns={this.columns}
+      onDelete={doDelete}
-                sortColumn={sortColumn}
+      onAuditParams={showAudit}
-                editPath={editPath}
+    />
-                onSort={this.raiseSort}
+  );
-                onChangePage={onChangePage}
+};
-                onSearch={onSearch}
-                onDelete={doDelete}
-                onAuditParams={showAudit}
-            />
-        );
-    }
-}
 
 export default SpecificationsTable;

src/modules/manager/ssoManager/components/ssoManagerTable.tsx

@@ -1,45 +1,62 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import Column from "../../../../components/common/columns";
-import Table, { PublishedTableProps } from "../../../../components/common/Table";
+import Table, {
+  PublishedTableProps,
+} from "../../../../components/common/Table";
 import authentication from "../../../frame/services/authenticationService";
 import { GetSsoProvider } from "../services/ssoManagerService";
 
-class SsoManagerTable extends React.Component<PublishedTableProps<GetSsoProvider>> {
+const SsoManagerTable: React.FC<PublishedTableProps<GetSsoProvider>> = ({
-    columns: Column<GetSsoProvider>[] = [{ key: "name", label: "Name", order: "asc" }];
+  data,
+  sortColumn,
+  onChangePage,
+  onSearch,
+  onDelete,
+  onSort,
+}) => {
+  const { t } = useTranslation();
 
-    raiseSort = (sortColumn: Column<GetSsoProvider>) => {
+  const columns: Column<GetSsoProvider>[] = useMemo(
-        this.setState({ sortColumn });
+    () => [{ key: "name", label: t("Name"), order: "asc" }],
-        if (this.props.onSort !== undefined) this.props.onSort(sortColumn);
+    [t],
+  );
+
+  const raiseSort = (sortCol: Column<GetSsoProvider>) => {
+    if (onSort !== undefined) onSort(sortCol);
+  };
+
+  const handleAuditParams = (item: any) => {
+    return {
+      entityName: "e_suite.Database.Core.Tables.UserManager.SsoProvider",
+      primaryKey: `{"Id":${item.id}}`,
     };
+  };
 
-    handleAuditParams = (item: any) => {
+  const editPath = authentication.hasAccess("EditSsoProvider")
-        return {
+    ? "edit/{0}"
-            entityName: "e_suite.Database.Core.Tables.UserManager.SsoProvider",
+    : undefined;
-            primaryKey: '{"Id":' + item.id + "}",
+  const doDelete = authentication.hasAccess("DeleteSsoProvider")
-        };
+    ? onDelete
-    };
+    : undefined;
+  const showAudit = authentication.hasAccess("ViewAuditLog")
+    ? handleAuditParams
+    : undefined;
 
-    render() {
+  return (
-        const { data, sortColumn, onChangePage, onSearch, onDelete } = this.props;
+    <Table
-        const editPath = authentication.hasAccess("EditSsoProvider") ? "edit/{0}" : undefined;
+      data={data}
-        const doDelete = authentication.hasAccess("DeleteSsoProvider") ? onDelete : undefined;
+      keyName="id"
-        const showAudit = authentication.hasAccess("ViewAuditLog") ? this.handleAuditParams : undefined;
+      columns={columns}
-
+      sortColumn={sortColumn}
-        return (
+      editPath={editPath}
-            <Table
+      onSort={raiseSort}
-                data={data}
+      onChangePage={onChangePage}
-                keyName="id"
+      onSearch={onSearch}
-                columns={this.columns}
+      onDelete={doDelete}
-                sortColumn={sortColumn}
+      onAuditParams={showAudit}
-                editPath={editPath}
+    />
-                onSort={this.raiseSort}
+  );
-                onChangePage={onChangePage}
+};
-                onSearch={onSearch}
-                onDelete={doDelete}
-                onAuditParams={showAudit}
-            />
-        );
-    }
-}
 
 export default SsoManagerTable;

src/modules/manager/ssoManager/ssoManager.tsx

@@ -1,97 +1,126 @@
-import React, { Component } from 'react';
+import React, { useCallback, useEffect, useState } from "react";
-import Column from '../../../components/common/columns';
+import { useTranslation } from "react-i18next";
-import { Paginated } from '../../../services/Paginated';
+import Column from "../../../components/common/columns";
-import SsoManagerTable from './components/ssoManagerTable';
+import { Paginated } from "../../../services/Paginated";
-import ssoManagerService, { GetSsoProvider } from './services/ssoManagerService';
+import SsoManagerTable from "./components/ssoManagerTable";
-import Button, { ButtonType } from '../../../components/common/Button';
+import ssoManagerService, {
-import Loading from '../../../components/common/Loading';
+  GetSsoProvider,
-import Permission from '../../../components/common/Permission';
+} from "./services/ssoManagerService";
+import Button, { ButtonType } from "../../../components/common/Button";
+import Loading from "../../../components/common/Loading";
+import Permission from "../../../components/common/Permission";
 
-interface SsoManagerState{
+const SsoManager: React.FC = () => {
-    loaded: boolean;
+  const { t } = useTranslation();
-    pagedData : Paginated<GetSsoProvider>,
+  const [loaded, setLoaded] = useState(false);
-    sortColumn : Column<GetSsoProvider>,
+  const [pagedData, setPagedData] = useState<Paginated<GetSsoProvider>>({
-    filters: Map<string, string>;
+    page: 1,
-}
+    pageSize: 10,
+    count: 0,
+    totalPages: 1,
+    data: [],
+  });
+  const [sortColumn, setSortColumn] = useState<Column<GetSsoProvider>>({
+    key: "name",
+    label: t("Name"),
+    order: "asc",
+  });
+  const [filters, setFilters] = useState<Map<string, string>>(
+    new Map<string, string>(),
+  );
 
-class SsoManager extends Component< any, any, SsoManagerState> {
+  const changePage = useCallback(
-    state = {
+    async (page: number, pageSize: number) => {
-        loaded : false,
+      const data = await ssoManagerService.getSsoProviders(
-        pagedData : { page: 1,
+        page,
-            pageSize : 10,
+        pageSize,
-            count: 0,
+        sortColumn.key,
-            totalPages: 1,
+        sortColumn.order === "asc",
-            data: [] },
+        filters,
-        sortColumn: { key: "name", label: "Name", order: "asc" },
+      );
-        filters: new Map<string, string>()
+      if (data) {
+        setLoaded(true);
+        setPagedData(data);
+      } else {
+        setLoaded(false);
+      }
+    },
+    [filters, sortColumn.key, sortColumn.order],
+  );
+
+  const onSort = async (newSortColumn: Column<GetSsoProvider>) => {
+    const { page, pageSize } = pagedData;
+    const data = await ssoManagerService.getSsoProviders(
+      page,
+      pageSize,
+      newSortColumn.key,
+      newSortColumn.order === "asc",
+      filters,
+    );
+    if (data) {
+      setLoaded(true);
+      setPagedData(data);
+      setSortColumn(newSortColumn);
+    } else {
+      setLoaded(false);
     }
+  };
 
-    componentDidMount = async () => {
+  const onSearch = async (name: string, value: string) => {
-        const { page, pageSize } = this.state.pagedData;
+    const { page, pageSize } = pagedData;
+    const newFilters = new Map(filters);
+    newFilters.set(name, value);
 
-        await this.changePage(page, pageSize);
+    const data = await ssoManagerService.getSsoProviders(
+      page,
+      pageSize,
+      sortColumn.key,
+      sortColumn.order === "asc",
+      newFilters,
+    );
+    if (data) {
+      setLoaded(true);
+      setFilters(newFilters);
+      setPagedData(data);
+    } else {
+      setLoaded(false);
     }
+  };
 
-     changePage = async(page: number, pageSize : number) =>{
+  const onDelete = async (keyValue?: GetSsoProvider) => {
-        const { sortColumn, filters } = this.state;
+    const response = await ssoManagerService.deleteSsoProvider(
-        
+      keyValue?.id,
-         const pagedData = await ssoManagerService.getSsoProviders(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
+      keyValue?.guid,
-         if (pagedData) {
+    );
-             this.setState({ loaded: true, pagedData });
+    if (response) {
-         }
+      await changePage(pagedData.page, pagedData.pageSize);
-         else {
-             this.setState({ loaded: false });
-         }
     }
+  };
 
-    onSort = async(sortColumn : Column<GetSsoProvider>) => {
+  useEffect(() => {
-        const {page, pageSize } = this.state.pagedData;
+    changePage(pagedData.page, pagedData.pageSize);
-        const { filters } = this.state;
+  }, [changePage, pagedData.page, pagedData.pageSize]);
-        const pagedData = await ssoManagerService.getSsoProviders(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
-        if (pagedData) {
-            this.setState({ loaded: true, pagedData, sortColumn });
-        }
-        else {
-            this.setState({ loaded: false });
-        }
-    }
 
-    onSearch = async ( name: string, value: string) => {
+  return (
-        const {page, pageSize } = this.state.pagedData;
+    <Loading loaded={loaded}>
-        const {sortColumn, filters } = this.state;
+      <Permission privilegeKey="AddSsoProvider">
-        filters.set(name, value);
+        <div>
-
+          <Button buttonType={ButtonType.primary} to="add">
-        const pagedData = await ssoManagerService.getSsoProviders(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
+            {t("Add")}
-        if (pagedData) {
+          </Button>
-            this.setState({ loaded: true, filters, pagedData });
+        </div>
-        }
+      </Permission>
-        else {
+      <hr />
-            this.setState({ loaded: false });
+      <SsoManagerTable
-        }
+        data={pagedData}
-    };
+        sortColumn={sortColumn}
-
+        onChangePage={changePage}
-    onDelete = async ( keyValue? : GetSsoProvider) => {
+        onSort={onSort}
-        const response = await ssoManagerService.deleteSsoProvider( keyValue?.id, keyValue?.guid);
+        onSearch={onSearch}
-        if (response) {
+        onDelete={onDelete}
-            this.componentDidMount();
+      />
-        }
+    </Loading>
-    }
+  );
-
-    render(): JSX.Element {
-        const { loaded, pagedData, sortColumn } = this.state;
-
-        return (
-            <Loading loaded={loaded}>
-                <Permission privilegeKey="AddSsoProvider">
-                <div>
-                    <Button buttonType={ButtonType.primary} to="add">Add</Button>
-                    </div>
-                </Permission>
-                <hr/>
-                <SsoManagerTable data={pagedData} sortColumn={sortColumn} onChangePage={this.changePage} onSort={this.onSort} onSearch={this.onSearch} onDelete={this.onDelete}/>
-            </Loading>
-        );
-    }
 };
 
 export default SsoManager;

src/modules/manager/users/UserDetails.tsx

@@ -1,40 +1,30 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import HorizontalTabs from "../../../components/common/HorizionalTabs";
 import Tab from "../../../components/common/Tab";
 import GeneralTab from "./components/GeneralTab";
 
 interface UserDetailsProps {
-    editMode : boolean;
+  editMode: boolean;
 }
 
-class UserDetails extends React.Component<UserDetailsProps> {
+const UserDetails: React.FC<UserDetailsProps> = ({ editMode }) => {
-    isEditMode = () => {
+  const { t } = useTranslation();
-        const { editMode } = this.props;
-        return editMode;
-    };
 
-    render() {
+  const heading = editMode ? t("EditUser") : t("AddUser");
-        const isEditMode = this.isEditMode();
 
-        let mode = "Add";
+  const tabs: JSX.Element[] = [
-        if (isEditMode) mode = "Edit";
+    <Tab key={1} label={t("General")}>
+      <GeneralTab isEditMode={editMode} />
+    </Tab>,
+  ];
 
-
+  return (
-        let tabs : JSX.Element[] = [];
+    <div>
-
+      <h1>{heading}</h1>
-        tabs.push( <Tab key={1} label="General">
+      <HorizontalTabs>{tabs}</HorizontalTabs>
-                <GeneralTab isEditMode={isEditMode}/>
+    </div>
-            </Tab> );
+  );
-
+};
-        return (
-            <div>
-                <h1>{mode} User</h1>
-                <HorizontalTabs>
-                    {tabs}
-                </HorizontalTabs>
-            </div>
-        );
-    }
-}
 
 export default UserDetails;

src/modules/manager/users/components/usersTable.tsx

@@ -1,6 +1,9 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import Column from "../../../../components/common/columns";
-import Table, { PublishedTableProps } from "../../../../components/common/Table";
+import Table, {
+  PublishedTableProps,
+} from "../../../../components/common/Table";
 import { GetUser } from "../services/usersService";
 import Button, { ButtonType } from "../../../../components/common/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -8,83 +11,99 @@ import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import authentication from "../../../frame/services/authenticationService";
 
 export interface UsersTableProps extends PublishedTableProps<GetUser> {
-    resendConfirmEmail?: (user: GetUser) => void;
+  resendConfirmEmail?: (user: GetUser) => void;
 }
 
-class UsersTable extends React.Component<UsersTableProps> {
+const UsersTable: React.FC<UsersTableProps> = ({
-    canResendConfirmMail = authentication.hasAccess("ResendConfirmMail");
+  data,
+  sortColumn,
+  onChangePage,
+  onSearch,
+  onDelete,
+  onSort,
+  resendConfirmEmail,
+}) => {
+  const { t } = useTranslation();
+  const canResendConfirmMail = authentication.hasAccess("ResendConfirmMail");
 
-    columns: Column<GetUser>[] = [
+  const resendConfirmEmailHandler = useCallback(
-        { key: "displayName", label: "Name", order: "asc" },
+    (keyValue: GetUser) => {
-        { key: "email", label: "Email", order: "asc" },
+      if (resendConfirmEmail != null) resendConfirmEmail(keyValue);
-        { key: "domainName", label: "Domain", order: "asc" },
+    },
-        { key: "created", label: "Created", order: "asc" },
+    [resendConfirmEmail],
-        { key: "lastUpdated", label: "Last Updated", order: "asc" },
+  );
-        {
+
-            key: "emailConfirmed",
+  const columns: Column<GetUser>[] = useMemo(
-            label: "Resend Confirm",
+    () => [
-            order: "asc",
+      { key: "displayName", label: t("Name"), order: "asc" },
-            searchable: false,
+      { key: "email", label: t("Email"), order: "asc" },
-            content: (item) => {
+      { key: "domainName", label: t("Domain"), order: "asc" },
-                if (!item!.emailConfirmed && this.canResendConfirmMail) {
+      { key: "created", label: t("Created"), order: "asc" },
-                    return (
+      { key: "lastUpdated", label: t("LastUpdated"), order: "asc" },
-                        <>
+      {
-                            <Button buttonType={ButtonType.secondary} onClick={() => this.resendConfirmEmail(item)}>
+        key: "emailConfirmed",
-                                <FontAwesomeIcon icon={faEnvelope} /> Confirm
+        label: t("ResendConfirm"),
-                            </Button>
+        order: "asc",
-                        </>
+        searchable: false,
-                    );
+        content: (item) => {
-                }
+          if (!item.emailConfirmed && canResendConfirmMail) {
-                return <></>;
+            return (
-            },
+              <Button
+                buttonType={ButtonType.secondary}
+                onClick={() => resendConfirmEmailHandler(item)}
+              >
+                <FontAwesomeIcon icon={faEnvelope} /> {t("Confirm")}
+              </Button>
+            );
+          }
+          return <></>;
         },
-    ];
+      },
+    ],
+    [t, canResendConfirmMail, resendConfirmEmailHandler],
+  );
 
-    resendConfirmEmail = (keyValue: GetUser) => {
+  const raiseSort = (sortCol: Column<GetUser>) => {
-        const { resendConfirmEmail } = this.props;
+    if (onSort !== undefined) onSort(sortCol);
+  };
 
-        if (resendConfirmEmail != null) resendConfirmEmail(keyValue!);
+  const handleAuditParams = (item: any) => {
+    return {
+      entityName: "e_suite.Database.Core.Tables.UserManager.User",
+      primaryKey: `{"Id":${item.id}}`,
     };
+  };
 
-    raiseSort = (sortColumn: Column<GetUser>) => {
+  const canDelete = (item: GetUser) => {
-        this.setState({ sortColumn });
+    const user = authentication.getCurrentUser();
-        if (this.props.onSort !== undefined) this.props.onSort(sortColumn);
+    return item.id !== user!.primarysid;
-    };
+  };
 
-    handleAuditParams = (item: any) => {
+  const editPath = authentication.hasAccess("EditUser")
-        return {
+    ? "edit/{0}"
-            entityName: "e_suite.Database.Core.Tables.UserManager.User",
+    : undefined;
-            primaryKey: '{"Id":' + item.id + "}",
+  const doDelete = authentication.hasAccess("DeleteUser")
-        };
+    ? onDelete
-    };
+    : undefined;
+  const showAudit = authentication.hasAccess("ViewAuditLog")
+    ? handleAuditParams
+    : undefined;
 
-    canDelete = (item: GetUser) => {
+  return (
-        const user = authentication.getCurrentUser();
+    <Table
-        return item.id != user!.primarysid;
+      data={data}
-    };
+      keyName="id"
-
+      columns={columns}
-    render() {
+      sortColumn={sortColumn}
-        const { data, sortColumn, onChangePage, onSearch, onDelete } = this.props;
+      editPath={editPath}
-        const editPath = authentication.hasAccess("EditUser") ? "edit/{0}" : undefined;
+      onSort={raiseSort}
-        const doDelete = authentication.hasAccess("DeleteUser") ? onDelete : undefined;
+      onChangePage={onChangePage}
-        const showAudit = authentication.hasAccess("ViewAuditLog") ? this.handleAuditParams : undefined;
+      onSearch={onSearch}
-
+      onDelete={doDelete}
-        return (
+      onAuditParams={showAudit}
-            <Table
+      canDelete={canDelete}
-                data={data}
+    />
-                keyName="id"
+  );
-                columns={this.columns}
+};
-                sortColumn={sortColumn}
-                editPath={editPath}
-                onSort={this.raiseSort}
-                onChangePage={onChangePage}
-                onSearch={onSearch}
-                onDelete={doDelete}
-                onAuditParams={showAudit}
-                canDelete={this.canDelete}
-            />
-        );
-    }
-}
 
 export default UsersTable;

src/modules/manager/users/users.tsx

@@ -1,103 +1,131 @@
-import React, { Component } from 'react';
+import React, { useCallback, useEffect, useState } from "react";
-import Column from '../../../components/common/columns';
+import { useTranslation } from "react-i18next";
-import { Paginated } from '../../../services/Paginated';
+import Column from "../../../components/common/columns";
-import UsersTable from './components/usersTable';
+import { Paginated } from "../../../services/Paginated";
-import userService, { GetUser } from './services/usersService';
+import UsersTable from "./components/usersTable";
-import Button, { ButtonType } from '../../../components/common/Button';
+import userService, { GetUser } from "./services/usersService";
-import { toast } from 'react-toastify';
+import Button, { ButtonType } from "../../../components/common/Button";
-import Loading from '../../../components/common/Loading';
+import { toast } from "react-toastify";
-import Permission from '../../../components/common/Permission';
+import Loading from "../../../components/common/Loading";
+import Permission from "../../../components/common/Permission";
 
-interface UsersState{
+const Users: React.FC = () => {
-    loaded: boolean,
+  const { t } = useTranslation();
-    pagedData : Paginated<GetUser>,
+  const [loaded, setLoaded] = useState(false);
-    sortColumn : Column<GetUser>,
+  const [pagedData, setPagedData] = useState<Paginated<GetUser>>({
-    filters: Map<string, string>;
+    page: 1,
-}
+    pageSize: 10,
+    count: 0,
+    totalPages: 1,
+    data: [],
+  });
+  const [sortColumn, setSortColumn] = useState<Column<GetUser>>({
+    key: "displayName",
+    label: t("Name"),
+    order: "asc",
+  });
+  const [filters, setFilters] = useState<Map<string, string>>(
+    new Map<string, string>(),
+  );
 
-class Users extends Component< any, any, UsersState> {
+  const changePage = useCallback(
-    state = {
+    async (page: number, pageSize: number) => {
-        loaded: false,
+      const data = await userService.getUsers(
-        pagedData : { page: 1,
+        page,
-            pageSize : 10,
+        pageSize,
-            count: 0,
+        sortColumn.key,
-            totalPages: 1,
+        sortColumn.order === "asc",
-            data: [] },
+        filters,
-        sortColumn: { key: "displayName", label: "Name", order: "asc" },
+      );
-        filters: new Map<string, string>()
+      if (data) {
+        setLoaded(true);
+        setPagedData(data);
+      } else {
+        setLoaded(false);
+      }
+    },
+    [filters, sortColumn.key, sortColumn.order],
+  );
+
+  const onSort = async (newSortColumn: Column<GetUser>) => {
+    const { page, pageSize } = pagedData;
+    const data = await userService.getUsers(
+      page,
+      pageSize,
+      newSortColumn.key,
+      newSortColumn.order === "asc",
+      filters,
+    );
+
+    if (data) {
+      setLoaded(true);
+      setPagedData(data);
+      setSortColumn(newSortColumn);
+    } else {
+      setLoaded(false);
     }
+  };
 
-    componentDidMount = async () => {
+  const onSearch = async (name: string, value: string) => {
-        const { page, pageSize } = this.state.pagedData;
+    const { page, pageSize } = pagedData;
+    const newFilters = new Map(filters);
+    newFilters.set(name, value);
+    const data = await userService.getUsers(
+      page,
+      pageSize,
+      sortColumn.key,
+      sortColumn.order === "asc",
+      newFilters,
+    );
 
-        await this.changePage(page, pageSize);
+    if (data) {
+      setLoaded(true);
+      setFilters(newFilters);
+      setPagedData(data);
+    } else {
+      setLoaded(false);
     }
+  };
 
-     changePage = async(page: number, pageSize : number) =>{
+  const onDelete = async (item?: GetUser) => {
-        const { sortColumn, filters } = this.state;
+    const response = await userService.deleteUser(item?.id, item?.guid);
-        
+    if (response) {
-         const pagedData = await userService.getUsers(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
+      await changePage(pagedData.page, pagedData.pageSize);
-         if(pagedData) {
-             this.setState({ loaded: true, pagedData });
-         } else {
-             this.setState({ loaded: false });
-         }
     }
+  };
 
-    onSort = async(sortColumn : Column<GetUser>) => {
+  const resentConfirmEmail = async (user: GetUser) => {
-        const {page, pageSize } = this.state.pagedData;
+    const response = await userService.resendConfirmEmail(user.id, user.guid);
-        const { filters } = this.state;
+    if (response) {
-        const pagedData = await userService.getUsers(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
+      toast.info(t("ConfirmEmailResent"));
-
-        if (pagedData) {
-            this.setState({ loaded: true, pagedData, sortColumn});
-        } else {
-            this.setState({ loaded: false });
-        }
     }
+  };
 
-    onSearch = async ( name: string, value: string) => {
+  useEffect(() => {
-        const {page, pageSize } = this.state.pagedData;
+    changePage(pagedData.page, pagedData.pageSize);
-        const {sortColumn, filters } = this.state;
+  }, [changePage, pagedData.page, pagedData.pageSize]);
-        filters.set(name, value);
-        const pagedData = await userService.getUsers(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
 
-        if (pagedData) {
+  return (
-            this.setState( { loaded: true, filters, pagedData });
+    <Loading loaded={loaded}>
-        } else {
+      <Permission privilegeKey="AddUser">
-            this.setState({ loaded: false });
+        <div>
-        }
+          <Button buttonType={ButtonType.primary} to="add">
-    };
+            {t("Add")}
-
+          </Button>
-    onDelete = async ( item? : GetUser) => {
+        </div>
-        const response = await userService.deleteUser( item?.id, item?.guid);
+      </Permission>
-        if (response) {
+      <hr />
-            this.componentDidMount();
+      <UsersTable
-        }
+        data={pagedData}
-    }
+        sortColumn={sortColumn}
-
+        onChangePage={changePage}
-    resentConfirmEmail = async (user: GetUser) => {
+        onSort={onSort}
-        const response = await userService.resendConfirmEmail( user.id, user.guid);
+        onSearch={onSearch}
-        if (response) {
+        onDelete={onDelete}
-            toast.info("Confirm e-mail resent");
+        resendConfirmEmail={resentConfirmEmail}
-        }
+      />
-    }
+    </Loading>
-
+  );
-    render(): JSX.Element {
-        const { loaded, pagedData, sortColumn } = this.state;
-
-        return (
-            <Loading loaded={loaded}>
-                <Permission privilegeKey="AddUser">
-                <div>
-                    <Button buttonType={ButtonType.primary}  to="add">Add</Button>
-                    </div>
-                </Permission>
-                <hr/>
-                <UsersTable data={pagedData} sortColumn={sortColumn} onChangePage={this.changePage} onSort={this.onSort} onSearch={this.onSearch} onDelete={this.onDelete} resendConfirmEmail={this.resentConfirmEmail}/>
-            </Loading>
-        );
-    }
 };
 
 export default Users;