fix: should reload redux data on profile address changed, and fix tra… (

#3985)
opensquare-network · Mar 13, 2024 · 7cb1835 · 7cb1835
1 parent 430d9c3
commit 7cb1835
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/packages/next-common/components/profile/identityTimeline/index.js b/packages/next-common/components/profile/identityTimeline/index.js
@@ -9,12 +9,14 @@ import {
   setProfileIdentityTimeline,
 } from "next-common/store/reducers/profile/identityTimeline";
 import { useSelector } from "react-redux";
+import useIsMounted from "next-common/utils/hooks/useIsMounted";
 
 function useIdentityTimeline() {
   const dispatch = useDispatch();
   const address = useProfileAddress();
   const chain = useChain();
   const timeline = useSelector(profileIdentityTimelineSelector);
+  const isMounted = useIsMounted();
 
   useEffect(() => {
     fetch(`https://${chain}-identity-api.statescan.io/graphql`, {
@@ -51,10 +53,12 @@ function useIdentityTimeline() {
         return response.json();
       })
       .then((result) => {
-        dispatch(setProfileIdentityTimeline(result.data?.identityTimeline));
+        if (isMounted.current) {
+          dispatch(setProfileIdentityTimeline(result.data?.identityTimeline));
+        }
       })
       .catch((error) => console.error(error));
-  }, [address, chain]);
+  }, [address, chain, isMounted]);
 
   return timeline;
 }

diff --git a/packages/next-common/components/profile/index.js b/packages/next-common/components/profile/index.js
@@ -1,16 +1,27 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ListLayout from "next-common/components/layout/ListLayout";
 import Bio from "./bio";
 import useProfileTabs from "next-common/components/profile/tabs";
 import ProfileBreadcrumbs from "next-common/components/profile/breadcrumbs";
 import useProfileTabContent from "next-common/components/profile/tabs/content";
 import useFetchProfileData from "next-common/components/profile/useFetchProfileData";
+import { useDispatch } from "react-redux";
+import { setProfileTransfers } from "next-common/store/reducers/profile/transfer";
+import { setProfileIdentityTimeline } from "next-common/store/reducers/profile/identityTimeline";
+import useProfileAddress from "./useProfileAddress";
 
 export default function ProfilePage() {
   const tabs = useProfileTabs();
   const tabContent = useProfileTabContent();
   useFetchProfileData();
 
+  const address = useProfileAddress();
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(setProfileTransfers(null));
+    dispatch(setProfileIdentityTimeline(null));
+  }, [dispatch, address]);
+
   return (
     <ListLayout
       header={

diff --git a/packages/next-common/components/profile/transfers/index.js b/packages/next-common/components/profile/transfers/index.js
@@ -10,6 +10,7 @@ import {
 } from "next-common/store/reducers/profile/transfer";
 import { useDispatch } from "react-redux";
 import { useSelector } from "react-redux";
+import useIsMounted from "next-common/utils/hooks/useIsMounted";
 
 const DEFAULT_PAGE_SIZE = 25;
 
@@ -19,6 +20,7 @@ export default function ProfileTransfers() {
   const address = useProfileAddress();
   const transfers = useSelector(profileTransfersSelector);
   const [page, setPage] = useState(1);
+  const isMounted = useIsMounted();
 
   useEffect(() => {
     if (!address) {
@@ -35,9 +37,13 @@ export default function ProfileTransfers() {
         }
         return response.json();
       })
-      .then((result) => dispatch(setProfileTransfers(result)))
+      .then((result) => {
+        if (isMounted.current) {
+          dispatch(setProfileTransfers(result));
+        }
+      })
       .catch((error) => console.error(error));
-  }, [address, chain, page]);
+  }, [address, chain, page, isMounted]);
 
   return (
     <SecondaryCard>

diff --git a/packages/next-common/components/profile/transfers/list.js b/packages/next-common/components/profile/transfers/list.js
@@ -47,11 +47,11 @@ export default function TransferList({ isLoading, items }) {
   const columns = [
     {
       name: "Event ID",
-      style: { width: 120, textAlign: "left" },
+      style: { width: 120, maxWidth: 120, textAlign: "left" },
     },
     {
       name: "Extrinsic ID",
-      style: { width: 120, textAlign: "left" },
+      style: { width: 120, maxWidth: 120, textAlign: "left" },
     },
     {
       name: (
@@ -64,15 +64,15 @@ export default function TransferList({ isLoading, items }) {
           {timeType}
         </span>
       ),
-      style: { width: 200, textAlign: "left" },
+      style: { width: 200, minWidth: 200, textAlign: "left" },
     },
     {
       name: "From",
-      style: { width: 276, textAlign: "left" },
+      style: { width: 276, minWidth: 276, textAlign: "left" },
     },
     {
       name: "To",
-      style: { width: 276, textAlign: "left" },
+      style: { width: 276, minWidth: 276, textAlign: "left" },
     },
     {
       name: "Value",