Charlie/merging f b

.gitignore

@@ -1,4 +1,4 @@
 node_modules
 dist
-package-log.json
+package-lock.json
 .DS_Store

client/App.js

@@ -10,17 +10,31 @@ class App extends Component {
     super(props);
 
     this.state = {
-      currentUser: '',
+      currentUser: 'Michael',
       currentChatroom: '',
       token: '',
       loggedIn: false,
-      chatrooms: [{name:'Michael', status:'Closed'}, {name:'Kai', status:'Closed'}, {name:'Catilin', status:'Open'}],
-      favorites: ['C', 'D', 'Y', 'E'],
+      // chatrooms: [{title:'Michael', status:'Closed', password:''}, {title:'Kai', status:'Closed', password:''}, {title:'Catilin', status:'Open', password:''}],
+      favorites: ['David', 'Yuanji', 'Evan', 'Charlie'],
     };
 
     // const [token, setToken] = useState();
     this.logIn = this.logIn.bind(this);
     this.signOut = this.signOut.bind(this);
+    this.refresh = this.refresh.bind(this);
+  }
+
+  componentDidMount(){
+    fetch('/home')
+      .then(res => res.json())
+      .then(data => {
+        // console.log(data);
+        return this.setState({
+          ...this.state,
+          chatrooms: data
+        });
+      })
+      .catch(err => console.log('App.componentDidMount: getChatrooms: ERROR: ', err));
   }
 
   logIn() {
@@ -37,6 +51,19 @@ class App extends Component {
     })
   }
 
+  refresh() {
+    fetch('/home')
+      .then(res => res.json())
+      .then(data => {
+        // console.log(data);
+        return this.setState({
+          ...this.state,
+          chatrooms: data
+        });
+      })
+      .catch(err => console.log('App.js METHOD refresh ERROR: ', err));
+  }
+
   render() {
     if(!this.state.loggedIn) {
       return (<Login handleClick={this.logIn}/>)
@@ -46,8 +73,8 @@ class App extends Component {
       <div id='container'>
         <Router>
           <Routes>
-            <Route exact path='/' element={<MessageBoard signout={this.signOut} chatrooms={this.state.chatrooms} favorites={this.state.favorites}/>} />
-            <Route path='/chatroom' element={<Chatroom name={this.state.currentUser} room={this.state.currentChatroom} />} />
+            <Route exact path='/' element={<MessageBoard refresh={this.refresh} signout={this.signOut} name={this.state.currentUser} chatrooms={this.state.chatrooms} favorites={this.state.favorites}/>} />
+            <Route path='/chatroom' element={<Chatroom />} />
           </Routes>
         </Router>
       </div>

client/components/AddChatroom.js

@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
+import { useNavigate } from "react-router-dom";
 
 const AddChatroom = props => {
   const [title, setTitle] = useState();
-  const [status, setStatus] = useState();
+  const [status, setStatus] = useState('open');
   const [password, setPassword] = useState();
   const [titleError, setTitleError] = useState(null);
   const [statusError, setStatusError] = useState(null);
 
+  const navigate = useNavigate();
+
   const saveChatroom = () => {
     if (title === ''){setTitleError('required')}
     else if (status === 'Closed' && password === ''){setStatusError('required')}
@@ -17,17 +20,14 @@ const AddChatroom = props => {
         password
       };
       console.log('this is the body', body)
-      fetch('/routers/newChat', {
+      fetch('/newChat', {
         method: 'POST',
         headers: {
-          'Content-Type': 'Application/JSON'
+          'Content-Type': 'application/json',
         },
         body: JSON.stringify(body)
       })
-        .then(resp => resp.json())
-        .then(() => {
-          props.history.push('/home')
-        })
+        .then(resp => props.refresh())
         .catch(err => console.log('issue in AddChatroom frontend: ERROR', err))
     }
   }
@@ -42,8 +42,8 @@ const AddChatroom = props => {
       <div>
         <label htmlFor='securityStatus'>Security Status: </label>
         <select name='securityStatus' id='securityStatus' onChange={e => setStatus(e.target.value)}>
-          <option value='Open'>Open</option>
-          <option value='Closed'>Closed</option>
+          <option value='open'>Open</option>
+          <option value='closed'>Closed</option>
         </select>
       </div>
       <div>
@@ -53,7 +53,7 @@ const AddChatroom = props => {
       <div>
         <button className='submitButton' onClick={(e) => {
           e.preventDefault();
-          console.log(title, status, password);
+          // console.log(title, status, password);
           saveChatroom();
           document.querySelector('#addChatroom').style.display='none';
         }}>Submit</button>

client/components/ChatroomElement.js

@@ -1,26 +1,33 @@
 import React from 'react';
 import { useNavigate } from "react-router-dom";
 import ChatroomPassword from '../components/ChatroomPassword';
+import { Link } from "react-router-dom";
 
 const ChatroomElement = props => {
 
   const navigate = useNavigate();
 
-  if(props.status === 'Closed') return(
+  if(props.status === 'closed') return(
     <div className='chatroomrows'>
-      <h2>Chatroom Title: ({props.chatroomName}'s Room)</h2>
+      <h2>Chatroom Title: {props.chatroomName}</h2>
       <button onClick={(e) => {
         document.querySelector(`#password${props.i}`).style.display='block';
       }}>Locked</button>
-      <ChatroomPassword i={props.i} password={props.chatroomName} />
+      <ChatroomPassword i={props.i} name={props.name} chatroomName={props.chatroomName} password={props.password} />
     </div>
   );
 
   return(
     <div className='chatroomrows'>
       <h2 onClick={(e) => {
-        navigate(`/chatroom/${props.chatroomName}`);
-      }}>Chatroom Title: ({props.chatroomName}'s Room)</h2>
+        // navigate(`/chatroom/${props.chatroomName}`);
+        // navigate(`/chatroom?name=${props.name}&room=${props.chatroomName}`);
+        navigate('/chatroom', {state: {name: props.name, room: props.chatroomName}});
+      }}>Chatroom Title: {props.chatroomName}</h2>
+
+      {/* <Link to={`/chatroom?name=${props.name}&room=${props.chatroomName}`}>
+        <button type='submit'>Chatroom Title: {props.chatroomName}</button>
+    </Link> */}
     </div>
   );
 };

client/components/ChatroomPassword.js

@@ -7,13 +7,13 @@ const ChatroomPassword = props => {
 
   return(
     <div className='chatroomPassword' id={`password${props.i}`}>
-      <h2>Enter Password {props.name}</h2>
+      <h2>Enter Password for <br/>{props.chatroomName}</h2>
       <input type='password' id={`passwordInput${props.i}`} name='password' onChange={e => setPassword(e.target.value)}/>
       <div>
         <button className='enterButton' onClick={(e) => {
           console.log(props.password);
           console.log(password);
-          if(password === props.password) navigate(`/chatroom/${props.password}`); else alert('Wrong Password!');
+          if(password === props.password) navigate('/chatroom', {state: {name: props.name, room: props.chatroomName}}); else alert('Wrong Password!');
           document.querySelector(`#passwordInput${props.i}`).value='';
         }}>Enter</button>
         <button className='cancelButton' onClick={(e) => {

client/components/FavoriteElement.js

@@ -8,7 +8,8 @@ const FavoriteElement = props => {
   return(
     <div className='favorites'>
       <h2 onClick={(e) => {
-        navigate(`/chatroom/${props.chatroomName}`);
+        // navigate(`/chatroom/${props.chatroomName}`);
+        navigate('/chatroom', {state: {name: props.name, room: props.chatroomName}});
       }}>{props.chatroomName}'s Room</h2>
     </div>
   );

client/components/Input.css

@@ -0,0 +1,31 @@
+.form {
+  display: flex;
+  height: 10rem;
+}
+
+.input {
+  border: none;
+  border-radius: 5px;
+  padding-left: 2rem;
+  width: 80%;
+  font-size: 2rem;
+  height: 95%;
+}
+
+input:focus, textarea:focus, select:focus{
+  outline: none;
+}
+
+.sendButton {
+  color: #fff !important;
+  text-transform: uppercase;
+  text-decoration: none;
+  background: #7e45f0;
+  padding: 20px;
+  display: inline-block;
+  border: none;
+  width: 20%;
+  border-bottom-right-radius: 3px;
+  font-size: 30px;
+  font-weight: bold;
+}

client/components/Input.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import './Input.css';
 
 const Input = props => {
   // props should have the following properties

client/components/messages/Message.css

@@ -0,0 +1,22 @@
+.messageContainer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 5%;
+  margin-top: 3px;
+}
+
+.messageText {
+  width: 100%;
+  letter-spacing: 0;
+  float: left;
+  font-size: 1.1em;
+  word-wrap: break-word;
+}
+
+.backgroundBlue {
+  color: rgb(63, 63, 221);
+}
+
+.backgroundWhite {
+  color: white;
+}

client/components/messages/Message.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import './Message.css';
 
 const Message = props => {
   let isSentByCurrentUser = false;

client/components/messages/Messages.js

@@ -4,10 +4,15 @@ import Message from './Message';
 const Messages = props => {
   // props should have a messages and username properties
   let { messages, username } = props;
-  messages = messages.map(msgReceived => {
-    return <div><Message msgReceived={msgReceived} username={username} /></div>;
-  });
-  return ({messages});
+  // const msgs = messages.map(msgReceived => {
+  //   return <div><Message msgReceived={msgReceived} username={username} /></div>;
+  // });
+  const msgs = messages.map(msgReceived => <div><Message msgReceived={msgReceived} username={username} /></div>);
+  return (
+    <div className='messagesContainer'>
+      {msgs}
+    </div>
+    );
 };
 
 export default Messages;

client/containers/Chatroom.css

@@ -0,0 +1,33 @@
+.chatroom {
+  display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #F7F7F7;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: #FFFFFF;
+  border-radius: 8px;
+  height: 80%;
+  width: 80%;
+  border: 5px solid black;
+}
+
+.infoBar h4 {
+  font-size: 70px;
+  color: green;
+  margin: 10px 0 0 20px;
+}
+
+.infoBar {
+  border-bottom: 5px solid black;
+  height: 9rem;
+}
+
+.messagesContainer {
+  border-bottom: 5px solid black;
+}

client/containers/Chatroom.js

@@ -1,14 +1,21 @@
 import React, { Component, useState, useEffect } from 'react';
-// import queryString from 'query-string';
+import { useLocation } from "react-router-dom";
+import queryString from 'query-string';
 import io from "socket.io-client";
+import './Chatroom.css';
 
 import ChatRoomInfo from '../components/ChatRoomInfo';
 import Messages from '../components/messages/Messages';
 import Input from '../components/Input';
 
 const end_point = 'http://localhost:3000/';
 
-let socket = io(end_point);
+let socket = io(end_point, {
+  "force new connection" : true,
+  "reconnectionAttempts": "Infinity", 
+  "timeout" : 10000, 
+  transports: ['polling', 'websocket'],
+});
 
 const Chatroom = props => {
   const [name, setName] = useState('');
@@ -17,15 +24,20 @@ const Chatroom = props => {
   const [message, setMessage] = useState('');
   const [prevMessages, setPrevMessages] = useState([]);
 
+  const { state } = useLocation();
+
   useEffect(() => {
     // get room_id from props
     // get name from props ?
-    const { name, room } = props;
+    console.log(state);
+    const { name, room } = state;
     setRoom(room);
     setName(name);
 
-    socket.emit('join', { name, room });
-  });
+    socket.emit('join', { name, room }, (error) => {
+      if (error) alert(error);
+    });
+  }, [state]);
 
 // --------------------------------------------------------------------