├── public
    ├── _redirects
    └── index.html
├── src
    ├── styles.css
    ├── Loading.js
    ├── index.js
    ├── Navbar.js
    ├── PrivateRoute.js
    ├── FileUpload.js
    ├── auth.js
    ├── Messages.js
    ├── Profile.js
    ├── App.js
    ├── firebase.js
    ├── Home.css
    ├── Register.css
    ├── SelectedUser.css
    ├── Dashboard.css
    ├── Dashboard.js
    ├── Home.js
    ├── Register.js
    └── SelectedUser.js
├── README.md
├── .codesandbox
    └── workspace.json
├── .env
└── package.json


/public/_redirects:
--------------------------------------------------------------------------------
1 | /*  /index.html  200


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 |   font-family: sans-serif;
3 |   text-align: center;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/Loading.js:
--------------------------------------------------------------------------------
1 | export default function Loading() {
2 |   return <h2>Loading....</h2>;
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # web-chat-pingo
2 | Simple, fast and user-friendly chat-app using ReactJS and Firebase.
3 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from "react";
 2 | import ReactDOM from "react-dom";
 3 | 
 4 | import App from "./App";
 5 | 
 6 | const rootElement = document.getElementById("root");
 7 | ReactDOM.render(
 8 |   <StrictMode>
 9 |     <App />
10 |   </StrictMode>,
11 |   rootElement
12 | );
13 | 


--------------------------------------------------------------------------------
/.codesandbox/workspace.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "responsive-preview": {
 3 |     "Mobile": [
 4 |       320,
 5 |       675
 6 |     ],
 7 |     "Tablet": [
 8 |       1024,
 9 |       765
10 |     ],
11 |     "Desktop": [
12 |       1400,
13 |       800
14 |     ],
15 |     "Desktop  HD": [
16 |       1920,
17 |       1080
18 |     ]
19 |   }
20 | }


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | REACT_APP_API_KEY=AIzaSyAcT9ddqrbogrMgjodrKTyJhqptLqOalK4
2 | REACT_APP_AUTH_DOMAIN=web-chat-app-b43ff.firebaseapp.com
3 | REACT_APP_DATABSE_URL=http://web-chat-app-b43ff.firebaseapp.com
4 | REACT_APP_PROJECT_ID=web-chat-app-b43ff
5 | REACT_APP_STORAGE_BUCKET=web-chat-app-b43ff.appspot.com
6 | REACT_APP_MESSAGING_SENDER_ID=291594762208
7 | REACT_APP_APP_ID=1:291594762208:web:493151bc6e5293c0b29d85


--------------------------------------------------------------------------------
/src/Navbar.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | 
 3 | const Navbar = () => {
 4 |   return (
 5 |     <nav>
 6 |       <h1>
 7 |         <Link to="/">Web Chat Pingo!</Link>
 8 |       </h1>
 9 |       <div>
10 |         <Link to="/register">Register</Link>
11 |         <Link to="/login">Login</Link>
12 |       </div>
13 |     </nav>
14 |   );
15 | };
16 | export default Navbar;
17 | 


--------------------------------------------------------------------------------
/src/PrivateRoute.js:
--------------------------------------------------------------------------------
 1 | import { useContext } from "react";
 2 | import { AuthContext } from "../src/auth";
 3 | import { Redirect, Route } from "react-router-dom";
 4 | 
 5 | export default function PrivateRoute({ component: Component, ...rest }) {
 6 |   const { user } = useContext(AuthContext);
 7 | 
 8 |   return (
 9 |     <Route
10 |       {...rest}
11 |       exact
12 |       render={(props) =>
13 |         user ? <Component {...props} /> : <Redirect to="/" />
14 |       }
15 |     />
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/src/FileUpload.js:
--------------------------------------------------------------------------------
 1 | export default function FileUpload() {
 2 |   return (
 3 |     <svg
 4 |       style={{ width: "25px", height: "25px", cursor: "pointer" }}
 5 |       xmlns="http://www.w3.org/2000/svg"
 6 |       className="h-6 w-6"
 7 |       fill="none"
 8 |       viewBox="0 0 24 24"
 9 |       stroke="currentColor"
10 |     >
11 |       <path
12 |         strokeLinecap="round"
13 |         strokeLinejoin="round"
14 |         strokeWidth={2}
15 |         d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
16 |       />
17 |     </svg>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/src/auth.js:
--------------------------------------------------------------------------------
 1 | import { createContext, useEffect, useState } from "react";
 2 | import { onAuthStateChanged } from "firebase/auth";
 3 | import { auth } from "../src/firebase";
 4 | export const AuthContext = createContext();
 5 | 
 6 | const AuthProvider = ({ children }) => {
 7 |   const [user, setUser] = useState(null);
 8 |   const [loading, setLoading] = useState(true);
 9 | 
10 |   useEffect(() => {
11 |     onAuthStateChanged(auth, (user) => {
12 |       setUser(user);
13 |       setLoading(false);
14 |     });
15 |   }, []);
16 |   if (loading) {
17 |     return "Web Chat Pingo Loadiing... ";
18 |   }
19 |   return (
20 |     <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
21 |   );
22 | };
23 | 
24 | export default AuthProvider;
25 | 


--------------------------------------------------------------------------------
/src/Messages.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef } from "react";
 2 | 
 3 | export default function Messages({ msg, user1id, user2 }) {
 4 |   const scrollRef = useRef();
 5 | 
 6 |   useEffect(() => {
 7 |     console.log(msg);
 8 |     scrollRef.current?.scrollIntoView({ behavior: "smooth" });
 9 |   }, [msg]);
10 | 
11 |   return (
12 |     <div ref={scrollRef}>
13 |       <p>
14 |         {msg.from === user1id ? (
15 |           <span style={{ color: "blue", fontWeight: "bold" }}>You: </span>
16 |         ) : (
17 |           <span style={{ color: "red", fontWeight: "bold" }}>
18 |             {user2.name}:{" "}
19 |           </span>
20 |         )}
21 |         {msg.text ? msg.text : ""}
22 | 
23 |         <br />
24 |       </p>
25 |       {msg.media ? (
26 |         <img src={msg.media} style={{ width: "200px", height: "200px" }} />
27 |       ) : null}
28 |       <br />
29 |     </div>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/src/Profile.js:
--------------------------------------------------------------------------------
 1 | export default function Profile() {
 2 |   return (
 3 |     <section>
 4 |       <div>
 5 |         {/* <div>
 6 |         //Image Div
 7 |       </div> */}
 8 | 
 9 |         <div>
10 |           <svg
11 |             xmlns="http://www.w3.org/2000/svg"
12 |             className="h-5 w-5"
13 |             viewBox="0 0 150 20"
14 |             fill="#242424"
15 |           >
16 |             <path
17 |               fillRule="evenodd"
18 |               d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
19 |               clipRule="evenodd"
20 |             />
21 |           </svg>
22 |           <h3>User Name</h3>
23 |           <p>User Email</p>
24 |           <hr />
25 |           <small>Joined on: ...</small>
26 |         </div>
27 |       </div>
28 |     </section>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import "./styles.css";
 2 | import { BrowserRouter, Switch, Route } from "react-router-dom";
 3 | import Home from "./Home";
 4 | import Register from "./Register";
 5 | import Dashboard from "./Dashboard";
 6 | import AuthProvider from "./auth";
 7 | import PrivateRoute from "./PrivateRoute";
 8 | import Profile from "./Profile";
 9 | import SelectedUser from "./SelectedUser";
10 | 
11 | export default function App() {
12 |   return (
13 |     <AuthProvider>
14 |       <BrowserRouter>
15 |         <Switch>
16 |           <Route exact path="/" component={Home} />
17 |           <Route exact path="/register" component={Register} />
18 |           <PrivateRoute exact path="/dashboard" component={Dashboard} />
19 |           <PrivateRoute exact path="/profile" component={Profile} />
20 |           <PrivateRoute path="/user" component={SelectedUser} />
21 |         </Switch>
22 |       </BrowserRouter>
23 |     </AuthProvider>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react",
 3 |   "version": "1.0.0",
 4 |   "description": "React example starter project",
 5 |   "keywords": [
 6 |     "react",
 7 |     "starter"
 8 |   ],
 9 |   "main": "src/index.js",
10 |   "dependencies": {
11 |     "@emotion/react": "11.7.1",
12 |     "@emotion/styled": "11.6.0",
13 |     "@mui/icons-material": "5.2.5",
14 |     "@mui/material": "5.2.8",
15 |     "firebase": "9.6.1",
16 |     "react": "17.0.2",
17 |     "react-dom": "17.0.2",
18 |     "react-page-visibility": "6.4.0",
19 |     "react-router-dom": "5.1.2",
20 |     "react-scripts": "4.0.0"
21 |   },
22 |   "devDependencies": {
23 |     "@babel/runtime": "7.13.8",
24 |     "typescript": "4.1.3"
25 |   },
26 |   "scripts": {
27 |     "start": "react-scripts start",
28 |     "build": "react-scripts build",
29 |     "test": "react-scripts test --env=jsdom",
30 |     "eject": "react-scripts eject"
31 |   },
32 |   "browserslist": [
33 |     ">0.2%",
34 |     "not dead",
35 |     "not ie <= 11",
36 |     "not op_mini all"
37 |   ]
38 | }


--------------------------------------------------------------------------------
/src/firebase.js:
--------------------------------------------------------------------------------
 1 | // Import the functions you need from the SDKs you need
 2 | import { initializeApp, getApp } from "firebase/app";
 3 | import { getAuth } from "firebase/auth";
 4 | import { getFirestore } from "firebase/firestore";
 5 | import { getStorage } from "firebase/storage";
 6 | 
 7 | // TODO: Add SDKs for Firebase products that you want to use
 8 | // https://firebase.google.com/docs/web/setup#available-libraries
 9 | 
10 | // Your web app's Firebase configuration
11 | 
12 | var app;
13 | var storage;
14 | 
15 | try {
16 |   app = getApp();
17 | } catch (error) {
18 |   const firebaseConfig = {
19 |     apiKey: "AIzaSyBzKuzjKriUidssayDTBTnOzhYhI6EgmbY",
20 |     authDomain: "web-chat-app-2-f13ae.firebaseapp.com",
21 |     projectId: "web-chat-app-2-f13ae",
22 |     storageBucket: "web-chat-app-2-f13ae.appspot.com",
23 |     messagingSenderId: "229937947974",
24 |     appId: "1:229937947974:web:0ed237852f9333d6977147"
25 |   };
26 |   app = initializeApp(firebaseConfig);
27 | }
28 | storage = getStorage(app);
29 | 
30 | // Initialize Firebase
31 | 
32 | const auth = getAuth(app);
33 | const db = getFirestore(app);
34 | 
35 | export { auth, db, storage };
36 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 | 	<meta name="theme-color" content="#000000">
 8 | 	<!--
 9 |       manifest.json provides metadata used when your web app is added to the
10 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11 |     -->
12 | 	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13 | 	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14 | 	<!--
15 |       Notice the use of %PUBLIC_URL% in the tags above.
16 |       It will be replaced with the URL of the `public` folder during the build.
17 |       Only files inside the `public` folder can be referenced from the HTML.
18 | 
19 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20 |       work correctly both with client-side routing and a non-root public URL.
21 |       Learn how to configure a non-root public URL by running `npm run build`.
22 |     -->
23 | 	<title>Web Chat Pingo</title>
24 | </head>
25 | 
26 | <body>
27 | 	<noscript>
28 | 		You need to enable JavaScript to run this app.
29 | 	</noscript>
30 | 	<div id="root"></div>
31 | 	<!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 | </body>
42 | 
43 | </html>


--------------------------------------------------------------------------------
/src/Home.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-family: sans-serif;
  3 | }
  4 | * {
  5 |   margin: 0;
  6 |   padding: 0;
  7 | }
  8 | 
  9 | .myHeader {
 10 |   background: #502a75;
 11 |   color: #fff;
 12 |   padding: 20px 20px 20px;
 13 |   height: 190px;
 14 |   margin-bottom: 1rem;
 15 | }
 16 | 
 17 | /* span svg{
 18 |   display: block;
 19 |   position: absolute;
 20 |   height: 70px;
 21 |   left: 44%;
 22 |   margin: -0.5%; */
 23 | 
 24 | /* } */
 25 | 
 26 | main {
 27 |   max-width: 65%;
 28 |   min-height: 60%;
 29 |   border-radius: 6px;
 30 |   background: #fff;
 31 |   padding: 10px 40px 40px 40px;
 32 |   margin: 0 auto;
 33 |   margin-top: -130px;
 34 | 
 35 |   box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
 36 | }
 37 | 
 38 | main h3 {
 39 |   padding: 2px 0px 20px;
 40 |   font-size: 20px;
 41 | }
 42 | 
 43 | main h3 span {
 44 |   float: right;
 45 |   font-size: 16px;
 46 |   color: #502a75;
 47 |   padding-top: 30px;
 48 | }
 49 | 
 50 | .formClass {
 51 |   text-align: center;
 52 |   top: 40px;
 53 |   padding: 20px;
 54 | }
 55 | .form-group {
 56 |   padding: 7px;
 57 |   border-radius: 20px;
 58 | }
 59 | input {
 60 |   height: 20px;
 61 |   width: 250px;
 62 |   border-radius: 5px;
 63 |   padding: 10px;
 64 |   background-color: #eaebff;
 65 |   border-color: #eaebff;
 66 |   border: 0px;
 67 | }
 68 | .btn {
 69 |   padding: 10px;
 70 |   height: 40px;
 71 |   width: 80px;
 72 |   margin: 15px;
 73 |   background-color: #502a75;
 74 |   color: white;
 75 |   border-radius: 5px;
 76 |   cursor: pointer;
 77 |   font-size: 17px;
 78 | }
 79 | 
 80 | a {
 81 |   text-decoration: none;
 82 | }
 83 | 
 84 | @media (max-width: 890px) {
 85 |   main {
 86 |     max-width: 85%;
 87 |     padding: 5%;
 88 |   }
 89 | 
 90 |   .myHeader h1 {
 91 |     font-size: 25px;
 92 |     margin-top: 1rem;
 93 |     margin-bottom: 1rem;
 94 |   }
 95 | 
 96 |   main h3 {
 97 |     font-size: 15px;
 98 |   }
 99 | 
100 |   main h3 span {
101 |     font-size: 12px;
102 |   }
103 | 
104 |   input {
105 |     height: 20px;
106 |     width: 230px;
107 |     border-radius: 5px;
108 |     padding: 10px;
109 |     background-color: #eaebff;
110 |     border-color: #eaebff;
111 |     border: 0px;
112 |   }
113 |   .form-group {
114 |     padding: 7px;
115 |     border-radius: 20px;
116 |     width: 100%;
117 |   }
118 | 
119 |   /* span svg{
120 |   display: block;
121 |   position: absolute;
122 |   height: 70px;
123 |   left: 44%;
124 |   margin: -0.5%;
125 |    */
126 |   /* } */
127 | }
128 | 


--------------------------------------------------------------------------------
/src/Register.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-family: sans-serif;
  3 | }
  4 | * {
  5 |   margin: 0;
  6 |   padding: 0;
  7 | }
  8 | 
  9 | .myHeader {
 10 |   background: #502a75;
 11 |   color: #fff;
 12 |   padding: 20px 20px 20px;
 13 |   height: 190px;
 14 |   margin-bottom: 1rem;
 15 | }
 16 | 
 17 | /* span svg{
 18 |   display: block;
 19 |   position: absolute;
 20 |   height: 70px;
 21 |   left: 44%;
 22 |   margin: -0.5%; */
 23 | 
 24 | /* } */
 25 | 
 26 | main {
 27 |   max-width: 65%;
 28 |   min-height: 60%;
 29 |   border-radius: 6px;
 30 |   background: #fff;
 31 |   padding: 10px 40px 40px 40px;
 32 |   margin: 0 auto;
 33 |   margin-top: -130px;
 34 | 
 35 |   box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
 36 | }
 37 | 
 38 | main h3 {
 39 |   padding: 2px 0px 20px;
 40 |   font-size: 20px;
 41 | }
 42 | 
 43 | main h3 span {
 44 |   float: right;
 45 |   font-size: 16px;
 46 |   color: #502a75;
 47 |   padding-top: 30px;
 48 | }
 49 | 
 50 | .formClass {
 51 |   text-align: center;
 52 |   top: 40px;
 53 |   padding: 20px;
 54 | }
 55 | .form-group {
 56 |   padding: 7px;
 57 |   border-radius: 20px;
 58 | }
 59 | input {
 60 |   height: 20px;
 61 |   width: 250px;
 62 |   border-radius: 5px;
 63 |   padding: 10px;
 64 |   background-color: #eaebff;
 65 |   border-color: #eaebff;
 66 |   border: 0px;
 67 | }
 68 | .btn {
 69 |   padding: 10px;
 70 |   height: 40px;
 71 |   width: 80px;
 72 |   margin: 15px;
 73 |   background-color: #502a75;
 74 |   color: white;
 75 |   border-radius: 5px;
 76 |   cursor: pointer;
 77 |   font-size: 17px;
 78 | }
 79 | 
 80 | a {
 81 |   text-decoration: none;
 82 | }
 83 | 
 84 | @media (max-width: 890px) {
 85 |   main {
 86 |     max-width: 85%;
 87 |     padding: 5%;
 88 |   }
 89 | 
 90 |   .myHeader h1 {
 91 |     font-size: 25px;
 92 |     margin-top: 1rem;
 93 |     margin-bottom: 1rem;
 94 |   }
 95 | 
 96 |   main h3 {
 97 |     font-size: 15px;
 98 |   }
 99 | 
100 |   main h3 span {
101 |     font-size: 12px;
102 |   }
103 | 
104 |   input {
105 |     height: 20px;
106 |     width: 83%;
107 |     border-radius: 5px;
108 |     padding: 10px;
109 |     background-color: #eaebff;
110 |     border-color: #eaebff;
111 |     border: 0px;
112 |   }
113 |   .form-group {
114 |     padding: 7px;
115 |     border-radius: 20px;
116 |     width: 100%;
117 |   }
118 | 
119 |   /* span svg{
120 |   display: block;
121 |   position: absolute;
122 |   height: 70px;
123 |   left: 44%;
124 |   margin: -0.5%;
125 |    */
126 |   /* } */
127 | }
128 | 


--------------------------------------------------------------------------------
/src/SelectedUser.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-family: sans-serif;
  3 | }
  4 | * {
  5 |   margin: 0;
  6 |   padding: 0;
  7 | }
  8 | 
  9 | .myHeader {
 10 |   background: #502a75;
 11 |   color: #fff;
 12 |   padding: 20px 20px 20px;
 13 |   height: 190px;
 14 |   margin-bottom: 1rem;
 15 | }
 16 | 
 17 | /* span svg{
 18 |   display: block;
 19 |   position: absolute;
 20 |   height: 70px;
 21 |   left: 44%;
 22 |   margin: -0.5%; */
 23 | 
 24 | /* } */
 25 | 
 26 | main {
 27 |   max-width: 65%;
 28 |   min-height: 60%;
 29 |   border-radius: 6px;
 30 |   background: #fff;
 31 |   padding: 10px 40px 40px 40px;
 32 |   margin: 0 auto;
 33 |   margin-top: -130px;
 34 | 
 35 |   box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
 36 | }
 37 | 
 38 | main h3 {
 39 |   padding: 2px 0px 20px;
 40 |   font-size: 20px;
 41 | }
 42 | 
 43 | main h3 span {
 44 |   float: right;
 45 |   font-size: 16px;
 46 |   color: #502a75;
 47 |   padding-top: 30px;
 48 | }
 49 | 
 50 | .formClass {
 51 |   text-align: center;
 52 |   top: 40px;
 53 |   padding: 20px;
 54 | }
 55 | .form-group {
 56 |   padding: 7px;
 57 |   border-radius: 20px;
 58 | }
 59 | input {
 60 |   height: 20px;
 61 |   width: 250px;
 62 |   border-radius: 5px;
 63 |   padding: 10px;
 64 |   background-color: #eaebff;
 65 |   border-color: #eaebff;
 66 |   border: 0px;
 67 | }
 68 | .btn {
 69 |   padding: 10px;
 70 |   height: 40px;
 71 |   width: 80px;
 72 |   margin: 15px;
 73 |   background-color: #502a75;
 74 |   color: white;
 75 |   border-radius: 5px;
 76 |   cursor: pointer;
 77 |   font-size: 17px;
 78 | }
 79 | 
 80 | a {
 81 |   text-decoration: none;
 82 | }
 83 | 
 84 | @media (max-width: 890px) {
 85 |   main {
 86 |     max-width: 85%;
 87 |     padding: 5%;
 88 |   }
 89 | 
 90 |   .myHeader h1 {
 91 |     font-size: 25px;
 92 |     margin-top: 1rem;
 93 |     margin-bottom: 1rem;
 94 |   }
 95 | 
 96 |   main h3 {
 97 |     font-size: 15px;
 98 |   }
 99 | 
100 |   main h3 span {
101 |     font-size: 12px;
102 |   }
103 | 
104 |   input {
105 |     height: 20px;
106 |     width: 230px;
107 |     border-radius: 5px;
108 |     padding: 10px;
109 |     background-color: #eaebff;
110 |     border-color: #eaebff;
111 |     border: 0px;
112 |   }
113 |   .form-group {
114 |     padding: 7px;
115 |     border-radius: 20px;
116 |     width: 100%;
117 |   }
118 | 
119 |   /* span svg{
120 |   display: block;
121 |   position: absolute;
122 |   height: 70px;
123 |   left: 44%;
124 |   margin: -0.5%;
125 |    */
126 |   /* } */
127 | }
128 | 
129 | button {
130 |   cursor: pointer;
131 | }
132 | 
133 | :root {
134 |   --chatboxH: 45px;
135 |   --headerH: 55px;
136 |   --paddingF: 10px;
137 | }
138 | 
139 | .textA {
140 |   position: relative;
141 |   width: 100%;
142 |   height: 100%;
143 | }
144 | 
145 | #message {
146 |   box-sizing: border-box;
147 |   resize: none;
148 |   padding: 8px 10px;
149 |   border-radius: 20px;
150 |   border: none;
151 |   background: rgb(230, 227, 255);
152 |   outline: none;
153 |   color: #502a75;
154 |   width: 100%;
155 |   font-size: 17px;
156 |   position: absolute;
157 |   width: 100%;
158 |   bottom: 0;
159 | }
160 | 
161 | .button-s1 {
162 |   width: 40px;
163 |   padding: 5px;
164 |   border-radius: 6rem;
165 |   border: none;
166 |   background: transparent;
167 |   outline: none;
168 |   color: #502a75;
169 |   height: 40px;
170 |   display: flex;
171 |   align-items: center;
172 |   justify-content: center;
173 | }
174 | 
175 | .button-s1 span {
176 |   font-size: calc(40px / 1.5) !important;
177 | }
178 | 
179 | .messageBox {
180 |   box-sizing: border-box;
181 |   background-color: white;
182 |   bottom: 0;
183 |   left: 0;
184 |   width: 100%;
185 |   height: calc(var(--chatboxH) + 5px);
186 |   display: flex;
187 |   align-items: center;
188 |   padding: 7px 0px;
189 | }
190 | 
191 | .mMess .messArea .textM {
192 |   background-color: blue;
193 |   color: white;
194 |   margin-left: auto;
195 |   transition: 0.6s cubic-bezier(0.07, 0.76, 0.13, 1.02);
196 | }
197 | 
198 | .messArea .textM a {
199 |   font-weight: 500;
200 | }
201 | 
202 | .new::-webkit-scrollbar{
203 |   width: 6px;
204 | }
205 | 
206 | .new::-webkit-scrollbar-track {
207 |   background-color: white;
208 |   border-radius: 100px;
209 | }
210 | 
211 | .new::-webkit-scrollbar-thumb {
212 |   background-color: #502A75;
213 |   border-radius: 100px;
214 | }


--------------------------------------------------------------------------------
/src/Dashboard.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-family: sans-serif;
  3 | }
  4 | * {
  5 |   margin: 0;
  6 |   padding: 0;
  7 | }
  8 | 
  9 | .myHeader {
 10 |   background: #502a75;
 11 |   color: #fff;
 12 |   padding: 20px 20px 20px;
 13 |   height: 190px;
 14 |   margin-bottom: 1rem;
 15 | }
 16 | 
 17 | /* span svg{
 18 |   display: block;
 19 |   position: absolute;
 20 |   height: 70px;
 21 |   left: 44%;
 22 |   margin: -0.5%; */
 23 | 
 24 | /* } */
 25 | 
 26 | main {
 27 |   max-width: 65%;
 28 |   min-height: 60%;
 29 |   border-radius: 6px;
 30 |   background: #fff;
 31 |   padding: 10px 40px 40px 40px;
 32 |   margin: 0 auto;
 33 |   margin-top: -130px;
 34 | 
 35 |   box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
 36 | }
 37 | 
 38 | main h3 {
 39 |   padding: 2px 0px 20px;
 40 |   font-size: 20px;
 41 | }
 42 | 
 43 | main h3 span {
 44 |   float: right;
 45 |   font-size: 16px;
 46 |   color: #502a75;
 47 |   padding-top: 30px;
 48 | }
 49 | 
 50 | .formClass {
 51 |   text-align: center;
 52 |   top: 40px;
 53 |   padding: 20px;
 54 | }
 55 | .form-group {
 56 |   padding: 7px;
 57 |   border-radius: 20px;
 58 | }
 59 | input {
 60 |   height: 20px;
 61 |   width: 250px;
 62 |   border-radius: 5px;
 63 |   padding: 10px;
 64 |   background-color: #eaebff;
 65 |   border-color: #eaebff;
 66 |   border: 0px;
 67 | }
 68 | .btn {
 69 |   padding: 10px;
 70 |   height: 40px;
 71 |   width: 80px;
 72 |   margin: 15px;
 73 |   background-color: #502a75;
 74 |   color: white;
 75 |   border-radius: 5px;
 76 |   cursor: pointer;
 77 |   font-size: 17px;
 78 | }
 79 | 
 80 | a {
 81 |   text-decoration: none;
 82 | }
 83 | 
 84 | .container {
 85 |   display: grid;
 86 |   grid-gap: 0.5rem;
 87 |   grid-template-columns: repeat(3, 1fr);
 88 | }
 89 | 
 90 | @media (max-width: 890px) {
 91 |   .container {
 92 |     grid-template-columns: repeat(2, 1fr);
 93 |   }
 94 | 
 95 |   main {
 96 |     max-width: 85%;
 97 |     padding: 5%;
 98 |   }
 99 | 
100 |   .myHeader h1 {
101 |     font-size: 25px;
102 |     margin-top: 1rem;
103 |     margin-bottom: 1rem;
104 |   }
105 | 
106 |   main h3 {
107 |     font-size: 15px;
108 |   }
109 | 
110 |   main h3 span {
111 |     font-size: 12px;
112 |   }
113 | 
114 |   input {
115 |     height: 20px;
116 |     width: 230px;
117 |     border-radius: 5px;
118 |     padding: 10px;
119 |     background-color: #eaebff;
120 |     border-color: #eaebff;
121 |     border: 0px;
122 |   }
123 |   .form-group {
124 |     padding: 7px;
125 |     border-radius: 20px;
126 |     width: 100%;
127 |   }
128 | 
129 |   /* span svg{
130 |   display: block;
131 |   position: absolute;
132 |   height: 70px;
133 |   left: 44%;
134 |   margin: -0.5%;
135 |    */
136 |   /* } */
137 | }
138 | 
139 | button {
140 |   cursor: pointer;
141 | }
142 | 
143 | :root {
144 |   --chatboxH: 45px;
145 |   --headerH: 55px;
146 |   --paddingF: 10px;
147 | }
148 | 
149 | .textA {
150 |   position: relative;
151 |   width: 100%;
152 |   height: 100%;
153 | }
154 | 
155 | #message {
156 |   box-sizing: border-box;
157 |   resize: none;
158 |   padding: 8px 10px;
159 |   border-radius: 20px;
160 |   border: none;
161 |   background: rgb(230, 227, 255);
162 |   outline: none;
163 |   color: #502a75;
164 |   width: 100%;
165 |   font-size: 17px;
166 |   position: absolute;
167 |   width: 100%;
168 |   bottom: 0;
169 | }
170 | 
171 | .button-s1 {
172 |   width: 40px;
173 |   padding: 5px;
174 |   border-radius: 6rem;
175 |   border: none;
176 |   background: transparent;
177 |   outline: none;
178 |   color: #502a75;
179 |   height: 40px;
180 |   display: flex;
181 |   align-items: center;
182 |   justify-content: center;
183 | }
184 | 
185 | .button-s1 span {
186 |   font-size: calc(40px / 1.5) !important;
187 | }
188 | 
189 | .container::-webkit-scrollbar {
190 |   width: 6px;
191 | }
192 | 
193 | .container::-webkit-scrollbar-track {
194 |   background-color: white;
195 |   border-radius: 100px;
196 | }
197 | 
198 | .container::-webkit-scrollbar-thumb {
199 |   background-color: #502a75;
200 |   border-radius: 100px;
201 | }
202 | 
203 | .box {
204 |   background-color: #f4f4f4;
205 |   /* border: 2px solid black; */
206 |   border-radius: 10px;
207 |   height: 61px;
208 |   box-sizing: border-box;
209 |   padding: 13px;
210 |   margin: 2px;
211 |   box-shadow: 0px 1px 5px rgba(114, 112, 112, 0.3);
212 | }
213 | 
214 | @media (max-width: 530px) {
215 |   .container {
216 |     grid-template-columns: repeat(1, 1fr);
217 |   }
218 | }
219 | 


--------------------------------------------------------------------------------
/src/Dashboard.js:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect, useContext } from "react";
  2 | import { Link, useLocation } from "react-router-dom";
  3 | import { auth, db } from "../src/firebase";
  4 | import { useHistory } from "react-router-dom";
  5 | import { signOut } from "firebase/auth";
  6 | import { updateDoc, doc } from "firebase/firestore";
  7 | import { AuthContext } from "./auth";
  8 | import { collection, query, where, onSnapshot } from "firebase/firestore";
  9 | import { usePageVisibility } from "react-page-visibility";
 10 | import "./Dashboard.css";
 11 | 
 12 | export default function Dashboard() {
 13 |   const isVisible = usePageVisibility();
 14 | 
 15 |   const { user } = useContext(AuthContext);
 16 | 
 17 |   const history = useHistory();
 18 | 
 19 |   const location = useLocation();
 20 | 
 21 |   const handleSignOut = async () => {
 22 |     await updateDoc(doc(db, "users", user.uid), {
 23 |       isOnline: false
 24 |     });
 25 |     await signOut(auth);
 26 |     history.push("/");
 27 |   };
 28 | 
 29 |   const [users, setUsers] = useState([]);
 30 |   const [myuser, setMyUser] = useState([]);
 31 | 
 32 |   useEffect(() => {
 33 |     const usersRef = collection(db, "users");
 34 | 
 35 |     // create query object
 36 |     const myname = query(usersRef, where("uid", "in", [auth.currentUser.uid]));
 37 | 
 38 |     console.log("hi--", myname);
 39 |     const q = query(usersRef);
 40 |     //execute query
 41 |     const unsub = onSnapshot(q, (querySnapshot) => {
 42 |       let users = [];
 43 |       querySnapshot.forEach((doc) => {
 44 |         users.push(doc.data());
 45 |       });
 46 |       setMyUser(users.find((e) => e.uid === auth.currentUser.uid));
 47 |       setUsers(users.filter((e) => e.uid != auth.currentUser.uid));
 48 |     });
 49 |     return () => unsub();
 50 |   }, []);
 51 | 
 52 |   console.log(myuser);
 53 | 
 54 |   return (
 55 |     <div>
 56 |       <header class="myHeader">
 57 |         <span>
 58 |           <svg
 59 |             xmlns="http://www.w3.org/2000/svg"
 60 |             class="h-5 w-5"
 61 |             viewBox="0 0 20 20"
 62 |             fill="currentColor"
 63 |             style={{
 64 |               width: "50px",
 65 |               height: "50px",
 66 |               position: "absolute",
 67 |               float: "left"
 68 |             }}
 69 |           >
 70 |             <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
 71 |             <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
 72 |           </svg>
 73 |         </span>
 74 |         <h1
 75 |           style={{
 76 |             textAlign: "center",
 77 |             marginLeft: "50px",
 78 |             marginTop: "15px",
 79 |             fontSize: "35px"
 80 |           }}
 81 |         >
 82 |           Web Chat Pingo!
 83 |         </h1>
 84 |       </header>
 85 |       <main>
 86 |         <div className="content">
 87 |           <Link to="/dashboard">
 88 |             <svg
 89 |               style={{
 90 |                 width: "30px",
 91 |                 height: "30px",
 92 |                 float: "right",
 93 |                 cursor: "pointer",
 94 |                 color: "#502A75"
 95 |               }}
 96 |               xmlns="http://www.w3.org/2000/svg"
 97 |               className="h-6 w-6"
 98 |               fill="none"
 99 |               viewBox="0 0 24 24"
100 |               stroke="currentColor"
101 |               onClick={() => handleSignOut()}
102 |             >
103 |               <path
104 |                 strokeLinecap="round"
105 |                 strokeLinejoin="round"
106 |                 strokeWidth={2}
107 |                 d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
108 |               />{" "}
109 |             </svg>
110 |           </Link>
111 |           <div style={{ textAlign: "center", marginBottom: "15px" }}>
112 |             <h2
113 |               style={{
114 |                 marginTop: "10px"
115 |               }}
116 |             >
117 |               Available User
118 |             </h2>
119 |           </div>
120 | 
121 |           <div className="new">
122 |             <div
123 |               style={{
124 |                 height: "450px",
125 |                 overflowY: "auto",
126 | 
127 |                 padding: "7px",
128 |                 marginLeft: "-10px",
129 |                 marginRight: "-10px",
130 |                 borderRadius: "5px"
131 |               }}
132 |               className="container"
133 |             >
134 |               {users.map((user) => {
135 |                 return (
136 |                   <Link
137 |                     to={{
138 |                       pathname: `/user/${user.name}`,
139 |                       state: user,
140 |                       isVisible: isVisible
141 |                     }}
142 |                   >
143 |                     <div className="box">
144 |                       <p style={{ fontSize: 20, fontWeight: "bold" }}>
145 |                         {user.name}
146 | 
147 |                         {user.isOnline ? (
148 |                           <span style={{ color: "green" }}> •</span>
149 |                         ) : (
150 |                           <span style={{ color: "red" }}> •</span>
151 |                         )}
152 |                       </p>
153 |                       <p style={{ fontSize: "small" }}>{user.email}</p>
154 |                     </div>
155 |                   </Link>
156 |                 );
157 |               })}
158 |             </div>
159 |           </div>
160 |         </div>
161 |       </main>
162 |     </div>
163 |   );
164 | }
165 | 


--------------------------------------------------------------------------------
/src/Home.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useContext } from "react";
  2 | import { Link } from "react-router-dom";
  3 | import { signInWithEmailAndPassword } from "firebase/auth";
  4 | import { auth, db } from "../src/firebase";
  5 | import { updateDoc, doc } from "firebase/firestore";
  6 | import { useHistory } from "react-router-dom";
  7 | import "./Home.css";
  8 | const Home = () => {
  9 |   const history = useHistory();
 10 |   const [data, setData] = useState({
 11 |     email: "",
 12 |     password: "",
 13 |     error: null,
 14 |     loading: false
 15 |   });
 16 |   const { email, password, error, loading } = data;
 17 |   const handleChange = (e) => {
 18 |     setData({ ...data, [e.target.name]: e.target.value });
 19 |   };
 20 | 
 21 |   const handleSubmit = async (e) => {
 22 |     e.preventDefault();
 23 | 
 24 |     setData({ ...data, error: null, loading: true });
 25 |     console.log(data);
 26 |     if (!data.email || !data.password) {
 27 |       setData({ ...data, error: "All fields are required!" });
 28 |       return;
 29 |     }
 30 |     try {
 31 |       const result = await signInWithEmailAndPassword(auth, email, password);
 32 |       await updateDoc(doc(db, "users", result.user.uid), {
 33 |         isOnline: true
 34 |       });
 35 | 
 36 |       history.push("/dashboard");
 37 |     } catch (err) {
 38 |       console.log(err.message);
 39 |       setData({ ...data, error: err.message, loading: false });
 40 |     }
 41 |   };
 42 |   return (
 43 |     <div>
 44 |       <header class="myHeader">
 45 |         <span>
 46 |           <svg
 47 |             xmlns="http://www.w3.org/2000/svg"
 48 |             class="h-5 w-5"
 49 |             viewBox="0 0 20 20"
 50 |             fill="currentColor"
 51 |             style={{
 52 |               width: "50px",
 53 |               height: "50px",
 54 |               position: "absolute",
 55 |               float: "left"
 56 |             }}
 57 |           >
 58 |             <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
 59 |             <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
 60 |           </svg>
 61 |         </span>
 62 |         <h1
 63 |           style={{
 64 |             textAlign: "center",
 65 |             marginLeft: "50px",
 66 |             marginTop: "15px",
 67 |             fontSize: "35px"
 68 |           }}
 69 |         >
 70 |           Web Chat Pingo!
 71 |         </h1>
 72 |       </header>
 73 | 
 74 |       <main>
 75 |         <div className="content">
 76 |           <h2
 77 |             style={{
 78 |               textAlign: "center",
 79 |               fontSize: "35px",
 80 |               color: "#502A75",
 81 |               marginTop: "10px"
 82 |             }}
 83 |           >
 84 |             Login
 85 |           </h2>
 86 | 
 87 |           <div class="formClass">
 88 |             <form onSubmit={handleSubmit}>
 89 |               <div class="form-group">
 90 |                 <span>
 91 |                   <svg
 92 |                     style={{
 93 |                       width: "25px",
 94 |                       height: "30px",
 95 |                       top: "10px",
 96 |                       position: "relative"
 97 |                     }}
 98 |                     xmlns="http://www.w3.org/2000/svg"
 99 |                     class="h-5 w-5"
100 |                     viewBox="0 0 20 20"
101 |                     fill="currentColor"
102 |                   >
103 |                     <path
104 |                       fill-rule="evenodd"
105 |                       d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z"
106 |                       clip-rule="evenodd"
107 |                     />
108 |                   </svg>
109 |                 </span>
110 |                 <input
111 |                   type="email"
112 |                   name="email"
113 |                   placeholder="Email"
114 |                   value={email}
115 |                   onChange={handleChange}
116 |                 />
117 |               </div>
118 | 
119 |               <div class="form-group">
120 |                 <span>
121 |                   <svg
122 |                     style={{
123 |                       width: "25px",
124 |                       height: "30px",
125 |                       top: "10px",
126 |                       position: "relative"
127 |                     }}
128 |                     xmlns="http://www.w3.org/2000/svg"
129 |                     class="h-5 w-5"
130 |                     viewBox="0 0 20 20"
131 |                     fill="currentColor"
132 |                   >
133 |                     <path
134 |                       fill-rule="evenodd"
135 |                       d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
136 |                       clip-rule="evenodd"
137 |                     />
138 |                   </svg>
139 |                 </span>
140 |                 <input
141 |                   type="password"
142 |                   name="password"
143 |                   placeholder="Password"
144 |                   value={password}
145 |                   onChange={handleChange}
146 |                 />
147 |               </div>
148 | 
149 |               <button className="btn">Submit</button>
150 |               <div style={{ color: "blue" }}>
151 |                 {loading ? "Please Wait..." : ""}
152 |               </div>
153 |               <div style={{ color: "red" }}>{error ? error : ""}</div>
154 |               <div>
155 |                 <h5 style={{ fontSize: "medium" }}>Don't have an Account?</h5>
156 |                 <Link to="/register">Register Here</Link>
157 |               </div>
158 |             </form>
159 |           </div>
160 |         </div>
161 |       </main>
162 |     </div>
163 |   );
164 | };
165 | 
166 | export default Home;
167 | 


--------------------------------------------------------------------------------
/src/Register.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { Link } from "react-router-dom";
  3 | import { createUserWithEmailAndPassword } from "firebase/auth";
  4 | import { auth, db } from "../src/firebase";
  5 | import { setDoc, doc, Timestamp } from "firebase/firestore";
  6 | import { useHistory } from "react-router-dom";
  7 | import "./Register.css";
  8 | 
  9 | const Register = () => {
 10 |   const history = useHistory();
 11 |   const [data, setData] = useState({
 12 |     name: "",
 13 |     email: "",
 14 |     password: "",
 15 |     error: null,
 16 |     loading: false
 17 |   });
 18 |   const { name, email, password, error, loading } = data;
 19 |   const handleChange = (e) => {
 20 |     setData({ ...data, [e.target.name]: e.target.value });
 21 |   };
 22 | 
 23 |   const handleSubmit = async (e) => {
 24 |     e.preventDefault();
 25 |     console.log(data);
 26 |     setData({ ...data, error: null, loading: true });
 27 |     if (!data.name || !data.email || !data.password) {
 28 |       setData({ ...data, error: "All fields are required!" });
 29 |       return;
 30 |     }
 31 |     try {
 32 |       const result = await createUserWithEmailAndPassword(
 33 |         auth,
 34 |         email,
 35 |         password
 36 |       );
 37 |       console.log(result.user);
 38 |       await setDoc(doc(db, "users", result.user.uid), {
 39 |         uid: result.user.uid,
 40 |         name,
 41 |         email,
 42 |         createdAt: Timestamp.fromDate(new Date()),
 43 |         isOnline: true
 44 |       });
 45 |       setData({
 46 |         name: "",
 47 |         email: "",
 48 |         password: "",
 49 |         error: null,
 50 |         loading: false
 51 |       });
 52 |       history.push("/dashboard", name);
 53 |     } catch (err) {
 54 |       console.log(err.message);
 55 |       setData({ ...data, error: err.message, loading: false });
 56 |     }
 57 |   };
 58 |   return (
 59 |     <div>
 60 |       <header class="myHeader">
 61 |         <span>
 62 |           <svg
 63 |             xmlns="http://www.w3.org/2000/svg"
 64 |             class="h-5 w-5"
 65 |             viewBox="0 0 20 20"
 66 |             fill="currentColor"
 67 |             style={{
 68 |               width: "50px",
 69 |               height: "50px",
 70 |               position: "absolute",
 71 |               float: "left"
 72 |             }}
 73 |           >
 74 |             <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
 75 |             <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
 76 |           </svg>
 77 |         </span>
 78 |         <h1
 79 |           style={{
 80 |             textAlign: "center",
 81 |             marginLeft: "50px",
 82 |             marginTop: "15px",
 83 |             fontSize: "35px"
 84 |           }}
 85 |         >
 86 |           Web Chat Pingo!
 87 |         </h1>
 88 |       </header>
 89 | 
 90 |       <main>
 91 |         <div className="content">
 92 |           <h2
 93 |             style={{
 94 |               textAlign: "center",
 95 |               fontSize: "35px",
 96 |               color: "#502A75",
 97 |               marginTop: "10px"
 98 |             }}
 99 |           >
100 |             Register
101 |           </h2>
102 |           <div class="formClass">
103 |             <form onSubmit={handleSubmit}>
104 |               <div class="form-group">
105 |                 <span>
106 |                   {" "}
107 |                   <svg
108 |                     style={{
109 |                       width: "25px",
110 |                       height: "30px",
111 |                       top: "10px",
112 |                       position: "relative"
113 |                     }}
114 |                     xmlns="http://www.w3.org/2000/svg"
115 |                     class="h-5 w-5"
116 |                     viewBox="0 0 20 20"
117 |                     fill="currentColor"
118 |                   >
119 |                     <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
120 |                     <path
121 |                       fill-rule="evenodd"
122 |                       d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
123 |                       clip-rule="evenodd"
124 |                     />
125 |                   </svg>
126 |                 </span>
127 |                 <input
128 |                   type="text"
129 |                   name="name"
130 |                   placeholder="Full Name"
131 |                   value={name}
132 |                   onChange={handleChange}
133 |                 />
134 |               </div>
135 |               <div class="form-group">
136 |                 <span>
137 |                   <svg
138 |                     style={{
139 |                       width: "25px",
140 |                       height: "30px",
141 |                       top: "10px",
142 |                       position: "relative"
143 |                     }}
144 |                     xmlns="http://www.w3.org/2000/svg"
145 |                     class="h-5 w-5"
146 |                     viewBox="0 0 20 20"
147 |                     fill="currentColor"
148 |                   >
149 |                     <path
150 |                       fill-rule="evenodd"
151 |                       d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z"
152 |                       clip-rule="evenodd"
153 |                     />
154 |                   </svg>
155 |                 </span>
156 |                 <input
157 |                   type="email"
158 |                   name="email"
159 |                   placeholder="Email"
160 |                   value={email}
161 |                   onChange={handleChange}
162 |                 />
163 |               </div>
164 |               <div class="form-group">
165 |                 <span>
166 |                   <svg
167 |                     style={{
168 |                       width: "25px",
169 |                       height: "30px",
170 |                       top: "10px",
171 |                       position: "relative"
172 |                     }}
173 |                     xmlns="http://www.w3.org/2000/svg"
174 |                     class="h-5 w-5"
175 |                     viewBox="0 0 20 20"
176 |                     fill="currentColor"
177 |                   >
178 |                     <path
179 |                       fill-rule="evenodd"
180 |                       d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
181 |                       clip-rule="evenodd"
182 |                     />
183 |                   </svg>
184 |                 </span>
185 |                 <input
186 |                   type="password"
187 |                   name="password"
188 |                   placeholder="Password"
189 |                   value={password}
190 |                   onChange={handleChange}
191 |                 />
192 |               </div>
193 | 
194 |               <button className="btn" name="button">
195 |                 Submit
196 |               </button>
197 | 
198 |               <div style={{ color: "blue" }}>
199 |                 {loading ? "Please Wait..." : ""}
200 |               </div>
201 | 
202 |               <div style={{ color: "red" }}>{data.error ? data.error : ""}</div>
203 |               <div>
204 |                 <h5 style={{ fontSize: "medium" }}>Already have an account?</h5>
205 |                 <Link to="/">Login Here</Link>
206 |               </div>
207 |             </form>
208 |           </div>
209 |         </div>
210 |       </main>
211 |     </div>
212 |   );
213 | };
214 | 
215 | export default Register;
216 | 


--------------------------------------------------------------------------------
/src/SelectedUser.js:
--------------------------------------------------------------------------------
  1 | import { useRef, useState, useContext, useEffect } from "react";
  2 | import { Link, useLocation } from "react-router-dom";
  3 | import { auth, db, storage } from "../src/firebase";
  4 | import FileUpload from "./FileUpload";
  5 | import { AuthContext } from "./auth";
  6 | import "./SelectedUser.css";
  7 | import SendIcon from "@mui/icons-material/Send";
  8 | import UploadIcon from "@mui/icons-material/Upload";
  9 | import {
 10 |   collection,
 11 |   query,
 12 |   where,
 13 |   orderBy,
 14 |   onSnapshot,
 15 |   addDoc,
 16 |   Timestamp,
 17 |   QuerySnapshot,
 18 |   setDoc,
 19 |   doc,
 20 |   updateDoc
 21 | } from "firebase/firestore";
 22 | import {
 23 |   ref,
 24 |   getDownloadURL,
 25 |   uploadBytes,
 26 |   deleteObject
 27 | } from "firebase/storage";
 28 | import Messages from "./Messages";
 29 | import { usePageVisibility } from "react-page-visibility";
 30 | 
 31 | export default function SelectedUser() {
 32 |   const { user } = useContext(AuthContext);
 33 |   const user1id = user.uid;
 34 |   console.log(user1id);
 35 |   let location = useLocation();
 36 |   const user2 = location.state;
 37 |   var isVisible = usePageVisibility();
 38 | 
 39 |   const [text, setText] = useState("");
 40 |   const [img, setImg] = useState("");
 41 |   const [msgs, setMsgs] = useState([]);
 42 |   const [data, setData] = useState("");
 43 |   const [uploading, setUploading] = useState(false);
 44 | 
 45 |   const user2uid = user2.uid;
 46 |   const id =
 47 |     user1id > user2uid ? `${user1id + user2uid}` : `${user2uid + user1id}`;
 48 |   const addDocMsg = async (url) => {
 49 |     await addDoc(collection(db, "messages", id, "chat"), {
 50 |       text,
 51 |       from: user1id,
 52 |       to: user2uid,
 53 |       createdAt: Timestamp.fromDate(new Date()),
 54 |       media: url || ""
 55 |     });
 56 |     await setDoc(doc(db, "lastMsg", id), {
 57 |       text,
 58 |       from: user1id,
 59 |       to: user2uid,
 60 |       createdAt: Timestamp.fromDate(new Date()),
 61 |       media: url || "",
 62 |       unread: true
 63 |     });
 64 |     setText("");
 65 |     setImg("");
 66 |   };
 67 | 
 68 |   const handleSubmit = async (e) => {
 69 |     e.preventDefault();
 70 | 
 71 |     let url;
 72 |     if (img) {
 73 |       setUploading(true);
 74 |       const imgRef = ref(
 75 |         storage,
 76 |         `images/${new Date().getTime()} - ${img.name}`
 77 |       );
 78 |       const snap = await uploadBytes(imgRef, img);
 79 |       const dlUrl = await getDownloadURL(ref(storage, snap.ref.fullPath));
 80 |       url = dlUrl;
 81 | 
 82 |       addDocMsg(url);
 83 |       setUploading(false);
 84 |       return;
 85 |     }
 86 |     addDocMsg();
 87 |   };
 88 | 
 89 |   useEffect(() => {
 90 |     const msgRef = collection(db, "messages", id, "chat");
 91 |     const _q = query(msgRef, orderBy("createdAt", "asc"));
 92 |     onSnapshot(_q, (querySnapshot) => {
 93 |       let msgs = [];
 94 |       querySnapshot.forEach((doc) => {
 95 |         msgs.push(doc.data());
 96 |       });
 97 |       setMsgs(msgs);
 98 |     });
 99 |     let unsub = onSnapshot(doc(db, "lastMsg", id), (doc) => {
100 |       setData(doc.data());
101 |     });
102 |     return () => unsub();
103 |   }, []);
104 |   useEffect(() => {
105 |     console.log("file uploaded");
106 |   }, [setImg]);
107 | 
108 |   useEffect(async () => {
109 |     console.log(isVisible);
110 |     await updateDoc(doc(db, "users", user.uid), {
111 |       isOnline: isVisible
112 |     });
113 |     user2.isOnline = isVisible;
114 |   }, [isVisible]);
115 |   console.log(data);
116 |   return (
117 |     <div>
118 |       <header class="myHeader">
119 |         <span>
120 |           <svg
121 |             xmlns="http://www.w3.org/2000/svg"
122 |             class="h-5 w-5"
123 |             viewBox="0 0 20 20"
124 |             fill="currentColor"
125 |             style={{
126 |               width: "50px",
127 |               height: "50px",
128 |               position: "absolute",
129 |               float: "left"
130 |             }}
131 |           >
132 |             <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
133 |             <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
134 |           </svg>
135 |         </span>
136 |         <h1
137 |           style={{
138 |             textAlign: "center",
139 |             marginLeft: "50px",
140 |             marginTop: "15px",
141 |             fontSize: "35px"
142 |           }}
143 |         >
144 |           Web Chat Pingo!
145 |         </h1>
146 |       </header>
147 |       <main>
148 |         <div className="content">
149 |           <Link to="/dashboard">
150 |             <svg
151 |               style={{
152 |                 width: "30px",
153 |                 height: "30px",
154 |                 float: "left",
155 |                 cursor: "pointer",
156 |                 color: "#502A75"
157 |               }}
158 |               xmlns="http://www.w3.org/2000/svg"
159 |               class="h-5 w-5"
160 |               viewBox="0 0 20 20"
161 |               fill="currentColor"
162 |             >
163 |               <path
164 |                 fill-rule="evenodd"
165 |                 d="M10 18a8 8 0 100-16 8 8 0 000 16zm.707-10.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L9.414 11H13a1 1 0 100-2H9.414l1.293-1.293z"
166 |                 clip-rule="evenodd"
167 |               />
168 |             </svg>
169 |           </Link>
170 |           <div style={{ textAlign: "center", marginBottom:'15px' }}>
171 |             <h2
172 |               style={{
173 |                 marginTop: "10px"
174 |               }}
175 |             >
176 |               {user2.name}{" "}
177 |               {user2.isOnline ? (
178 |                 <span style={{ color: "green" }}>•</span>
179 |               ) : (
180 |                 <span style={{ color: "red" }}>•</span>
181 |               )}
182 |             </h2>
183 |             <small >{user2.email}</small>
184 |             
185 |           </div>
186 | 
187 |           <div
188 |             style={{
189 |               height: "400px",
190 |               overflowY: "auto",
191 |               backgroundColor: "#eaebff",
192 |               padding: "7px",
193 |               marginLeft: "-10px",
194 |               marginRight: "-10px",
195 |               borderRadius: "5px"
196 |             }}
197 |             className="new"
198 |           >
199 |             {msgs.length
200 |               ? msgs.map((msg, i) => (
201 |                   <Messages msg={msg} user1id={user1id} user2={user2} />
202 |                 ))
203 |               : null}
204 |           </div>
205 | 
206 |           {/* <div
207 |             style={{
208 |               height: "50px",
209 |               padding: "7px",
210 |               marginLeft: "-8px",
211 |               marginRight: "-10px"
212 |             }}
213 |           >
214 |             <div
215 |               style={{
216 |                 height: "100%",
217 |                 width: "10%",
218 |                 backgroundColor: "#eaebff",
219 |                 marginLeft: "-10px",
220 |                 marginRight: "1%",
221 |                 float: "left"
222 |               }}
223 |             >
224 |               <label>
225 |                 <svg
226 |                   style={{
227 |                     height: "35px",
228 |                     width: "35px",
229 |                     padding: "5px",
230 |                     cursor: "pointer"
231 |                   }}
232 |                   xmlns="http://www.w3.org/2000/svg"
233 |                   class="h-5 w-5"
234 |                   viewBox="0 0 20 20"
235 |                   fill="currentColor"
236 |                 >
237 |                   <path
238 |                     fill-rule="evenodd"
239 |                     d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
240 |                     clip-rule="evenodd"
241 |                   />
242 |                 </svg>
243 |                 <input
244 |                   onChange={(e) => setImg(e.target.files[0])}
245 |                   type="file"
246 |                   id="img"
247 |                   accept="image/*"
248 |                   style={{ display: "none" }}
249 |                 />
250 |               </label>
251 |             </div>
252 |             <div style={{ height: "100%", width: "75%", float: "left" }}>
253 |               <textarea
254 |                 style={{
255 |                   padding: "5px",
256 |                   width: "100%",
257 | 
258 |                   height: "40px",
259 |                   background: "#eaebff",
260 |                   overflow: "hidden",
261 |                   border: "none",
262 |                   resize: "none"
263 |                 }}
264 |                 type="text"
265 |                 placeholder="Type your message... "
266 |                 value={text}
267 |                 onChange={(e) => setText(e.target.value)}
268 |               ></textarea>
269 |             </div>
270 |             <div
271 |               style={{
272 |                 height: "100%",
273 |                 width: "15%",
274 |                 backgroundColor: "#eaebff",
275 |                 marginLeft: "-7px",
276 |                 float: "right"
277 |               }}
278 |             >
279 |               <svg
280 |                 style={{
281 |                   height: "35px",
282 |                   width: "35px",
283 |                   padding: "5px",
284 |                   cursor: "pointer"
285 |                 }}
286 |                 xmlns="http://www.w3.org/2000/svg"
287 |                 class="h-5 w-5"
288 |                 viewBox="0 0 20 20"
289 |                 fill="currentColor"
290 |               >
291 |                 <path
292 |                   fill-rule="evenodd"
293 |                   d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
294 |                   clip-rule="evenodd"
295 |                 />
296 |               </svg>
297 |             </div>
298 |           </div> */}
299 |           <div style={{
300 |               
301 |               marginLeft: "-18px",
302 |               marginRight: "-18px"
303 |             }}>
304 |           <div className="messageBox">
305 |             <input
306 |               onChange={(e) => setImg(e.target.files[0])}
307 |               type="file"
308 |               id="upimg"
309 |               accept="image/*"
310 |               style={{ display: "none" }}
311 |             />
312 | 
313 |             <button
314 |               id="linkCopy"
315 |               className="button-s1"
316 |               tooltip="Copy Link"
317 |               flow="up"
318 |               onClick={() => {
319 |                 document.getElementById("upimg").click();
320 |               }}
321 |             >
322 |               <span className="material-icons">
323 |                 <UploadIcon />
324 |               </span>
325 |             </button>
326 | 
327 |             <div className="textA">
328 |               <textarea
329 |                 id="message"
330 |                 name="message"
331 |                 rows={1}
332 |                 cols={30}
333 |                 placeholder="Type your message here"
334 |                 defaultValue={""}
335 |                 value={text}
336 |                 onChange={(e) => setText(e.target.value)}
337 |               />
338 |             </div>
339 |             <button
340 |               onClick={(e) => handleSubmit(e)}
341 |               id="send"
342 |               className="button-s1"
343 |               tooltip="Send"
344 |               flow="left"
345 |             >
346 |               <span className="material-icons headerIcon">
347 |                 <SendIcon />
348 |               </span>
349 |             </button>
350 |           </div>
351 |           </div>
352 | 
353 |           {/* <form style={{ display: "flex" }} onSubmit={handleSubmit}>
354 |             <div>
355 |               <label>
356 |                 <FileUpload />
357 |                 <input
358 |                   onChange={(e) => setImg(e.target.files[0])}
359 |                   type="file"
360 |                   id="img"
361 |                   accept="image/*"
362 |                   style={{ display: "none" }}
363 |                 />
364 |               </label>
365 |             </div>
366 |             <div>
367 |               <input
368 |                 style={{ padding: "5px" }}
369 |                 type="text"
370 |                 placeholder="Type your message... "
371 |                 value={text}
372 |                 onChange={(e) => setText(e.target.value)}
373 |               ></input>
374 |             </div>
375 |             <div>
376 |               <button style={{ padding: "5px" }}>Send</button>
377 |             </div>
378 |           </form> */}
379 |           {img ? <p>{img.name}</p> : ""}
380 |           {uploading ? "Please Wait.. File is uploading" : ""}
381 |         </div>
382 |       </main>
383 |     </div>
384 |   );
385 | }
386 | 


--------------------------------------------------------------------------------