компоненты Private директории переработаны

src/components/Private/PrivateContent.jsx

@@ -1,24 +0,0 @@
-const admins = ['администратор', 'админ', 'admin']
-
-export const isInRole = (roles) => {
-  if(!roles?.length)
-    return true
-  const role = localStorage['roleName']?.toLowerCase()
-  if(admins.indexOf(role) > -1)
-    return true
-  for(const r of roles)
-    if(r.toLowerCase() === role)
-      return true
-  return false
-}
-
-export const privateContent = (roles, children) => {
-  if(isInRole(roles))
-    return children
-  else
-    return null
-}
-
-export const PrivateContent = ({roles, children}) => {
-  return privateContent(roles, children)
-}

src/components/Private/PrivateContent.tsx

@@ -0,0 +1,28 @@
+export type Role = string
+
+const admins: Role[] = ['администратор', 'админ', 'admin']
+
+export const isInRole = (roles?: Role[]): boolean => {
+  // if (localStorage['login'] === 'dev')
+  //   return true
+  if(!roles?.length)
+    return true
+  const role: Role = localStorage['roleName']?.toLowerCase()
+  if(admins.indexOf(role) > -1)
+    return true
+  for(const r of roles)
+    if(r.toLowerCase() === role)
+      return true
+  return false
+}
+
+export const privateContent = <T extends unknown>(roles?: Role[], children?: T): T | null | undefined => {
+  return isInRole(roles) ? children : null
+}
+
+type PrivateContentProps = {
+  roles?: Role[]
+  children?: any
+}
+
+export const PrivateContent: React.FC<PrivateContentProps> = ({ roles, children }) => privateContent(roles, children)

src/components/Private/PrivateMenuItem.jsx

@@ -1,11 +0,0 @@
-import { Menu } from "antd";
-import { isInRole } from './PrivateContent'
-
-export const PrivateMenuItem = ({ children, roles, ...other }) => {
-  if(!isInRole(roles))
-    return null
-
-  return <Menu.Item {...other}>
-      {children}
-    </Menu.Item>;
-}

src/components/Private/PrivateMenuItem.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Menu } from 'antd'
+import { isInRole, Role } from './PrivateContent'
+
+type PrivateMenuItemProps = {
+  roles: Role[]
+  [props: string]: any
+}
+
+export const PrivateMenuItem: React.FC<PrivateMenuItemProps> = ({ roles, ...props }) => {
+  return isInRole(roles) ? <Menu.Item {...props}/> : null
+}

src/components/Private/PrivateRoute.jsx

@@ -1,16 +0,0 @@
-import React /*, { useContext, createContext, useState }*/ from "react";
-import {
-  Route,
-  Redirect
-} from "react-router-dom";
-
-export function PrivateRoute({ children, ...rest }) {
-  let token = localStorage['token'];
-  return (
-    <Route
-      {...rest}
-      render={({ location }) => token
-        ? (children)
-        : (<Redirect to={{ pathname: "/login", state: { from: location } }} />)} />
-  );
-}

src/components/Private/PrivateRoute.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Route, Redirect } from 'react-router-dom'
+import { isInRole, Role } from './PrivateContent'
+
+type PrivateRouteProps = {
+  children: any
+  roles: Role[]
+  [other: string]: any
+}
+
+export const PrivateRoute: React.FC<PrivateRouteProps> = ({ children, roles, ...other }) => {
+  const token = localStorage['token']
+  return (
+    <Route
+      {...other}
+      render={({ location }) => token && isInRole(roles) ? children : (
+        <Redirect to={{ pathname: "/login", state: { from: location } }} />)
+      }
+    />
+  )
+}

src/components/Private/index.ts

@@ -1,3 +1,3 @@
-export {PrivateRoute} from './PrivateRoute'
-export {privateContent, PrivateContent} from './PrivateContent'
-export {PrivateMenuItem} from './PrivateMenuItem'
+export { PrivateRoute } from './PrivateRoute'
+export { privateContent, PrivateContent } from './PrivateContent'
+export { PrivateMenuItem } from './PrivateMenuItem'