implementd admin panel

package.json

@@ -20,15 +20,15 @@
     "react-multi-select-component": "^3.0.8",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.0.1",
+    "react-scripts": "^3.0.1",
     "react-spinners": "^0.10.4",
     "react-tilt": "^0.1.4",
     "reactstrap": "^8.8.0",
     "remark-gfm": "^1.0.0",
     "socket.io-client": "^2.3.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "GENERATE_SOURCEMAP=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/App.js

@@ -5,6 +5,7 @@ import Signup from "./components/Signup";
 import { debounce } from "lodash";
 import $ from "jquery";
 import { Switch, Route, HashRouter } from "react-router-dom";
+import Admin from "./components/adminPages/admin";
 
 function App() {
   useEffect(() => {
@@ -36,7 +37,8 @@ function App() {
           <Route exact path="/" component={Login} />
           <Route path="/signup" component={Signup} />
           <Route path="/chat" component={Chat} />
-        </Switch>
+          <Route path="/admin" component={Admin} />
+                  </Switch>
       </HashRouter>
     </div>
   );

src/components/Chat.js

@@ -9,7 +9,7 @@ const Chat = () => {
   const user = JSON.parse(localStorage.getItem("user"));
   //const history = useHistory();
 
-  if (token.length === 0) {
+  if (token===null) {
     history.push("/");
   }
 

src/components/ChatRoom.js

@@ -20,7 +20,7 @@ const socket = getSocket();
 //     });
 //   }
 // });
-
+ 
 const ChatRoom = ({ token, user }) => {
   const [isActive, setActive] = useState(false);
   const [clickedRoomName, setClickedRoomName] = useState("");
@@ -93,7 +93,7 @@ const ChatRoom = ({ token, user }) => {
       },
       {
         headers: {
-          Authorization: token ? `Bearer ${token}` : "",
+          Authorization: token,
           "Content-type": "application/json",
         },
       }

src/components/Login.js

@@ -24,12 +24,15 @@ const Login = () => {
         email,
         password,
       });
-      if (res.status === 200) {
+      if (res.status === 200) { 
         const { token, user } = res.data;
-        console.log("Successfully Signed in");
+        console.log("Successfully Signed in",res.data.user.role);
         localStorage.setItem("token", token);
         localStorage.setItem("user", JSON.stringify(user));
-        history.push("/chat");
+        if (res.data.user.role === "admin") {
+          history.push("/admin")
+        }else{
+        history.push("/chat");}
       } else {
         console.log(res);
       }

src/components/Signup.js

@@ -7,7 +7,7 @@ import Logo from "./images/robo.webp";
 import { Link } from "react-router-dom";
 import Tilt from "react-tilt";
 import { useHistory } from "react-router";
-import axios from "axios";
+import axios from "axios"; 
 import config from "../config.json";
 // import M from "materialize-css";
 
@@ -61,8 +61,8 @@ const Signup = () => {
         //   "5ffc31195bfdb84beba3ffaa",
         // ];
         const roomIds = [
-          "601bb51e6e69aa784e27ce6c",
-          "601bb5266e69aa784e27ce6d",
+          "60e9373ace5ecd0015a74b07",
+          "60e93b17ce5ecd0015a74b1e",
         ];
         roomIds.map(async (roomId) => {
           const _res = await axios.post(`${config.server}/joinroom/`, {

src/components/adminPages/admin.js

@@ -0,0 +1,106 @@
+import "../../components/css/admin.css";
+import React from "react";
+import { useState, useLayoutEffect } from "react";
+import { Switch, BrowserRouter, Route } from "react-router-dom";
+import { useHistory } from "react-router";
+import axios from "axios";
+import config from "../../config.json";
+import EditDatabase from "./editdatabase";
+
+function Admin() {
+  const [userActive, setUserActive] = useState(true);
+  const [roomActive, setRoomActive] = useState(false);
+  const [messagesActive, setMessagesActive] = useState(false);
+  const [isauthorized, setIsAuthorized] = useState(false);
+  const [name, setName] = useState("user");
+  const navigate = useHistory();
+  const token = localStorage.getItem("token") || null;
+  const user = JSON.parse(localStorage.getItem("user"));
+
+  const checkIsValidUser = async () => {
+    console.log(`${config.server}/admin`);
+
+    const res = await axios.post(
+      `${config.server}/admin`,
+      {
+        user: user,
+      },
+      {
+        headers: {
+          Authorization: token ? `Bearer ${token}` : "",
+          "Content-type": "application/json",
+        },
+      }
+    );
+    if (res.status === 200) {
+      setIsAuthorized(true);
+    } else if (res.status === 234) {
+      alert("this page is for admins only");
+      navigate.push("/");
+    }
+  };
+
+  useLayoutEffect(() => {
+    if (token === null) {
+      navigate.push("/");
+    }
+    checkIsValidUser();
+  }, []);
+
+  return (
+    <div className="App">
+      <div className="admin-top">
+        {" "}
+        <h1>Welcome to the Admin Panel !!!</h1>
+      </div>
+      <div className="h-break" />
+      {isauthorized && (
+        <div className="admin">
+          <div className="admin-left">
+            <button
+              className={userActive ? "admin-button" : "admin-button-inactive"}
+              onClick={() => {
+                setName("user");
+                setUserActive(true);
+                setRoomActive(false);
+                setMessagesActive(false);
+              }}
+            >
+              Users
+            </button>
+            <button
+              className={roomActive ? "admin-button" : "admin-button-inactive"}
+              onClick={() => {
+                setName("rooms");
+                setUserActive(false);
+                setRoomActive(true);
+                setMessagesActive(false);
+              }}
+            >
+              Rooms
+            </button>
+            <button
+              className={
+                messagesActive ? "admin-button" : "admin-button-inactive"
+              }
+              onClick={() => {
+                setName("messages");
+                setUserActive(false);
+                setRoomActive(false);
+                setMessagesActive(true);
+              }}
+            >
+              Messages
+            </button>
+          </div>
+          <div className="v-break" />
+          <div className="admin-right">
+            <EditDatabase name={name} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Admin;

src/components/adminPages/create.js

@@ -0,0 +1,56 @@
+import "../css/admin.css";
+import React,{ useState, useLayoutEffect } from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+import config from "../../config.json";
+
+function Create(props) {
+  const data = {};
+  let a = null;
+  console.log("props",props);
+
+  const SubmitData = async (e)=>{
+      e.preventDefault();
+      console.log(data);
+      try {
+        console.log("data",`${config.server}/admin/${props.name}/add`);
+        const res = await axios.post(`${config.server}/admin/${props.name}/add`, data);
+
+        console.log(data);
+        if (res.status === 200) {
+          console.log("success");
+          a = null
+          alert("Record Created successfully");  
+        } else if (res.status === 234){
+
+          alert("record already Exists"); 
+          console.log("problems");
+        }
+
+      }catch (error) {
+          console.log(" error");
+      }
+  }
+  return (
+    <div className="create">
+      <h3>Create {props.name}</h3>
+      <div className='forms'>
+        <form onSubmit={SubmitData}>
+          {Object.entries(props.fields).map(([key, value]) => {
+            data[key]=value;
+            return (
+              <div key={key} className="reader">
+                <label className="label">{key}</label> 
+                <input key={key} className="input" value={a} placeholder={value} onChange={(a)=>{data[key]=a.target.value}}/>
+              </div>
+            );
+          })}
+          <input className="submit" type="submit"/>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default Create;

src/components/adminPages/delete.js

@@ -0,0 +1,89 @@
+import "../../App.css";
+import React, { useState, useLayoutEffect, useEffect } from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+import config from "../../config.json";
+
+function Delete(props) {
+  const [email, setEmail] = useState("");
+  const [conversationId, setConversationId] = useState("");
+  const [roomId, setRoomID] = useState("");
+  const [value, setValue] = useState(false);
+  const [data, setData] = useState("");
+  //console.log(data);
+
+  const SubmitData = async (e) => {
+    e.preventDefault();
+    try {
+      console.log("data", { email });
+      const res = null;
+      if (props.name === "user") {
+        const res = await axios.post(
+          `${config.server}/admin/${props.name}/delete`,
+          { email }
+        );
+        if (res.status === 200) {
+            console.log("success", value);
+            alert("Record Deleted successfully");
+          }
+      } else if (props.name === "rooms") {
+        const res = await axios.post(
+          `${config.server}/admin/${props.name}/delete`,
+          { conversationId }
+        );
+        if (res.status === 200) {
+            console.log("success", value);
+            alert("Record Deleted successfully");
+          }
+      } else if (props.name === "messages") {
+        const res = await axios.post(
+          `${config.server}/admin/${props.name}/delete`,
+          { conversationId }
+        );
+        if (res.status === 200) {
+          console.log("success", value);
+          alert("Record Deleted successfully");
+        } 
+      }
+
+      console.log("user", res);
+      if (res.status === 200) {
+        console.log("success", value);
+        alert("Record Deleted successfully");
+      } else if (res.status === 234) {
+        alert("Something went wrong");
+        console.log("problems");
+      }
+    } catch (error) {
+      console.log(" error", error);
+    }
+  };
+
+  return (
+    <div className="create">
+      <h3>Delete {props.name}</h3>
+      <div className="forms">
+        <form onSubmit={SubmitData}>
+          <div className="reader">
+            <label className="label">{props.readMessage}</label>
+            <input
+              placeholder="enter data"
+              value={email}
+              className="input"
+              onChange={(a) => {
+                setEmail(a.target.value);
+
+                setRoomID(a.target.value);
+                setConversationId(a.target.value);
+              }}
+            />
+          </div>
+          <input className="submit" type="submit" />
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default Delete;