Develop

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}

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,8 +317,8 @@ 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)
@@ -331,7 +332,9 @@ const MainRouter = (): ReactElement => {
       }
       setTalkActivity(tmpActiveVisitors);
     }
+  };
 
+  const calcSapcesActivity = async () => {
     const spacesSessions = getSessionsByDay(sessions, "spaces");
     const spacesPromises: Promise<CommentsWithIndex>[] = [];
     const stamp = process.env.STAMP || DUMMY_STAMP;
@@ -351,24 +354,29 @@ 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);
     }
   };
 
   useEffect(() => {
     calcActivity();
-  }, [loadedTalks, recentSessions]);
+  }, [loadedTalks]);
+
+  useEffect(() => {
+    calcSapcesActivity();
+  }, [recentSessions]);
 
   const fetchNotes = async () => {
     const privKey = getPrivateKey();

src/components/RecentSessions/RecentSessions.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 import "./RecentSessions.scss";
 import RecentSessionsItem from "./RecentSessionsItem/RecentSessionsItem";
@@ -7,20 +7,6 @@ import { ROUTES, STAGES_MAP } from "../../utils/constants";
 
 const RecentSessions: React.FC = () => {
   const { recentSessions, talkActivity } = useGlobalState();
-  const [activity, setActivity] = useState<Map<string, number>>(
-    new Map<string, number>()
-  );
-
-  useEffect(() => {
-    const tmpActivity = new Map<string, number>();
-    for (let i = 0; i < recentSessions.length; i++) {
-      tmpActivity.set(
-        recentSessions[i].id,
-        talkActivity.get(recentSessions[i].id) || 0
-      );
-    }
-    setActivity(tmpActivity);
-  }, [talkActivity]);
 
   return (
     <div>
@@ -38,7 +24,7 @@ const RecentSessions: React.FC = () => {
               id={session.id}
               title={session.title}
               stage={STAGES_MAP.get(session.slot_roomId || "") || ""}
-              activity={activity.get(session.id) || 0}
+              activity={talkActivity.get(session.id) || 0}
             />
           );
         })}

src/components/Spaces/SpacesItem/SpacesItem.tsx

@@ -23,7 +23,7 @@ const SpacesItem: React.FC<RecentRoomsItemProps> = ({
         <div className="recent-rooms__item__title">{title}</div>
       </div>
       <div className="recent-rooms-item__right">
-        <ActiveVisitors number={numberOfActiveUsers} withIcon={true} />
+      {numberOfActiveUsers > 0 ? <ActiveVisitors number={numberOfActiveUsers} withIcon={true}/> : <></>  }
         <RightArrowIcon />
       </div>
     </div>

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}
         />

src/pages/ClaimRewardPage/ClaimRevardPage.tsx

@@ -20,6 +20,9 @@ const ClaimRewardPage: React.FC = () => {
     const code = localStorage.getItem(GIFTCODE_KEY);
     if (code !== null && inputRef.current) {
       inputRef.current.value = code;
+      if (code === "already redeemed") {
+        localStorage.removeItem(GIFTCODE_KEY);
+      }
     } else if (!nonceRequested) {
       nonceRequested = true;
       try {
@@ -61,7 +64,7 @@ const ClaimRewardPage: React.FC = () => {
         console.log("error fetching nonce: ", error);
       }
     }
-  });
+  }, []);
 
   const handleCopyClick = async () => {
     if (inputRef.current) {

src/pages/HomePage/HomePage.tsx

@@ -14,8 +14,8 @@ interface HomePageProps {
 }
 
 const HomePage: React.FC<HomePageProps> = ({ withGamification }) => {
-  const { points, talkActivity } = useGlobalState();
-
+  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={true}
-          activeVisitors={talkActivity.get(LOBBY_TITLE) || 0}
+          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>

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>
         ))}