talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding data listening, user getching and using more of recoil

Browse Source
This commit is contained in:
Arjun Patel
2022-02-03 17:14:22 -08:00
parent 4b65d6cd68
commit 6a6f0f4aef
20 changed files with 302 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/models/conversation.ts
+15 -5
View File
@@ -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
membersInLiveRoom: string[] = [] as string[]; // all members in a live call right now for this convo
constructor(_createdByUserId: string, _name: string) {
constructor(
_createdByUserId: string,
_name: string,
_initialUsers: string[] = [] as string[]
) {
this.name = _name;
this.createdByUserId = _createdByUserId;
this.activeMembers = _initialUsers;
}
}
packages/common/services/conversationService.ts
+3 -1
View File
@@ -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
+2 -1
View File
@@ -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
+37
View File
@@ -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
+14 -4
View File
@@ -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
+2 -1
View File
@@ -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
+3 -29
View File
@@ -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">
<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>
{/* <LiveRoom conversation={} /> */}
</span>
{/* Today */}
packages/web/components/MainTabsOrPages/Header.tsx
+2 -1
View File
@@ -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
-105
View File
@@ -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
+65
View File
@@ -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
-333
View File
@@ -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
+10 -1
View File
@@ -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
+4 -3
View File
@@ -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
+36 -1
View File
@@ -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
+3 -3
View File
@@ -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
+71 -22
View File
@@ -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 =
change.doc.data() as ConversationMember;
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) {
const unsubConvo = onSnapshot(
doc(db, Collections.conversations, convoId),
(convoDoc) => {
const updatedConvo = convoDoc.data() as Conversation;
console.log("got convo data and subscribed");
console.log(updatedConvo);
// if (change.type === "added" && convoId) {
// const unsubConvo = onSnapshot(
// doc(db, Collections.conversations, convoId),
// (convoDoc) => {
// const updatedConvo = convoDoc.data() as Conversation;
// console.log("got convo data and subscribed");
// console.log(updatedConvo);
setRelevantConvos((prevMap) => {
return new Map(prevMap.set(convoId, updatedConvo));
});
}
);
// setRelevantConvos((prevMap) => {
// 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
+20 -3
View File
@@ -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({
// key: RecoilActions.CURR_PAGE_PATH, // unique ID (with respect to other atoms/selectors)
// default: "/s", // default value (aka initial value)
export const nirvanaUserDataAtom = atom<NirvanaUser | null>({
key: RecoilActions.ALL_COMPLETE_CONVERSATIONS,
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
+2
View File
@@ -54,3 +54,5 @@ enableIndexedDbPersistence(db).catch((err) => {
});
setPersistence(getAuth(), browserSessionPersistence);
export default app;
packages/web/tsconfig.json
+2 -1
View File
@@ -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
+8
View File
@@ -0,0 +1,8 @@
{
"folders": [
{
"path": "."
}
],
"settings": {}
}