Fix redux typescript

src/components/accessories/dashboard/Dashboard.tsx

@@ -1,3 +1,4 @@
+import { createSelector } from "@reduxjs/toolkit";
 import { Chart, registerables } from "chart.js";
 import { useAppSelector } from "libraries/hooks/redux";
 import React from "react";
@@ -10,12 +11,15 @@ import "./styles.scss";
 
 Chart.register(...registerables);
 
+const appSelector = createSelector(
+  (state) => state.main.authentication.data,
+  (userCredentials) => ({ userCredentials })
+);
+
 const Dashboard = () => {
   const { t } = useTranslation();
 
-  const { userCredentials } = useAppSelector((state) => ({
-    userCredentials: state.main.authentication.data,
-  }));
+  const { userCredentials } = useAppSelector(appSelector);
 
   const breadcrumbMap = {
     [t("nav.dashboard")]: "",

src/components/activities/loginActivity/RedirectAfterLogin.tsx

@@ -1,32 +1,33 @@
-import { useAppSelector } from "libraries/hooks/redux";
-import React, { useMemo } from "react";
-import { Navigate, useLocation } from "react-router";
-import { useLandingPageRoute } from "../../../libraries/hooks/useLandingPageRoute";
-import { IRedirectAfterLogin } from "./types";
-
-export const RedirectAfterLogin: React.FC<IRedirectAfterLogin> = ({
-  children,
-}) => {
-  const location = useLocation();
-  const landingPageRoute = useLandingPageRoute();
-  const to = useMemo(
-    () => location.state?.from || landingPageRoute,
-    [landingPageRoute, location]
-  );
-
-  const state = useAppSelector((state) => state);
-
-  const status = useMemo(
-    () =>
-      ["SUCCESS", "FAIL"].includes(state.main.settings.status!)
-        ? state.main.authentication.status!
-        : state.main.settings.status!,
-    [state.main.settings.status, state.main.authentication.status]
-  );
-
-  if (status === "SUCCESS") {
-    return <Navigate to={to} />;
-  }
-
-  return <>{children}</>;
-};
+import { useAppSelector } from "libraries/hooks/redux";
+import React, { useMemo } from "react";
+import { Navigate, useLocation } from "react-router";
+import { useLandingPageRoute } from "../../../libraries/hooks/useLandingPageRoute";
+import { IMainState } from "../../../state/main";
+import { IRedirectAfterLogin } from "./types";
+
+export const RedirectAfterLogin: React.FC<IRedirectAfterLogin> = ({
+  children,
+}) => {
+  const location = useLocation();
+  const landingPageRoute = useLandingPageRoute();
+  const to = useMemo(
+    () => location.state?.from || landingPageRoute,
+    [landingPageRoute, location]
+  );
+
+  const state: IMainState = useAppSelector((state) => state.main);
+
+  const status = useMemo(
+    () =>
+      ["SUCCESS", "FAIL"].includes(state.settings.status!)
+        ? state.authentication.status!
+        : state.settings.status!,
+    [state.settings.status, state.authentication.status]
+  );
+
+  if (status === "SUCCESS") {
+    return <Navigate to={to} />;
+  }
+
+  return <>{children}</>;
+};

src/libraries/hooks/useUserSettings.ts

@@ -1,7 +1,14 @@
-import { useAppSelector } from "libraries/hooks/redux";
-
-/**
- * @returns list of all user settings
- */
-export const useUserSettings = () =>
-  useAppSelector((state) => state.main.settings?.data || []);
+import { createSelector } from "@reduxjs/toolkit";
+import { useAppSelector } from "libraries/hooks/redux";
+import { UserSettingDTO } from "../../generated";
+
+const userSettingsSelector = createSelector(
+  (state) => state.main.settings?.data,
+  (settings) => settings || []
+);
+
+/**
+ * @returns list of all user settings
+ */
+export const useUserSettings = () =>
+  useAppSelector<any, UserSettingDTO[]>(userSettingsSelector);

src/libraries/permissionUtils/usePermissions.ts

@@ -1,7 +1,12 @@
+import { createSelector } from "@reduxjs/toolkit";
 import { useAppSelector } from "libraries/hooks/redux";
 
+const userPermissionSelector = createSelector(
+  (state) => state.main.authentication?.data?.permissions,
+  (permissions) => permissions || []
+);
+
 /**
  * @returns list of all user permissions
  */
-export const usePermissions = () =>
-  useAppSelector((state) => state.main.authentication?.data?.permissions || []);
+export const usePermissions = () => useAppSelector(userPermissionSelector);

src/mockServer/routes/settings.js

@@ -0,0 +1,12 @@
+export const settingsRoutes = (server) => {
+  server.namespace("/usersettings", () => {
+    server.get("/").intercept((req, res) => {
+      res
+        .status(200)
+        .json([{ id: 1, configName: "landing", configValue: "/" }]);
+    });
+    server.get("/dashboard").intercept((req, res) => {
+      res.status(200).json({}); // TODO: Add a response body from api. Missing api definition.
+    });
+  });
+};

src/mockServer/server.js

@@ -27,6 +27,7 @@ import { patientRoutes } from "./routes/patients";
 import { permissionRoutes } from "./routes/permission";
 import { pregnantTreatmentTypeRoutes } from "./routes/pregnantTreatmentType";
 import { pricesRoutes } from "./routes/prices";
+import { settingsRoutes } from "./routes/settings";
 import { suppliersRoutes } from "./routes/suppliers";
 import { therapyRoutes } from "./routes/therapies";
 import { userGroupRoutes } from "./routes/userGroups";
@@ -80,6 +81,7 @@ export function makeServer() {
     deliveryResultTypeRoutes(server);
     permissionRoutes(server);
     labExamRequestRoutes(server);
+    settingsRoutes(server);
   });
   return server;
 }