Set up HCO.

This component will replace PrivateRoute and RestrictedRoute for user reserved area. This will prevent endless route problems and keep every component reusable.

src/components/Authorization/Authorization.tsx

+import { Unauthorized } from 'components/NonAuthUser/Unauthorized/Unauthorized';
+import React, { ComponentType, FC } from 'react';
+
+interface WithAuthProps {
+  allowedRoles: string[];
+}
+
+export interface Props extends WithAuthProps {
+  children: React.ReactNode;
+}
+
+/* eslint-disable react/jsx-props-no-spreading */
+export const withAuthorization = <T extends WithAuthProps = WithAuthProps>(
+  WrappedComponent: React.ComponentType<T>,
+): FC<T> => {
+  // Creating the inner component. The calculated Props type here is the where the magic happens.
+  const ComponentWithAuthorization: FC<T> = (
+    props: Omit<T, keyof WithAuthProps>,
+  ) => {
+    const { allowedRoles } = props as T;
+
+    const role = 'admin';
+    const isAuth = true;
+
+    // props comes afterwards so the can override the default ones.
+    return allowedRoles.includes(role) && isAuth ? (
+      <WrappedComponent {...(props as T)} />
+    ) : (
+      <Unauthorized />
+    );
+  };
+
+  return ComponentWithAuthorization;
+};