home moved inside frontpage and interests moved out of fronpage. abou…

…t-us, profilepage footer. online/offline inside chat page. login logic inside navbar
himanshuNegi755 · Dec 4, 2020 · 319527b · 319527b
1 parent f518d0a
commit 319527b
Show file tree

Hide file tree

Showing 15 changed files with 123 additions and 113 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -6,7 +6,7 @@ import { fetchUser } from './store/actions/authActions';
 import Chat from './components/Chat/Chat';
 import FrontPage from './components/FrontPage/FrontPage';
 import Rooms from './components/Rooms/Rooms.js';
-import Interests from './components/FrontPage/Interests/Interests';
+import Interests from './components/Interests/Interests';
 import ProfilePage from './components/ProfilePage/ProfilePage.js';
 import My404Component from './components/My404Component/My404Component.js';
 import AboutUs from './components/AboutUs/AboutUs.js';

diff --git a/client/src/components/AboutUs/AboutUs.css b/client/src/components/AboutUs/AboutUs.css
@@ -28,6 +28,17 @@
     text-align: left;
     font-size: 1.2rem;
 }
+
+.faq-list-item em{
+    transition: 0.2s;
+    cursor: pointer;
+}
+.faq-list-item em:hover{
+    transition: 0.2s;
+    padding-left: 0.1rem;
+    text-shadow: 0 0 1rem #1cbec7;
+}
+
 .faq-list-item em{
     cursor: pointer;
 }
@@ -39,4 +50,4 @@
 
 .a-tag-in-faq-list {
     color: black;
-}
+}
diff --git a/client/src/components/AboutUs/AboutUs.js b/client/src/components/AboutUs/AboutUs.js
@@ -26,7 +26,7 @@ const AboutUs = () => {
     <div className="about-us">
       <NavBar pageTitle='About Us'/>
         <section className="about-section">
-          <p className="welcome-heading"><img className="about-logo" src={CcLogo}/></p>
+          <p className="welcome-heading"><img className="about-logo" src={CcLogo} alt="logo"/></p>
           <hr/>
             <p className="intro-text">An online realtime discussion platform.</p><br/>
             <p className="info-section">This is an online platform where you can create a room of any topic of your choice and can have dicussion with any person who's online.
@@ -75,7 +75,7 @@ const AboutUs = () => {
                 <div className="faq-list-item col-6">
                     <i className="fas fa-angle-down" style={{transform: 'rotate(0deg)'}} id="d10"></i><em onClick={() => {showFAQAns('10')}}> I still got some questions!</em>
                     <div className="ans" style={{display: 'none'}} id="10">
-                        You can contact us through mail.
+                      You can contact us through<a className="contact-icons" href="mailto:[email protected]">mail.</a>
                     </div>
                 </div>
         </div>

diff --git a/client/src/components/Chat/Chat.js b/client/src/components/Chat/Chat.js
@@ -41,19 +41,16 @@ const Chat = ({ location, user }) => {
   const [reportedMsg, setReportedMsg ] = useState('');
   const [reportStatus, setReportStatus] = useState(''); //status after reporting
 
-  //typing status usestate
-  const [typing, setTyping] = useState('');
+  const [typing, setTyping] = useState(''); //typing status usestate
+  const [online, setOnline] = useState(true); //state to store online/offline status
 
-  useEffect(() => {
-    const { room, roomId } = queryString.parse(location.search);
-
-    if(user) {
-      console.log('useEffect');
-      window.addEventListener('load', () => {
-        console.log('inside');
-        /*window.addEventListener('online',  function(){console.log('online')});
-        window.addEventListener('offline', function(){console.log('offline')});*/
-      });
+  useEffect(() => {    
+    //online/offline event
+    window.addEventListener('online', connectionChangeFun);
+    window.addEventListener('offline', connectionChangeFun);
+
+    if(user) {      
+      const { room, roomId } = queryString.parse(location.search);
       socket = io(process.env.REACT_APP_SOCKET_ENDPOINT, {transports: ['websocket', 'polling', 'flashsocket']});
 
       setRoom(room);
@@ -74,7 +71,13 @@ const Chat = ({ location, user }) => {
     } else if (user === false) {
       setLoggedIn(false)
     }
-
+    //componentWillUnmount
+    return () => {
+      if(user) socket.close();
+      window.removeEventListener('online', connectionChangeFun);
+      window.removeEventListener('offline', connectionChangeFun);  
+    }
+    // eslint-disable-next-line
   }, [location.search, user]);
 
   useEffect(() => {
@@ -90,11 +93,6 @@ const Chat = ({ location, user }) => {
     }
 }, [user]);
 
-  //component unmount
-  useEffect(() => {
-    if(user) return () => socket.close();
-  },[user]);
-
   const sendMessage = (event) => {
     event.preventDefault();
     if(message) socket.emit('sendMessage', {message, messageReply}, () => setMessage(''));
@@ -169,13 +167,30 @@ const Chat = ({ location, user }) => {
     typingTimeout = setTimeout(function() { socket.emit('typing', ''); }, 1000);
   }
 
-  //online user or not
-  const updateOnlineStatus = () => {
+  //online/offline status function along with socket reconnect
+  const connectionChangeFun = () => {
     if(navigator.onLine) {
-      return(<div>online</div>)
-    } else {
-      return(<div>online</div>)
-    }
+      setOnline(true);
+
+      const { room, roomId } = queryString.parse(location.search);
+      socket = io(process.env.REACT_APP_SOCKET_ENDPOINT, {transports: ['websocket', 'polling', 'flashsocket']});
+
+      setRoom(room);
+      setName(user.userName);
+      setRoomId(roomId);
+      const userName = user.userName;
+
+      socket.emit('join', { userName, room, roomId }, (error) => {
+        if(error) {
+          alert(error);
+          setRedirectTo404(false)
+          //alert(error);
+        } else {
+          axios.get(`${process.env.REACT_APP_BACKEND_API}/chat/${roomId}`)
+          .then(res => { setMessages(res.data) })
+        }
+      });
+    } else { setOnline(false); }
   }
 
   if(!loggedIn) {
@@ -186,8 +201,7 @@ const Chat = ({ location, user }) => {
     return (
       <div className="outerContainer">
         <div className="container">
-          {updateOnlineStatus()}
-          <InfoBar room={room} noOfMemberInRoom={users.length} showMemebers={showMembersModal} typingData={typing}/>
+          <InfoBar room={room} noOfMemberInRoom={users.length} showMemebers={showMembersModal} typingData={typing} onlineStatus={online}/>
           <div className="pop-div"><span id='reportStatus'> {reportStatus} </span></div>
           <Messages messages={messages} name={name} replyFun={sendReply} mutedUsers={mutedUsers} roomName={room} reportModal={showReportModal}/>
           <Input message={message} setMessage={setMessage} sendMessage={sendMessage} userInRoom={users} msgReply={messageReply} resetMsg={resetMsg} typing={typingFun}/>

diff --git a/client/src/components/Footer/Footer.js b/client/src/components/Footer/Footer.js
@@ -2,16 +2,16 @@ import React from 'react';
 import './Footer.css';
 
 const Footer = () => {
-        return (
-          <footer className="footer">
-              <div className="container-fluid contact-details">
-                  <h4 className="contact-us">CONTACT US</h4>
-                  <p className="contact-text">For any queries please mail us and we will reply as soon as possible with a solution.</p>
-                  <a className="contact-icons" href="mailto:[email protected]"><i className="fas fa-envelope fa-2x" aria-hidden="true"></i> </a>
-                  <hr className="contact-divider"></hr>
-                  <p className="copyright">© COPYRIGHT 2020 CHIT-CHAT.</p>
-              </div>
-          </footer>
-        );
+  return (
+    <footer className="footer">
+        <div className="container-fluid contact-details">
+            <h4 className="contact-us">CONTACT US</h4>
+            <p className="contact-text">For any queries please mail us and we will reply as soon as possible with a solution.</p>
+            <a className="contact-icons" href="mailto:[email protected]"><i className="fas fa-envelope fa-2x" aria-hidden="true"></i> </a>
+            <hr className="contact-divider"></hr>
+            <p className="copyright">© COPYRIGHT 2020 CHIT-CHAT.</p>
+        </div>
+    </footer>
+  );
 }
 export default Footer;
diff --git a/client/src/components/FrontPage/FrontPage.js b/client/src/components/FrontPage/FrontPage.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 
 import './FrontPage.css';
 import Introduction from './Introduction/Introduction';
-import Home from '../Home/Home';
+import Home from './Home/Home';
 
 const FrontPage = ({ user }) => {
 

diff --git a/client/src/components/Home/Home.css → ...nt/src/components/FrontPage/Home/Home.css b/client/src/components/Home/Home.css → ...nt/src/components/FrontPage/Home/Home.css
diff --git a/client/src/components/Home/Home.js → client/src/components/FrontPage/Home/Home.js b/client/src/components/Home/Home.js → client/src/components/FrontPage/Home/Home.js
@@ -1,21 +1,20 @@
 import React, { useState, useEffect, useRef } from "react";
 import { connect } from 'react-redux';
-import { Link, Redirect } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import axios from 'axios';
 import moment from 'moment';
 import { InputGroup, FormControl } from 'react-bootstrap';
-import { fetchUser } from '../../store/actions/authActions';
+import { fetchUser } from '../../../store/actions/authActions';
 
 import './Home.css';
-import NavBar from '../NavBar/NavBar';
-import langIcon from '../../icons/langIcon.svg';
+import NavBar from '../../NavBar/NavBar';
+import langIcon from '../../../icons/langIcon.svg';
 
 const Home = ({ user, fetch_user }) => {
 
   useEffect(() => { fetch_user() }, [fetch_user])
 
   const [rooms, setRooms] = useState([]); //rooms as per user follow interests
-  const [loggedIn, setLoggedIn] = useState(true);
   const [allRoomsList, setAllRoomsList] = useState([]); //all rooms
   const [suggestions, setSuggestions] = useState([]);
   const [roomTitle, setRoomTitle] = useState(''); //for searching titles
@@ -37,7 +36,7 @@ const Home = ({ user, fetch_user }) => {
         }
       })
 
-    } else if(user === false) {setLoggedIn(false)}
+    }
 
     return () => { isMounted = false };
   }, [user]);
@@ -125,36 +124,32 @@ const Home = ({ user, fetch_user }) => {
     if(suggestionRef.current) { if (suggestionRef && !suggestionRef.current.contains(event.target)) { setSuggestions([]) } }
     }
 
-  if(!loggedIn) {
-    return <Redirect to='/' />;
-  } else {
-    return (
-      <div className='main-div home-page'>
-        <NavBar pageTitle='Home'/>
-
-        <div className="searchBar" style={{visibility: showSearchBar}}>
-          <InputGroup>
-              <InputGroup.Prepend>
-                <InputGroup.Text ><span role="img" aria-label="search"><i className="fas fa-search"></i></span></InputGroup.Text>
-              </InputGroup.Prepend>
-              <FormControl
-                  placeholder="What can we help you find?"
-                  aria-label="What can we help you find"
-                  onChange={onTextChanged}
-                  type='text'
-                  value={roomTitle}
-              />
-              <div className="mb-3 suggestion" ref={suggestionRef}>
-                {renderSuggestions()}
-              </div>
-          </InputGroup>
-        </div>
-
-        {rooms.length === 0 ? <div className="firstUser-msg"><span>Feed is empty, create new room or Follow some interests</span></div> : null}
-        {roomsList()}
+  return (
+    <div className='main-div home-page'>
+      <NavBar pageTitle='Home'/>
+
+      <div className="searchBar" style={{visibility: showSearchBar}}>
+        <InputGroup>
+            <InputGroup.Prepend>
+              <InputGroup.Text ><span role="img" aria-label="search"><i className="fas fa-search"></i></span></InputGroup.Text>
+            </InputGroup.Prepend>
+            <FormControl
+                placeholder="What can we help you find?"
+                aria-label="What can we help you find"
+                onChange={onTextChanged}
+                type='text'
+                value={roomTitle}
+            />
+            <div className="mb-3 suggestion" ref={suggestionRef}>
+              {renderSuggestions()}
+            </div>
+        </InputGroup>
       </div>
-    );
-  }
+
+      {rooms.length === 0 ? <div className="firstUser-msg"><span>Feed is empty, create new room or Follow some interests</span></div> : null}
+      {roomsList()}
+    </div>
+  );
 }
 
 const mapStateToProps = (state) => {

diff --git a/client/src/components/InfoBar/InfoBar.css b/client/src/components/InfoBar/InfoBar.css
@@ -36,7 +36,6 @@
   margin: 0 1rem 0.2rem;
   border-radius: 10px;
   box-shadow: 0 0 10px #00ff00;
-  background-color: #00ff00;
 }
 .typing-status {
   margin: auto 0.5rem 0.75rem 2.5rem;

diff --git a/client/src/components/InfoBar/InfoBar.js b/client/src/components/InfoBar/InfoBar.js
@@ -2,11 +2,11 @@ import React from 'react';
 
 import './InfoBar.css';
 
-const InfoBar = ({ room, noOfMemberInRoom, showMemebers, typingData }) => (
+const InfoBar = ({ room, noOfMemberInRoom, showMemebers, typingData, onlineStatus }) => (
   <div className="infoBar">
     <div className="leftInnerContainer">
       <p>{room}</p>
-      <div className="onlineIcon"></div>
+      <div className="onlineIcon" style={onlineStatus ? {backgroundColor: '#00ff00'} : {backgroundColor: '#ff0000'}}></div>
       <i className="fas fa-users chat-memNo" onClick={showMemebers}></i> <p>{noOfMemberInRoom}</p>
       <p className="typing-status">{typingData}</p>
     </div>

diff --git a/...ponents/FrontPage/Interests/Interests.css → ...nt/src/components/Interests/Interests.css b/...ponents/FrontPage/Interests/Interests.css → ...nt/src/components/Interests/Interests.css
diff --git a/...mponents/FrontPage/Interests/Interests.js → client/src/components/Interests/Interests.js b/...mponents/FrontPage/Interests/Interests.js → client/src/components/Interests/Interests.js
@@ -1,15 +1,14 @@
 import React, { useState, useEffect } from "react";
 import { connect } from 'react-redux';
-import { Link, Redirect } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import axios from 'axios';
 
 import './Interests.css';
-import NavBar from '../../NavBar/NavBar';
+import NavBar from '../NavBar/NavBar';
 
 const Interests = ({ user }) => {
   const [topics, setTopics] = useState([]);
   const [followedTopics, setFollowedTopics] = useState([]);
-  const [loggedIn, setLoggedIn] = useState(true);
 
   useEffect(() => {
     if(user) {
@@ -18,7 +17,7 @@ const Interests = ({ user }) => {
 
       axios.get(`${process.env.REACT_APP_BACKEND_API}/interests`)
       .then(res => { setTopics(res.data) })
-    } else if(user === false) {setLoggedIn(false)}
+    }
   }, [user]);
 
   const topicItemList = () => {
@@ -64,17 +63,13 @@ const Interests = ({ user }) => {
     })
   }
 
-  if(!loggedIn) {
-    return <Redirect to='/' />;
-  } else {
-    return (
-      <div className='main-div interest-pg'>
-        <NavBar pageTitle='Interests'/>
-        { user ? (user.userIsNew ? <div className="firstUser-msg">Please create an unique UserName in profile section to join chat room and follow any topic you like. You will get the existing rooms</div> : null) : null}
-        <div className="interest-div">{topicItemList()}</div>
-      </div>
-    );
-  }
+  return (
+    <div className='main-div interest-pg'>
+      <NavBar pageTitle='Interests'/>
+      { user ? (user.userIsNew ? <div className="firstUser-msg">Please create an unique UserName in profile section to join chat room and follow any topic you like. You will get the existing rooms</div> : null) : null}
+      <div className="interest-div">{topicItemList()}</div>
+    </div>
+  );
 }
 
 const mapStateToProps = (state) => {

diff --git a/client/src/components/NavBar/NavBar.js b/client/src/components/NavBar/NavBar.js
@@ -26,6 +26,7 @@ const NavBar = ({ pageTitle, user }) => {
   const [titleMsg, setTitleMsg] = useState('');
   const [languageMsg, setLanguageMsg] = useState('');
   const [categoryMsg, setCategoryMsg] = useState('');
+  const [loggedIn, setLoggedIn] = useState(true);
 
   //language array for selection
   const [languageList] = useState(['English', 'Mandarin', 'Hindi', 'Spanish', 'French', 'Arabic', 'Bengali', 'Russian' ,'Portuguese', 'Indonesian', 'Urdu', 'German', 'Japanese', 'Swahili', 'Marathi', 'Telugu', 'Punjabi', 'Tamil', 'Turkish', 'Odia']);
@@ -43,7 +44,7 @@ const NavBar = ({ pageTitle, user }) => {
       return () => {
         socket.close();
         isMounted = false; }
-    }
+    } else if(user === false) {setLoggedIn(false)}
   }, [user]);
 
   const createRoom = () => {
@@ -147,8 +148,10 @@ const NavBar = ({ pageTitle, user }) => {
       </div>
     )
   }
-
-  if(redirect && user.userName) {
+
+  if(!loggedIn) {
+    return <Redirect to='/' />;
+  } else if(redirect && user.userName) {
     return (<Redirect to ={`/chat?room=${title}&roomId=${roomId}`}/>)
   } else {
     return (