separate talk and spaces activity count

Solar-Punk-Ltd · Nov 13, 2024 · e763f11 · e763f11
1 parent af7d6c5
commit e763f11
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 49 deletions.
diff --git a/src/GlobalStateContext.tsx b/src/GlobalStateContext.tsx
@@ -37,6 +37,8 @@ interface GlobalState {
   setNotes: React.Dispatch<React.SetStateAction<NoteItemProps[]>>;
   talkActivity: Map<string, number>;
   setTalkActivity: React.Dispatch<React.SetStateAction<Map<string, number>>>;
+  spacesActivity: Map<string, number>;
+  setSpacesActivity: React.Dispatch<React.SetStateAction<Map<string, number>>>;
 }
 
 const GlobalStateContext = createContext<GlobalState | undefined>(undefined);
@@ -85,6 +87,10 @@ export const GlobalStateProvider: React.FC<GlobalStateProviderProps> = ({
     new Map<string, number>()
   );
 
+  const [spacesActivity, setSpacesActivity] = useState<Map<string, number>>(
+    new Map<string, number>()
+  );
+
   useEffect(() => {
     localStorage.setItem("username", username);
     setMonogram(createMonogram(username));
@@ -142,6 +148,8 @@ export const GlobalStateProvider: React.FC<GlobalStateProviderProps> = ({
         setNotes,
         talkActivity,
         setTalkActivity,
+        spacesActivity,
+        setSpacesActivity,
       }}
     >
       {children}

diff --git a/src/MainRouter.tsx b/src/MainRouter.tsx
@@ -63,6 +63,7 @@ const MainRouter = (): ReactElement => {
     notes,
     setNotes,
     setTalkActivity,
+    setSpacesActivity,
   } = useGlobalState();
   const [sessionsReference, setSessionsReference] = useState<string>("");
   const [isBeeRunning, setBeeRunning] = useState<boolean>(false);
@@ -316,7 +317,24 @@ const MainRouter = (): ReactElement => {
   }, [recentSessions]);
 
   const calcActivity = async () => {
-    const tmpActiveVisitors = new Map<string, number>();
+    if (loadedTalks) {
+      const tmpActiveVisitors = new Map<string, number>();
+      for (let i = 0; i < recentSessions.length; i++) {
+        const foundIx = loadedTalks.findIndex((talk) =>
+          talk.talkId.includes(recentSessions[i].id)
+        );
+        if (foundIx > -1) {
+          tmpActiveVisitors.set(
+            recentSessions[i].id,
+            loadedTalks[foundIx].nextIndex
+          );
+        }
+      }
+      setTalkActivity(tmpActiveVisitors);
+    }
+  };
+
+  const calcSapcesActivity = async () => {
     const spacesSessions = getSessionsByDay(sessions, "spaces");
     const spacesPromises: Promise<CommentsWithIndex>[] = [];
     const stamp = process.env.STAMP || DUMMY_STAMP;
@@ -336,38 +354,28 @@ const MainRouter = (): ReactElement => {
         );
       }
 
+      const tmpActivity = new Map<string, number>();
       await Promise.allSettled(spacesPromises).then((results) => {
         results.forEach((result, i) => {
           if (result.status === "fulfilled") {
-            tmpActiveVisitors.set(spacesSessions[i].id, result.value.nextIndex);
+            tmpActivity.set(spacesSessions[i].id, result.value.nextIndex);
           } else {
             console.log(`fetching user count of talks error: `, result.reason);
           }
         });
       });
-      setTalkActivity(tmpActiveVisitors);
+      setSpacesActivity(tmpActivity);
     } catch (error) {
       console.log("fetching user count of talks error: ", error);
     }
-
-    if (loadedTalks) {
-      for (let i = 0; i < recentSessions.length; i++) {
-        const foundIx = loadedTalks.findIndex((talk) =>
-          talk.talkId.includes(recentSessions[i].id)
-        );
-        if (foundIx > -1) {
-          tmpActiveVisitors.set(
-            recentSessions[i].id,
-            loadedTalks[foundIx].nextIndex
-          );
-        }
-      }
-      setTalkActivity(tmpActiveVisitors);
-    }
   };
 
   useEffect(() => {
     calcActivity();
+  }, [loadedTalks]);
+
+  useEffect(() => {
+    calcSapcesActivity();
   }, [recentSessions]);
 
   const fetchNotes = async () => {

diff --git a/src/components/TalkItem/TalkItem.tsx b/src/components/TalkItem/TalkItem.tsx
@@ -1,32 +1,43 @@
-import React, { useEffect, useState } from 'react';
-import { CommentsWithIndex, UserComment } from '@solarpunkltd/comment-system';
-import { SwarmCommentSystem } from '@solarpunkltd/comment-system-ui';
+import React, { useEffect, useState } from "react";
+import { CommentsWithIndex, UserComment } from "@solarpunkltd/comment-system";
+import { SwarmCommentSystem } from "@solarpunkltd/comment-system-ui";
 
-import { useGlobalState } from '../../GlobalStateContext';
-import { Session } from '../../types/session';
-import { TalkComments } from '../../types/talkComment';
-import { getTopic } from '../../utils/bee';
+import { useGlobalState } from "../../GlobalStateContext";
+import { Session } from "../../types/session";
+import { TalkComments } from "../../types/talkComment";
+import { getTopic } from "../../utils/bee";
 import {
+  CATEGORIES,
   DUMMY_STAMP,
   MAX_CHARACTER_COUNT,
   MAX_COMMENTS_LOADED,
   MAX_PRELOADED_TALKS,
   STAGES_MAP,
-} from '../../utils/constants';
-import { dateToTime, getSigner, getWallet } from '../../utils/helpers';
-import AgendaItem from '../AgendaItem/AgendaItem';
+} from "../../utils/constants";
+import { dateToTime, getSigner, getWallet } from "../../utils/helpers";
+import AgendaItem from "../AgendaItem/AgendaItem";
 
-import './TalkItem.scss';
+import "./TalkItem.scss";
 
 interface TalkItemProps {
   session: Session;
   isSpacesTalk: boolean;
 }
 
 const TalkItem: React.FC<TalkItemProps> = ({ session, isSpacesTalk }) => {
-  const { username, loadedTalks, setLoadedTalks, talkActivity, setTalkActivity, isContentFilterEnabled } =
-    useGlobalState();
-  const [comments, setComments] = useState<CommentsWithIndex | undefined>(undefined);
+  const {
+    username,
+    loadedTalks,
+    setLoadedTalks,
+    talkActivity,
+    setTalkActivity,
+    spacesActivity,
+    setSpacesActivity,
+    isContentFilterEnabled,
+  } = useGlobalState();
+  const [comments, setComments] = useState<CommentsWithIndex | undefined>(
+    undefined
+  );
   const [loading, setLoading] = useState<boolean>(true);
 
   const rawTalkTopic = getTopic(session.id, true);
@@ -35,7 +46,11 @@ const TalkItem: React.FC<TalkItemProps> = ({ session, isSpacesTalk }) => {
 
   // update the loaded talk comments with the newly read/written comment
   // if the talk is not found, then replace the oldest talk with the new one
-  const updateTalks = (newComments: UserComment[], isHistory: boolean, next: number | undefined) => {
+  const updateTalks = (
+    newComments: UserComment[],
+    isHistory: boolean,
+    next: number | undefined
+  ) => {
     let updatedComments: UserComment[] = [];
     if (isHistory) {
       updatedComments = [...newComments, ...(comments?.comments || [])];
@@ -45,7 +60,9 @@ const TalkItem: React.FC<TalkItemProps> = ({ session, isSpacesTalk }) => {
     const newLoadedTalks = [...(loadedTalks || [])];
     const nextIx = next === undefined ? 0 : next;
     if (loadedTalks && loadedTalks.length > 0) {
-      const foundIx = loadedTalks.findIndex((talk) => talk.talkId.includes(session.id));
+      const foundIx = loadedTalks.findIndex((talk) =>
+        talk.talkId.includes(session.id)
+      );
 
       // update the already loaded talk
       if (foundIx > -1) {
@@ -71,11 +88,18 @@ const TalkItem: React.FC<TalkItemProps> = ({ session, isSpacesTalk }) => {
     setLoadedTalks(newLoadedTalks);
   };
 
-  const handleOnComment = (newComment: UserComment, next: number | undefined) => {
+  const handleOnComment = (
+    newComment: UserComment,
+    next: number | undefined
+  ) => {
     updateTalks([newComment], false, next);
   };
 
-  const handleOnRead = (newComments: UserComment[], isHistory: boolean, next: number | undefined) => {
+  const handleOnRead = (
+    newComments: UserComment[],
+    isHistory: boolean,
+    next: number | undefined
+  ) => {
     updateTalks(newComments, isHistory, next);
   };
 
@@ -97,12 +121,25 @@ const TalkItem: React.FC<TalkItemProps> = ({ session, isSpacesTalk }) => {
   useEffect(() => {
     if (loadedTalks) {
       // update active visitors of the talk
-      const tmpActiveVisitors = new Map(talkActivity);
-      const foundIx = loadedTalks.findIndex((talk) => talk.talkId.includes(session.id));
+      let tmpActivity: Map<string, number>;
+      const isSpacesTalk = CATEGORIES.find((c) => c === session.id);
+      if (!isSpacesTalk) {
+        tmpActivity = new Map(talkActivity);
+      } else {
+        tmpActivity = new Map(spacesActivity);
+      }
+      const foundIx = loadedTalks.findIndex((talk) =>
+        talk.talkId.includes(session.id)
+      );
       if (foundIx > -1) {
-        tmpActiveVisitors.set(session.id, loadedTalks[foundIx].nextIndex);
+        tmpActivity.set(session.id, loadedTalks[foundIx].nextIndex);
+      }
+
+      if (!isSpacesTalk) {
+        setTalkActivity(tmpActivity);
+      } else {
+        setSpacesActivity(tmpActivity);
       }
-      setTalkActivity(tmpActiveVisitors);
     }
   }, [comments]);
 
@@ -118,8 +155,8 @@ const TalkItem: React.FC<TalkItemProps> = ({ session, isSpacesTalk }) => {
           category={session.track}
           roomId={session.slot_roomId}
           liked={session.liked}
-          paddingRight={'16px'}
-          stage={STAGES_MAP.get(session.slot_roomId || '') || ''}
+          paddingRight={"16px"}
+          stage={STAGES_MAP.get(session.slot_roomId || "") || ""}
           commentVersion={true}
           isSpacesTalk={isSpacesTalk}
         />

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
@@ -14,8 +14,8 @@ interface HomePageProps {
 }
 
 const HomePage: React.FC<HomePageProps> = ({ withGamification }) => {
-  const { points, talkActivity } = useGlobalState();
-  const activity = talkActivity.get(LOBBY_TITLE) || 0;
+  const { points, spacesActivity } = useGlobalState();
+  const lobbyActivity = spacesActivity.get(LOBBY_TITLE) || 0;
   return (
     <div className="home-page">
       <div className="home-page__background">
@@ -28,15 +28,15 @@ const HomePage: React.FC<HomePageProps> = ({ withGamification }) => {
         <DevConMainBox
           title="Devcon buzz space"
           content="Share your thoughts, chat with anyone without moderation, and collect your reward."
-          showActiveVisitors={activity > 0}
-          activeVisitors={activity}
+          showActiveVisitors={lobbyActivity > 0}
+          activeVisitors={lobbyActivity}
           bordered={true}
         />
         <RecentSessions />
         <Spaces
           list={CATEGORIES.map((c) => ({
             topic: c,
-            userCount: talkActivity.get(c) || 0,
+            userCount: spacesActivity.get(c) || 0,
           }))}
         />
       </div>

diff --git a/src/pages/SpacesPage/SpacesPage.tsx b/src/pages/SpacesPage/SpacesPage.tsx
@@ -9,7 +9,7 @@ import { useNavigate } from "react-router-dom";
 import { ROUTES } from "../../utils/constants";
 
 const SpacesPage: React.FC = () => {
-  const { talkActivity } = useGlobalState();
+  const { spacesActivity } = useGlobalState();
   const navigate = useNavigate();
 
   return (
@@ -30,7 +30,7 @@ const SpacesPage: React.FC = () => {
           <div key={c} onClick={() => navigate(`${ROUTES.TALKS}/${c}`)}>
             <SpacesItem
               title={c}
-              numberOfActiveUsers={talkActivity.get(c) || 0}
+              numberOfActiveUsers={spacesActivity.get(c) || 0}
             />
           </div>
         ))}