bug: fix registration process via email, and fix isOnline status

p6te · Dec 27, 2023 · b6ba4c4 · b6ba4c4
1 parent 73d173d
commit b6ba4c4
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 47 deletions.
diff --git a/src/ProtectedRoute.tsx b/src/ProtectedRoute.tsx
@@ -4,22 +4,26 @@ import { doc, setDoc } from "firebase/firestore";
 import { db } from "./firebaseConfig";
 import { ensureError } from "./utils/ensureError";
 import { Navigate } from "react-router-dom";
+import { ChatContext } from "./context/ChatContext";
+import { changeUser } from "./context/actionCreators";
 
 const ProtectedRoute: React.FC<PropsWithChildren> = ({ children }) => {
   const { loggedUser } = useContext(AuthContext);
+  const { dispatch } = useContext(ChatContext);
 
   const turnOnOnlineStatus = async () => {
     if (!loggedUser) {
       return null;
     }
+
     try {
-      await setDoc(
-        doc(db, "users", loggedUser.uid),
-        {
-          isOnline: true,
-        },
-        { merge: true }
-      );
+      await setDoc(doc(db, "users", loggedUser.uid), {
+        displayName: loggedUser.displayName,
+        email: loggedUser.email,
+        photoURL: loggedUser.photoURL,
+        uid: loggedUser.uid,
+        isOnline: true,
+      });
     } catch (err) {
       const error = ensureError(err);
       // TODO Send to error page
@@ -33,13 +37,13 @@ const ProtectedRoute: React.FC<PropsWithChildren> = ({ children }) => {
     }
 
     try {
-      await setDoc(
-        doc(db, "users", loggedUser.uid),
-        {
-          isOnline: false,
-        },
-        { merge: true }
-      );
+      await setDoc(doc(db, "users", loggedUser.uid), {
+        displayName: loggedUser.displayName,
+        email: loggedUser.email,
+        photoURL: loggedUser.photoURL,
+        uid: loggedUser.uid,
+        isOnline: false,
+      });
     } catch (err) {
       const error = ensureError(err);
       // TODO Send to error page
@@ -50,7 +54,10 @@ const ProtectedRoute: React.FC<PropsWithChildren> = ({ children }) => {
   useEffect(() => {
     const handleTabClose = (event: Event) => {
       event.preventDefault();
-      // turnOffOnlineStatus();
+      turnOffOnlineStatus();
+      dispatch(
+        changeUser({ displayName: "", isOnline: false, uid: "", photoURL: "" })
+      );
     };
 
     window.addEventListener("beforeunload", handleTabClose);
@@ -61,7 +68,7 @@ const ProtectedRoute: React.FC<PropsWithChildren> = ({ children }) => {
   }, []);
 
   useEffect(() => {
-    // turnOnOnlineStatus();
+    turnOnOnlineStatus();
   }, []);
 
   if (!loggedUser) {

diff --git a/src/assets/HidePasswordIcon.tsx b/src/assets/HidePasswordIcon.tsx
@@ -16,7 +16,7 @@ export default function HidePasswordIcon({ color, size }: Props) {
       fill="none"
       width={width}
       height={height}
-      viewBox={`0 0 ${width} ${height}`}
+      viewBox={`0 0 27 27`}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

diff --git a/src/assets/ShowPasswordIcon.tsx b/src/assets/ShowPasswordIcon.tsx
@@ -16,7 +16,7 @@ export default function ShowPasswordIcon({ color, size }: Props) {
       fill="none"
       width={width}
       height={height}
-      viewBox={`0 0 ${width} ${height}`}
+      viewBox={`0 0 27 27`}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

diff --git a/src/components/Chat/index.tsx b/src/components/Chat/index.tsx
@@ -3,17 +3,15 @@ import Input from "./ChatInput";
 import { Dispatch, SetStateAction, useContext } from "react";
 import { ChatContext } from "../../context/ChatContext";
 import { AvatarImage, ChatContainer, ChatMissing, TopSection } from "./styled";
-import User from "../common/User";
 import { Button } from "../common/Button/styled";
-import { Flexbox } from "../common/Flexbox";
 
 type Props = {
   setIsSearchOpen: Dispatch<SetStateAction<boolean>>;
   setIsLoading: Dispatch<SetStateAction<boolean>>;
 };
 export default function Chat({ setIsSearchOpen, setIsLoading }: Props) {
   const { state } = useContext(ChatContext);
-  const { displayName, isOnline, photoURL } = state.user;
+  const { displayName, photoURL } = state.user;
   return (
     <ChatContainer>
       {!state.chatId && (

diff --git a/src/components/Chat/styled.ts b/src/components/Chat/styled.ts
@@ -35,8 +35,8 @@ export const TopSection = styled.div`
 `;
 
 export const AvatarImage = styled.img`
-  width: 50px;
-  height: 50px;
+  width: 46px;
+  height: 46px;
   border-radius: 50%;
   object-fit: fill;
 `;
diff --git a/src/components/Sidebar/Chats/index.tsx b/src/components/Sidebar/Chats/index.tsx
@@ -37,7 +37,7 @@ type Props = {
 
 export default function Chats({ setErrorMessage, setIsLoading }: Props) {
   const [chats, setChats] = useState<((ChatUserData & UserInfo) | null)[]>([]);
-
+  console.log(chats);
   const { loggedUser } = useContext(AuthContext);
   const { dispatch, state } = useContext(ChatContext);
 
@@ -55,6 +55,8 @@ export default function Chats({ setErrorMessage, setIsLoading }: Props) {
     if (!loggedUser) {
       return;
     }
+    console.log(loggedUser.uid);
+
     try {
       onSnapshot(doc(db, "userChats", loggedUser.uid), (userChatsDb) => {
         if (!userChatsDb.exists()) {
@@ -63,6 +65,7 @@ export default function Chats({ setErrorMessage, setIsLoading }: Props) {
 
         const chatsData = Object.entries(userChatsDb.data());
 
+        console.log(chatsData);
         let randomUserChats: ((ChatUserData & UserInfo) | null)[] = [];
         chatsData.forEach((chatData) => {
           const [, chatUser] = chatData as [string, ChatUserData];
@@ -78,8 +81,13 @@ export default function Chats({ setErrorMessage, setIsLoading }: Props) {
               ...chatUser,
               ...userDbData,
             };
+            console.log(randomUserChats);
+            const filteredArray = randomUserChats.filter(
+              (ch) => ch?.userId !== nextChatUser.userId
+            );
+            console.log(filteredArray);
 
-            randomUserChats = [...randomUserChats, nextChatUser];
+            randomUserChats = [...filteredArray, nextChatUser];
             const sortedChats = randomUserChats.sort((a, b) => {
               if (b?.date?.seconds && a?.date?.seconds) {
                 return b?.date.seconds - a?.date.seconds;
@@ -90,6 +98,7 @@ export default function Chats({ setErrorMessage, setIsLoading }: Props) {
               }
               return 0;
             });
+            console.log(sortedChats);
             if (sortedChats[0]) {
               handleSelect({
                 displayName: sortedChats[0].displayName,

diff --git a/src/components/Sidebar/Footer/index.tsx b/src/components/Sidebar/Footer/index.tsx
@@ -1,21 +1,16 @@
-import Loading from "~/components/common/LoadingSpinner";
 import { FooterContainer, LogoutButton } from "./styled";
 import FirebaseAuthService from "~/firebaseAuthService";
 import { doc, setDoc } from "firebase/firestore";
 import { db } from "~/firebaseConfig";
-import {
-  Dispatch,
-  SetStateAction,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { Dispatch, SetStateAction, useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { AuthContext } from "~/context/AuthContext";
 import { ensureError } from "~/utils/ensureError";
 import { Button } from "~/components/common/Button/styled";
 import LogoutIcon from "~/assets/logoutIcon";
 import Spacer from "~/components/common/Spacer";
+import { ChatContext } from "~/context/ChatContext";
+import { changeUser } from "~/context/actionCreators";
 
 type Props = {
   setErrorMessage: (message: string) => void;
@@ -30,7 +25,7 @@ export default function Footer({
 }: Props) {
   const navigate = useNavigate();
   const { loggedUser, setLoggedUser } = useContext(AuthContext);
-
+  const { dispatch } = useContext(ChatContext);
   const handleLogout = async () => {
     try {
       setIsLoading(true);
@@ -46,6 +41,9 @@ export default function Footer({
 
       FirebaseAuthService.logoutUser();
       setLoggedUser(null);
+      dispatch(
+        changeUser({ displayName: "", isOnline: false, uid: "", photoURL: "" })
+      );
       navigate("/login");
     } catch (err) {
       const error = ensureError(err);

diff --git a/src/components/common/FormLayout/styled.ts b/src/components/common/FormLayout/styled.ts
@@ -13,9 +13,10 @@ export const Container = styled("div")`
     text-align: center;
   }
   h3 {
-    color: ${({ theme }) => theme.textPrimary};
+    color: ${({ theme }) => theme.primary};
     font-size: 1.4rem;
     font-weight: 400;
+    text-align: center;
   }
 
   p {

diff --git a/src/components/common/Input/styled.ts b/src/components/common/Input/styled.ts
@@ -56,6 +56,7 @@ export const StyledInput = styled("input").withConfig({
     font-weight: 600;
     padding: 0 6px;
     background-color: ${({ theme }) => theme.backgroundPrimary};
+    color: ${({ theme }) => theme.primary};
   }
 
   &:not(:focus) + span {

diff --git a/src/pages/Register/index.tsx b/src/pages/Register/index.tsx
@@ -63,8 +63,10 @@ function Register() {
 
     try {
       const userRes = await getDoc(doc(db, "users", user.uid));
+      console.log(userRes.data()?.displayName);
+      if (userRes.data()?.displayName) {
+        console.log("zwrot");
 
-      if (userRes.data()?.uid) {
         return;
       }
 
@@ -73,7 +75,7 @@ function Register() {
         displayName: displayName,
         photoURL: downloadURL,
       });
-
+      console.log(downloadURL);
       //create user on firestore
       await setDoc(doc(db, "users", user.uid), {
         uid: user.uid,
@@ -105,6 +107,7 @@ function Register() {
         values.email,
         values.password
       );
+      console.log(res.user.photoURL);
 
       const date = new Date().getTime();
       const storageRef = ref(storage, `avatars/${values.username + date}`);
@@ -113,14 +116,14 @@ function Register() {
         await uploadBytes(storageRef, avatar);
       }
 
-      getDownloadURL(avatar ? storageRef : ref(storage, "avatarIcon.png")).then(
-        async (downloadURL) => {
-          updateUserProfile(
-            res.user,
-            res.user.photoURL ? res.user.photoURL : downloadURL
-          );
-        }
-      );
+      await getDownloadURL(
+        avatar ? storageRef : ref(storage, "avatarIcon.png")
+      ).then(async (downloadURL) => {
+        await updateUserProfile(
+          res.user,
+          res.user.photoURL ? res.user.photoURL : downloadURL
+        );
+      });
       navigate("/");
     } catch (err) {
       const error = ensureError(err);
@@ -138,9 +141,9 @@ function Register() {
       setIsLoading(true);
       const response = await FirebaseAuthService.loginWithGoogle();
       if (response.user.photoURL) {
-        updateUserProfile(response.user, response.user.photoURL);
+        await updateUserProfile(response.user, response.user.photoURL);
       } else {
-        getDownloadURL(ref(storage, "avatarIcon.png")).then(
+        await getDownloadURL(ref(storage, "avatarIcon.png")).then(
           async (downloadURL) => {
             updateUserProfile(response.user, downloadURL);
           }