-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #46 from Eevee-Elites-Capstone/finalize-css
Finalize css
- Loading branch information
Showing
9 changed files
with
261 additions
and
208 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,18 @@ | ||
| asset-manifest.json,1644004435554,1317c6de3dfc90231d9edf8d7fe57ec4b9332ecfcae5bf4ded9c91c95cd74855 | ||
| index.html,1644004470193,bbdaeb13d834651253f786d7fd023a2eae442a2ad0094bfa1404cf2b1fb1ba7f | ||
| manifest.json,1644003422792,5c997de1364b8be939319fa9209abd77f2caf7f8844999a9e2e9173f844e7840 | ||
| robots.txt,1644003422792,b2090cf9761ef60aa06e4fab97679bd43dfa5e5df073701ead5879d7c68f1ec5 | ||
| 404.html,1644003422789,3240c6b45513fdd97861a63c8ae3ef0e7d2bf1357ec632ad7e6839473710326c | ||
| favicon.ico,1644003422790,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9 | ||
| logo192.png,1644003422791,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b | ||
| static/js/main.2b9ad023.js.LICENSE.txt,1644004435559,fc4b45099106dd7e31426481fa3dbcc22aeaf9ebcfef9b6bc0da3b4daf60c717 | ||
| static/media/index.06ad11ea3e32fd3e4303.cjs,1644004435559,9c012da182b8279caaf6568c3be86abd82b41c7dd0dcd7125b92ea770bfada1f | ||
| static/css/main.eb895fb3.css,1644004435559,da2bc63857d16b0f669e81fd543ecfe19357976c91fc56ea0574619c0fd23a95 | ||
| static/css/main.eb895fb3.css.map,1644004435559,558fd8413fb6991154d3d3837d27a48be0b4688feaa41725c8f4403f6d6b4476 | ||
| logo512.png,1644003422791,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331 | ||
| static/js/main.2b9ad023.js,1644004435559,78b329b1b03a7ddcca11a493167d6b8dc2a2e14f05a18ba9b2f8e4d91f6ec21b | ||
| static/js/main.2b9ad023.js.map,1644004435560,f55994b89a64bd19d73a8cec05d096e6601ad85c395a9b3394e77508c386cdce | ||
| 404.html,1644251363572,3240c6b45513fdd97861a63c8ae3ef0e7d2bf1357ec632ad7e6839473710326c | ||
| asset-manifest.json,1644423014081,f062c93ab1ef08c1406324fa9e3aa86205a1ba08f55bab993b313a0b9335af35 | ||
| logo512.png,1644251363573,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331 | ||
| manifest.json,1644251363573,5c997de1364b8be939319fa9209abd77f2caf7f8844999a9e2e9173f844e7840 | ||
| robots.txt,1644251363574,b2090cf9761ef60aa06e4fab97679bd43dfa5e5df073701ead5879d7c68f1ec5 | ||
| index.html,1644423014080,2830e6fa948c446ccde56a8e1af6d64058e8260371bfc22d4088776d242083f1 | ||
| logo192.png,1644251363573,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b | ||
| static/media/chat-icon.f032be1de526b90c22006c9ce07d23d8.svg,1644423014106,18f6d558b38f092fcea12aa13fd4966dc1ecc6739ef8d39be9fc1ae26f6954e7 | ||
| static/js/main.71b19ece.js.LICENSE.txt,1644423014107,fc4b45099106dd7e31426481fa3dbcc22aeaf9ebcfef9b6bc0da3b4daf60c717 | ||
| favicon.ico,1644251363572,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9 | ||
| static/media/index.06ad11ea3e32fd3e4303.cjs,1644423014106,9c012da182b8279caaf6568c3be86abd82b41c7dd0dcd7125b92ea770bfada1f | ||
| static/media/logo-no-bg.4d881dc9874adc7364eb819a01793fa1.svg,1644423014106,d08bfc42a3dd4f100b415ce742c3d89b9358f02ef7cf4a288095f4625f5526da | ||
| static/media/notification.aa8f8c40faaac8a754c9.mp3,1644423014107,eed43f0e0a1d69b724acf4dfa5628b0232d80dcad25bc2118a7beb62da38dc53 | ||
| default.png,1644351750087,81206609ffc1fba3fd4da2d222a4ff965baded5511496c6a5fac96b39fd63a05 | ||
| static/css/main.163def93.css,1644423014107,56965644e48eb59f7049379acb30aa59193955c46324010e6fb59a878dd2e4a1 | ||
| static/css/main.163def93.css.map,1644423014107,d66465a35dac015469681b284abcfcd292810f2bc8907462f829368dedb92542 | ||
| static/js/main.71b19ece.js,1644423014107,399e70de25f584b35c3379034dc86835d4a431ba71c55677336cb7be48328ac0 | ||
| static/js/main.71b19ece.js.map,1644423014110,0fb34941b73cb4d09599421dd58ab86ac4d7d080c346cf123a288d6492926be4 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,97 @@ | ||
| import {firebase, projectFirestore, timestamp} from '../../firebase/fbConfig'; | ||
| import { firebase, projectFirestore, timestamp } from '../../firebase/fbConfig'; | ||
| import { useEffect, useState } from 'react' | ||
| import { useParams } from "react-router-dom" | ||
| import { useAuthContext } from "../../hooks/useAuthContext" | ||
| import { useAllConversations } from '../../hooks/useAllConversations' | ||
| import { useNewConversation } from '../../hooks/useNewConversation' | ||
| import { Link } from "react-router-dom"; | ||
| import Sidebar from "../Dashboard/Sidebar" | ||
| import SingleConversation from './SingleConversation'; | ||
|
|
||
| export default function AllConversations () { | ||
| export default function AllConversations() { | ||
| const { user } = useAuthContext() | ||
| const [newMessage, setNewMessage] = useState('') | ||
| const [newUser, setNewUser] = useState('') | ||
| const [newTitle, setNewTitle] = useState('') | ||
| const conversationsRef = projectFirestore.collection('conversations'); | ||
| const { document, error } = useAllConversations(user.uid) | ||
|
|
||
| if (error) { | ||
| return <div className="error">{error}</div> | ||
| } | ||
| else if (!document) { | ||
| return <div className="loading">Loading...</div> | ||
| } | ||
| else { | ||
| // Using the hook | ||
| // const handleSubmit = async (e) => { | ||
| // e.preventDefault(); | ||
| // await useNewConversation(newUser, newTitle, newMessage) | ||
| // console.log(e) | ||
| // console.log('FormValues: ', newUser, newTitle, newMessage) | ||
| // } | ||
| const handleSubmit = async (e) => { | ||
| e.preventDefault(); | ||
| const conversationToCreate = { | ||
|
|
||
| // Using the hook | ||
| // const handleSubmit = async (e) => { | ||
| // e.preventDefault(); | ||
| // await useNewConversation(newUser, newTitle, newMessage) | ||
| // console.log(e) | ||
| // console.log('FormValues: ', newUser, newTitle, newMessage) | ||
| // } | ||
|
|
||
| const handleSubmit = async (e) => { | ||
| e.preventDefault(); | ||
| const conversationToCreate = { | ||
| users: [newUser, user.uid], | ||
| messages: [newMessage], | ||
| createdAt: timestamp.fromDate(new Date()), | ||
| updatedAt: timestamp.fromDate(new Date()), | ||
| title: newTitle, | ||
| } | ||
| await conversationsRef.add(conversationToCreate) | ||
| } | ||
| await conversationsRef.add(conversationToCreate) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="all-conversations"> | ||
| <h1> All Conversations: </h1> | ||
| {document.map(conv => ( | ||
| <Link to={`/conversations/${conv.id}`} key={conv.id}> | ||
| <p> Conversation Title: {conv.title}</p> | ||
| <p> {conv.messages[0].message} </p> | ||
| </Link> | ||
| ))} | ||
| <h3> Start a new conversation </h3> | ||
| <form className='new-conversation-form' onSubmit={handleSubmit}> | ||
| <input | ||
| onChange={(e) => setNewTitle(e.target.value)} | ||
| value={newTitle} | ||
| placeholder="Title" /> | ||
| <input | ||
| onChange={(e) => setNewUser(e.target.value)} | ||
| value={newUser} | ||
| placeholder="Who do you want to reach" /> | ||
| <textarea | ||
| required | ||
| onChange={(e) => setNewMessage(e.target.value)} | ||
| value={newMessage} | ||
| placeholder="First Message" /> | ||
| <button type="submit">️SEND</button> | ||
| </form> | ||
| </div> | ||
| ) | ||
|
|
||
| return ( | ||
| <div className="flex flex-row"> | ||
| <Sidebar /> | ||
| <div className="flex flex-auto bg-white-200 items-center justify-center"> | ||
| <div className="bg-blue-100 h-4/5 w-3/4 shadow-xl rounded-xl flex-col m-6 overflow overflow-auto resize"> | ||
| <div className="flex flex-col ml-8 p-6 justify-between"> | ||
| <h3 className="text-3xl font-bold "> Start a new conversation </h3> | ||
| <form className="flex flex-col space-y-3" | ||
| onSubmit={handleSubmit}> | ||
| <input | ||
| onChange={(e) => setNewTitle(e.target.value)} | ||
| value={newTitle} | ||
| placeholder="Title" | ||
| className="border border-gray-300 dark:border-gray-700 pl-3 py-3 shadow-sm bg-transparent rounded text-sm focus:outline-none focus:border-indigo-700 placeholder-gray-500 font-mono font-light text-gray-600 dark:text-gray-400 mb-6" | ||
| /> | ||
| <input | ||
| onChange={(e) => setNewUser(e.target.value)} | ||
| value={newUser} | ||
| placeholder="Who do you want to reach" | ||
| className="border border-gray-300 dark:border-gray-700 pl-3 py-3 shadow-sm bg-transparent rounded text-sm focus:outline-none focus:border-indigo-700 placeholder-gray-500 font-mono font-light text-gray-600 dark:text-gray-400 mb-6" | ||
| /> | ||
| <textarea | ||
| required | ||
| onChange={(e) => setNewMessage(e.target.value)} | ||
| value={newMessage} | ||
| className="border border-gray-300 dark:border-gray-700 pl-3 py-3 shadow-sm bg-transparent rounded text-sm focus:outline-none focus:border-indigo-700 placeholder-gray-500 font-mono font-light text-gray-600 dark:text-gray-400" | ||
| placeholder="First Message" /> | ||
| <button type="submit" className="flex flex-grow-0 bg-blue-500 rounded-full font-bold text-white px-4 py-3 transition duration-300 ease-in-out hover:bg-blue-600 w-24 mr-6 mb-12"> | ||
| Send | ||
| <svg xmlns="http://www.w3.org/2000/svg" class="inline ml-2 w-6 stroke-current text-white stroke-2" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg> | ||
| </button> | ||
| </form> | ||
| <h1 className="text-2xl font-medium mt-4 mb-4"> All Conversations </h1> | ||
| {document.map(conv => ( | ||
| <Link to={`/conversations/${conv.id}`} key={conv.id}> | ||
| <div class="p-2" key={conv.id}> | ||
| <div class="inline-flex items-center bg-white leading-none text-purple-600 rounded-full p-2 shadow text-teal text-sm w-5/6"> | ||
| <span class="inline-flex bg-blue-600 text-white rounded-full h-6 px-3 justify-center items-center">{conv.title}</span> | ||
| <span class="inline-flex px-2">{conv.messages[0].message}</span> | ||
| </div> | ||
| </div> | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| {/* <SingleConversation /> */} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| } |
Oops, something went wrong.