adding data listening, user getching and using more of recoil

packages/common/models/conversation.ts

@@ -6,16 +6,26 @@ export default class Conversation {
 
   name: string; // engineering, general, arjun, jacob and rachel...
 
+  lastActivityDate?: Timestamp; // caching this for purpose of saving on listeners
+
+  activeMembers: string[]; // userIds
+  membersInLiveRoom: string[] = [] as string[]; // all members in a live call right now for this convo
+
+  cachedAudioClips: AudioClip[] = [] as AudioClip[];
+  cachedDrawerItems: Link[] = [] as Link[];
+  tldrClips: AudioClip[] = [] as AudioClip[];
+
   createdDate: Timestamp = Timestamp.now();
   createdByUserId: string;
 
-  lastActivityDate?: Timestamp; // caching this for purpose of saving on listeners
+  constructor(
-
+    _createdByUserId: string,
-  membersInLiveRoom: string[] = [] as string[]; // all members in a live call right now for this convo
+    _name: string,
-
+    _initialUsers: string[] = [] as string[]
-  constructor(_createdByUserId: string, _name: string) {
+  ) {
     this.name = _name;
     this.createdByUserId = _createdByUserId;
+    this.activeMembers = _initialUsers;
   }
 }
 

packages/common/services/conversationService.ts

@@ -15,13 +15,15 @@ import Collections from "./collections";
 export default class ConversationService {
   private db: Firestore = getFirestore();
 
-  async test() {
+  async test(): Promise<boolean> {
     const docRef = doc(this.db, "test", "test");
     await setDoc(
       docRef,
       { hi: " hiii", lastUpdatedDate: serverTimestamp() },
       { merge: true }
     );
+
+    return false;
   }
 
   async createConversation(

packages/web/.eslintrc.json

@@ -8,7 +8,8 @@
   ],
   "rules": {
     // I suggest you add those two rules:
-    "@typescript-eslint/no-unused-vars": "warn",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["warn"],
     "@typescript-eslint/no-explicit-any": "error",
     "prefer-const": "error",
     "react-hooks/rules-of-hooks": "error",

packages/web/components/Conversations/LiveRoom.tsx

@@ -0,0 +1,37 @@
+import Conversation from "@nirvana/common/models/conversation";
+import { Avatar } from "antd";
+import { FaWalking } from "react-icons/fa";
+
+export default function LiveRoom(props: { conversation: Conversation }) {
+  return (
+    <span className="group relative flex flex-row items-center bg-slate-50 rounded-lg border p-5 animate-pulse">
+      <Avatar.Group
+        maxCount={3}
+        size={{ xs: 1000 }}
+        maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
+      >
+        <Avatar
+          src="https://joeschmoe.io/api/v1/random"
+          style={{ backgroundColor: "cyan" }}
+        />
+        <Avatar src="https://joeschmoe.io/api/v1/100" />
+        <Avatar src="https://joeschmoe.io/api/v1/2" />
+        <Avatar src="https://joeschmoe.io/api/v1/10" />
+        <Avatar src="https://joeschmoe.io/api/v1/8" />
+      </Avatar.Group>
+
+      <span className="text-md font-semibold ml-2 mr-10">Engineering</span>
+
+      <span className="text-xs text-slate-300 group-hover:invisible">
+        {"01:20"}
+      </span>
+
+      <span
+        className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200
+          absolute right-5 text-slate-50 group-hover:text-teal-600 text-lg transition-all -z-10 group-hover:z-10"
+      >
+        <FaWalking className="text-lg" />
+      </span>
+    </span>
+  );
+}

packages/web/components/FullPageExperiences/CreateConversation.tsx.tsx

@@ -12,10 +12,11 @@ import Conversation, {
   ConversationMemberRole,
   ConversationMemberState,
 } from "@nirvana/common/models/conversation";
-import { useAuth } from "../../contexts/authContext";
 import { conversationService } from "@nirvana/common/services";
 import { QueryRoutes, Routes } from "@nirvana/common/helpers/routes";
 import { useRouter } from "next/router";
+import { useRecoilState } from "recoil";
+import { useAuth } from "../../contexts/authContext";
 
 const searchDebounceMsTime = 3000;
 
@@ -91,7 +92,7 @@ export default function CreateConversation() {
   }, []);
 
   const selectUser = (addUser: User) => {
-    if (addUser.id == currUser.uid) {
+    if (addUser.id == currUser!.uid) {
       toast.error("You cannot add yourself, silly!");
       return;
     }
@@ -137,25 +138,34 @@ export default function CreateConversation() {
     }
 
     try {
-      const newConversation = new Conversation(currUser.uid, conversationName);
+      const arrActiveMembers: string[] = [] as string[];
 
       // create each conversation member based on the selected people
       const members = selectedUsers.map((selUser) => {
+        arrActiveMembers.push(selUser.id);
+
         return new ConversationMember(
           selUser.id,
           ConversationMemberState.default,
           ConversationMemberRole.member
         );
       });
+
       // add myself to this collection of members
       members.push(
         new ConversationMember(
-          currUser.uid,
+          currUser!.uid,
           ConversationMemberState.default,
           ConversationMemberRole.admin
         )
       );
 
+      const newConversation = new Conversation(
+        currUser!.uid,
+        conversationName,
+        arrActiveMembers
+      );
+
       console.log(members);
       console.log(newConversation);
 

packages/web/components/Layouts/LandingPageLayout.tsx

@@ -3,8 +3,9 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { FaAngleRight, FaGripHorizontal } from "react-icons/fa";
-import { useAuth } from "../../contexts/authContext";
+import { useRecoilState } from "recoil";
 import MainLogo from "../Logo/MainLogo";
+import { useAuth } from "../../contexts/authContext";
 
 enum LandingPageNavigation {
   product = "/",

packages/web/components/MainTabsOrPages/Conversations.tsx

@@ -14,6 +14,8 @@ import {
   FaAtlassian,
 } from "react-icons/fa";
 import { Routes } from "@nirvana/common/helpers/routes";
+import LiveRoom from "../Conversations/LiveRoom";
+import Conversation from "@nirvana/common/models/conversation";
 
 export default function Conversations() {
   const router = useRouter();
@@ -37,35 +39,7 @@ export default function Conversations() {
       {/* row of live room cards */}
       <span className="flex flex-row flex-wrap">
         {/* engineering liveroom */}
-        <span className="group relative flex flex-row items-center bg-slate-50 rounded-lg border p-5 animate-pulse">
+        {/* <LiveRoom conversation={} /> */}
-          <Avatar.Group
-            maxCount={3}
-            size={{ xs: 1000 }}
-            maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
-          >
-            <Avatar
-              src="https://joeschmoe.io/api/v1/random"
-              style={{ backgroundColor: "cyan" }}
-            />
-            <Avatar src="https://joeschmoe.io/api/v1/100" />
-            <Avatar src="https://joeschmoe.io/api/v1/2" />
-            <Avatar src="https://joeschmoe.io/api/v1/10" />
-            <Avatar src="https://joeschmoe.io/api/v1/8" />
-          </Avatar.Group>
-
-          <span className="text-md font-semibold ml-2 mr-10">Engineering</span>
-
-          <span className="text-xs text-slate-300 group-hover:invisible">
-            {"01:20"}
-          </span>
-
-          <span
-            className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200
-          absolute right-5 text-slate-50 group-hover:text-teal-600 text-lg transition-all -z-10 group-hover:z-10"
-          >
-            <FaWalking className="text-lg" />
-          </span>
-        </span>
       </span>
 
       {/* Today */}

packages/web/components/MainTabsOrPages/Header.tsx

@@ -10,10 +10,11 @@ import {
   FaHeadphones,
   FaMicrophoneAlt,
 } from "react-icons/fa";
-import { useAuth } from "../../contexts/authContext";
+import { useRecoilState } from "recoil";
 import { UserStatus } from "../../models/user";
 import MainLogo from "../Logo/MainLogo";
 import UserStatusBubble from "../UserDetails/UserStatusBubble";
+import { useAuth } from "../../contexts/authContext";
 
 export default function Header() {
   const { currUser } = useAuth();

packages/web/contexts/authContext.js

@@ -1,105 +0,0 @@
-import {
-  getAuth,
-  GoogleAuthProvider,
-  onAuthStateChanged,
-  signInWithPopup,
-  signOut,
-  User,
-} from "firebase/auth";
-import { useRouter } from "next/router";
-import React, { useContext, useEffect, useState } from "react";
-import toast from "react-hot-toast";
-import Loading from "../components/Loading";
-import firebase from "../services/firebaseService";
-import cookie from "js-cookie";
-
-const AuthContext = React.createContext(null);
-const googleProvider = new GoogleAuthProvider();
-
-const auth = getAuth();
-
-export function AuthProvider({ children }) {
-  const [currUser, setCurrUser] = useState();
-  const [loading, setLoading] = useState(true);
-
-  const router = useRouter();
-
-  useEffect(() => {
-    const unsubscribe = onAuthStateChanged(auth, async (user) => {
-      setLoading(true);
-
-      console.log("change in auth");
-      if (user) {
-        setCurrUser(user);
-
-        // set the token in the cookies for ssr verification
-        const token = await user.getIdToken();
-        // nookies.set(undefined, "token", token, { path: "/" });
-        cookie.set("auth", token);
-      } else {
-        // nookies.set(undefined, "token", "", { path: "/" });
-        cookie.remove("auth");
-
-        setCurrUser(null);
-      }
-
-      setLoading(false);
-    });
-
-    return unsubscribe;
-  }, []);
-
-  const signInGoogle = () => {
-    return signInWithPopup(auth, googleProvider)
-      .then((res) => {
-        // This gives you a Google Access Token. You can use it to access the Google API.
-        const credential = GoogleAuthProvider.credentialFromResult(res);
-
-        const token = credential.accessToken;
-        // The signed-in user info.
-        const user = res.user;
-
-        setCurrUser(user);
-
-        console.log(user);
-      })
-      .catch((error) => {
-        // Handle Errors here.
-        const errorCode = error.code;
-        const errorMessage = error.message;
-        // The email of the user's account used.
-        const email = error.email;
-        // The AuthCredential type that was used.
-        const credential = GoogleAuthProvider.credentialFromError(error);
-        console.log(error);
-        toast.error("something went wrong");
-      });
-  };
-
-  const logOut = async () => {
-    setLoading(true);
-
-    console.log("logging user out");
-
-    Promise.resolve(await signOut(auth));
-
-    router.push("/");
-  };
-
-  const value = {
-    currUser,
-    signInGoogle,
-    logOut,
-  };
-
-  return (
-    <AuthContext.Provider value={value}>
-      {!loading && children}
-    </AuthContext.Provider>
-  );
-}
-
-// custom hook to use the authUserContext and access currUser
-export function useAuth() {
-  return useContext(AuthContext);
-}

packages/web/contexts/authContext.tsx

@@ -0,0 +1,65 @@
+import {
+  getAuth,
+  GoogleAuthProvider,
+  onAuthStateChanged,
+  User as FirebaseUser,
+} from "firebase/auth";
+import { useRouter } from "next/router";
+import React, { useContext, useEffect, useState } from "react";
+import firebaseApp from "../services/firebaseService";
+import cookie from "js-cookie";
+import { useSetRecoilState } from "recoil";
+
+interface ContextInterface {
+  currUser: FirebaseUser | null;
+}
+
+const AuthContext = React.createContext<ContextInterface>(
+  {} as ContextInterface
+);
+const auth = getAuth(firebaseApp);
+
+export function AuthProvider({ children }) {
+  const [currUser, setCurrUser] = useState<FirebaseUser | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, async (user: FirebaseUser) => {
+      setLoading(true);
+
+      console.log("change in auth");
+
+      if (user) {
+        setCurrUser(user);
+
+        // set the token in the cookies for ssr verification
+        const token = await user.getIdToken();
+        // nookies.set(undefined, "token", token, { path: "/" });
+        cookie.set("auth", token);
+      } else {
+        // nookies.set(undefined, "token", "", { path: "/" });
+        cookie.remove("auth");
+
+        setCurrUser(null);
+      }
+
+      setLoading(false);
+    });
+
+    return unsubscribe;
+  }, []);
+
+  const value: ContextInterface = {
+    currUser,
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {!loading && children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}

packages/web/contexts/teamDashboardContext.tsx

@@ -1,333 +0,0 @@
-import {
-  collection,
-  doc,
-  getFirestore,
-  onSnapshot,
-  orderBy,
-  query,
-  Unsubscribe,
-  where,
-} from "firebase/firestore";
-import { useRouter } from "next/router";
-import React, { useContext, useEffect, useState } from "react";
-import toast from "react-hot-toast";
-import Loading from "../components/Loading";
-import { compareStatus } from "../helpers/userHelper";
-import { Message } from "../models/message";
-import Room from "../models/room";
-import { Team } from "../models/team";
-import { TeamMember, TeamMemberStatus } from "../models/teamMember";
-import { User } from "../models/user";
-import { Collections } from "../services/collections";
-import TeamService from "../services/teamService";
-import UserService from "../services/userService";
-import { useAuth } from "./authContext";
-
-interface TeamDashboardContextInterface {
-  team: Team;
-  teamMembers: TeamMember[];
-  userTeamMember: TeamMember;
-
-  user: User; // REALTIME - 1
-
-  messagesByTeamMate: Map<string, Message[]>; // REALTIME: string of teammate userid and array of messages - 1
-  allMessages: Message[]; // REALTIME: 1
-
-  teamUsers: User[]; // REALTIME teammates - n team members => n listeners
-  teamUsersMap: {}; // map for easier getting teammate data
-}
-
-const TeamDashboardContext =
-  React.createContext<TeamDashboardContextInterface | null>(null);
-
-// date of yesterday to check if messages are after yesterday
-const yesterday = new Date();
-yesterday.setDate(yesterday.getDate() - 1);
-
-const teamService = new TeamService();
-const userService = new UserService();
-const db = getFirestore();
-
-export function TeamDashboardContextProvider({ children }) {
-  const { currUser } = useAuth();
-
-  const router = useRouter();
-
-  const [loading, setLoading] = useState<Boolean>(true);
-
-  const { teamid } = router.query;
-
-  // this context can only be used if it's a specific route: '/teams'
-  if (!teamid) {
-    router.push("/teams");
-  }
-
-  // update this "global" object to send to children
-  const [value, setValue] = useState<TeamDashboardContextInterface>(
-    {} as TeamDashboardContextInterface
-  );
-
-  // all main data
-  useEffect(() => {
-    var userListener: Unsubscribe;
-    var unsubs: Unsubscribe[] = [] as Unsubscribe[];
-
-    (async function () {
-      try {
-        // SECTION: authentication
-        if (!currUser) {
-          console.log(
-            "not authenticated...routing from dashboard to teams home"
-          );
-          router.push("/teams/login");
-          return;
-        }
-
-        // SECTION: get user details : realtime
-        const returnedUser = await userService.getUser(currUser.uid);
-
-        const docRef = doc(db, Collections.users, currUser.uid);
-
-        userListener = onSnapshot(docRef, (doc) => {
-          const updatedUser = doc.data() as User;
-
-          setValue((prevValue) => ({ ...prevValue, user: updatedUser }));
-        });
-
-        setValue((prevValue) => ({ ...prevValue, user: returnedUser }));
-
-        // SECTION: getting team data and team member information
-        if (typeof teamid !== "string") {
-          console.log("not a proper query with teamid");
-          router.push("/teams");
-          return;
-        }
-
-        // check if the team is a valid team and that user is in it
-        const returnedTeam = await teamService.getTeam(teamid);
-        if (!returnedTeam) {
-          console.log("team doesnt exist");
-          router.push("/teams");
-          return;
-        }
-        setValue((prevValue) => ({ ...prevValue, team: returnedTeam }));
-
-        const returnedTeamMember = await teamService.getTeamMemberByUserId(
-          teamid,
-          currUser.uid
-        );
-
-        //  if you are not a member of this team, then get out of here
-        //  but have to check through email invite and userid
-        if (
-          returnedTeamMember &&
-          returnedTeamMember.status == TeamMemberStatus.deleted
-        ) {
-          console.log("user was deleted from team");
-          router.push("/teams");
-          return;
-        }
-
-        // if there is no team member through user id,
-        // give him last chance and see if he was invited
-        if (!returnedTeamMember) {
-          const invitedTeamMember =
-            await teamService.getTeamMemberByEmailInvite(
-              teamid,
-              currUser.email
-            );
-
-          if (!invitedTeamMember) {
-            console.log("not invited to team either");
-            router.push("/teams");
-            return;
-          }
-
-          // if I am new to the team but I was invited, and this is my first time, then activate me into the team
-          // and proceed with showing the dashboard stuff
-
-          invitedTeamMember.status = TeamMemberStatus.activated;
-          invitedTeamMember.userId = currUser.uid;
-          await teamService.updateTeamMember(invitedTeamMember);
-
-          setValue((prevValue) => ({
-            ...prevValue,
-            userTeamMember: invitedTeamMember,
-          }));
-        } else {
-          setValue((prevValue) => ({
-            ...prevValue,
-            userTeamMember: returnedTeamMember,
-          }));
-        }
-
-        // SECTION: get all teammembers for team, will have listeners in other subcomponents
-        var teamMembers: TeamMember[] =
-          await teamService.getTeamMembersByTeamId(returnedTeam.id);
-
-        teamMembers = teamMembers.filter(
-          (element) => element.userId != currUser.uid
-        );
-
-        // listeners for all teammates' status
-        if (teamMembers) {
-          teamMembers.map((tmember) => {
-            if (tmember.status == TeamMemberStatus.activated) {
-              const docRef = doc(db, Collections.users, tmember.userId);
-
-              const unsub = onSnapshot(docRef, (doc) => {
-                const updatedteamMateUser = doc.data() as User;
-
-                // update map of team member users
-                setTeamUsersMap((prevMap) => ({
-                  ...prevMap,
-                  [updatedteamMateUser.id]: updatedteamMateUser,
-                }));
-
-                // update array of team member users
-                setTeamUsers((prevTeamUsers) => {
-                  const newTeamUsers = prevTeamUsers.filter(
-                    (tm) => tm.id != updatedteamMateUser.id
-                  );
-                  newTeamUsers.push(updatedteamMateUser);
-
-                  // order users by status
-                  setTeamUsers(newTeamUsers.sort(compareStatus));
-
-                  return newTeamUsers;
-                });
-              });
-
-              unsubs.push(unsub);
-            }
-
-            return;
-          });
-        }
-
-        setValue((prevValue) => ({ ...prevValue, teamMembers }));
-      } catch (error) {
-        console.log(error);
-        router.push("/");
-      }
-
-      setLoading(false);
-    })();
-
-    return () => {
-      if (userListener) {
-        userListener();
-      }
-
-      unsubs.forEach((unsub) => {
-        unsub();
-      });
-    };
-  }, []);
-
-  const [teamUsers, setTeamUsers] = useState<User[]>([]);
-  const [teamUsersMap, setTeamUsersMap] = useState<{}>({});
-
-  const [allMessages, setAllMessages] = useState<Message[]>([]);
-  const [messagesByTeamMate, setMessagesByTeamMate] = useState<
-    Map<string, Message[]>
-  >(new Map());
-
-  // SECTION: REALTIME listener for all incoming messages
-  useEffect(() => {
-    // todo for new messages, change document.title
-
-    if (!currUser) {
-      console.log("not authenticated...routing from dashboard to teams home");
-      router.push("/teams/login");
-      return;
-    }
-
-    /**
-     * QUERY:
-     * - last 24 hours only
-     * - any message that I have sent or received: relevant messages
-     * - order by: date desc
-     */
-    const q = query(
-      collection(db, Collections.audioMessages),
-      where("senderReceiver", "array-contains", currUser.uid),
-      where("createdDate", ">", yesterday),
-      orderBy("createdDate", "asc")
-    );
-
-    // return unsubscribe
-    return onSnapshot(q, (snapshot) => {
-      snapshot.docChanges().forEach((change) => {
-        // no need to process results again, just append to arrays instead
-        // messages won't be deleted or updated really
-        if (change.type === "added") {
-          let newMessage = change.doc.data() as Message;
-
-          // update all messages array
-          setAllMessages((prevMessages) => [newMessage, ...prevMessages]);
-
-          // update map of teammate to relevant messages
-          setMessagesByTeamMate((prevMap) => {
-            // if the map contains the teammate userid already, then cool, just unshift to that array
-            var newMap: Map<string, Message[]> = new Map(
-              prevMap.set("dummy", [] as Message[])
-            );
-            if (prevMap.has(newMessage.receiverUserId)) {
-              newMap.set(newMessage.receiverUserId, [
-                newMessage,
-                ...prevMap.get(newMessage.receiverUserId),
-              ]);
-            } // if this is the first relevant message linked to this receiver,
-            //then create a new array
-            else {
-              newMap.set(newMessage.receiverUserId, [newMessage]);
-            }
-
-            // todo: if I am the receiver, still want to put it in the right conversation
-            if (newMessage.receiverUserId == currUser.uid) {
-              if (prevMap.has(newMessage.senderUserId)) {
-                newMap.set(newMessage.senderUserId, [
-                  newMessage,
-                  ...prevMap.get(newMessage.senderUserId),
-                ]);
-              } else {
-                newMap.set(newMessage.senderUserId, [newMessage]);
-              }
-            }
-
-            return newMap;
-          });
-        }
-        if (change.type === "modified") {
-          console.log("Modified message: ", change.doc.data());
-        }
-        if (change.type === "removed") {
-          console.log("Removed message: ", change.doc.data());
-        }
-      });
-    });
-  }, []);
-
-  if (loading) {
-    return <Loading />;
-  }
-
-  const transformedValue = {
-    ...value,
-    allMessages,
-    messagesByTeamMate,
-    teamUsers,
-    teamUsersMap,
-  };
-
-  return (
-    <TeamDashboardContext.Provider value={transformedValue}>
-      {children}
-    </TeamDashboardContext.Provider>
-  );
-}
-
-export function useTeamDashboardContext() {
-  return useContext(TeamDashboardContext);
-}

packages/web/pages/s/index.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import React, { ReactElement } from "react";
+import React, { ReactElement, useEffect } from "react";
 import Conversations from "../../components/MainTabsOrPages/Conversations";
 import Done from "../../components/MainTabsOrPages/Done";
 import Drawer from "../../components/MainTabsOrPages/Drawer";
@@ -14,9 +14,18 @@ import SearchResults from "../../components/FullPageExperiences/SearchResults";
 import { QueryRoutes, Routes } from "@nirvana/common/helpers/routes";
 import ViewConvo from "../../components/MainTabsOrPages/ViewConvo";
 import MainRecoilDataHandler from "../../recoil/MainRecoilDataHandler";
+import { useAuth } from "../../contexts/authContext";
 
 export default function Me() {
   // TODO: if not authenticated, take user away
+  const { currUser } = useAuth();
+  useEffect(() => {
+    if (!currUser) {
+      console.log("not authenticated...routing from dashboard to teams home");
+      router.push("/teams/login");
+      return;
+    }
+  }, []);
 
   // figure out what content to render from here
   const router = useRouter();

packages/web/pages/teams/dashboard.tsx

@@ -29,10 +29,10 @@ import { KeyCode } from "../../globals/keycode";
 
 import { useRouter } from "next/router";
 import { useEffect } from "react";
-
+import { useRecoilState } from "recoil";
 import { useAuth } from "../../contexts/authContext";
 
-let testFriends = [
+const testFriends = [
   {
     name: "Liam",
     role: "engineer",
@@ -72,7 +72,8 @@ let testFriends = [
 ];
 
 export default function Dashboard() {
-  const { currUser, logOut } = useAuth();
+  const { currUser } = useAuth();
+
   const router = useRouter();
 
   useEffect(() => {

packages/web/pages/teams/login.tsx

@@ -1,14 +1,49 @@
+import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
+import toast from "react-hot-toast";
 import { FaArrowLeft } from "react-icons/fa";
 import { FcGoogle } from "react-icons/fc";
+import { useRecoilState } from "recoil";
 import MainLogo from "../../components/Logo/MainLogo";
 import { useAuth } from "../../contexts/authContext";
 
+const googleProvider = new GoogleAuthProvider();
+const auth = getAuth();
+
 export default function Login() {
-  const { currUser, signInGoogle } = useAuth();
+  const { currUser } = useAuth();
+
   const router = useRouter();
 
+  const signInGoogle = () => {
+    return signInWithPopup(auth, googleProvider)
+      .then((res) => {
+        // This gives you a Google Access Token. You can use it to access the Google API.
+        const credential = GoogleAuthProvider.credentialFromResult(res);
+
+        const token = credential?.accessToken;
+        // The signed-in user info.
+        const user = res.user;
+
+        // todo : don't need this?
+        // setCurrUser(new UserData(user));
+
+        console.log(user);
+      })
+      .catch((error) => {
+        // Handle Errors here.
+        const errorCode = error.code;
+        const errorMessage = error.message;
+        // The email of the user's account used.
+        const email = error.email;
+        // The AuthCredential type that was used.
+        const credential = GoogleAuthProvider.credentialFromError(error);
+        console.log(error);
+        toast.error("something went wrong");
+      });
+  };
+
   useEffect(() => {
     // if auth, go to dashboard
     if (currUser) {

packages/web/pages/teams/profile.tsx

@@ -1,13 +1,13 @@
 import { Divider } from "antd";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { useAuth } from "../../contexts/authContext";
 import { User } from "../../models/user";
 import UserService from "../../services/userService";
-import Image from "next/image";
+import { useAuth } from "../../contexts/authContext";
 
 export default function Profile() {
-  const { currUser, logOut } = useAuth();
+  const { currUser } = useAuth();
+
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
 

packages/web/recoil/MainRecoilDataHandler.tsx

@@ -1,6 +1,7 @@
 import Conversation, {
   ConversationMember,
 } from "@nirvana/common/models/conversation";
+import { User } from "@nirvana/common/models/user";
 import Collections from "@nirvana/common/services/collections";
 import {
   collection,
@@ -14,14 +15,19 @@ import {
 } from "firebase/firestore";
 import { useEffect } from "react";
 import toast from "react-hot-toast";
-import { useRecoilState } from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 import { useAuth } from "../contexts/authContext";
-import { allRelevantConversations, allUsersConversations } from "./main";
+import {
+  allRelevantConversations,
+  allUsersConversations,
+  nirvanaUserDataAtom,
+} from "./main";
 
 const db = getFirestore();
 
 export default function MainRecoilDataHandler() {
   const { currUser } = useAuth();
+  const [nirvanaUser, setNirvanaUser] = useRecoilState(nirvanaUserDataAtom);
 
   const [userConvos, setUserConvos] = useRecoilState(allUsersConversations);
   const [relevantConvos, setRelevantConvos] = useRecoilState(
@@ -31,23 +37,20 @@ export default function MainRecoilDataHandler() {
   useEffect(() => {
     const unsubs: Unsubscribe[] = [] as Unsubscribe[];
 
-    const convoSubs: Unsubscribe[] = [] as Unsubscribe[];
-
     (async function () {
       try {
         // get all conversations that I am a part of
         const q = query(
           collectionGroup(db, Collections.conversationMembers),
-          where("id", "==", currUser.uid)
+          where("id", "==", currUser?.uid)
         );
         const unsubscribeUserConvoMember = onSnapshot(q, (snapshot) => {
           snapshot.docChanges().forEach((change) => {
-            if (change.type === "added" || change.type === "modified") {
+            const newConvoMember: ConversationMember =
-              const newConvoMember: ConversationMember =
+              change.doc.data() as ConversationMember;
-                change.doc.data() as ConversationMember;
+            newConvoMember.id = change.doc.id;
-              newConvoMember.id = change.doc.id;
-              console.log("modified convo member found: ", change.doc.data());
 
+            if (change.type === "added" || change.type === "modified") {
               // update all user convo associations
               setUserConvos((prevMap) => {
                 return new Map(prevMap.set(newConvoMember.id, newConvoMember));
@@ -56,25 +59,26 @@ export default function MainRecoilDataHandler() {
               // if we are adding a new convo relevant to me, then start a convo listener for this convo
               const convoId = change.doc.ref.parent.parent?.id;
 
+              // find if this is a done, later, or inbox, and only add listeners accordingly
               console.log(convoId);
-              if (change.type === "added" && convoId) {
+              // if (change.type === "added" && convoId) {
-                const unsubConvo = onSnapshot(
+              //   const unsubConvo = onSnapshot(
-                  doc(db, Collections.conversations, convoId),
+              //     doc(db, Collections.conversations, convoId),
-                  (convoDoc) => {
+              //     (convoDoc) => {
-                    const updatedConvo = convoDoc.data() as Conversation;
+              //       const updatedConvo = convoDoc.data() as Conversation;
-                    console.log("got convo data and subscribed");
+              //       console.log("got convo data and subscribed");
-                    console.log(updatedConvo);
+              //       console.log(updatedConvo);
 
-                    setRelevantConvos((prevMap) => {
+              //       setRelevantConvos((prevMap) => {
-                      return new Map(prevMap.set(convoId, updatedConvo));
+              //         return new Map(prevMap.set(convoId, updatedConvo));
-                    });
+              //       });
-                  }
+              //     }
-                );
+              //   );
 
-                // todo : remove specific listeners if they are no longer priority conversations
+              //   // todo : remove specific listeners if they are no longer priority conversations
 
-                unsubs.push(unsubConvo);
+              //   unsubs.push(unsubConvo);
-              }
+              // }
             }
             if (change.type === "removed") {
               console.log("Removed convo member: ", change.doc.data());
@@ -83,6 +87,51 @@ export default function MainRecoilDataHandler() {
         });
 
         unsubs.push(unsubscribeUserConvoMember);
+
+        // get my current user profile and stay updated to my status
+        const unsubUser = onSnapshot(
+          doc(db, Collections.users, currUser!.uid),
+          (doc) => {
+            const nirvanaUser = doc.data() as User;
+            setNirvanaUser(nirvanaUser);
+          }
+        );
+        unsubs.push(unsubUser);
+
+        // get every conversation where I am in the activeMembers list
+        const convoQuery = query(
+          collection(db, Collections.conversations),
+          where("activeMembers", "array-contains", currUser!.uid)
+        );
+        const unsubConvosListener = onSnapshot(convoQuery, (snapshot) => {
+          const arrayConvos: Conversation[] = [];
+          snapshot.docChanges().forEach((change) => {
+            const newOrUpdatedConvo: Conversation =
+              change.doc.data() as Conversation;
+            newOrUpdatedConvo.id = change.doc.id;
+
+            if (change.type === "added" || change.type === "modified") {
+              arrayConvos.push(newOrUpdatedConvo);
+            }
+            if (change.type === "removed") {
+              // todo: if convo was removed for me, then take out of array
+              // arrayConvos.filter()
+            }
+          });
+
+          // add to the main convos atom, by modifying the current map
+          setRelevantConvos((prevConvosMap) => {
+            const newMap = new Map(prevConvosMap);
+            arrayConvos.forEach((currconvo) => {
+              newMap.set(currconvo.id, currconvo);
+            });
+
+            console.log("updated convos: ", newMap);
+
+            return newMap;
+          });
+        });
+        unsubs.push(unsubConvosListener);
       } catch (error) {
         console.log(error);
         toast.error("Problem in retrieving data");

packages/web/recoil/main.tsx

@@ -1,21 +1,38 @@
+import { User as FirebaseUser } from "@firebase/auth";
 import Conversation, {
   ConversationMember,
   AudioClip,
   Link,
 } from "@nirvana/common/models/conversation";
+import { User as NirvanaUser } from "@nirvana/common/models/user";
 
 import { atom } from "recoil";
 
 export enum RecoilActions {
+  TEST = "TEST",
+
   CURR_PAGE_PATH = "CURR_PAGE_PATH",
+
   ALL_COMPLETE_CONVERSATIONS = "ALL_COMPLETE_CONVERSATIONS",
   ALL_USERS_CONVERSATION_RELATIONSHIPS = "ALL_USERS_CONVERSATION_RELATIONSHIPS",
   ALL_RELEVANT_CONVERSATIONS = "ALL_RELEVANT_CONVERSATIONS",
+
+  USER_DATA = "USER_DATA",
 }
 
-// export const currPagePath = atom({
+export const nirvanaUserDataAtom = atom<NirvanaUser | null>({
-//   key: RecoilActions.CURR_PAGE_PATH, // unique ID (with respect to other atoms/selectors)
+  key: RecoilActions.ALL_COMPLETE_CONVERSATIONS,
-//   default: "/s", // default value (aka initial value)
+  default: null,
+});
+
+// testing if we can import data in server side, but since it's next js we need firebase calls in client side
+// import { conversationService } from "@nirvana/common/services";
+
+// const getTest = (async () => await conversationService.test())();
+
+// export const test = atom({
+//   key: RecoilActions.TEST, // unique ID (with respect to other atoms/selectors)
+//   default: getTest, // default value (aka initial value)
 // });
 
 export class CompleteConversation {

packages/web/services/firebaseService.js

@@ -54,3 +54,5 @@ enableIndexedDbPersistence(db).catch((err) => {
 });
 
 setPersistence(getAuth(), browserSessionPersistence);
+
+export default app;

packages/web/tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "noUnusedLocals": false
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

workspace.code-workspace

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}