diff --git a/src/GlobalStateContext.tsx b/src/GlobalStateContext.tsx index 79f33f8d..781a4f5a 100644 --- a/src/GlobalStateContext.tsx +++ b/src/GlobalStateContext.tsx @@ -37,6 +37,8 @@ interface GlobalState { setNotes: React.Dispatch>; talkActivity: Map; setTalkActivity: React.Dispatch>>; + spacesActivity: Map; + setSpacesActivity: React.Dispatch>>; } const GlobalStateContext = createContext(undefined); @@ -85,6 +87,10 @@ export const GlobalStateProvider: React.FC = ({ new Map() ); + const [spacesActivity, setSpacesActivity] = useState>( + new Map() + ); + useEffect(() => { localStorage.setItem("username", username); setMonogram(createMonogram(username)); @@ -142,6 +148,8 @@ export const GlobalStateProvider: React.FC = ({ setNotes, talkActivity, setTalkActivity, + spacesActivity, + setSpacesActivity, }} > {children} diff --git a/src/MainRouter.tsx b/src/MainRouter.tsx index 7790fb30..b54673c0 100644 --- a/src/MainRouter.tsx +++ b/src/MainRouter.tsx @@ -63,6 +63,7 @@ const MainRouter = (): ReactElement => { notes, setNotes, setTalkActivity, + setSpacesActivity, } = useGlobalState(); const [sessionsReference, setSessionsReference] = useState(""); const [isBeeRunning, setBeeRunning] = useState(false); @@ -316,8 +317,8 @@ const MainRouter = (): ReactElement => { }, [recentSessions]); const calcActivity = async () => { - const tmpActiveVisitors = new Map(); if (loadedTalks) { + const tmpActiveVisitors = new Map(); 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[] = []; const stamp = process.env.STAMP || DUMMY_STAMP; @@ -351,16 +354,17 @@ const MainRouter = (): ReactElement => { ); } + const tmpActivity = new Map(); 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); } @@ -368,7 +372,11 @@ const MainRouter = (): ReactElement => { useEffect(() => { calcActivity(); - }, [loadedTalks, recentSessions]); + }, [loadedTalks]); + + useEffect(() => { + calcSapcesActivity(); + }, [recentSessions]); const fetchNotes = async () => { const privKey = getPrivateKey(); diff --git a/src/components/RecentSessions/RecentSessions.tsx b/src/components/RecentSessions/RecentSessions.tsx index 0e4bb868..e6b1764a 100644 --- a/src/components/RecentSessions/RecentSessions.tsx +++ b/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>( - new Map() - ); - - useEffect(() => { - const tmpActivity = new Map(); - for (let i = 0; i < recentSessions.length; i++) { - tmpActivity.set( - recentSessions[i].id, - talkActivity.get(recentSessions[i].id) || 0 - ); - } - setActivity(tmpActivity); - }, [talkActivity]); return (
@@ -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} /> ); })} diff --git a/src/components/Spaces/SpacesItem/SpacesItem.tsx b/src/components/Spaces/SpacesItem/SpacesItem.tsx index e9b0f70c..0e7311ed 100644 --- a/src/components/Spaces/SpacesItem/SpacesItem.tsx +++ b/src/components/Spaces/SpacesItem/SpacesItem.tsx @@ -23,7 +23,7 @@ const SpacesItem: React.FC = ({
{title}
- + {numberOfActiveUsers > 0 ? : <> }
diff --git a/src/components/TalkItem/TalkItem.tsx b/src/components/TalkItem/TalkItem.tsx index aa57aa84..aaac027c 100644 --- a/src/components/TalkItem/TalkItem.tsx +++ b/src/components/TalkItem/TalkItem.tsx @@ -1,22 +1,23 @@ -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; @@ -24,9 +25,19 @@ interface TalkItemProps { } const TalkItem: React.FC = ({ session, isSpacesTalk }) => { - const { username, loadedTalks, setLoadedTalks, talkActivity, setTalkActivity, isContentFilterEnabled } = - useGlobalState(); - const [comments, setComments] = useState(undefined); + const { + username, + loadedTalks, + setLoadedTalks, + talkActivity, + setTalkActivity, + spacesActivity, + setSpacesActivity, + isContentFilterEnabled, + } = useGlobalState(); + const [comments, setComments] = useState( + undefined + ); const [loading, setLoading] = useState(true); const rawTalkTopic = getTopic(session.id, true); @@ -35,7 +46,11 @@ const TalkItem: React.FC = ({ 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 = ({ 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 = ({ 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 = ({ 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; + 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 = ({ 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/ClaimRewardPage/ClaimRevardPage.tsx b/src/pages/ClaimRewardPage/ClaimRevardPage.tsx index f3bab6b6..1e9cc686 100644 --- a/src/pages/ClaimRewardPage/ClaimRevardPage.tsx +++ b/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) { diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index c73a2fcf..42bf6ce0 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -14,8 +14,8 @@ interface HomePageProps { } const HomePage: React.FC = ({ withGamification }) => { - const { points, talkActivity } = useGlobalState(); - + const { points, spacesActivity } = useGlobalState(); + const lobbyActivity = spacesActivity.get(LOBBY_TITLE) || 0; return (
@@ -28,15 +28,15 @@ const HomePage: React.FC = ({ withGamification }) => { 0} + activeVisitors={lobbyActivity} bordered={true} /> ({ topic: c, - userCount: talkActivity.get(c) || 0, + userCount: spacesActivity.get(c) || 0, }))} />
diff --git a/src/pages/SpacesPage/SpacesPage.tsx b/src/pages/SpacesPage/SpacesPage.tsx index af7e41df..5fcd392e 100644 --- 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 = () => {
navigate(`${ROUTES.TALKS}/${c}`)}>
))}