Fix: fix projects page performance (#67) (#68)

* add issue templates * fix projects page performance; shuffle project cards * fix issue where the msg "Account does not exist." was being erroneous shown --------- Co-authored-by: Mohamed ElKhamisy <[email protected]> Co-authored-by: Lachlan Glen <[email protected]>
PotLock · May 9, 2024 · 0a850dc · 0a850dc
1 parent 68d53ca
commit 0a850dc
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 48 deletions.
diff --git a/src/components/NewHero/NewHero.tsx b/src/components/NewHero/NewHero.tsx
@@ -2,11 +2,12 @@ import { context, useMemo } from "alem";
 import HomeBannerStyle from "@app/assets/svgs/HomeBannerBackground";
 import { useDonationModal } from "@app/hooks/useDonationModal";
 import DonationStats from "@app/pages/Projects/components/DonationStats/DonationStats";
+import getProjects from "@app/services/getProjects";
 import Button from "../Button";
 import { Container, HeroContainer, Line } from "./styles";
 
-const NewHero = ({ projectsData }: any) => {
-  const { allProjects, approvedProjects } = projectsData;
+const NewHero = () => {
+  const { allProjects, approvedProjects } = getProjects();
 
   const { setDonationModalProps } = useDonationModal();
 

diff --git a/src/pages/Project/Project.tsx b/src/pages/Project/Project.tsx
@@ -25,8 +25,12 @@ const ProjectPage = () => {
 
   const addressExist = account?.body?.account[0];
 
-  if (!isObjectNotEmpty(addressExist || {}) && !registration)
-    return <div style={{ marginTop: "1rem", fontSize: "1.5rem" }}>Account does not exist.</div>;
+  if (!isObjectNotEmpty(addressExist || {}) && !registration) {
+    if (account) {
+      return <div style={{ marginTop: "1rem", fontSize: "1.5rem" }}>Account does not exist.</div>;
+    }
+    return "";
+  }
 
   const [directDonations, setDirectDonations] = useState(null);
   // mapping of pot IDs to array of Round Matching Donations for the project

diff --git a/src/pages/Projects/Projects.tsx b/src/pages/Projects/Projects.tsx
@@ -1,39 +1,17 @@
-import { Storage, useEffect, useState } from "alem";
-import ListsSDK from "@app/SDK/lists";
 import NewHero from "@app/components/NewHero/NewHero";
 import AllProjects from "./components/AllProjects/AllProjects";
 import FeaturedProjects from "./components/FeaturedProjects/FeaturedProjects";
 
 const ProjectsPage = () => {
-  // Use storage to improve project data availability.
-  const PROJECTS_STORAGE_KEY = "previous-projects";
-  const [projectsData, setProjectsData] = useState<any>(Storage.get(PROJECTS_STORAGE_KEY));
-
-  useEffect(() => {
-    ListsSDK.asyncGetRegistrations().then((allProjects: any) => {
-      if (!allProjects) {
-        return { allProjects: [], featuredProjects: [] };
-      }
-
-      allProjects.sort((a: any, b: any) => b.submitted_ms - a.submitted_ms);
-
-      const featuredProjectIds = ["v1.foodbank.near", "potlock.near", "yearofchef.near"];
-
-      const featuredProjects = allProjects.filter((project: any) => featuredProjectIds.includes(project.registrant_id));
-
-      const approvedProjects = allProjects.filter((project: any) => project.status === "Approved");
-
-      if (projectsData?.allProjects.length !== allProjects.length)
-        setProjectsData({ allProjects, approvedProjects, featuredProjects });
-      Storage.set(PROJECTS_STORAGE_KEY, { allProjects, approvedProjects, featuredProjects });
-    });
-  }, []);
+  // TODO: Além -> Gerar o erro
+  // 1 - Comenta a linha 39 e inicia o projeto
+  // 2 - Descomenta a linha 39, vai gerar o erro
 
   return (
     <>
-      <NewHero projectsData={projectsData} />
-      <FeaturedProjects projectsData={projectsData} isLoading={!projectsData} />
-      <AllProjects projectsData={projectsData} />
+      <NewHero />
+      <FeaturedProjects />
+      <AllProjects />
     </>
   );
 };

diff --git a/src/pages/Projects/components/AllProjects/AllProjects.tsx b/src/pages/Projects/components/AllProjects/AllProjects.tsx
@@ -2,6 +2,7 @@ import { Social, createDebounce, useEffect, useState } from "alem";
 import DonateSDK from "@app/SDK/donate";
 import Card from "@app/components/Card/Card";
 import FilterDropdown from "@app/components/Inputs/FilterDropdown/FilterDropdown";
+import getProjects from "@app/services/getProjects";
 import { Project } from "@app/types";
 import getTagsFromSocialProfileData from "@app/utils/getTagsFromSocialProfileData";
 import getTeamMembersFromSocialProfileData from "@app/utils/getTeamMembersFromSocialProfileData";
@@ -11,10 +12,8 @@ import SearchBar from "../SearchBar/SearchBar";
 import { ProjectsContainer, FilterWrapper, Title, Container, Header } from "./styles";
 import tagsList from "./tagsList";
 
-// import ListsSDK from "@app/SDK/lists";
-
-const AllProjects = ({ projectsData }: { projectsData: any }) => {
-  // const isRegistryAdmin = ListsSDK.isRegistryAdmin(context.accountId);
+const AllProjects = () => {
+  const projectsData = getProjects();
 
   const [totalDonation, setTotalDonation] = useState(0);
   const [totalDonated, setTotalDonated] = useState("0");
@@ -34,7 +33,7 @@ const AllProjects = ({ projectsData }: { projectsData: any }) => {
     return "";
   }
 
-  const donateConfig = DonateSDK.getConfig();
+  const donateConfig: any = DonateSDK.getConfig();
   if (donateConfig && !totalDonated && !totalDonation) {
     const lastDonationAmount = yoctosToUsd(donateConfig.net_donations_amount);
     setTotalDonated(lastDonationAmount);
@@ -156,7 +155,14 @@ const AllProjects = ({ projectsData }: { projectsData: any }) => {
       </Header>
       <ProjectsContainer>
         {filteredProjects.length ? (
+          // TODO: Isso quebra (incluindo o "shouldShuffle")
+          //   <ListSection
+          //   shouldShuffle
+          //   items={filteredProjects}
+          //   renderItem={(project: Project) => <Card projectId={project.registrant_id} />}
+          // />
           <ListSection
+            shouldShuffle={true}
             items={filteredProjects}
             renderItem={(project: Project) => <Card projectId={project.registrant_id} />}
           />

diff --git a/src/pages/Projects/components/FeaturedProjects/FeaturedProjects.tsx b/src/pages/Projects/components/FeaturedProjects/FeaturedProjects.tsx
@@ -1,17 +1,14 @@
 import { useEffect, useMemo, useState } from "alem";
 import Card from "@app/components/Card/Card";
+import getProjects from "@app/services/getProjects";
 import { Project } from "@app/types";
 import CardSkeleton from "../CardSkeleton";
 import { ContainerHeader, Header, OnBottom, ProjectList, Title } from "./styles";
 
-const FeaturedProjects = ({ projectsData, isLoading }: { projectsData: any; isLoading: boolean }) => {
+const FeaturedProjects = () => {
+  const projectsData = getProjects();
   const [projects, setProjects] = useState<Project[]>([]);
 
-  // console.log("B", projectsData, projects, isLoading);
-  // console.log('FeaturedProjects - Render');
-
-  // TODO: Criar um formato para o compilador saber quando é um arquivo
-  // de custom hook e injetar no arquivo
   useEffect(() => {
     if (projectsData) {
       const { featuredProjects } = projectsData;
@@ -44,9 +41,7 @@ const FeaturedProjects = ({ projectsData, isLoading }: { projectsData: any; isLo
         <Title>Featured projects</Title>
       </Header>
 
-      <ProjectList>
-        {projects.length === 0 || !projectsData || isLoading ? <LoadingCards /> : <>{projectCards}</>}
-      </ProjectList>
+      <ProjectList>{projects.length === 0 || !projectsData ? <LoadingCards /> : <>{projectCards}</>}</ProjectList>
       <OnBottom></OnBottom>
     </ContainerHeader>
   );

diff --git a/src/services/getProjects.ts b/src/services/getProjects.ts
@@ -1,4 +1,14 @@
+import { Storage } from "alem";
 import ListsSDK from "@app/SDK/lists";
+import { Project } from "@app/types";
+
+const PROJECTS_STORAGE_KEY = "previous-projects";
+
+type Data = {
+  allProjects: Project[];
+  approvedProjects: Project[];
+  featuredProjects: Project[];
+};
 
 /**
  * Get current projects.
@@ -8,7 +18,7 @@ const getProjects = () => {
   const allProjects = ListsSDK.getRegistrations();
 
   if (!allProjects) {
-    return { allProjects: [], featuredProjects: [] };
+    return { allProjects: [], approvedProjects: [], featuredProjects: [] } as Data;
   }
 
   allProjects.sort((a: any, b: any) => b.submitted_ms - a.submitted_ms);
@@ -19,7 +29,15 @@ const getProjects = () => {
 
   const approvedProjects = allProjects.filter((project: any) => project.status === "Approved");
 
-  return { allProjects, approvedProjects, featuredProjects };
+  const previousData = Storage.get(PROJECTS_STORAGE_KEY);
+
+  if (previousData) {
+    return previousData as Data;
+  }
+
+  Storage.set(PROJECTS_STORAGE_KEY, { allProjects, approvedProjects, featuredProjects });
+
+  return { allProjects, approvedProjects, featuredProjects } as Data;
 };
 
 export default getProjects;