Dynamic data

.eslintcache

@@ -1 +1 @@
-[{"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\index.js":"1","C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\App.js":"2","C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\reportWebVitals.js":"3","C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\components\\Sidebar.js":"4","C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\components\\SidebarChat.js":"5","C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\components\\Chat.js":"6","C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\firebase.js":"7"},{"size":500,"mtime":499162500000,"results":"8","hashOfConfig":"9"},{"size":600,"mtime":1610823387177,"results":"10","hashOfConfig":"9"},{"size":362,"mtime":499162500000,"results":"11","hashOfConfig":"9"},{"size":1709,"mtime":1610823042949,"results":"12","hashOfConfig":"9"},{"size":1046,"mtime":1610822746353,"results":"13","hashOfConfig":"9"},{"size":2018,"mtime":1610811377387,"results":"14","hashOfConfig":"9"},{"size":701,"mtime":1610811960181,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1tet1nm",{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\index.js",[],"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\App.js",[],"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\reportWebVitals.js",[],"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\components\\Sidebar.js",[],"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\components\\SidebarChat.js",[],"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\components\\Chat.js",[],"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\firebase.js",[]]
+[{"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\index.js":"1","C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\App.js":"2","C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\reportWebVitals.js":"3","C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\components\\Sidebar.js":"4","C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\components\\SidebarChat.js":"5","C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\components\\Chat.js":"6","C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\firebase.js":"7"},{"size":500,"mtime":499162500000,"results":"8","hashOfConfig":"9"},{"size":593,"mtime":1610829182806,"results":"10","hashOfConfig":"9"},{"size":362,"mtime":499162500000,"results":"11","hashOfConfig":"9"},{"size":1709,"mtime":1610823042949,"results":"12","hashOfConfig":"9"},{"size":1046,"mtime":1610829521708,"results":"13","hashOfConfig":"9"},{"size":2381,"mtime":1610829941131,"results":"14","hashOfConfig":"9"},{"size":701,"mtime":1610811960181,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1tet1nm",{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\index.js",[],"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\App.js",[],"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\reportWebVitals.js",[],"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\components\\Sidebar.js",[],"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\components\\SidebarChat.js",[],"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\components\\Chat.js",["30"],"C:\\Users\\PC\\Documents\\whatsapp-clone\\src\\firebase.js",[],{"ruleId":"31","severity":1,"message":"32","line":15,"column":10,"nodeType":"33","messageId":"34","endLine":15,"endColumn":18},"no-unused-vars","'roomName' is assigned a value but never used.","Identifier","unusedVar"]

package.json

@@ -11,6 +11,7 @@
     "firebase": "^8.2.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "web-vitals": "^0.2.4"
   },

src/App.js

@@ -1,22 +1,20 @@
 import "./App.css";
 import Sidebar from "./components/Sidebar";
 import Chat from "./components/Chat";
-import { BrowserRouter as Router, Switch, Route } from 'react-dom';
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
 function App() {
   return (
     //BEM naming convention
     <div className="app">
       <div className="app__body">
         <Router>
+          <Sidebar />
           <Switch>
-            <Route path="/app">
-              <Sidebar />
+            <Route path="/rooms/:roomId">
               <Chat />
             </Route>
-            <Route path="/">
-              <h1>Home Screen</h1>
-            </Route>
+            <Route path="/">{/* <h1>Home Screen</h1> */}</Route>
           </Switch>
         </Router>
       </div>

src/components/Chat.js

@@ -5,10 +5,22 @@ import MoreVert from "@material-ui/icons/MoreVert";
 import React, { useState, useEffect } from "react";
 import "./Chat.css";
 import { InsertEmoticon, Mic } from "@material-ui/icons";
+import { useParams } from 'react-router-dom';
+import db from "../firebase";
 
 function Chat() {
   const [seed, setSeed] = useState("");
   const [input, setInput] = useState('');
+  const { roomId } = useParams();
+  const [roomName, setRoomName] = useState('');
+
+  useEffect(() => {
+      if (roomId) {
+        db.collection('rooms').doc(roomId).onSnapshot((snapshot) => {
+            setRoomName(snapshot.data().name);
+        })
+      }
+  }, [roomId]);
 
   useEffect(() => {
     setSeed(Math.floor(Math.random() * 5000));

src/components/SidebarChat.js

@@ -1,38 +1,41 @@
-import { Avatar } from '@material-ui/core';
-import React, { useState, useEffect } from 'react'
-import './SidebarChat.css';
-import db from '../firebase';
+import { Avatar } from "@material-ui/core";
+import React, { useState, useEffect } from "react";
+import "./SidebarChat.css";
+import db from "../firebase";
+import { Link } from 'react-router-dom';
 
 function SidebarChat({ id, name, addNewChat }) {
-    const [seed, setSeed] = useState(''); 
+  const [seed, setSeed] = useState("");
 
-    useEffect(() => {
-        setSeed(Math.floor(Math.random() * 5000))
-    }, [])
+  useEffect(() => {
+    setSeed(Math.floor(Math.random() * 5000));
+  }, []);
 
-    const createChat = () => {
-        const roomName = prompt("Please enter name for chat");
+  const createChat = () => {
+    const roomName = prompt("Please enter name for chat");
 
-        if (roomName) {
-            db.collection('rooms').add({
-                name: roomName,
-            })
-        }
-    };
+    if (roomName) {
+      db.collection("rooms").add({
+        name: roomName,
+      });
+    }
+  };
 
-    return !addNewChat ? (
-        <div className="sidebarChat">
-            <Avatar src={`https://avatars.dicebear.com/api/human/${seed}.svg`} />
-            <div className="sidebarChat__info">
-                <h2>{name}</h2>
-                <p>Last message...</p>
-            </div>
+  return !addNewChat ? (
+    <Link to={`/rooms/${id}`}>
+      <div className="sidebarChat">
+        <Avatar src={`https://avatars.dicebear.com/api/human/${seed}.svg`} />
+        <div className="sidebarChat__info">
+          <h2>{name}</h2>
+          <p>Last message...</p>
         </div>
-    ) : (
-        <div onClick={createChat} className="sidebarChat">
-            <h2>Add new chat</h2>
-        </div>
-    )
+      </div>
+    </Link>
+  ) : (
+    <div onClick={createChat} className="sidebarChat">
+      <h2>Add new chat</h2>
+    </div>
+  );
 }
 
-export default SidebarChat
+export default SidebarChat;