handling ttl for fetched advertisements

src/components/advert-stat/index.tsx

@@ -11,11 +11,10 @@ import { toast } from "react-hot-toast";
 
 interface AdvertStatProps {
  advertId: string;
- setAdvertId: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const AdvertStat: React.FC<AdvertStatProps> = ({advertId, setAdvertId}) => {
- const {dark, language} = useAppContext();
+const AdvertStat: React.FC<AdvertStatProps> = ({advertId}) => {
+ const {dark, language, setAdvertId} = useAppContext();
  const [advertStat, setAdvertStat] = useState<AdvertStats>(defaultAdvertStats);
  const [fetching, setFetching] = useState<boolean>(false);
 
@@ -27,7 +26,7 @@ const AdvertStat: React.FC<AdvertStatProps> = ({advertId, setAdvertId}) => {
  setAdvertStat(data);
  setTimeout(() => {
  toast("Advertisement expired", { icon: "ℹ️", id: "add exp" });
- setAdvertId("");
+ setAdvertId!("");
  }, new Date(data.expires).getTime() - Date.now());
  })
  .finally(() => setFetching(false));

src/components/menu/index.tsx

@@ -32,6 +32,7 @@ const Menu: React.FC<MenuProps> = () => {
  setSettingsOpen,
  setTxOpen,
  language, dark,
+ setAdvertId
  } = useAppContext();
  const {logoutUser, user, account} = useUserContext();
  const {resetChat} = useChatContext();
@@ -52,6 +53,7 @@ const Menu: React.FC<MenuProps> = () => {
  logoutUser!();
  resetChat!();
  closeMenu();
+ setAdvertId!("");
  };
 
  const takeToSubchat = () => {

src/components/post-advert/index.tsx

@@ -16,11 +16,10 @@ import { useSocketContext } from "../../contexts/socket";
 import { AdvertInfo } from "../../utils/types";
 
 interface PostAdvertProps {
- setAdvertId: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const PostAdvert: React.FC<PostAdvertProps> = ({ setAdvertId }) => {
- const { dark, language } = useAppContext();
+const PostAdvert: React.FC<PostAdvertProps> = () => {
+ const { dark, language, setAdvertId } = useAppContext();
  const {socket} = useSocketContext();
  const { account } = useUserContext();
  const [picture, setPicture] = useState<{
@@ -107,7 +106,7 @@ const PostAdvert: React.FC<PostAdvertProps> = ({ setAdvertId }) => {
  expires: data.expires,
  };
  socket.emit("newAdvert", newAdvertData);
- setAdvertId(data.created_at);
+ setAdvertId!(data.created_at);
  })
  .finally(() => setFetching(false));
  })

src/components/rp-advert/advert.tsx

@@ -4,19 +4,14 @@ import {AdvertContainer, AdvertImage} from "./styles";
 import {noAdvertText} from "../../translations/advert";
 
 import {useAppContext} from "../../contexts/app";
+import { AdvertInfo } from "../../utils/types";
 
-interface AdvertProps {}
+interface AdvertProps {
+ advert: AdvertInfo
+}
 
-const Advert: React.FC<AdvertProps> = () => {
- const {dark, advert, setAdvert, language} = useAppContext();
-
- useEffect(() => {
- if (!advert) return;
- setTimeout(
- () => setAdvert!(null),
- new Date(advert.expires).getTime() - Date.now()
- );
- }, [advert]);
+const Advert: React.FC<AdvertProps> = ({advert}) => {
+ const {dark, language} = useAppContext();
 
  return (
  <AdvertContainer dark={dark}>

src/components/rp-advert/index.tsx

@@ -4,14 +4,16 @@ import {Container} from "./styles";
 
 import Advert from "./advert";
 import SmallMenu from "./small-menu";
+import { useAppContext } from "../../contexts/app";
 
 interface RPAdvertProps {}
 
 const RPAdvert: React.FC<RPAdvertProps> = () => {
+ const {adverts} = useAppContext();
  return (
  <Container>
  <SmallMenu />
- <Advert />
+ {adverts.length > 0 && <Advert advert={adverts[0]} />}
  </Container>
  );
 };

src/contexts/app.tsx

@@ -32,6 +32,7 @@ interface AppContextInterface {
  overlap: boolean;
  adverts: Array<AdvertInfo>;
  showCreate: boolean;
+ advertId: string;
  resetAppContext?: () => void;
  setLoggedIn?: React.Dispatch<React.SetStateAction<boolean>>;
  setShowTerms?: React.Dispatch<React.SetStateAction<boolean>>;
@@ -52,6 +53,7 @@ interface AppContextInterface {
  setOverlap?: React.Dispatch<React.SetStateAction<boolean>>;
  setAdverts?: React.Dispatch<React.SetStateAction<Array<AdvertInfo>>>;
  setShowCreate?: React.Dispatch<React.SetStateAction<boolean>>;
+ setAdvertId?: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const defaultState: AppContextInterface = {
@@ -73,7 +75,8 @@ const defaultState: AppContextInterface = {
  lowBalance: false,
  overlap: false,
  adverts: [],
- showCreate: false
+ showCreate: false,
+ advertId: ""
 };
 
 export const AppContext = createContext<AppContextInterface>(defaultState);
@@ -100,6 +103,7 @@ export const AppContextProvider: React.FC<{children: ReactNode}> = ({children})
  const [overlap, setOverlap] = useState<boolean>(defaultState.overlap);
  const [adverts, setAdverts] = useState<Array<AdvertInfo>>(defaultState.adverts);
  const [showCreate, setShowCreate] = useState<boolean>(defaultState.showCreate);
+ const [advertId, setAdvertId] = useState<string>(defaultState.advertId);
 
  const resetAppContext = () => {
  setShowTerms!(false);
@@ -119,9 +123,20 @@ export const AppContextProvider: React.FC<{children: ReactNode}> = ({children})
 
  // fetching advertisement
  useEffect(() => {
- axios.get(`${REST_API}/advert/`).then(({ data }) => {
- setAdverts(data.adverts || []);
- });
+ axios
+ .get(`${REST_API}/advert/`)
+ .then(({ data }: { data: {adverts: Array<AdvertInfo>} }) => {
+ setAdverts(data.adverts || []);
+ data.adverts.forEach(v => {
+ const ttl = new Date(v.expires).getTime() - Date.now();
+ if (ttl <= 0) return;
+ setTimeout(() => {
+ setAdverts!((prev) => [
+ ...prev.filter((v1) => v1.id !== v.id),
+ ]);
+ }, ttl);
+ });
+ });
  const connectionReq = axios.get(`${REST_API.slice(0, -3)}`);
  toast.promise(connectionReq, {
  loading: sdConnect.loading[language],
@@ -153,7 +168,8 @@ export const AppContextProvider: React.FC<{children: ReactNode}> = ({children})
  overlap, setOverlap,
  adverts, setAdverts,
  showCreate, setShowCreate,
- resetAppContext
+ resetAppContext,
+ advertId, setAdvertId
  }}>
  {children}
  </AppContext.Provider>

src/contexts/socket.tsx

@@ -51,15 +51,21 @@ export const SocketContext =
 export const useSocketContext = () => useContext(SocketContext);
 
 export const SocketContextProvider: React.FC<{children: React.ReactNode}> = ({ children }) => {
- const {setAdverts, language} = useAppContext();
+ const {setAdverts, language, adverts} = useAppContext();
  const {account, setFollowers, setReputation} = useUserContext();
  const [socket, setSocket] =
  useState<Socket<ServerToClientEvents, ClientToServerEvents>>(defaultState.socket);
 
  useEffect(() => {
  socket.emit("joinRoom", "advert");
  socket.on("newAdvert", newAdvert => {
+ if (adverts.find(v => v.id === newAdvert.id)) return;
+ const ttl = new Date(newAdvert.expires).getTime() - Date.now();
+ if (ttl <= 0) return;
  setAdverts!(prev => [...prev, newAdvert]);
+ setTimeout(() => {
+ setAdverts!(prev => [...prev.filter(v => v.id !== newAdvert.id)]);
+ }, ttl);
  if (process.env.NODE_ENV === "development") {
  toast("New advertisement arrived");
  }

src/pages/advertise/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import axios from "axios";
 
 import { Container } from "./styles";
@@ -15,14 +15,13 @@ import { REST_API } from "../../utils/constants";
 interface AdvertisePageProps {}
 
 const AdvertisePage: React.FC<AdvertisePageProps> = () => {
- const {language, dark} = useAppContext();
+ const {language, dark, advertId, setAdvertId} = useAppContext();
  const {account} = useUserContext();
- const [advertId, setAdvertId] = useState<string>("");
 
  const fetchData = () => {
  if (!account?.address) return;
  axios.get(`${REST_API}/advert/user/${account.address}`)
- .then(({data}) => setAdvertId(data || ""));
+ .then(({data}) => setAdvertId!(data || ""));
  };
 
  useEffect(() => {
@@ -38,10 +37,10 @@ const AdvertisePage: React.FC<AdvertisePageProps> = () => {
  {advertId.length > 0 ? (
  <>
  <UserAdvert advertId={advertId} />
- <AdvertStat advertId={advertId} setAdvertId={setAdvertId} />
+ <AdvertStat advertId={advertId} />
  </>
  ) : (
- <PostAdvert setAdvertId={setAdvertId} />
+ <PostAdvert />
  )}
  </Container>
  );