SwitchComponentsByAuth component

client/src/components/Content.tsx

@@ -4,8 +4,9 @@ import { Redirect, Route, Switch } from 'react-router-dom';
 import { GroupInfo } from './group/GroupInfo';
 import { LoggedInHome } from './home/LoggedInHome';
 import { LoggedOutHome } from './home/LoggedOutHome';
+import { NotAuthorized } from './utils/NotAuthorized';
 import React from 'react';
-import { ShowOnUser } from './utils/ShowOnUser';
+import { SwitchComponentByAuth } from './utils/SwitchComponentByAuth';
 
 export const Content: React.FC = () => {
   return (
@@ -16,16 +17,13 @@ export const Content: React.FC = () => {
           <Route path="/gyik">gyik</Route>
           <Route path="/admin">admin</Route>
           <Route path="/qr">qr</Route>
-          <Route path="/profile/me">own profile</Route>
+          <Route path="/profile/me">
+            <SwitchComponentByAuth isLoggedIn={'alma'} notLoggedIn={<NotAuthorized />} />
+          </Route>
           <Route path="/group/:id/info" component={GroupInfo} />
           <Route path="/group/:id/admin" component={GroupInfo} />
           <Route exact path="/">
-            <ShowOnUser isLoggedIn={false}>
-              <LoggedOutHome />
-            </ShowOnUser>
-            <ShowOnUser isLoggedIn={true}>
-              <LoggedInHome />
-            </ShowOnUser>
+            <SwitchComponentByAuth isLoggedIn={<LoggedInHome />} notLoggedIn={<LoggedOutHome />} />
           </Route>
           <Route path="">
             <Redirect to="/" />

client/src/components/utils/NotAuthorized.tsx

+import * as React from 'react';
+
+import { Card, CardContent, Typography } from '@material-ui/core';
+
+export const NotAuthorized: React.FC = () => {
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" align="center">
+          Az oldal a megtekintéséhez be kell lépned!
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};

client/src/components/utils/SwitchComponentByAuth.tsx

+import React from 'react';
+import { userContext } from '../../context/userContext';
+
+interface IAuthorized {
+  isLoggedIn?: React.ReactNode;
+  notLoggedIn?: React.ReactNode;
+}
+
+export const SwitchComponentByAuth: React.FC<IAuthorized> = ({ isLoggedIn = null, notLoggedIn = null }) => {
+  const { state: user } = React.useContext(userContext);
+  if (!user.fetched) return null;
+  console.log(user);
+  if (!!user.id) return <>{isLoggedIn}</>;
+  if (!user.id) return <>{notLoggedIn}</>;
+  return null;
+};