Restyle Delete chat room

package.json

@@ -10,11 +10,12 @@
     "@testing-library/user-event": "^12.1.10",
     "emoji-mart": "^3.0.1",
     "firebase": "^8.6.5",
+    "firebase-tools": "^10.1.4",
     "material-ui-dropzone": "^3.5.0",
     "react": "^17.0.2",
     "react-clear-cache": "^1.4.12",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

src/App.css

@@ -12,4 +12,5 @@
   height: 90vh;
   width: 90vw;
   box-shadow: -1px 4px 20px -6px rgba(0, 0, 0, 0.75);
+
 }

src/App.js

@@ -1,14 +1,17 @@
-import './App.css';
-import React from 'react';
-import Sidebar from './Sidebar';
-import Chat from './Chat';
-import Login from './Login';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-import { useStateValue } from './StateProvider';
+import "./App.css";
 
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+
+import Chat from "./Chat";
+import ChatHomePage from "./ChatHomePage";
+import Login from "./Login";
+import Sidebar from "./Sidebar";
+import { useStateValue } from "./StateProvider";
 
 function App() {
   const [{ user }] = useStateValue();
+
   return (
     <div className="app">
       {!user ? (
@@ -17,18 +20,14 @@ function App() {
         <div className="app__body">
           <Router>
             <Sidebar />
-            <Switch>
-              <Route path="/rooms/:roomId">
-                <Chat />
-              </Route>
-              <Route path="/">
-                <Chat />
-              </Route>
-            </Switch>
+            <Routes>
+              <Route exact path="/" element={<ChatHomePage />}></Route>
+
+              <Route path="/rooms /: roomId" element={<Chat />}></Route>
+            </Routes>
           </Router>
         </div>
       )}
-
     </div>
   );
 }

src/Chat.js

@@ -11,7 +11,7 @@ import { Picker } from "emoji-mart";
 import firebase from "firebase";
 import { DropzoneDialogBase } from "material-ui-dropzone";
 import React, { useEffect, useRef, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import db from "./firebase";
 import { storage } from "./firebase";
@@ -30,13 +30,15 @@ function Chat() {
 
   const [open, setOpen] = useState(false);
   const [fileObjects, setFileObjects] = useState([]);
+  const navigate = useNavigate();
+  const [rerender, setRerender] = useState(true);
 
   const upload = () => {
-    if (fileObjects == null) return;
-    storage
-      .ref(`/files/${fileObjects}`)
-      .put(fileObjects)
-      .on("state_changed", alert("success"), alert);
+    if (fileObjects == null)
+      return storage
+        .ref(`/files/${fileObjects}`)
+        .put(fileObjects)
+        .on("state_changed", alert("success"), alert);
   };
 
   const dialogTitle = () => (
@@ -52,7 +54,10 @@ function Chat() {
   );
 
   useEffect(() => {
-    if (roomId) {
+    console.log(roomId);
+    if (!roomId) {
+      navigate("/");
+    } else {
       db.collection("rooms")
         .doc(roomId)
         .onSnapshot((snapshot) => setRoomName(snapshot.data().name));
@@ -65,6 +70,7 @@ function Chat() {
           setMessages(snapshot.docs.map((doc) => doc.data()))
         );
     }
+    setRerender(rerender);
   }, [roomId]);
 
   useEffect(() => {

src/ChatHomePage.css

@@ -0,0 +1,4 @@
+.chat__homepage h1 {
+  text-align: center;
+  margin: auto;
+}

src/ChatHomePage.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+function ChatHomePage() {
+  return (
+    <div className="chat__homepage">
+      <h1>Welcome to Chathub</h1>
+    </div>
+  );
+}
+export default ChatHomePage;

src/Sidebar.js

@@ -1,14 +1,16 @@
-import React, { useState, useEffect } from "react";
 import "./Sidebar.css";
+
 import { Avatar, IconButton, Menu, MenuItem } from "@material-ui/core";
-import DonutLargeIcon from "@material-ui/icons/DonutLarge";
+import { SearchOutlined } from "@material-ui/icons";
 import ChatIcon from "@material-ui/icons/Chat";
+import DonutLargeIcon from "@material-ui/icons/DonutLarge";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
-import { SearchOutlined } from "@material-ui/icons";
-import SidebarChat from "./SidebarChat";
+import React, { useEffect, useState } from "react";
+
 import db, { auth } from "./firebase";
-import { useStateValue } from "./StateProvider";
 import { actionTypes } from "./reducer";
+import SidebarChat from "./SidebarChat";
+import { useStateValue } from "./StateProvider";
 
 function Sidebar(props) {
   const [rooms, setRooms] = useState([]);
@@ -45,7 +47,7 @@ function Sidebar(props) {
         dispatch({
           type: actionTypes.SET_USER,
           user: null,
-      })
+        });
       })
       .catch((error) => alert(error.message));
   };
@@ -81,7 +83,11 @@ function Sidebar(props) {
       <div className="sidebar__search">
         <div className="sidebar__searchContainer">
           <SearchOutlined />
-          <input className="inputText" type="text" placeholder="Search or start new chat" />
+          <input
+            className="inputText"
+            type="text"
+            placeholder="Search or start new chat"
+          />
         </div>
       </div>
       <div className="sidebar__chats">

src/SidebarChat.css

@@ -2,23 +2,26 @@
   display: flex;
   padding: 20px;
   cursor: pointer;
-  border-bottom:  1px solid #f6f6f6;
+  border-bottom: 1px solid #f6f6f6;
+  justify-content: space-between;
+}
+.sidebarChat__infoDiv {
+  display: flex;
 }
-
 a {
   text-decoration: none !important;
   color: black;
 }
 
-.sidebarChat:hover{
-    background-color: #ebebeb;
+.sidebarChat:hover {
+  background-color: #ebebeb;
 }
 
-.sidebarChat__info> h2 {
+.sidebarChat__info > h2 {
   font-size: 16px;
   margin-bottom: 8px;
 }
 
 .sidebarChat__info > h2 {
-   margin-left: 15px;
+  margin-left: 15px;
 }

src/SidebarChat.js

@@ -1,18 +1,29 @@
-import React, { useEffect, useState } from 'react';
-import { Avatar } from "@material-ui/core";
-import './SidebarChat.css';
-import db from './firebase';
-import { Link } from 'react-router-dom';
+import "./SidebarChat.css";
+
+import { Avatar, IconButton, Menu, MenuItem } from "@material-ui/core";
+import DeleteIcon from "@material-ui/icons/Delete";
+import MoreVertIcon from "@material-ui/icons/MoreVert";
+import React, { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+
+import db from "./firebase";
 
 function SidebarChat({ id, name, addNewChat }) {
   const [seed, setSeed] = useState("");
   const [messages, setMessages] = useState("");
+  const navigate = useNavigate();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
 
   useEffect(() => {
     if (id) {
-      db.collection('rooms').doc(id).collection('messages').orderBy('timestamp', 'desc').onSnapshot(snapshot => {
-        setMessages(snapshot.docs.map((doc) => doc.data()))
-      })
+      db.collection("rooms")
+        .doc(id)
+        .collection("messages")
+        .orderBy("timestamp", "desc")
+        .onSnapshot((snapshot) => {
+          setMessages(snapshot.docs.map((doc) => doc.data()));
+        });
     }
   }, [id]);
 
@@ -24,28 +35,73 @@ function SidebarChat({ id, name, addNewChat }) {
     const roomName = prompt("Please Enter Name for Chat");
 
     if (roomName) {
-      db.collection("rooms").add({
-        name: roomName
-      })
+      db.collection("rooms").add({ name: roomName });
     }
   };
 
+  const handleClose = (event) => {
+    setAnchorEl(null);
+  };
+
+  const handleClickMore = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const deleteContact = (id) => {
+    db.collection("rooms")
+      .doc(id)
+      .delete()
+      .then(() => {
+        console.log("Document successfully deleted!");
+      })
+      .catch((error) => {
+        console.error("Error removing document: ", error);
+      });
+    db.collection("messages")
+      .doc(id)
+      .delete()
+      .then(() => {
+        console.log("Document successfully deleted!");
+        navigate("/", { replace: true });
+      })
+      .catch((error) => {
+        console.error("Error removing document: ", error);
+      });
+  };
+
   return !addNewChat ? (
     <Link to={`/rooms/${id}`} key={id}>
       <div className="sidebarChat">
-        <Avatar src={`https://avatars.dicebear.com/api/human/${seed}.svg`} />
-        <div className="sidebarChat__info">
-          <h2>{name}</h2>
-          <p>{messages[0]?.message}</p>
+        <div className="sidebarChat__infoDiv">
+          <Avatar src={`https://avatars.dicebear.com/api/human/${seed}.svg`} />
+          <div className="sidebarChat__info">
+            <h2>{name}</h2>
+            <p>{messages[0]?.message}</p>
+          </div>
+        </div>
+        <div>
+          <IconButton onClick={handleClickMore}>
+            <MoreVertIcon />
+          </IconButton>
+          <Menu
+            anchorEl={anchorEl}
+            keepMounted
+            onClose={handleClose}
+            open={open}
+          >
+            <MenuItem onClick={() => deleteContact(id)}>
+              <DeleteIcon />
+              Delete
+            </MenuItem>
+          </Menu>
         </div>
       </div>
     </Link>
-
   ) : (
     <div onClick={createChat} className="sidebarChat">
       <h3 className="add-new-chat-title">Add New Room chat</h3>
     </div>
-  )
+  );
 }
 
-export default SidebarChat
+export default SidebarChat;