necessarry ui changes

Abhishree881 · Mar 31, 2024 · 6597002 · 6597002
1 parent 52ac5e5
commit 6597002
Show file tree

Hide file tree

Showing 22 changed files with 8,454 additions and 7,788 deletions.
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
@@ -1,11 +1,11 @@
-favicon.ico,1680665683796,206857ef04e7d45a480b32635bb0b1ffafad3522482ab9666f43e1c611e1f56b
+favicon.ico,1711903957684,9058557412cf21f3d51b239d3fb05055e716d0c26639e7628a3e4bb6e7ec6d16
 sample.txt,1681812605904,184accb13c7bd90742b95cb6be7ab47c30a1da2cb93e7c765e30be0b583837a1
-asset-manifest.json,1711553480334,8df9b51365c3d64e54d80784726112922f0c847cde6bffb03abcebd7c884586a
-index.html,1711553480334,886ef8c926e93602f4f93546c15e2a103b751b30638487995ae67164ed0704ae
-static/css/main.c611708e.css,1711553480337,bf94b15f8bde91ee057ee150d4ed83a96f9b9b4f54b8b4ccbee9fcbebb83b77c
-static/css/main.c611708e.css.map,1711553480346,0ed8e4ce58c19a26dddb8aaf374e5e9aa72fedfd1aeac60f092479033dafeb90
-static/js/main.5f6961ae.js.LICENSE.txt,1711553480336,cce791bed207d58fc5d5ba439fa30310eae92e4cb4816a67f8c656fc360c5317
-static/js/main.5f6961ae.js,1711553480337,6821caf45494e447f0f86216d796b81f3831d8209580cfd92af19eb0718504af
-static/media/loginbg.9e4671b921166de88b53.jpg,1711553480337,67c6bb3f7e3911de4e7f487c4beaa6bd1bc6b5c05d6f3cc7641cd39ff5cd3d89
-static/media/statsbg.70535a24d8579f1c7069.jpg,1711553480338,14d3dd296bb92e906f03681111c630f475d116798c2c25985a73f437f78a1b3b
-static/js/main.5f6961ae.js.map,1711553480348,99aa6afb42daf02cc6f540db919e32e167aae31bac1b70e72860eb9afec87c53
+asset-manifest.json,1711906335459,1b8de1799535fe34eec6669c3e2ad08388fa57948b7ab3a569546d5abff34377
+index.html,1711906335457,7b41d7a8a444ef754e146c56e380403ef025b8c420ef960d5483f750e47efab9
+static/js/main.69b67a9f.js.LICENSE.txt,1711906335475,cce791bed207d58fc5d5ba439fa30310eae92e4cb4816a67f8c656fc360c5317
+static/css/main.b091b910.css.map,1711906335482,ba6d0dfa868fffed58a8583bc6679ecbf4bdb88044283730de00fc955428cf6f
+static/css/main.b091b910.css,1711906335479,e50267f0b56a60385c14248f31e8ddcbeb172c793f0c3cc89d19358b19c51c8a
+static/media/chat.9b803c6c709d20a3ae8c.png,1711906335477,ba6314c395ddb8348ccc7167a0ab91dff458f81b2267bbf78f2ad3adcbd0dbf2
+static/js/main.69b67a9f.js,1711906335476,adccf367a3932782321bc1fc9354f8cd8631daf584f62ea4e751c9a56dd8e3c9
+static/media/statsbg.70535a24d8579f1c7069.jpg,1711906335477,14d3dd296bb92e906f03681111c630f475d116798c2c25985a73f437f78a1b3b
+static/js/main.69b67a9f.js.map,1711906335481,96908e6eb8eff49b6228bd07e14ae41d53ba7b5e0bcdc349af53efffe6b83b8d
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
@@ -0,0 +1,20 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_CHATAPPDBMS }}'
+          channelId: live
+          projectId: chatappdbms
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
@@ -0,0 +1,21 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+permissions:
+  checks: write
+  contents: read
+  pull-requests: write
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_CHATAPPDBMS }}'
+          projectId: chatappdbms
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,17 +7,19 @@
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.3.5",
+    "chart.js": "^4.2.1",
     "firebase": "^9.9.4",
     "react": "^18.0.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.0.0",
+    "react-icons": "^5.0.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-swal": "^4.0.0",
     "sass": "^1.54.8",
     "uuid": "^8.3.2",
-    "web-vitals": "^2.1.4",
-    "chart.js": "^4.2.1",
-    "react-chartjs-2": "^5.2.0"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -43,5 +45,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy" : "https://chithhibackend.onrender.com"
+  "proxy": "https://chithhibackend.onrender.com"
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/components/Chat.jsx b/src/components/Chat.jsx
@@ -1,44 +1,75 @@
-import React, { useContext } from "react";
+import React, { useContext, useState, useEffect } from "react";
 import Cam from "../img/cam.png";
 import Add from "../img/add.png";
 import More from "../img/more.png";
 import Messages from "./Messages";
 import Input from "./Input";
 import { useNavigate } from "react-router-dom";
 import { ChatContext } from "../context/ChatContext";
+import { isMobile } from "react-device-detect";
+import { IoMdArrowBack } from "react-icons/io";
 
-const Chat = () => {
+const Chat = ({ setIsSidebarOpen, setImageSrc, setIsOpen }) => {
+  const [mood, setMood] = useState();
+  const [api, setApi] = useState(false);
   const { data } = useContext(ChatContext);
   const navigate = useNavigate();
   const handleClick = () => {
     navigate("/stats");
   };
-
+  useEffect(() => {
+    // axios()
+    if (data?.user?.uid) {
+      getApiData();
+    }
+  }, [data]);
+  useEffect(() => {
+    if (api) {
+      getApiData();
+      setApi(false);
+    }
+  }, [api]);
+  const getApiData = async () => {
+    const response = await fetch(
+      `https://chitthi-abhi881.koyeb.app/mood/${data.user.uid}`
+    ).then((response) => response.json());
+    const arrayOfValues = Object.keys(response);
+    setMood(arrayOfValues[0]);
+  };
+  const handleBackClick = () => {
+    if (isMobile) {
+      setIsSidebarOpen(false);
+    }
+  };
   return (
     <div className="chat">
       <div className="chatInfo">
-        <span>{data.user?.displayName}</span>
-        <div className="chatIcons">
-          <button
-            style={{
-              cursor: "pointer",
-              backgroundColor: "#DDDDF7",
-              border: "none",
-              color: "#5D5B8D",
-              borderRadius: "5px",
-              padding: "5px 10px",
+        <div className="chatInfoTop">
+          {isMobile ? <IoMdArrowBack onClick={handleBackClick} /> : null}
+          <img
+            onClick={(e) => {
+              e.stopPropagation();
+              setImageSrc(data.user?.photoURL);
+              setIsOpen(true);
             }}
-            onClick={handleClick}
-          >
-            Mood
+            style={{ cursor: "pointer" }}
+            className="userImage"
+            src={data.user?.photoURL}
+            alt=""
+          />
+          <span>{data.user?.displayName}</span>
+        </div>
+        <div className="chatIcons">
+          <button onClick={handleClick}>
+            {mood ? <span>{mood}</span> : <span>Mood</span>}
           </button>
           {/* <img src={Cam} alt="" />
           <img src={Add} alt="" />
           <img src={More} alt="" /> */}
         </div>
       </div>
-      <Messages />
-      <Input />
+      <Messages setImageSrc={setImageSrc} setIsOpen={setIsOpen} />
+      <Input setApi={setApi} />
     </div>
   );
 };

diff --git a/src/components/Chats.jsx b/src/components/Chats.jsx
@@ -3,8 +3,9 @@ import React, { useContext, useEffect, useState } from "react";
 import { AuthContext } from "../context/AuthContext";
 import { ChatContext } from "../context/ChatContext";
 import { db } from "../firebase";
+import { isMobile } from "react-device-detect";
 
-const Chats = () => {
+const Chats = ({ setIsSidebarOpen, setImageSrc, setIsOpen }) => {
   const [chats, setChats] = useState([]);
 
   const { currentUser } = useContext(AuthContext);
@@ -25,6 +26,7 @@ const Chats = () => {
   }, [currentUser.uid]);
 
   const handleSelect = (u) => {
+    setIsSidebarOpen(true);
     dispatch({ type: "CHANGE_USER", payload: u });
   };
 
@@ -38,7 +40,15 @@ const Chats = () => {
             key={chat[0]}
             onClick={() => handleSelect(chat[1].userInfo)}
           >
-            <img src={chat[1].userInfo.photoURL} alt="" />
+            <img
+              onClick={(e) => {
+                e.stopPropagation();
+                setImageSrc(chat[1].userInfo.photoURL);
+                setIsOpen(true);
+              }}
+              src={chat[1].userInfo.photoURL}
+              alt=""
+            />
             <div className="userChatInfo">
               <span>{chat[1].userInfo.displayName}</span>
               <p>{chat[1].lastMessage?.text}</p>

diff --git a/src/components/Input.jsx b/src/components/Input.jsx
@@ -13,15 +13,78 @@ import {
 import { db, storage } from "../firebase";
 import { v4 as uuid } from "uuid";
 import { getDownloadURL, ref, uploadBytesResumable } from "firebase/storage";
+import { IoCloseSharp } from "react-icons/io5";
 
-const Input = () => {
+const Modal = ({
+  modal,
+  imageSrc,
+  setText,
+  handleKeyPress,
+  handleSend,
+  text,
+  onClose,
+}) => {
+  if (!modal) return null;
+  return (
+    <div className="modal-overlay">
+      <div className="modal-content">
+        <span className="close-modal" onClick={onClose}>
+          <IoCloseSharp style={{ fontSize: "20px" }} />
+        </span>
+        <img
+          style={{ borderRadius: "10px 10px 0px 0px" }}
+          src={imageSrc}
+          alt="Preview"
+        />
+        <div>
+          <input
+            type="text"
+            placeholder="Enter Caption"
+            onChange={(e) => setText(e.target.value)}
+            value={text}
+            onKeyPress={handleKeyPress}
+          />
+          <button style={{ borderRadius: "3px" }} onClick={handleSend}>
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Input = ({ setApi }) => {
   const [text, setText] = useState("");
   const [img, setImg] = useState(null);
-
+  const [modal, setModal] = useState(false);
   const { currentUser } = useContext(AuthContext);
   const { data } = useContext(ChatContext);
+  const [selectedImage, setSelectedImage] = useState(null);
+
+  const onClose = (e) => {
+    setModal(false);
+    setImg(null);
+    setSelectedImage(null);
+    setText("");
+  };
+
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    const reader = new FileReader();
+
+    reader.onloadend = () => {
+      setSelectedImage(reader.result);
+    };
+
+    if (file) {
+      reader.readAsDataURL(file);
+    }
+  };
 
   const handleSend = async () => {
+    setApi(true);
+    const textMessage = text;
+    setText("");
     if (img) {
       const storageRef = ref(storage, uuid());
 
@@ -36,7 +99,7 @@ const Input = () => {
             await updateDoc(doc(db, "chats", data.chatId), {
               messages: arrayUnion({
                 id: uuid(),
-                text,
+                text: textMessage,
                 senderId: currentUser.uid,
                 date: Timestamp.now(),
                 img: downloadURL,
@@ -49,39 +112,45 @@ const Input = () => {
       await updateDoc(doc(db, "chats", data.chatId), {
         messages: arrayUnion({
           id: uuid(),
-          text,
+          text: textMessage,
           senderId: currentUser.uid,
           date: Timestamp.now(),
         }),
       });
     }
-
+    setImg(null);
+    onClose();
     await updateDoc(doc(db, "userChats", currentUser.uid), {
       [data.chatId + ".lastMessage"]: {
-        text,
+        text: textMessage,
       },
       [data.chatId + ".date"]: serverTimestamp(),
     });
 
     await updateDoc(doc(db, "userChats", data.user.uid), {
       [data.chatId + ".lastMessage"]: {
-        text,
+        text: textMessage,
       },
       [data.chatId + ".date"]: serverTimestamp(),
     });
-
-    setText("");
-    setImg(null);
   };
 
   const handleKeyPress = (event) => {
     if (event.key === "Enter" && !event.shiftKey) {
       handleSend();
-      setText("");
     }
   };
   return (
     <div className="input">
+      <Modal
+        modal={modal}
+        imageSrc={selectedImage}
+        setText={setText}
+        handleSend={handleSend}
+        handleKeyPress={handleKeyPress}
+        text={text}
+        onClose={onClose}
+      />
       <input
         type="text"
         placeholder="Type something..."
@@ -95,7 +164,11 @@ const Input = () => {
           type="file"
           className="file-chat"
           id="file"
-          onChange={(e) => setImg(e.target.files[0])}
+          onChange={(e) => {
+            setImg(e.target.files[0]);
+            handleImageChange(e);
+            setModal(true);
+          }}
           accept="image/*"
         />
         <label htmlFor="file">