Pre Merge Push

src/App.js

@@ -14,6 +14,7 @@ import CreateProject from './components/Dashboard/CreateProject';
 import AllProjects from './components/Dashboard/AllProjects';
 import SingleProject from './components/Dashboard/SingleProject';
 import MessagingPage from './components/Messaging/MessagingPage'
+import SingleConversation from './components/Messaging/SingleConversation'
 
 function App() {
   const { authIsReady, user } = useAuthContext()
@@ -61,6 +62,10 @@ function App() {
               <Route path="/messages">
                 <MessagingPage />
               </Route>
+              <Route path="/conversations/:id">
+                {!user && <Redirect to="/login" />}
+                {user && <SingleConversation />}
+              </Route>
             </Switch>
           </BrowserRouter>
         )}

src/components/Messaging/AllMessages.js

@@ -8,6 +8,7 @@ import Avatar from "../UI/Avatar"
 export default function AllMessages ({ conversation }) {
     const { user } = useAuthContext()
     console.log('USER FROM useAuthContext: ', user)
+    console.log('THE CONVERSATION: ', conversation)
     const { updateDocument, response } = useFirestore('conversations') //not sure what this does
     const [newMessage, setNewMessage] = useState('')
 
@@ -34,23 +35,23 @@ export default function AllMessages ({ conversation }) {
         <div className='MessagingPage'>
             <h4> Conversation Messages </h4>
             {conversation.messages.length > 0 && conversation.messages.map(msg => (
+                console.log(msg),
                 <div key={msg.id} className='singleMessage'>
+
                     <div className='message-sender-name'>
                         <p> From: {msg.senderName} </p>
                     </div>
                     <div className='message-content'>
                         <p> {msg.message} </p>
                     </div>
-                    <div className='message-createdAt'>
-                        <p> Sent At: {msg.createdAt} </p>
-                    </div>
+
                 </div>
             ))}
 
             <form className='new-message-form' onSubmit={handleSubmit}>
                 <input onChange={(e) => setNewMessage(e.target.value)} value={newMessage} placeholder="say something nice" />
-            <button type="submit">️SEND</button>
-        </form>
+                <button type="submit">️SEND</button>
+            </form>
         </div>
     )
 }

src/components/Messaging/SingleConversation.js

@@ -0,0 +1,23 @@
+import { useParams } from "react-router-dom"
+import { useDocument } from '../../hooks/useDocument'
+
+import AllMessages from "./AllMessages"
+
+export default function SingleConversation() {
+  const { id } = useParams()
+  const { document, error } = useDocument('conversations', id)
+
+  if (error) {
+    return <div className="error">{error}</div>
+  }
+  if (!document) {
+    return <div className="loading">Loading...</div>
+  }
+
+
+  return (
+    <div className="singleConversation">
+      <AllMessages conversation={document} />
+    </div>
+  )
+}