Revert "Revert "Staging => mian""

src/components/PotCard/PotCard.tsx

@@ -18,11 +18,10 @@ type Props = {
 
 const PotCard = ({ potId }: Props) => {
   const potConfig: PotDetail = PotSDK.getConfig(potId);
-
   if (!potConfig)
     return (
       <Card style={{ justifyContent: "center", alignItems: "center" }}>
-        {potConfig == null ? (
+        {potConfig === null ? (
           <div className="spinner-border text-secondary" role="status" />
         ) : (
           <div>Pot {potId} not found.</div>
@@ -55,6 +54,7 @@ const PotCard = ({ potId }: Props) => {
 
   return (
     <Card
+      key={potId}
       href={hrefWithParams(`?tab=pot&potId=${potId}`)}
       data-testid={applicationOpen ? "active-pot" : "inactive-pot"}
     >

src/pages/Project/NavPages/Pots/Pots.tsx

@@ -1,40 +1,38 @@
-import { useParams, useState } from "alem";
+import { useEffect, useMemo, useParams, useState } from "alem";
 import PotSDK from "@app/SDK/pot";
 import PotFactorySDK from "@app/SDK/potfactory";
 import PotCard from "@app/components/PotCard/PotCard";
+import ListSection from "@app/pages/Projects/components/ListSection";
 import { Container, NoResults } from "./styles";
 
 const Pots = () => {
   const pots = PotFactorySDK.getPots();
   const { projectId } = useParams();
 
-  const [potIds, setPotIds] = useState<any>(null); // ids[] of pots that approved project
-  const [loading, setLoading] = useState(true); // ids[] of pots that approved project
+  const POT_STATUS = ["Approved", "pending"];
 
-  const getApprovedApplications = (potId: any) =>
-    PotSDK.asyncGetApprovedApplications(potId)
-      .then((applications: any) => {
-        if (applications.some((app: any) => app.project_id === projectId)) {
-          setPotIds([...(potIds || []), potId]);
-        }
-        if (pots[pots.length - 1].id === potId) setLoading(false);
-      })
-      .catch(() => console.log(`Error fetching approved applications for ${potId}`));
+  const [potIds, setPotIds] = useState<any>(null); // ids[] of pots that approved project
+  // const [loading, setLoading] = useState(true);
 
-  if (pots && loading) {
-    pots.forEach((pot: any) => {
-      getApprovedApplications(pot.id);
-    });
-  }
+  useEffect(() => {
+    if (pots && !potIds) {
+      const applicationsPrmomises = pots.map(({ id }: any) => PotSDK.asyncGetApplicationByProjectId(id, projectId));
+      Promise.allSettled(applicationsPrmomises).then((applications: any) => {
+        const enrolledPots: any = [];
+        applications.forEach((obj: any, idx: number) => {
+          if (POT_STATUS.includes(obj.value.status)) {
+            enrolledPots.push(pots[idx]);
+          }
+        });
+        setPotIds(enrolledPots);
+      });
+    }
+  }, [pots]);
 
-  return loading ? (
+  return potIds === null ? (
     "Loading..."
   ) : potIds.length ? (
-    <Container>
-      {potIds.map((potId: string) => (
-        <PotCard {...{ potId, tab: "pots" }} />
-      ))}
-    </Container>
+    <ListSection maxCols={3} items={potIds} renderItem={(pot: any) => <PotCard potId={pot.id} key={pot.id} />} />
   ) : (
     <NoResults>
       <div className="text">This project has not participated in any pots yet.</div>

src/pages/Project/NavPages/Pots/styles.ts

@@ -3,6 +3,7 @@ import styled from "styled-components";
 export const Container = styled.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
   > div {
     padding-top: 0rem;
   }