admin toolbar

src/App.js

@@ -4,8 +4,12 @@ import { useDispatch } from "react-redux";
 import { checkUserSession } from "./redux/User/user.actions";
 import "./default.scss";
 
+// components
+import AdminToolbar from "./components/AdminToolbar";
+
 // hoc
 import WithAuth from "./hoc/withAuth";
+import WithAdminAuth from "./hoc/withAdmin";
 // layouts
 import MainLayout from "./layouts/MainLayout";
 import HomepageLayout from "./layouts/HomepageLayout";
@@ -15,6 +19,7 @@ import Registration from "./pages/Registration";
 import Login from "./pages/Login";
 import Recovery from "./pages/Recovery";
 import Dashboard from "./pages/Dashboard";
+import Admin from "./pages/Admin";
 
 const App = () => {
   const dispatch = useDispatch();
@@ -24,6 +29,7 @@ const App = () => {
 
   return (
     <div className="App">
+      <AdminToolbar />
       <Switch>
         <Route
           exact
@@ -68,6 +74,16 @@ const App = () => {
             </WithAuth>
           )}
         />
+        <Route
+          path="/admin"
+          render={() => (
+            <WithAdminAuth>
+              <MainLayout>
+                <Admin />
+              </MainLayout>
+            </WithAdminAuth>
+          )}
+        />
       </Switch>
     </div>
   );

src/components/AdminToolbar/index.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+import { checkUserIsAdmin } from "../../utils";
+import "./styles.scss";
+
+const AdminToolbar = () => {
+  const currentUser = useSelector((state) => state.user.currentUser);
+  const isAdmin = checkUserIsAdmin(currentUser);
+  if (!isAdmin) return null;
+  return (
+    <div className="adminToolbar">
+      <ul>
+        <li>
+          <Link to="/admin">My admin</Link>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default AdminToolbar;

src/components/AdminToolbar/styles.scss

@@ -0,0 +1,35 @@
+.adminToolbar {
+  display: inline-block;
+  width: 100%;
+  background-color: black;
+  height: auto;
+  margin: 0 auto;
+  padding: 0 10px;
+
+  ul,
+  li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  ul {
+    float: right;
+    li {
+      display: inline-block;
+      a {
+        display: block;
+        font-size: 1.6rem;
+        line-height: 1;
+        color: white;
+        padding: 10px;
+        transition: all 0.4s ease-in-out;
+
+        &:hover {
+          background-color: rgba(255, 255, 255, 0.6);
+          color: black;
+          transition: all 0.4s ease-in-out;
+        }
+      }
+    }
+  }
+}

src/components/Signup/index.js

@@ -5,9 +5,9 @@ import AuthWrapper from "./../AuthWrapper";
 import "./styles.scss";
 import { useHistory } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
-import { signOutUserStart } from "./../../redux/User/user.actions";
+import { signUpUserStart } from "./../../redux/User/user.actions";
 
-const Signup = (props) => {
+const Signup = () => {
   const history = useHistory();
   const dispatch = useDispatch();
   const [email, setEmail] = useState("");
@@ -38,7 +38,7 @@ const Signup = (props) => {
   const handleFormSubmit = (e) => {
     e.preventDefault();
     dispatch(
-      signOutUserStart({ displayName, email, password, confirmPassword })
+      signUpUserStart({ displayName, email, password, confirmPassword })
     );
   };
 

src/customHooks/index.js

@@ -1,3 +1,4 @@
 import useAuth from "./useAuth";
+import useAdmin from "./useAdmin";
 
-export { useAuth };
+export { useAuth, useAdmin };

src/customHooks/useAdmin.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+import { useHistory } from "react-router-dom";
+import { checkUserIsAdmin } from "./../utils";
+
+const useAdmin = () => {
+  const currentUser = useSelector((state) => state.user.currentUser);
+  const history = useHistory();
+
+  useEffect(() => {
+    if (!checkUserIsAdmin(currentUser)) {
+      history.push("/login");
+    }
+  }, [currentUser]);
+
+  return currentUser;
+};
+
+export default useAdmin;

src/firebase/utils.js

@@ -16,7 +16,7 @@ export const handleUserProfile = async ({ userAuth, additionalData }) => {
   const { uid } = userAuth;
   const userRef = firestore.doc(`users/${uid}`);
   const snapshot = await userRef.get();
-
+  const userRoles = ["user"];
   if (!snapshot.exists) {
     const { displayName, email } = userAuth;
     const timestamp = new Date();
@@ -25,6 +25,7 @@ export const handleUserProfile = async ({ userAuth, additionalData }) => {
         displayName,
         email,
         createdDate: timestamp,
+        userRoles,
         ...additionalData,
       });
     } catch (err) {

src/hoc/withAdmin.js

@@ -0,0 +1,5 @@
+import { useAdmin } from "./../customHooks";
+
+const WithAdminAuth = (props) => useAdmin(props) && props.children;
+
+export default WithAdminAuth;

src/pages/Admin/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./styles.scss";
+
+const Admin = () => {
+  return (
+    <div>
+      <h1>My Admin</h1>
+    </div>
+  );
+};
+
+export default Admin;

src/utils/index.js

@@ -0,0 +1,6 @@
+export const checkUserIsAdmin = (currentUser) => {
+  if (!currentUser || !Array.isArray(currentUser.userRoles)) return false;
+  const { userRoles } = currentUser;
+  if (userRoles.includes("admin")) return true;
+  return false;
+};