From f02dd689ae5622b935a6b3085ee7df4b55c326c1 Mon Sep 17 00:00:00 2001 From: Wenderson Pires Date: Thu, 9 May 2024 15:12:41 -0300 Subject: [PATCH] Fix: fix projects page performance (#67) * 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 <68287884+M-Rb3@users.noreply.github.com> Co-authored-by: Lachlan Glen <54282009+lachlanglen@users.noreply.github.com> --- .github/ISSUE_TEMPLATE/bug_report.md | 38 +++++++++++++++++++ .github/ISSUE_TEMPLATE/design.md | 35 +++++++++++++++++ .github/ISSUE_TEMPLATE/enhancement.md | 35 +++++++++++++++++ .github/ISSUE_TEMPLATE/feature_request.md | 25 ++++++++++++ src/components/NewHero/NewHero.tsx | 5 ++- src/pages/Project/Project.tsx | 8 +++- src/pages/Projects/Projects.tsx | 34 +++-------------- .../components/AllProjects/AllProjects.tsx | 16 +++++--- .../FeaturedProjects/FeaturedProjects.tsx | 13 ++----- src/services/getProjects.ts | 22 ++++++++++- 10 files changed, 183 insertions(+), 48 deletions(-) create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md create mode 100644 .github/ISSUE_TEMPLATE/design.md create mode 100644 .github/ISSUE_TEMPLATE/enhancement.md create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 00000000..35bfce07 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,38 @@ +--- +name: Bug report +about: Create a report to help us improve +title: "[BUG] " +labels: bug +assignees: '' + +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Desktop (please complete the following information):** + - OS: [e.g. iOS] + - Browser [e.g. chrome, safari] + - Version [e.g. 22] + +**Smartphone (please complete the following information):** + - Device: [e.g. iPhone6] + - OS: [e.g. iOS8.1] + - Browser [e.g. stock browser, safari] + - Version [e.g. 22] + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/design.md b/.github/ISSUE_TEMPLATE/design.md new file mode 100644 index 00000000..e6832d76 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/design.md @@ -0,0 +1,35 @@ +--- +name: Design +about: UI/UX design +title: "[DESIGN] " +labels: design +assignees: "" +--- + +# Summary + +[Brief overview of the enhancement and why it is needed or desired] + +# Motivation + +[More detailed explanation of the motivation for the enhancement, including any benefits it would provide] + +# Description + +[Detailed description of the enhancement, including how it would work and any design considerations] + +## Alternatives + +[Discussion of any alternative solutions that were considered and why the proposed solution is preferred] + +# Risks + +[Identification and mitigation of any potential risks associated with the enhancement] + +# Acceptance Criteria + +[List of criteria that must be met for the enhancement to be considered accepted] + +# Additional Information + +[Any other relevant information, such as links to related issues or pull requests] diff --git a/.github/ISSUE_TEMPLATE/enhancement.md b/.github/ISSUE_TEMPLATE/enhancement.md new file mode 100644 index 00000000..0c12f2b3 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/enhancement.md @@ -0,0 +1,35 @@ +--- +name: Enhancement +about: Small improvement / enhancement (not a full feature request) +title: "[ENHANCE] " +labels: enhancement +assignees: "" +--- + +# Summary + +[Brief overview of the enhancement and why it is needed or desired] + +# Motivation + +[More detailed explanation of the motivation for the enhancement, including any benefits it would provide] + +# Description + +[Detailed description of the enhancement, including how it would work and any design considerations] + +## Alternatives + +[Discussion of any alternative solutions that were considered and why the proposed solution is preferred] + +# Risks + +[Identification and mitigation of any potential risks associated with the enhancement] + +# Acceptance Criteria + +[List of criteria that must be met for the enhancement to be considered accepted] + +# Additional Information + +[Any other relevant information, such as links to related issues or pull requests] diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 00000000..018157ff --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,25 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: "[FEATURE] " +labels: feature-request +assignees: '' + +--- + +# Problem +Explain the problem in details + +# User Story(s): + As a _______, I want to ____, so that I can + +# Description +Description of solution + +# Acceptance Criteria +Outline what needs to be done + +# Limitations +Outline any potential limitations +# Resources +- outline links and relevant resources, references implementations diff --git a/src/components/NewHero/NewHero.tsx b/src/components/NewHero/NewHero.tsx index 9fd6d617..0534908c 100644 --- 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 index 79b661aa..10f6e133 100644 --- 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
Account does not exist.
; + if (!isObjectNotEmpty(addressExist || {}) && !registration) { + if (account) { + return
Account does not exist.
; + } + 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 index 8f491589..9b394b2a 100644 --- 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(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 ( <> - - - + + + ); }; diff --git a/src/pages/Projects/components/AllProjects/AllProjects.tsx b/src/pages/Projects/components/AllProjects/AllProjects.tsx index 94a2e913..3bd7c236 100644 --- 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 }) => { {filteredProjects.length ? ( + // TODO: Isso quebra (incluindo o "shouldShuffle") + // } + // /> } /> diff --git a/src/pages/Projects/components/FeaturedProjects/FeaturedProjects.tsx b/src/pages/Projects/components/FeaturedProjects/FeaturedProjects.tsx index 95e51be9..65d59439 100644 --- 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([]); - // 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 Featured projects - - {projects.length === 0 || !projectsData || isLoading ? : <>{projectCards}} - + {projects.length === 0 || !projectsData ? : <>{projectCards}} ); diff --git a/src/services/getProjects.ts b/src/services/getProjects.ts index 4ab17945..2a91ff3c 100644 --- 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;