├── src
    ├── index.css
    ├── Assets
    │   └── login.png
    ├── setupTests.js
    ├── App.test.js
    ├── reportWebVitals.js
    ├── index.js
    ├── Firebase
    │   └── Firebase.js
    ├── App.css
    ├── Components
    │   ├── SignUp.js
    │   ├── DeleteModal.js
    │   ├── CreateRoom.js
    │   ├── EditProfile.js
    │   ├── Home.js
    │   ├── Rooms.js
    │   ├── FileUpload.js
    │   ├── Chat.js
    │   ├── Application.js
    │   └── Messages.js
    └── App.js
├── .firebaserc
├── Assets
    └── chatify.png
├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── firebase.json
├── .gitignore
├── package.json
└── README.md


/src/index.css:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "chatify-49"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/Assets/chatify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoldStar0103/Chatify/HEAD/Assets/chatify.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoldStar0103/Chatify/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoldStar0103/Chatify/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoldStar0103/Chatify/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/Assets/login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoldStar0103/Chatify/HEAD/src/Assets/login.png


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": {
 3 |     "public": "build",
 4 |     "ignore": [
 5 |       "firebase.json",
 6 |       "**/.*",
 7 |       "**/node_modules/**"
 8 |     ]
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | .firebase


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 |   document.getElementById('root')
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/Firebase/Firebase.js:
--------------------------------------------------------------------------------
 1 | import firebase from "firebase/app";
 2 | import "firebase/auth";
 3 | import "firebase/firestore";
 4 | import "firebase/storage";
 5 | 
 6 | const provider = new firebase.auth.GoogleAuthProvider();
 7 | 
 8 | const firebaseConfig = {
 9 |   apiKey: "AIzaSyDoN-nSGUo_1h87nkOXSXX2vv4IBXBXey0",
10 |   authDomain: "chatify-49.firebaseapp.com",
11 |   projectId: "chatify-49",
12 |   storageBucket: "chatify-49.appspot.com",
13 |   messagingSenderId: "1034185885241",
14 |   appId: "1:1034185885241:web:a46af138b7a40d318defe8",
15 |   measurementId: "G-EHQ2YBVYY9",
16 | };
17 | 
18 | const firebaseApp = firebase.initializeApp(firebaseConfig);
19 | 
20 | const db = firebaseApp.firestore();
21 | const auth = firebase.auth();
22 | const storage = firebase.storage();
23 | 
24 | export { db, auth, provider, storage };
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "chatify",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@material-ui/core": "^4.11.3",
 7 |     "@material-ui/icons": "^4.11.2",
 8 |     "@testing-library/jest-dom": "^5.11.10",
 9 |     "@testing-library/react": "^11.2.6",
10 |     "@testing-library/user-event": "^12.8.3",
11 |     "emoji-mart": "^3.0.1",
12 |     "firebase": "^8.4.1",
13 |     "react": "^17.0.2",
14 |     "react-anchorme": "^2.2.0",
15 |     "react-dom": "^17.0.2",
16 |     "react-icons": "^4.2.0",
17 |     "react-router-dom": "^5.2.0",
18 |     "react-scripts": "4.0.3",
19 |     "react-scrollable-feed": "^1.3.0",
20 |     "web-vitals": "^1.1.1"
21 |   },
22 |   "scripts": {
23 |     "start": "react-scripts start",
24 |     "build": "react-scripts build",
25 |     "test": "react-scripts test",
26 |     "eject": "react-scripts eject"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | 
 3 | # Chatify
 4 | 
 5 | ### Personal Chat Room or Workspace to share resources and hangout with friends.
 6 | 
 7 | ### https://chatifynew.vercel.app/
 8 | 
 9 | <div align="center">
10 |   <img alt="Demo" src="./Assets/chatify.png" />
11 | </div>
12 | 
13 | </div>
14 | 
15 | ## Build With
16 | 
17 | - `React.js`
18 | - `Firebase`
19 | - `Material UI`
20 | - `React Icons`
21 | 
22 | ## Features:
23 | 
24 | - Easy SignIn with Google
25 | - Create Rooms
26 | - Realtime group messaging with image sharing
27 | - Supports Emoji
28 | - Reaction on messages
29 | 
30 | ## Installation and Usage
31 | 
32 | ### Clone this repository
33 | 
34 | `git clone https://github.com/soumyajit4419/Chatify.git` <br/>
35 | `cd chatify`
36 | 
37 | ### Install Dependencies
38 | 
39 | `npm install`
40 | 
41 | In the project directory, you can run:
42 | 
43 | ### npm start
44 | 
45 | Runs the app in the development mode.\
46 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
47 | 
48 | The page will reload if you make edits.\
49 | You will also see any lint errors in the console.
50 | 
51 | ### npm run build
52 | 
53 | Builds the app for production to the `build` folder.\
54 | It correctly bundles React in production mode and optimizes the build for the best performance.
55 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   height: 100vh !important;
 3 |   overflow: hidden !important;
 4 |   background-color: #22273b !important;
 5 | }
 6 | 
 7 | /* width */
 8 | ::-webkit-scrollbar {
 9 |   width: 9px;
10 | }
11 | 
12 | /* Track */
13 | ::-webkit-scrollbar-track {
14 |   background: #22273b !important;
15 |   border-radius: 5px;
16 | }
17 | 
18 | /* Handle */
19 | ::-webkit-scrollbar-thumb {
20 |   background: #151b2d !important;
21 |   border-radius: 5px;
22 | }
23 | 
24 | .emoji-mart {
25 |   position: absolute !important;
26 |   bottom: 70px !important;
27 | }
28 | 
29 | .emoji-mart-preview {
30 |   display: none !important;
31 | }
32 | 
33 | .MuiInputLabel-outlined {
34 |   color: rgba(173, 173, 173, 0.89) !important;
35 | }
36 | 
37 | .MuiOutlinedInput-notchedOutline {
38 |   border: 0 !important;
39 | }
40 | 
41 | .MuiInputBase-root {
42 |   color: rgb(245, 245, 245) !important;
43 | }
44 | 
45 | .MuiInputBase-root.Mui-disabled {
46 |   color: rgb(255 255 255 / 53%) !important;
47 |   cursor: default !important;
48 | }
49 | 
50 | .MuiDivider-root {
51 |   background-color: rgb(0 0 0 / 40%) !important;
52 | }
53 | 
54 | .MuiDialog-paper {
55 |   overflow-y: visible !important;
56 |   background-color: #202035 !important;
57 |   color: #dcddde !important;
58 |   width: 530px;
59 | }
60 | 
61 | .emoji-mart-dark {
62 |   color: #fff;
63 |   border-color: #22273b !important;
64 |   background-color: #121628 !important;
65 | }
66 | 
67 | .emoji-mart-dark .emoji-mart-category-label span {
68 |   background-color: #121628 !important;
69 |   color: #fff;
70 |   border-radius: 5px;
71 | }
72 | 
73 | .emoji-mart-dark .emoji-mart-search input {
74 |   color: #fff;
75 |   border-color: #22273b;
76 |   background-color: #22273b;
77 | }
78 | 
79 | a {
80 |   color: #e3a7ff;
81 | }
82 | 
83 | .MuiSnackbarContent-root {
84 |   background-color: rgb(109 52 125) !important;
85 | }
86 | 


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


--------------------------------------------------------------------------------
/src/Components/SignUp.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Button from "@material-ui/core/Button";
 3 | import { FcGoogle } from "react-icons/fc";
 4 | import { makeStyles } from "@material-ui/core/styles";
 5 | import Container from "@material-ui/core/Container";
 6 | import loginImg from "../Assets/login.png";
 7 | import Topography from "@material-ui/core/Typography";
 8 | import { auth, provider } from "../Firebase/Firebase";
 9 | 
10 | const useStyles = makeStyles((theme) => ({
11 |   root: {
12 |     boxShadow: "0 0 15px rgb(7 15 63 / 33%)",
13 |     backgroundColor: "#171c30",
14 |     color: "white",
15 |   },
16 |   paper: {
17 |     marginTop: theme.spacing(10),
18 |     display: "flex",
19 |     flexDirection: "column",
20 |     alignItems: "center",
21 |     paddingBottom: "25px",
22 |     paddingTop: "35px",
23 |   },
24 |   mainImg: {
25 |     width: "100%",
26 |     height: "auto",
27 |   },
28 |   submit: {
29 |     margin: theme.spacing(3, 0, 2),
30 |     color: "#d9d9d9",
31 |   },
32 | }));
33 | 
34 | function SignUp() {
35 |   const classes = useStyles();
36 | 
37 |   const login = () => {
38 |     auth
39 |       .signInWithPopup(provider)
40 |       .then((res) => {
41 |         console.log("Success");
42 |       })
43 |       .catch((err) => {
44 |         console.log(err);
45 |       });
46 |   };
47 | 
48 |   return (
49 |     <Container component="div" maxWidth="xs" className={classes.root}>
50 |       <div className={classes.paper}>
51 |         <img src={loginImg} className={classes.mainImg} alt="signup img" />
52 |         <Topography variant="h4" style={{ paddingTop: "15px" }}>
53 |           Sign In To Chatify
54 |         </Topography>
55 |         <Button
56 |           variant="outlined"
57 |           color="primary"
58 |           className={classes.submit}
59 |           startIcon={<FcGoogle />}
60 |           onClick={login}
61 |         >
62 |           Sign In With Google
63 |         </Button>
64 |       </div>
65 |     </Container>
66 |   );
67 | }
68 | 
69 | export default SignUp;
70 | 


--------------------------------------------------------------------------------
/src/Components/DeleteModal.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import Button from "@material-ui/core/Button";
 3 | import Dialog from "@material-ui/core/Dialog";
 4 | import DialogActions from "@material-ui/core/DialogActions";
 5 | import DialogContent from "@material-ui/core/DialogContent";
 6 | import DialogContentText from "@material-ui/core/DialogContentText";
 7 | import DialogTitle from "@material-ui/core/DialogTitle";
 8 | 
 9 | function DeleteModal({ msgId, text, deleteMsg, handleModal, postImg }) {
10 |   const [open, setOpen] = useState(true);
11 | 
12 |   const handleClose = () => {
13 |     setOpen(false);
14 |     handleModal();
15 |   };
16 | 
17 |   const handleDelete = () => {
18 |     deleteMsg(msgId);
19 |     handleModal();
20 |   };
21 | 
22 |   return (
23 |     <div>
24 |       <Dialog
25 |         open={open}
26 |         onClose={handleClose}
27 |         aria-labelledby="alert-dialog-title"
28 |         aria-describedby="alert-dialog-description"
29 |       >
30 |         <DialogTitle id="alert-dialog-title">
31 |           {"Are you sure you want to delete the message?"}
32 |         </DialogTitle>
33 |         <DialogContent>
34 |           <DialogContentText
35 |             id="alert-dialog-description"
36 |             style={{ color: "white", fontSize: "1.2rem" }}
37 |           >
38 |             {text}
39 |           </DialogContentText>
40 |           {postImg ? (
41 |             <img
42 |               src={postImg}
43 |               alt="img"
44 |               style={{ height: "200px", width: "250px", borderRadius: "4px" }}
45 |             />
46 |           ) : null}
47 |         </DialogContent>
48 |         <DialogActions>
49 |           <Button onClick={handleClose} style={{ color: "white" }}>
50 |             Cancel
51 |           </Button>
52 | 
53 |           <Button
54 |             onClick={handleDelete}
55 |             color="primary"
56 |             autoFocus
57 |             variant="contained"
58 |           >
59 |             Delete
60 |           </Button>
61 |         </DialogActions>
62 |       </Dialog>
63 |     </div>
64 |   );
65 | }
66 | 
67 | export default DeleteModal;
68 | 


--------------------------------------------------------------------------------
/src/Components/CreateRoom.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import Button from "@material-ui/core/Button";
 3 | import Dialog from "@material-ui/core/Dialog";
 4 | import DialogActions from "@material-ui/core/DialogActions";
 5 | import DialogContent from "@material-ui/core/DialogContent";
 6 | import TextField from "@material-ui/core/TextField";
 7 | import DialogTitle from "@material-ui/core/DialogTitle";
 8 | 
 9 | function CreateRoom({ create, manage }) {
10 |   const [open, setOpen] = useState(true);
11 |   const [roomName, setRoomName] = useState("");
12 | 
13 |   const handleClose = () => {
14 |     setOpen(false);
15 |     manage();
16 |   };
17 |   const handleNewRoom = (e) => {
18 |     e.preventDefault();
19 |     if (roomName) {
20 |       create(roomName);
21 |       manage();
22 |     }
23 |   };
24 | 
25 |   return (
26 |     <div>
27 |       <Dialog
28 |         open={open}
29 |         onClose={handleClose}
30 |         aria-labelledby="alert-dialog-title"
31 |         aria-describedby="alert-dialog-description"
32 |       >
33 |         <DialogTitle id="alert-dialog-title">
34 |           {"Create A New Channel"}
35 |         </DialogTitle>
36 |         <DialogContent>
37 |           <form autoComplete="off" onSubmit={handleNewRoom}>
38 |             <TextField
39 |               id="outlined-basic"
40 |               label="Enter Channel Name"
41 |               fullWidth
42 |               margin="normal"
43 |               variant="outlined"
44 |               required
45 |               value={roomName}
46 |               style={{ backgroundColor: "rgb(45 45 73)", borderRadius: "5px" }}
47 |               onChange={(e) => {
48 |                 setRoomName(e.target.value);
49 |               }}
50 |             />
51 |           </form>
52 |         </DialogContent>
53 |         <DialogActions>
54 |           <Button
55 |             onClick={handleClose}
56 |             color="primary"
57 |             style={{ color: "white" }}
58 |           >
59 |             Cancel
60 |           </Button>
61 |           <Button
62 |             onClick={(e) => {
63 |               handleNewRoom(e);
64 |             }}
65 |             type="submit"
66 |             color="primary"
67 |             autoFocus
68 |             variant="contained"
69 |           >
70 |             Create
71 |           </Button>
72 |         </DialogActions>
73 |       </Dialog>
74 |     </div>
75 |   );
76 | }
77 | 
78 | export default CreateRoom;
79 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | import { makeStyles } from "@material-ui/core/styles";
 3 | import Application from "./Components/Application";
 4 | import Chat from "./Components/Chat";
 5 | import Login from "./Components/SignUp";
 6 | import Home from "./Components/Home";
 7 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 8 | import { auth, db } from "./Firebase/Firebase";
 9 | import "./App.css";
10 | 
11 | const useStyles = makeStyles((theme) => ({
12 |   root: {
13 |     display: "flex",
14 |   },
15 |   toolbar: theme.mixins.toolbar,
16 |   content: {
17 |     flexGrow: 1,
18 |     backgroundColor: "#22273b !important",
19 |     height: "100vh",
20 |   },
21 | }));
22 | 
23 | function App() {
24 |   const classes = useStyles();
25 |   const [user, setUser] = useState(null);
26 | 
27 |   useEffect(() => {
28 |     auth.onAuthStateChanged((user) => {
29 |       if (user) {
30 |         db.collection("users")
31 |           .doc(user.uid)
32 |           .get()
33 |           .then((doc) => {
34 |             if (doc.exists) {
35 |               console.log("user exits");
36 |             } else {
37 |               const details = {
38 |                 name: user.displayName,
39 |                 displayName: user.displayName.split(" ")[0],
40 |                 photoURL: user.photoURL,
41 |                 email: user.email,
42 |                 uid: user.uid,
43 |               };
44 |               db.collection("users")
45 |                 .doc(user.uid)
46 |                 .set(details)
47 |                 .then((res) => {
48 |                   console.log("new user created");
49 |                 })
50 |                 .catch((err) => {
51 |                   console.log(err);
52 |                 });
53 |             }
54 |           })
55 |           .catch((err) => {
56 |             console.log(err);
57 |           });
58 | 
59 |         setUser(user.uid);
60 |       } else {
61 |         setUser(null);
62 |       }
63 |     });
64 |   }, []);
65 | 
66 |   return (
67 |     <div className="App">
68 |       <Router>
69 |         {!user ? (
70 |           <Login />
71 |         ) : (
72 |           <div className={classes.root}>
73 |             <Application uid={user} />
74 |             <main className={classes.content}>
75 |               <div className={classes.toolbar} style={{ minHeight: "50px" }} />
76 |               <Switch>
77 |                 <Route path="/" exact>
78 |                   <Home />
79 |                 </Route>
80 |                 <Route path="/channel/:id">
81 |                   <Chat />
82 |                 </Route>
83 |               </Switch>
84 |             </main>
85 |           </div>
86 |         )}
87 |       </Router>
88 |     </div>
89 |   );
90 | }
91 | 
92 | export default App;
93 | 


--------------------------------------------------------------------------------
/src/Components/EditProfile.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import Button from "@material-ui/core/Button";
  3 | import TextField from "@material-ui/core/TextField";
  4 | import Dialog from "@material-ui/core/Dialog";
  5 | import DialogActions from "@material-ui/core/DialogActions";
  6 | import DialogContent from "@material-ui/core/DialogContent";
  7 | import DialogTitle from "@material-ui/core/DialogTitle";
  8 | import { db } from "../Firebase/Firebase";
  9 | 
 10 | function EditProfile({ toggler, alert }) {
 11 |   const [open, setOpen] = useState(true);
 12 |   const [userName, setUserName] = useState("");
 13 |   const [displayName, setDisplayName] = useState("");
 14 |   const [email, setEmail] = useState("");
 15 |   const [uid, setUid] = useState("");
 16 | 
 17 |   const handleClose = () => {
 18 |     setOpen(false);
 19 |     toggler();
 20 |   };
 21 | 
 22 |   const updateProfile = (e) => {
 23 |     e.preventDefault();
 24 |     db.collection("users")
 25 |       .doc(uid)
 26 |       .update({
 27 |         displayName: displayName,
 28 |       })
 29 |       .then((res) => {
 30 |         alert();
 31 |       })
 32 |       .catch((err) => {
 33 |         console.log(err);
 34 |       });
 35 | 
 36 |     setOpen(false);
 37 |     toggler();
 38 |   };
 39 | 
 40 |   useEffect(() => {
 41 |     const userData = JSON.parse(localStorage.getItem("userDetails"));
 42 |     setUserName(userData.name);
 43 |     setDisplayName(userData.displayName);
 44 |     setEmail(userData.email);
 45 |     setUid(userData.uid);
 46 |   }, []);
 47 | 
 48 |   return (
 49 |     <div>
 50 |       <Dialog
 51 |         open={open}
 52 |         onClose={handleClose}
 53 |         aria-labelledby="form-dialog-title"
 54 |       >
 55 |         <DialogTitle id="form-dialog-title">Edit User Profile</DialogTitle>
 56 |         <DialogContent>
 57 |           <form autoComplete="off">
 58 |             <TextField
 59 |               id="outlined-basic"
 60 |               label="Name"
 61 |               fullWidth
 62 |               margin="normal"
 63 |               variant="outlined"
 64 |               disabled
 65 |               value={userName}
 66 |               style={{
 67 |                 backgroundColor: "rgb(45, 45, 73)",
 68 |                 borderRadius: "5px",
 69 |                 color: "#a6a6a6",
 70 |               }}
 71 |             />
 72 |             <TextField
 73 |               id="outlined-basic"
 74 |               label="Email"
 75 |               fullWidth
 76 |               margin="normal"
 77 |               variant="outlined"
 78 |               disabled
 79 |               value={email}
 80 |               style={{
 81 |                 backgroundColor: "rgb(45, 45, 73)",
 82 |                 borderRadius: "5px",
 83 |                 color: "#a6a6a6",
 84 |               }}
 85 |             />
 86 | 
 87 |             <TextField
 88 |               id="outlined-basic"
 89 |               label="Display Name"
 90 |               fullWidth
 91 |               margin="normal"
 92 |               variant="outlined"
 93 |               value={displayName}
 94 |               style={{
 95 |                 backgroundColor: "rgb(45, 45, 73)",
 96 |                 borderRadius: "5px",
 97 |               }}
 98 |               onChange={(e) => {
 99 |                 setDisplayName(e.target.value);
100 |               }}
101 |             />
102 |           </form>
103 |         </DialogContent>
104 |         <DialogActions>
105 |           <Button onClick={handleClose} style={{ color: "white" }}>
106 |             Cancel
107 |           </Button>
108 |           <Button
109 |             onClick={(e) => updateProfile(e)}
110 |             color="primary"
111 |             variant="contained"
112 |           >
113 |             Update
114 |           </Button>
115 |         </DialogActions>
116 |       </Dialog>
117 |     </div>
118 |   );
119 | }
120 | 
121 | export default EditProfile;
122 | 


--------------------------------------------------------------------------------
/src/Components/Home.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { makeStyles } from "@material-ui/core/styles";
  3 | import Grid from "@material-ui/core/Grid";
  4 | import Typography from "@material-ui/core/Typography";
  5 | import Card from "@material-ui/core/Card";
  6 | import CardActionArea from "@material-ui/core/CardActionArea";
  7 | import CardContent from "@material-ui/core/CardContent";
  8 | import Avatar from "@material-ui/core/Avatar";
  9 | import { db } from "../Firebase/Firebase";
 10 | import { useHistory } from "react-router-dom";
 11 | 
 12 | const useStyles = makeStyles((theme) => ({
 13 |   root: {
 14 |     paddingTop: "50px",
 15 |     paddingBottom: "25px",
 16 |     color: "#f0f0f0",
 17 |   },
 18 |   heading: {
 19 |     fontSize: "2.2em",
 20 |     fontWeight: "700",
 21 |   },
 22 |   subHeading: {
 23 |     fontSize: "1.6em",
 24 |   },
 25 |   channelDiv: {
 26 |     padding: "15px",
 27 |   },
 28 |   channelContent: {
 29 |     display: "flex",
 30 |     flexDirection: "column",
 31 |     textAlign: "center",
 32 |     padding: "20px",
 33 |     alignItems: "center",
 34 |   },
 35 |   square: {
 36 |     height: "80px",
 37 |     width: "80px",
 38 |     backgroundColor: "#8fabbd66",
 39 |     fontSize: "2rem",
 40 |   },
 41 |   rootChannel: {
 42 |     height: "calc(100vh - 185px)",
 43 |     position: "relative",
 44 |     padding: "15px",
 45 |     overflowY: "scroll",
 46 |   },
 47 |   channelText: {
 48 |     paddingTop: "10px",
 49 |     fontSize: "1.2rem",
 50 |   },
 51 |   channelCard: {
 52 |     backgroundColor: "#1e2439",
 53 |     boxShadow:
 54 |       "0px 3px 4px -1px rgb(0 0 0 / 17%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)",
 55 |     color: "rgb(220, 221, 222)",
 56 |   },
 57 | }));
 58 | 
 59 | function Home() {
 60 |   const classes = useStyles();
 61 |   const [channels, setChannels] = useState([]);
 62 |   const history = useHistory();
 63 | 
 64 |   useEffect(() => {
 65 |     db.collection("channels")
 66 |       .orderBy("channelName", "asc")
 67 |       .onSnapshot((snapshot) => {
 68 |         setChannels(
 69 |           snapshot.docs.map((channel) => ({
 70 |             channelName: channel.data().channelName,
 71 |             id: channel.id,
 72 |           }))
 73 |         );
 74 |       });
 75 |   }, []);
 76 | 
 77 |   const goToChannel = (id) => {
 78 |     history.push(`/channel/${id}`);
 79 |   };
 80 | 
 81 |   return (
 82 |     <div style={{ backgroundColor: "rgb(34 39 59)" }}>
 83 |       <Grid container className={classes.root}>
 84 |         <Grid item xs={12} style={{ textAlign: "center" }}>
 85 |           <Typography component="h1" className={classes.heading}>
 86 |             Welcome to Chatify
 87 |           </Typography>
 88 |           <Typography component="h1" className={classes.subHeading}>
 89 |             Effortless live chat to hangout with friends!
 90 |           </Typography>
 91 |         </Grid>
 92 |       </Grid>
 93 | 
 94 |       <Grid container className={classes.rootChannel}>
 95 |         {channels.map((channel) => (
 96 |           <Grid
 97 |             item
 98 |             xs={6}
 99 |             md={3}
100 |             className={classes.channelDiv}
101 |             key={channel.id}
102 |           >
103 |             <Card className={classes.channelCard}>
104 |               <CardActionArea
105 |                 style={{ display: "flex" }}
106 |                 onClick={() => goToChannel(channel.id)}
107 |               >
108 |                 <CardContent className={classes.channelContent}>
109 |                   <Avatar
110 |                     variant="square"
111 |                     className={classes.square}
112 |                     style={{ backgroundColor: "#6a9ec066" }}
113 |                   >
114 |                     {channel.channelName.substr(0, 1).toUpperCase()}
115 |                   </Avatar>
116 |                   <Typography className={classes.channelText}>
117 |                     {channel.channelName}
118 |                   </Typography>
119 |                 </CardContent>
120 |               </CardActionArea>
121 |             </Card>
122 |           </Grid>
123 |         ))}
124 |       </Grid>
125 |     </div>
126 |   );
127 | }
128 | 
129 | export default Home;
130 | 


--------------------------------------------------------------------------------
/src/Components/Rooms.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { makeStyles } from "@material-ui/core/styles";
  3 | import List from "@material-ui/core/List";
  4 | import ListItem from "@material-ui/core/ListItem";
  5 | import ListItemIcon from "@material-ui/core/ListItemIcon";
  6 | import ListItemText from "@material-ui/core/ListItemText";
  7 | import Collapse from "@material-ui/core/Collapse";
  8 | import ExpandLess from "@material-ui/icons/ExpandLess";
  9 | import ExpandMore from "@material-ui/icons/ExpandMore";
 10 | import IconButton from "@material-ui/core/IconButton";
 11 | import Divider from "@material-ui/core/Divider";
 12 | import AddIcon from "@material-ui/icons/Add";
 13 | import { db } from "../Firebase/Firebase";
 14 | import { useHistory } from "react-router-dom";
 15 | import { IoMdChatboxes } from "react-icons/io";
 16 | import { BiHash } from "react-icons/bi";
 17 | import CreateRoom from "./CreateRoom";
 18 | import Fade from "@material-ui/core/Fade";
 19 | import Snackbar from "@material-ui/core/Snackbar";
 20 | import CloseIcon from "@material-ui/icons/Close";
 21 | 
 22 | const useStyles = makeStyles((theme) => ({
 23 |   nested: {
 24 |     paddingLeft: theme.spacing(4),
 25 |   },
 26 |   iconDesign: {
 27 |     fontSize: "1.5em",
 28 |     color: "#cb43fc",
 29 |   },
 30 |   primary: {
 31 |     color: "#cb43fc",
 32 |   },
 33 | }));
 34 | 
 35 | function Rooms() {
 36 |   const classes = useStyles();
 37 |   const [open, setOpen] = React.useState(true);
 38 |   const [channelList, setChannelList] = useState([]);
 39 |   const [showCreateRoom, setShowCreateRoom] = useState(false);
 40 |   const history = useHistory();
 41 |   const [alert, setAlert] = useState(false);
 42 | 
 43 |   useEffect(() => {
 44 |     db.collection("channels")
 45 |       .orderBy("channelName", "asc")
 46 |       .onSnapshot((snapshot) => {
 47 |         setChannelList(
 48 |           snapshot.docs.map((channel) => ({
 49 |             channelName: channel.data().channelName,
 50 |             id: channel.id,
 51 |           }))
 52 |         );
 53 |       });
 54 |   }, []);
 55 | 
 56 |   const handleClick = () => {
 57 |     setOpen(!open);
 58 |   };
 59 | 
 60 |   const goToChannel = (id) => {
 61 |     history.push(`/channel/${id}`);
 62 |   };
 63 | 
 64 |   const manageCreateRoomModal = () => {
 65 |     setShowCreateRoom(!showCreateRoom);
 66 |   };
 67 | 
 68 |   const handleAlert = () => {
 69 |     setAlert(!alert);
 70 |   };
 71 | 
 72 |   const addChannel = (cName) => {
 73 |     if (cName) {
 74 |       cName = cName.toLowerCase().trim();
 75 |       if (cName === "") {
 76 |         handleAlert();
 77 |         return;
 78 |       }
 79 | 
 80 |       for (var i = 0; i < channelList.length; i++) {
 81 |         if (cName === channelList[i].channelName) {
 82 |           handleAlert();
 83 |           return;
 84 |         }
 85 |       }
 86 | 
 87 |       db.collection("channels")
 88 |         .add({ channelName: cName.toLowerCase() })
 89 |         .then((res) => {
 90 |           console.log("added new channel");
 91 |         })
 92 |         .then((err) => {
 93 |           console.log(err);
 94 |         });
 95 |     }
 96 |   };
 97 | 
 98 |   return (
 99 |     <div>
100 |       <Snackbar
101 |         anchorOrigin={{ vertical: "top", horizontal: "center" }}
102 |         open={alert}
103 |         onClose={handleAlert}
104 |         TransitionComponent={Fade}
105 |         message="Room Name Already Exits!!"
106 |         key={Fade}
107 |         action={
108 |           <IconButton aria-label="close" color="inherit" onClick={handleAlert}>
109 |             <CloseIcon />
110 |           </IconButton>
111 |         }
112 |       />
113 | 
114 |       {showCreateRoom ? (
115 |         <CreateRoom create={addChannel} manage={manageCreateRoomModal} />
116 |       ) : null}
117 |       <ListItem style={{ paddingTop: 0, paddingBottom: 0 }}>
118 |         <ListItemText primary="Create New Channel" />
119 |         <IconButton edge="end" aria-label="add" onClick={manageCreateRoomModal}>
120 |           <AddIcon className={classes.primary} />
121 |         </IconButton>
122 |       </ListItem>
123 |       <Divider />
124 | 
125 |       <List component="nav" aria-labelledby="nested-list-subheader">
126 |         <ListItem button onClick={handleClick}>
127 |           <ListItemIcon>
128 |             <IoMdChatboxes className={classes.iconDesign} />
129 |           </ListItemIcon>
130 |           <ListItemText primary="CHANNELS" style={{ color: "#8e9297" }} />
131 |           {open ? (
132 |             <ExpandLess className={classes.primary} />
133 |           ) : (
134 |             <ExpandMore className={classes.primary} />
135 |           )}
136 |         </ListItem>
137 | 
138 |         <Collapse in={open} timeout="auto">
139 |           <List component="div" disablePadding>
140 |             {channelList.map((channel) => (
141 |               <ListItem
142 |                 key={channel.id}
143 |                 button
144 |                 className={classes.nested}
145 |                 onClick={() => goToChannel(channel.id)}
146 |               >
147 |                 <ListItemIcon style={{ minWidth: "30px" }}>
148 |                   <BiHash
149 |                     className={classes.iconDesign}
150 |                     style={{ color: "#b9bbbe" }}
151 |                   />
152 |                 </ListItemIcon>
153 |                 <ListItemText
154 |                   primary={
155 |                     channel.channelName === channel.channelName.substr(0, 12)
156 |                       ? channel.channelName
157 |                       : `${channel.channelName.substr(0, 12)}...`
158 |                   }
159 |                   style={{ color: "#dcddde" }}
160 |                 />
161 |               </ListItem>
162 |             ))}
163 |           </List>
164 |         </Collapse>
165 |       </List>
166 |     </div>
167 |   );
168 | }
169 | 
170 | export default Rooms;
171 | 


--------------------------------------------------------------------------------
/src/Components/FileUpload.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { makeStyles } from "@material-ui/core/styles";
  3 | import Button from "@material-ui/core/Button";
  4 | import Dialog from "@material-ui/core/Dialog";
  5 | import DialogActions from "@material-ui/core/DialogActions";
  6 | import DialogContent from "@material-ui/core/DialogContent";
  7 | import DialogTitle from "@material-ui/core/DialogTitle";
  8 | import TextField from "@material-ui/core/TextField";
  9 | import LinearProgress from "@material-ui/core/LinearProgress";
 10 | import Typography from "@material-ui/core/Typography";
 11 | import Box from "@material-ui/core/Box";
 12 | import { storage } from "../Firebase/Firebase";
 13 | import { useParams } from "react-router-dom";
 14 | import firebase from "firebase/app";
 15 | import { db } from "../Firebase/Firebase";
 16 | 
 17 | const useStyles = makeStyles((theme) => ({
 18 |   displayImage: {
 19 |     height: "105px",
 20 |     width: "180px",
 21 |   },
 22 |   imageName: {
 23 |     paddingLeft: "15px",
 24 |     fontSize: "1.3em",
 25 |   },
 26 |   imageDiv: {
 27 |     marginLeft: "16px",
 28 |     marginRight: "16px",
 29 |     marginTop: "-33px",
 30 |   },
 31 | }));
 32 | 
 33 | function FileUpload({ setState, file }) {
 34 |   const params = useParams();
 35 |   const classes = useStyles();
 36 |   const [open, setOpen] = useState(true);
 37 |   const [progress, setProgress] = useState(0);
 38 |   const [progressBar, setProgressBar] = useState({ display: "none" });
 39 |   const [message, setMessage] = useState("");
 40 | 
 41 |   const handleClose = () => {
 42 |     setOpen(false);
 43 |     setState();
 44 |   };
 45 | 
 46 |   const sendMsg = (downloadURL) => {
 47 |     if (params.id) {
 48 |       const userData = JSON.parse(localStorage.getItem("userDetails"));
 49 | 
 50 |       if (userData) {
 51 |         const displayName = userData.displayName;
 52 |         const imgUrl = userData.photoURL;
 53 |         const uid = userData.uid;
 54 |         const likeCount = 0;
 55 |         const likes = {};
 56 |         const fireCount = 0;
 57 |         const fire = {};
 58 |         const heartCount = 0;
 59 |         const heart = {};
 60 |         const postImg = downloadURL;
 61 |         const obj = {
 62 |           text: message,
 63 |           timestamp: firebase.firestore.Timestamp.now(),
 64 |           userImg: imgUrl,
 65 |           userName: displayName,
 66 |           uid: uid,
 67 |           likeCount: likeCount,
 68 |           likes: likes,
 69 |           fireCount: fireCount,
 70 |           fire: fire,
 71 |           heartCount: heartCount,
 72 |           heart: heart,
 73 |           postImg: postImg,
 74 |         };
 75 | 
 76 |         db.collection("channels")
 77 |           .doc(params.id)
 78 |           .collection("messages")
 79 |           .add(obj)
 80 |           .then((res) => {
 81 |             console.log("message sent");
 82 |           })
 83 |           .catch((err) => {
 84 |             console.log(err);
 85 |           });
 86 |       }
 87 | 
 88 |       setMessage("");
 89 |     }
 90 |   };
 91 | 
 92 |   const fileObj = URL.createObjectURL(file);
 93 | 
 94 |   const handleUpload = (e) => {
 95 |     e.preventDefault();
 96 |     setProgressBar({ display: "block" });
 97 |     const uploadRef = storage.ref(`images/${file.name}`).put(file);
 98 |     uploadRef.on(
 99 |       "state_changed",
100 |       (snapshot) => {
101 |         // Observe state change events such as progress, pause, and resume
102 |         // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
103 |         let progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
104 |         setProgress(progress);
105 |       },
106 |       (error) => {
107 |         console.log(error);
108 |       },
109 |       () => {
110 |         // Handle successful uploads on complete
111 |         // For instance, get the download URL: https://firebasestorage.googleapis.com/...
112 |         uploadRef.snapshot.ref.getDownloadURL().then((downloadURL) => {
113 |           sendMsg(downloadURL);
114 |         });
115 |         handleClose();
116 |       }
117 |     );
118 |   };
119 | 
120 |   return (
121 |     <div>
122 |       <Dialog
123 |         open={open}
124 |         onClose={handleClose}
125 |         aria-labelledby="alert-dialog-title"
126 |         aria-describedby="alert-dialog-description"
127 |       >
128 |         <div className={classes.imageDiv}>
129 |           <img src={fileObj} alt={file.name} className={classes.displayImage} />
130 |           <Typography className={classes.imageName}>{file.name}</Typography>
131 |         </div>
132 | 
133 |         <DialogTitle id="alert-dialog-title">Upload Image</DialogTitle>
134 | 
135 |         <DialogContent>
136 |           <form
137 |             autoComplete="off"
138 |             onSubmit={(e) => {
139 |               handleUpload(e);
140 |             }}
141 |           >
142 |             <TextField
143 |               id="outlined-basic"
144 |               label="Add A Message"
145 |               fullWidth
146 |               margin="normal"
147 |               variant="outlined"
148 |               style={{
149 |                 backgroundColor: "rgb(45, 45, 73)",
150 |                 borderRadius: "5px",
151 |               }}
152 |               onChange={(e) => {
153 |                 setMessage(e.target.value);
154 |               }}
155 |             />
156 |           </form>
157 | 
158 |           <div style={progressBar}>
159 |             <Box display="flex" alignItems="center">
160 |               <Box width="100%" mr={1}>
161 |                 <LinearProgress variant="determinate" value={progress} />
162 |               </Box>
163 |               <Box minWidth={35}>
164 |                 <Typography variant="body2">{Math.round(progress)}%</Typography>
165 |               </Box>
166 |             </Box>
167 |           </div>
168 |         </DialogContent>
169 |         <DialogActions>
170 |           <Button onClick={handleClose} style={{ color: "white" }}>
171 |             Cancel
172 |           </Button>
173 |           <Button
174 |             type="submit"
175 |             onClick={(e) => handleUpload(e)}
176 |             color="primary"
177 |             autoFocus
178 |             variant="contained"
179 |           >
180 |             Upload
181 |           </Button>
182 |         </DialogActions>
183 |       </Dialog>
184 |     </div>
185 |   );
186 | }
187 | 
188 | export default FileUpload;
189 | 


--------------------------------------------------------------------------------
/src/Components/Chat.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import TextField from "@material-ui/core/TextField";
  3 | import { makeStyles } from "@material-ui/core/styles";
  4 | import Grid from "@material-ui/core/Grid";
  5 | import Messages from "./Messages";
  6 | import IconButton from "@material-ui/core/IconButton";
  7 | import { useParams } from "react-router-dom";
  8 | import { db } from "../Firebase/Firebase";
  9 | import firebase from "firebase/app";
 10 | import ScrollableFeed from "react-scrollable-feed";
 11 | import { BiHash } from "react-icons/bi";
 12 | import { FiSend } from "react-icons/fi";
 13 | import { GrEmoji } from "react-icons/gr";
 14 | import { Picker } from "emoji-mart";
 15 | import { RiImageAddLine } from "react-icons/ri";
 16 | import FileUpload from "./FileUpload";
 17 | import "emoji-mart/css/emoji-mart.css";
 18 | 
 19 | const useStyles = makeStyles((theme) => ({
 20 |   root: {
 21 |     flexGrow: 1,
 22 |   },
 23 |   chat: {
 24 |     position: "relative",
 25 |     height: "calc(100vh - 200px)",
 26 |     paddingLeft: "10px",
 27 |     paddingBottom: "5px",
 28 |     paddingTop: "5px",
 29 |   },
 30 |   footer: {
 31 |     paddingRight: "15px",
 32 |     paddingLeft: "15px",
 33 |     paddingTop: "10px",
 34 |   },
 35 |   message: {
 36 |     width: "100%",
 37 |     color: "white",
 38 |   },
 39 |   roomName: {
 40 |     border: "1px solid #0000004a",
 41 |     borderLeft: 0,
 42 |     borderRight: 0,
 43 |     padding: "15px",
 44 |     display: "flex",
 45 |     color: "#e5e5e5",
 46 |   },
 47 |   roomNameText: {
 48 |     marginBlockEnd: 0,
 49 |     marginBlockStart: 0,
 50 |     paddingLeft: "5px",
 51 |   },
 52 |   iconDesign: {
 53 |     fontSize: "1.5em",
 54 |     color: "#e5e5e5",
 55 |   },
 56 |   footerContent: {
 57 |     display: "flex",
 58 |     backgroundColor: "#303753",
 59 |     borderRadius: "5px",
 60 |     alignItems: "center",
 61 |   },
 62 |   inputFile: {
 63 |     display: "none",
 64 |   },
 65 | }));
 66 | 
 67 | function Chat() {
 68 |   const classes = useStyles();
 69 |   const params = useParams();
 70 |   const [allMessages, setAllMessages] = useState([]);
 71 |   const [channelName, setChannelName] = useState("");
 72 |   const [userNewMsg, setUserNewMsg] = useState("");
 73 |   const [emojiBtn, setEmojiBtn] = useState(false);
 74 |   const [modalState, setModalState] = useState(false);
 75 |   const [file, setFileName] = useState(null);
 76 | 
 77 |   useEffect(() => {
 78 |     if (params.id) {
 79 |       db.collection("channels")
 80 |         .doc(params.id)
 81 |         .onSnapshot((snapshot) => {
 82 |           setChannelName(snapshot.data().channelName);
 83 |         });
 84 | 
 85 |       db.collection("channels")
 86 |         .doc(params.id)
 87 |         .collection("messages")
 88 |         .orderBy("timestamp", "asc")
 89 |         .onSnapshot((snapshot) => {
 90 |           setAllMessages(
 91 |             snapshot.docs.map((doc) => ({ id: doc.id, data: doc.data() }))
 92 |           );
 93 |         });
 94 |     }
 95 |   }, [params]);
 96 | 
 97 |   const sendMsg = (e) => {
 98 |     e.preventDefault();
 99 |     if (userNewMsg && params.id) {
100 |       const userData = JSON.parse(localStorage.getItem("userDetails"));
101 | 
102 |       if (userData) {
103 |         const displayName = userData.displayName;
104 |         const imgUrl = userData.photoURL;
105 |         const uid = userData.uid;
106 |         const likeCount = 0;
107 |         const likes = {};
108 |         const fireCount = 0;
109 |         const fire = {};
110 |         const heartCount = 0;
111 |         const heart = {};
112 |         const postImg = null;
113 |         const obj = {
114 |           text: userNewMsg,
115 |           timestamp: firebase.firestore.Timestamp.now(),
116 |           userImg: imgUrl,
117 |           userName: displayName,
118 |           uid: uid,
119 |           likeCount: likeCount,
120 |           likes: likes,
121 |           fireCount: fireCount,
122 |           fire: fire,
123 |           heartCount: heartCount,
124 |           heart: heart,
125 |           postImg: postImg,
126 |         };
127 | 
128 |         db.collection("channels")
129 |           .doc(params.id)
130 |           .collection("messages")
131 |           .add(obj)
132 |           .then((res) => {
133 |             console.log("message sent");
134 |           })
135 |           .catch((err) => {
136 |             console.log(err);
137 |           });
138 |       }
139 | 
140 |       setUserNewMsg("");
141 |       setEmojiBtn(false);
142 |     }
143 |   };
144 | 
145 |   const addEmoji = (e) => {
146 |     setUserNewMsg(userNewMsg + e.native);
147 |   };
148 | 
149 |   const openModal = () => {
150 |     setModalState(!modalState);
151 |   };
152 | 
153 |   const handelFileUpload = (e) => {
154 |     e.preventDefault();
155 |     if (e.target.files[0]) {
156 |       setFileName(e.target.files[0]);
157 |       openModal();
158 |     }
159 |     e.target.value = null;
160 |   };
161 | 
162 |   return (
163 |     <div className={classes.root}>
164 |       {modalState ? <FileUpload setState={openModal} file={file} /> : null}
165 |       <Grid item xs={12} className={classes.roomName}>
166 |         <BiHash className={classes.iconDesign} />
167 |         <h3 className={classes.roomNameText}>{channelName}</h3>
168 |       </Grid>
169 |       <Grid item xs={12} className={classes.chat}>
170 |         <ScrollableFeed>
171 |           {allMessages.map((message) => (
172 |             <Messages
173 |               key={message.id}
174 |               values={message.data}
175 |               msgId={message.id}
176 |             />
177 |           ))}
178 |         </ScrollableFeed>
179 |       </Grid>
180 |       <div className={classes.footer}>
181 |         <Grid item xs={12} className={classes.footerContent}>
182 |           <input
183 |             accept="image/*"
184 |             className={classes.inputFile}
185 |             id="icon-button-file"
186 |             type="file"
187 |             onChange={(e) => handelFileUpload(e)}
188 |           />
189 |           <label htmlFor="icon-button-file">
190 |             <IconButton
191 |               color="primary"
192 |               aria-label="upload picture"
193 |               component="span"
194 |             >
195 |               <RiImageAddLine style={{ color: "#b9bbbe" }} />
196 |             </IconButton>
197 |           </label>
198 | 
199 |           <IconButton
200 |             color="primary"
201 |             component="button"
202 |             onClick={() => setEmojiBtn(!emojiBtn)}
203 |           >
204 |             <GrEmoji style={{ color: "#b9bbbe" }} />
205 |           </IconButton>
206 |           {emojiBtn ? <Picker onSelect={addEmoji} theme="dark" /> : null}
207 | 
208 |           <form
209 |             autoComplete="off"
210 |             style={{ width: "100%", display: "flex" }}
211 |             onSubmit={(e) => sendMsg(e)}
212 |           >
213 |             <TextField
214 |               className={classes.message}
215 |               required
216 |               id="outlined-basic"
217 |               label="Enter Message"
218 |               variant="outlined"
219 |               multiline
220 |               rows={1}
221 |               rowsMax={2}
222 |               value={userNewMsg}
223 |               onChange={(e) => {
224 |                 setUserNewMsg(e.target.value);
225 |               }}
226 |             />
227 |             <IconButton type="submit" component="button">
228 |               <FiSend style={{ color: "#b9bbbe" }} />
229 |             </IconButton>
230 |           </form>
231 |         </Grid>
232 |       </div>
233 |     </div>
234 |   );
235 | }
236 | 
237 | export default Chat;
238 | 


--------------------------------------------------------------------------------
/src/Components/Application.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import AppBar from "@material-ui/core/AppBar";
  3 | import CssBaseline from "@material-ui/core/CssBaseline";
  4 | import Divider from "@material-ui/core/Divider";
  5 | import Drawer from "@material-ui/core/Drawer";
  6 | import Hidden from "@material-ui/core/Hidden";
  7 | import IconButton from "@material-ui/core/IconButton";
  8 | import MenuIcon from "@material-ui/icons/Menu";
  9 | import Toolbar from "@material-ui/core/Toolbar";
 10 | import Typography from "@material-ui/core/Typography";
 11 | import { makeStyles, useTheme, withStyles } from "@material-ui/core/styles";
 12 | import AccountCircle from "@material-ui/icons/AccountCircle";
 13 | import MenuItem from "@material-ui/core/MenuItem";
 14 | import Menu from "@material-ui/core/Menu";
 15 | import Badge from "@material-ui/core/Badge";
 16 | import Avatar from "@material-ui/core/Avatar";
 17 | import { Grid } from "@material-ui/core";
 18 | import { deepPurple } from "@material-ui/core/colors";
 19 | import Rooms from "./Rooms";
 20 | import { GoSignOut } from "react-icons/go";
 21 | import { FaUserEdit } from "react-icons/fa";
 22 | import { auth, db } from "../Firebase/Firebase";
 23 | import { Link } from "react-router-dom";
 24 | import EditProfile from "./EditProfile";
 25 | import Fade from "@material-ui/core/Fade";
 26 | import Snackbar from "@material-ui/core/Snackbar";
 27 | import CloseIcon from "@material-ui/icons/Close";
 28 | 
 29 | const drawerWidth = 240;
 30 | 
 31 | const StyledBadge = withStyles((theme) => ({
 32 |   badge: {
 33 |     backgroundColor: "#44b700",
 34 |     color: "#44b700",
 35 |     boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
 36 |     "&::after": {
 37 |       position: "absolute",
 38 |       top: 0,
 39 |       left: 0,
 40 |       width: "100%",
 41 |       height: "100%",
 42 |       borderRadius: "50%",
 43 |       border: "1px solid currentColor",
 44 |       content: '""',
 45 |     },
 46 |   },
 47 |   "@keyframes ripple": {
 48 |     "0%": {
 49 |       transform: "scale(.8)",
 50 |       opacity: 1,
 51 |     },
 52 |     "100%": {
 53 |       transform: "scale(2.4)",
 54 |       opacity: 0,
 55 |     },
 56 |   },
 57 | }))(Badge);
 58 | 
 59 | const useStyles = makeStyles((theme) => ({
 60 |   root: {
 61 |     display: "flex",
 62 |   },
 63 |   avatarGrid: {
 64 |     paddingTop: "20px",
 65 |     paddingLeft: "5px",
 66 |     paddingBottom: "20px",
 67 |     color: "#dcddde",
 68 |   },
 69 |   avatarIcon: {
 70 |     display: "flex",
 71 |     paddingLeft: "10px",
 72 |     paddingRight: "10px",
 73 |   },
 74 |   avatarName: {
 75 |     fontSize: "1em",
 76 |     paddingLeft: "12px",
 77 |     paddingTop: "8px",
 78 |   },
 79 |   avatarDisplayName: {
 80 |     alignSelf: "center",
 81 |     paddingLeft: "10px",
 82 |     fontWeight: "600",
 83 |   },
 84 |   purple: {
 85 |     color: theme.palette.getContrastText(deepPurple[500]),
 86 |     backgroundColor: "#3f51b5",
 87 |   },
 88 |   drawer: {
 89 |     [theme.breakpoints.up("sm")]: {
 90 |       width: drawerWidth,
 91 |       flexShrink: 0,
 92 |     },
 93 |   },
 94 |   appBar: {
 95 |     [theme.breakpoints.up("sm")]: {
 96 |       width: `calc(100% - ${drawerWidth}px)`,
 97 |       marginLeft: drawerWidth,
 98 |     },
 99 |     backgroundColor: "#22273b",
100 |     color: "#dcddde",
101 |     boxShadow:
102 |       "0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);",
103 |   },
104 |   menuButton: {
105 |     marginRight: theme.spacing(2),
106 |     [theme.breakpoints.up("sm")]: {
107 |       display: "none",
108 |     },
109 |   },
110 |   // necessary for content to be below app bar
111 |   toolbar: theme.mixins.toolbar,
112 |   drawerPaper: {
113 |     width: drawerWidth,
114 |     backgroundColor: "#171c2e",
115 |     color: "white",
116 |   },
117 |   sideToolBar: {
118 |     backgroundColor: "#171c2e",
119 |     color: "#fff",
120 |     lineHeight: 1.6,
121 |     boxShadow:
122 |       "0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);",
123 |     minHeight: "50px",
124 |   },
125 |   sideToolBarText: {
126 |     letterSpacing: "0.2em",
127 |     fontWeight: "900",
128 |   },
129 |   title: {
130 |     flexGrow: 1,
131 |   },
132 | }));
133 | 
134 | function Application(props) {
135 |   const { window, uid } = props;
136 |   const classes = useStyles();
137 |   const theme = useTheme();
138 |   const [mobileOpen, setMobileOpen] = React.useState(false);
139 |   const [anchorEl, setAnchorEl] = React.useState(null);
140 |   const [userDetails, setUserDetails] = useState([]);
141 |   const [editProfileModal, setEditProfileModal] = useState(false);
142 |   const [alert, setAlert] = useState(false);
143 |   const open = Boolean(anchorEl);
144 | 
145 |   useEffect(() => {
146 |     db.collection("users")
147 |       .doc(uid)
148 |       .onSnapshot((doc) => {
149 |         setUserDetails(doc.data());
150 |         localStorage.setItem("userDetails", JSON.stringify(doc.data()));
151 |       });
152 |   }, [uid]);
153 | 
154 |   const handleMenu = (event) => {
155 |     setAnchorEl(event.currentTarget);
156 |   };
157 | 
158 |   const handleClose = () => {
159 |     setAnchorEl(null);
160 |   };
161 | 
162 |   const handleDrawerToggle = () => {
163 |     setMobileOpen(!mobileOpen);
164 |   };
165 | 
166 |   const toggleEditProfile = () => {
167 |     setEditProfileModal(!editProfileModal);
168 |   };
169 | 
170 |   const handleAlert = () => {
171 |     setAlert(!alert);
172 |   };
173 | 
174 |   const signOut = () => {
175 |     auth
176 |       .signOut()
177 |       .then(() => {
178 |         console.log("signed out");
179 |         localStorage.clear();
180 |       })
181 |       .catch((err) => {
182 |         console.log(err);
183 |       });
184 |   };
185 | 
186 |   const drawer = userDetails && (
187 |     <div>
188 |       <Toolbar className={classes.sideToolBar}>
189 |         <Typography variant="h6" className={classes.sideToolBarText}>
190 |           CHATIFY
191 |         </Typography>
192 |       </Toolbar>
193 |       <Divider />
194 |       <Grid className={classes.avatarGrid}>
195 |         <div className={classes.avatarIcon}>
196 |           <StyledBadge
197 |             overlap="circle"
198 |             anchorOrigin={{
199 |               vertical: "bottom",
200 |               horizontal: "right",
201 |             }}
202 |             variant="dot"
203 |           >
204 |             <Avatar
205 |               alt={userDetails.name}
206 |               src={userDetails.photoURL}
207 |               className={classes.purple}
208 |             />
209 |           </StyledBadge>
210 |           <Typography variant="h6" className={classes.avatarDisplayName}>
211 |             {userDetails.displayName}
212 |           </Typography>
213 |         </div>
214 |         <div>
215 |           <Typography variant="h4" className={classes.avatarName}>
216 |             {userDetails.name}
217 |           </Typography>
218 |           <Typography variant="h4" className={classes.avatarName}>
219 |             {userDetails.email}
220 |           </Typography>
221 |         </div>
222 |       </Grid>
223 |       <Divider />
224 |       <Rooms />
225 |       <Divider />
226 |     </div>
227 |   );
228 | 
229 |   const container =
230 |     window !== undefined ? () => window().document.body : undefined;
231 |   return (
232 |     <div className={classes.root}>
233 |       <CssBaseline />
234 | 
235 |       <Snackbar
236 |         anchorOrigin={{ vertical: "top", horizontal: "center" }}
237 |         open={alert}
238 |         onClose={handleAlert}
239 |         TransitionComponent={Fade}
240 |         message="Display Name Updated Successfully"
241 |         key={Fade}
242 |         action={
243 |           <IconButton aria-label="close" color="inherit" onClick={handleAlert}>
244 |             <CloseIcon />
245 |           </IconButton>
246 |         }
247 |       />
248 | 
249 |       {editProfileModal ? (
250 |         <EditProfile toggler={toggleEditProfile} alert={handleAlert} />
251 |       ) : null}
252 | 
253 |       <AppBar position="fixed" className={classes.appBar}>
254 |         <Toolbar style={{ minHeight: "50px" }}>
255 |           <IconButton
256 |             color="inherit"
257 |             aria-label="open drawer"
258 |             edge="start"
259 |             onClick={handleDrawerToggle}
260 |             className={classes.menuButton}
261 |           >
262 |             <MenuIcon />
263 |           </IconButton>
264 | 
265 |           <Typography variant="h6" className={classes.title}>
266 |             <Link to="/" style={{ textDecoration: "none", color: "#dcddde" }}>
267 |               Home
268 |             </Link>
269 |           </Typography>
270 | 
271 |           <div>
272 |             <IconButton
273 |               aria-label="account of current user"
274 |               aria-controls="menu-appbar"
275 |               aria-haspopup="true"
276 |               onClick={handleMenu}
277 |               color="inherit"
278 |             >
279 |               <AccountCircle />
280 |             </IconButton>
281 |             <Menu
282 |               id="menu-appbar"
283 |               anchorEl={anchorEl}
284 |               getContentAnchorEl={null}
285 |               anchorOrigin={{
286 |                 vertical: "bottom",
287 |                 horizontal: "center",
288 |               }}
289 |               keepMounted
290 |               transformOrigin={{
291 |                 vertical: "top",
292 |                 horizontal: "center",
293 |               }}
294 |               open={open}
295 |               onClose={handleClose}
296 |             >
297 |               <MenuItem onClick={toggleEditProfile}>
298 |                 <FaUserEdit /> &nbsp; Edit Profile
299 |               </MenuItem>
300 | 
301 |               <MenuItem onClick={signOut}>
302 |                 <GoSignOut /> &nbsp; Sign Out of Chatify
303 |               </MenuItem>
304 |             </Menu>
305 |           </div>
306 |         </Toolbar>
307 |       </AppBar>
308 | 
309 |       <nav className={classes.drawer} aria-label="chat rooms">
310 |         {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
311 |         <Hidden smUp implementation="css">
312 |           <Drawer
313 |             container={container}
314 |             variant="temporary"
315 |             anchor={theme.direction === "rtl" ? "right" : "left"}
316 |             open={mobileOpen}
317 |             onClose={handleDrawerToggle}
318 |             classes={{
319 |               paper: classes.drawerPaper,
320 |             }}
321 |             ModalProps={{
322 |               keepMounted: true, // Better open performance on mobile.
323 |             }}
324 |           >
325 |             {drawer}
326 |           </Drawer>
327 |         </Hidden>
328 | 
329 |         <Hidden xsDown implementation="css">
330 |           <Drawer
331 |             classes={{
332 |               paper: classes.drawerPaper,
333 |             }}
334 |             variant="permanent"
335 |             open
336 |           >
337 |             {drawer}
338 |           </Drawer>
339 |         </Hidden>
340 |       </nav>
341 |     </div>
342 |   );
343 | }
344 | 
345 | export default Application;
346 | 


--------------------------------------------------------------------------------
/src/Components/Messages.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import Grid from "@material-ui/core/Grid";
  3 | import { makeStyles } from "@material-ui/core/styles";
  4 | import Avatar from "@material-ui/core/Avatar";
  5 | import { deepPurple } from "@material-ui/core/colors";
  6 | import IconButton from "@material-ui/core/IconButton";
  7 | import { AiFillLike } from "react-icons/ai";
  8 | import { AiFillFire } from "react-icons/ai";
  9 | import { AiFillHeart } from "react-icons/ai";
 10 | import { AiFillDelete } from "react-icons/ai";
 11 | import { db } from "../Firebase/Firebase";
 12 | import { useParams } from "react-router-dom";
 13 | import DeleteModal from "./DeleteModal";
 14 | import { Anchorme } from "react-anchorme";
 15 | 
 16 | const useStyles = makeStyles((theme) => ({
 17 |   root: {
 18 |     flexGrow: 1,
 19 |     position: "relative",
 20 |     padding: "8px",
 21 |   },
 22 |   paper: {
 23 |     padding: "10px",
 24 |     "&:hover": {
 25 |       backgroundColor: "#1f2436",
 26 |     },
 27 |   },
 28 |   avatar: {
 29 |     display: "inline-block",
 30 |     verticalAlign: "top",
 31 |   },
 32 |   chat: {
 33 |     display: "inline-block",
 34 |     paddingLeft: "1rem",
 35 |     width: "calc(100% - 50px)",
 36 |     wordBreak: "break-all",
 37 |   },
 38 |   chatHeading: {
 39 |     marginBlockStart: 0,
 40 |     marginBlockEnd: 0,
 41 |     display: "inline-block",
 42 |     fontSize: "1rem",
 43 |     fontWeight: "600",
 44 |     color: "white",
 45 |   },
 46 |   chatTimming: {
 47 |     marginBlockStart: 0,
 48 |     marginBlockEnd: 0,
 49 |     display: "inline-block",
 50 |     paddingLeft: "0.5em",
 51 |     color: "white",
 52 |   },
 53 |   chatText: {
 54 |     color: "#dcddde",
 55 |   },
 56 |   purple: {
 57 |     color: theme.palette.getContrastText(deepPurple[500]),
 58 |     backgroundColor: "#3f51b5",
 59 |   },
 60 |   emojiDiv: {
 61 |     position: "absolute",
 62 |     right: 0,
 63 |     top: 0,
 64 |   },
 65 |   emojiDivInner: {
 66 |     position: "absolute",
 67 |     right: 0,
 68 |     padding: "0 35px 0 32px",
 69 |   },
 70 |   emojiBtn: {
 71 |     fontSize: "1.1rem",
 72 |     color: "rgb(255 195 54)",
 73 |   },
 74 |   allEmoji: {
 75 |     backgroundColor: "#2d2e31ba",
 76 |     borderRadius: "5px",
 77 |     paddingLeft: "2px",
 78 |     paddingRight: "2px",
 79 |     display: "flex",
 80 |   },
 81 |   countEmojiBtn: {
 82 |     padding: "3px",
 83 |     borderRadius: "4px",
 84 |     fontSize: "0.8em",
 85 |     backgroundColor: "#ffffff4a",
 86 |     color: "#cacaca",
 87 |     paddingLeft: "5px",
 88 |     paddingRight: "5px",
 89 |     "&:hover": {
 90 |       backgroundColor: "#ffffff4a",
 91 |       color: "#e7e7e7",
 92 |     },
 93 |   },
 94 | }));
 95 | 
 96 | function Messages({ values, msgId }) {
 97 |   const [style, setStyle] = useState({ display: "none" });
 98 |   const [deleteModal, setDeleteModal] = useState(false);
 99 |   const classes = useStyles();
100 | 
101 |   const uid = JSON.parse(localStorage.getItem("userDetails")).uid;
102 |   const messegerUid = values.uid;
103 |   const date = values.timestamp.toDate();
104 |   const day = date.getDate();
105 |   const year = date.getFullYear();
106 |   const month = date.getMonth();
107 |   const hour = date.getHours();
108 |   const minute = date.getMinutes();
109 |   const time = `${day}/${month}/${year}   ${hour}:${minute}`;
110 | 
111 |   const numLikes = values.likeCount;
112 |   const numFire = values.fireCount;
113 |   const numHeart = values.heartCount;
114 | 
115 |   const userLiked = values.likes[uid];
116 |   const userFire = values.fire[uid];
117 |   const userHeart = values.heart[uid];
118 | 
119 |   const postImg = values.postImg;
120 | 
121 |   const channelId = useParams().id;
122 | 
123 |   const selectedLike = userLiked
124 |     ? { color: "#8ff879", backgroundColor: "#545454" }
125 |     : null;
126 | 
127 |   const selectedHeart = userHeart
128 |     ? { color: "#ff527d", backgroundColor: "#545454" }
129 |     : null;
130 | 
131 |   const selectedFire = userFire
132 |     ? { color: "#ffc336", backgroundColor: "#545454" }
133 |     : null;
134 | 
135 |   const showDeleteModal = () => {
136 |     setDeleteModal(!deleteModal);
137 |   };
138 | 
139 |   const heartClick = () => {
140 |     const messageDoc = db
141 |       .collection("channels")
142 |       .doc(channelId)
143 |       .collection("messages")
144 |       .doc(msgId);
145 |     if (userHeart) {
146 |       return db
147 |         .runTransaction((transaction) => {
148 |           // This code may get re-run multiple times if there are conflicts.
149 |           return transaction.get(messageDoc).then((doc) => {
150 |             if (!doc) {
151 |               console.log("doc not found");
152 |               return;
153 |             }
154 | 
155 |             let newHeartCount = doc.data().heartCount - 1;
156 |             let newHeart = doc.data().heart ? doc.data().heart : {};
157 |             newHeart[uid] = false;
158 | 
159 |             transaction.update(messageDoc, {
160 |               heartCount: newHeartCount,
161 |               heart: newHeart,
162 |             });
163 |           });
164 |         })
165 |         .then(() => {
166 |           console.log("Disiked");
167 |         })
168 |         .catch((error) => {
169 |           console.log(error);
170 |         });
171 |     } else {
172 |       return db
173 |         .runTransaction((transaction) => {
174 |           // This code may get re-run multiple times if there are conflicts.
175 |           return transaction.get(messageDoc).then((doc) => {
176 |             if (!doc) {
177 |               console.log("doc not found");
178 |               return;
179 |             }
180 | 
181 |             let newHeartCount = doc.data().heartCount + 1;
182 |             let newHeart = doc.data().heart ? doc.data().heart : {};
183 |             newHeart[uid] = true;
184 | 
185 |             transaction.update(messageDoc, {
186 |               heartCount: newHeartCount,
187 |               heart: newHeart,
188 |             });
189 |           });
190 |         })
191 |         .then(() => {
192 |           console.log("Liked");
193 |         })
194 |         .catch((error) => {
195 |           console.log(error);
196 |         });
197 |     }
198 |   };
199 | 
200 |   const fireClick = () => {
201 |     const messageDoc = db
202 |       .collection("channels")
203 |       .doc(channelId)
204 |       .collection("messages")
205 |       .doc(msgId);
206 |     if (userFire) {
207 |       return db
208 |         .runTransaction((transaction) => {
209 |           // This code may get re-run multiple times if there are conflicts.
210 |           return transaction.get(messageDoc).then((doc) => {
211 |             if (!doc) {
212 |               console.log("doc not found");
213 |               return;
214 |             }
215 | 
216 |             let newFireCount = doc.data().fireCount - 1;
217 |             let newFire = doc.data().fire ? doc.data().fire : {};
218 |             newFire[uid] = false;
219 | 
220 |             transaction.update(messageDoc, {
221 |               fireCount: newFireCount,
222 |               fire: newFire,
223 |             });
224 |           });
225 |         })
226 |         .then(() => {
227 |           console.log("Disiked");
228 |         })
229 |         .catch((error) => {
230 |           console.log(error);
231 |         });
232 |     } else {
233 |       return db
234 |         .runTransaction((transaction) => {
235 |           // This code may get re-run multiple times if there are conflicts.
236 |           return transaction.get(messageDoc).then((doc) => {
237 |             if (!doc) {
238 |               console.log("doc not found");
239 |               return;
240 |             }
241 | 
242 |             let newFireCount = doc.data().fireCount + 1;
243 |             let newFire = doc.data().fire ? doc.data().fire : {};
244 |             newFire[uid] = true;
245 | 
246 |             transaction.update(messageDoc, {
247 |               fireCount: newFireCount,
248 |               fire: newFire,
249 |             });
250 |           });
251 |         })
252 |         .then(() => {
253 |           console.log("Liked");
254 |         })
255 |         .catch((error) => {
256 |           console.log(error);
257 |         });
258 |     }
259 |   };
260 | 
261 |   const likeClick = () => {
262 |     const messageDoc = db
263 |       .collection("channels")
264 |       .doc(channelId)
265 |       .collection("messages")
266 |       .doc(msgId);
267 |     if (userLiked) {
268 |       return db
269 |         .runTransaction((transaction) => {
270 |           // This code may get re-run multiple times if there are conflicts.
271 |           return transaction.get(messageDoc).then((doc) => {
272 |             if (!doc) {
273 |               console.log("doc not found");
274 |               return;
275 |             }
276 | 
277 |             let newLikeCount = doc.data().likeCount - 1;
278 |             let newLikes = doc.data().likes ? doc.data().likes : {};
279 |             newLikes[uid] = false;
280 | 
281 |             transaction.update(messageDoc, {
282 |               likeCount: newLikeCount,
283 |               likes: newLikes,
284 |             });
285 |           });
286 |         })
287 |         .then(() => {
288 |           console.log("Disiked");
289 |         })
290 |         .catch((error) => {
291 |           console.log(error);
292 |         });
293 |     } else {
294 |       return db
295 |         .runTransaction((transaction) => {
296 |           // This code may get re-run multiple times if there are conflicts.
297 |           return transaction.get(messageDoc).then((doc) => {
298 |             if (!doc) {
299 |               console.log("doc not found");
300 |               return;
301 |             }
302 | 
303 |             let newLikeCount = doc.data().likeCount + 1;
304 |             let newLikes = doc.data().likes ? doc.data().likes : {};
305 |             newLikes[uid] = true;
306 | 
307 |             transaction.update(messageDoc, {
308 |               likeCount: newLikeCount,
309 |               likes: newLikes,
310 |             });
311 |           });
312 |         })
313 |         .then(() => {
314 |           console.log("Liked");
315 |         })
316 |         .catch((error) => {
317 |           console.log(error);
318 |         });
319 |     }
320 |   };
321 | 
322 |   const deleteMsg = (id) => {
323 |     db.collection("channels")
324 |       .doc(channelId)
325 |       .collection("messages")
326 |       .doc(id)
327 |       .delete()
328 |       .then((res) => {
329 |         console.log("deleted successfully");
330 |       })
331 |       .catch((err) => {
332 |         console.log(err);
333 |       });
334 |   };
335 | 
336 |   return (
337 |     <Grid item xs={12} className={classes.root}>
338 |       {deleteModal ? (
339 |         <DeleteModal
340 |           msgId={msgId}
341 |           text={values.text}
342 |           postImg={postImg}
343 |           deleteMsg={deleteMsg}
344 |           handleModal={showDeleteModal}
345 |         />
346 |       ) : null}
347 |       <div
348 |         className={classes.paper}
349 |         onMouseEnter={(e) => {
350 |           setStyle({ display: "block" });
351 |         }}
352 |         onMouseLeave={(e) => {
353 |           setStyle({ display: "none" });
354 |         }}
355 |       >
356 |         <div className={classes.avatar}>
357 |           <Avatar
358 |             alt={values.userName}
359 |             src={values.userImg}
360 |             className={classes.purple}
361 |           />
362 |         </div>
363 | 
364 |         <div className={classes.chat}>
365 |           <div>
366 |             <h6 className={classes.chatHeading}>{values.userName}</h6>
367 |             <p className={classes.chatTimming}>{time}</p>
368 |           </div>
369 | 
370 |           <div className={classes.chatText}>
371 |             {values.text.split("\n").map((txt, idx) => (
372 |               <div key={idx}>
373 |                 <Anchorme target="_blank" rel="noreferrer noopener">
374 |                   {txt}
375 |                 </Anchorme>
376 |               </div>
377 |             ))}
378 |           </div>
379 | 
380 |           <Grid item xs={12} md={12} style={{ paddingTop: "5px" }}>
381 |             {postImg ? (
382 |               <img
383 |                 src={postImg}
384 |                 alt="user"
385 |                 style={{ height: "30vh", width: "auto", borderRadius: "4px" }}
386 |               />
387 |             ) : null}
388 |           </Grid>
389 | 
390 |           <div style={{ paddingTop: "5px", display: "flex" }}>
391 |             {numLikes > 0 ? (
392 |               <div style={{ padding: "3px" }}>
393 |                 <IconButton
394 |                   component="span"
395 |                   onClick={likeClick}
396 |                   className={classes.countEmojiBtn}
397 |                   style={selectedLike}
398 |                 >
399 |                   <AiFillLike />
400 |                   <div style={{ paddingLeft: "2px" }}>{numLikes}</div>
401 |                 </IconButton>
402 |               </div>
403 |             ) : null}
404 | 
405 |             {numFire > 0 ? (
406 |               <div style={{ padding: "3px" }}>
407 |                 <IconButton
408 |                   component="span"
409 |                   onClick={fireClick}
410 |                   className={classes.countEmojiBtn}
411 |                   style={selectedFire}
412 |                 >
413 |                   <AiFillFire />
414 |                   <div style={{ paddingLeft: "2px" }}>{numFire}</div>
415 |                 </IconButton>
416 |               </div>
417 |             ) : null}
418 | 
419 |             {numHeart > 0 ? (
420 |               <div style={{ padding: "3px" }}>
421 |                 <IconButton
422 |                   component="span"
423 |                   onClick={heartClick}
424 |                   className={classes.countEmojiBtn}
425 |                   style={selectedHeart}
426 |                 >
427 |                   <AiFillHeart />
428 |                   <div style={{ paddingLeft: "2px" }}>{numHeart}</div>
429 |                 </IconButton>
430 |               </div>
431 |             ) : null}
432 |           </div>
433 |         </div>
434 | 
435 |         <div className={classes.emojiDiv} style={style}>
436 |           <div className={classes.emojiDivInner}>
437 |             <div className={classes.allEmoji}>
438 |               <IconButton
439 |                 component="span"
440 |                 style={{ padding: "4px" }}
441 |                 onClick={likeClick}
442 |               >
443 |                 <AiFillLike className={classes.emojiBtn} />
444 |               </IconButton>
445 |               <IconButton
446 |                 component="span"
447 |                 style={{ padding: "4px" }}
448 |                 onClick={fireClick}
449 |               >
450 |                 <AiFillFire className={classes.emojiBtn} />
451 |               </IconButton>
452 |               <IconButton
453 |                 component="span"
454 |                 style={{ padding: "4px" }}
455 |                 onClick={heartClick}
456 |               >
457 |                 <AiFillHeart className={classes.emojiBtn} />
458 |               </IconButton>
459 |               {uid === messegerUid ? (
460 |                 <IconButton
461 |                   component="span"
462 |                   style={{ padding: "4px" }}
463 |                   onClick={showDeleteModal}
464 |                 >
465 |                   <AiFillDelete
466 |                     className={classes.emojiBtn}
467 |                     color="#c3c3c3f0"
468 |                   />
469 |                 </IconButton>
470 |               ) : null}
471 |             </div>
472 |           </div>
473 |         </div>
474 |       </div>
475 |     </Grid>
476 |   );
477 | }
478 | 
479 | export default Messages;
480 | 


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