Merge pull request PotLock#121 from PotLock/feat/sorting-project

The following update requires the use of standard state

apps/potlock/widget/Components/ListSection.jsx

@@ -1,28 +1,166 @@
 const { ownerId } = props;
-const renderItem = props.renderItem ?? ((item) => <div>{item}</div>);
+const filterList = [
+  "Newest to Oldest",
+  "Oldest to Newest",
+  "Most to Least Donations",
+  "Least to Most Donations",
+];
+const tagsList = ["DeFi", "Open source", "Non profit"];
+const donationContractId = "donate.potlock.near";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border-top: 2px #dbdbdb solid;
+const [totalProjects, setTotalProjects] = useState(props.items);
+const [displayProject, setDisplayProject] = useState([]);
+const [lastNumberOfProject, setLastNumberOfProject] = useState(0);
+const [filterType, setFilterType] = useState(null);
+
+if (!totalProjects) return "loading";
+
+console.log(totalProjects);
 
-  background: #fafafa;
+const loadProjects = () => {
+  setLastNumberOfProject(lastNumberOfProject + 9);
+  setDisplayProject(
+    totalProjects
+      .slice(0, lastNumberOfProject + 9)
+      .map((item) => (
+        <Widget
+          src={"orasci-contributor.near/widget/Potlock.Components.ProjectCard"}
+          props={{ ...item, totalAmount: (donations) => totalAmount(donations) }}
+          key={key}
+        />
+      ))
+  );
+};
 
-  // For mobile devices and tablets
-  @media screen and (max-width: 1023px) {
-    padding: 48px 16px;
+const totalAmount = (donations) => {
+  if (!donations) return 0;
+  let totalDonationAmount = new Big(0);
+  for (const donation of donations) {
+    totalDonationAmount = totalDonationAmount.plus(new Big(donation.total_amount));
   }
+  return props.nearToUsd
+    ? (props.nearToUsd * totalDonationAmount.div(1e24).toNumber()).toFixed(2)
+    : totalDonationAmount.div(1e24).toNumber().toFixed(2);
+};
 
-  // For desktop devices
-  @media screen and (min-width: 1024px) {
-    padding: 48px 64px;
+const sortHighestToLowest = (projects) => {
+  const sort = (a, b) => {
+    return parseFloat(b.total) - parseFloat(a.total);
+  };
+  const projectLength = projects.length;
+
+  for (let i = 0; i < projectLength - 1; i++) {
+    for (let j = 0; j < projectLength - 1 - i; j++) {
+      if (sort(projects[j], projects[j + 1]) > 0) {
+        const temp = projects[j];
+        projects[j] = projects[j + 1];
+        projects[j + 1] = temp;
+      }
+    }
+  }
+
+  setTotalProjects(projects);
+  setDisplayProject([]);
+  setLastNumberOfProject(0);
+};
+
+const sortLowestToHighest = (projects) => {
+  const sort = (a, b) => {
+    return parseFloat(b.total) - parseFloat(a.total);
+  };
+  const projectLength = projects.length;
+
+  for (let i = 0; i < projectLength - 1; i++) {
+    for (let j = 0; j < projectLength - 1 - i; j++) {
+      if (sort(projects[j], projects[j + 1]) < 0) {
+        const temp = projects[j];
+        projects[j] = projects[j + 1];
+        projects[j + 1] = temp;
+      }
+    }
   }
+
+  setTotalProjects(projects);
+  setDisplayProject([]);
+  setLastNumberOfProject(0);
+};
+
+const sortNewToOld = (projects) => {
+  const projectLength = projects.length;
+
+  for (let i = 0; i < projectLength - 1; i++) {
+    for (let j = 0; j < projectLength - i - 1; j++) {
+      if (projects[j].submitted_ms < projects[j + 1].submitted_ms) {
+        const temp = projects[j];
+        projects[j] = projects[j + 1];
+        projects[j + 1] = temp;
+      }
+    }
+  }
+  setTotalProjects(projects);
+  setDisplayProject([]);
+  setLastNumberOfProject(0);
+};
+
+const sortOldToNew = (projects) => {
+  const projectLength = projects.length;
+
+  for (let i = 0; i < projectLength - 1; i++) {
+    for (let j = 0; j < projectLength - i - 1; j++) {
+      if (projects[j].submitted_ms > projects[j + 1].submitted_ms) {
+        const temp = projects[j];
+        projects[j] = projects[j + 1];
+        projects[j + 1] = temp;
+      }
+    }
+  }
+  setTotalProjects(projects);
+  setDisplayProject([]);
+  setLastNumberOfProject(0);
+};
+
+useEffect(() => {
+  const newTotalProjects = [];
+  const promises = totalProjects.map((project) => {
+    return Near.asyncView(donationContractId, "get_donations_for_recipient", {
+      recipient_id: project.id,
+    }).then((res) => {
+      const total = totalAmount(res);
+      newTotalProjects.push({ ...project, total });
+    });
+  });
+  Promise.all(promises).then((allProjects) => {
+    setTotalProjects(newTotalProjects);
+  });
+}, []);
+
+useEffect(() => {
+  switch (filterType) {
+    case "Newest to Oldest":
+      sortNewToOld(totalProjects);
+      break;
+    case "Oldest to Newest":
+      sortOldToNew(totalProjects);
+      break;
+    case "Most to Least Donations":
+      sortHighestToLowest(totalProjects);
+      break;
+    case "Least to Most Donations":
+      sortLowestToHighest(totalProjects);
+      break;
+  }
+}, [filterType]);
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 48px;
 `;
 
-const List = styled.div`
+const ProjectList = styled.div`
   display: grid;
-  gap: 20px;
+  gap: 31px;
 
   // For mobile devices (1 column)
   @media screen and (max-width: 739px) {
@@ -40,12 +178,78 @@ const List = styled.div`
   }
 `;
 
+const Header = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+`;
+
+const Title = styled.div`
+  color: #292929;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 1.12px;
+  text-transform: uppercase;
+`;
+
+const TagsWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+  color: #292929;
+`;
+
+const Tag = styled.div`
+  display: flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0px -1px 0px 0px #c7c7c7 inset, 0px 0px 0px 0.5px #c7c7c7;
+  border: 1px solid #c7c7c7;
+  &:hover {
+    background: #fef6ee;
+  }
+`;
+
 return (
-  <Container style={props.containerStyle || {}}>
-    <Widget
-      src="efiz.near/widget/ItemFeed"
-      props={{ items: props.items, perPage: 9, renderItem, renderLayout: (p) => <List>{p}</List> }}
-    />
-    {/* <List style={props.listStyle || {}}>{props.items.map((item) => renderItem(item))}</List> */}
+  <Container>
+    <Header>
+      <Title>all projects {totalProjects.length}</Title>
+
+      {/* Search bar */}
+      <Widget
+        src={"orasci-contributor.near/widget/Potlock.Home.SearchBar"}
+        props={{
+          sortNewToOld: (project) => sortNewToOld(project),
+          sortOldToNew: (project) => sortOldToNew(project),
+          projectLength: totalProjects.length,
+          filterList: filterList,
+          setFilterType: (filter) => {
+            setFilterType(filter);
+          },
+        }}
+      />
+      <TagsWrapper>
+        Tags:
+        {tagsList.map((tag, key) => (
+          <Tag key={key}>{tag}</Tag>
+        ))}
+      </TagsWrapper>
+    </Header>
+    <InfiniteScroll loadMore={loadProjects} hasMore={lastNumberOfProject < totalProjects.length}>
+      <ProjectList>{displayProject}</ProjectList>
+    </InfiniteScroll>
   </Container>
 );

apps/potlock/widget/Project/Card.jsx

@@ -5,16 +5,17 @@ const Card = styled.a`
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 30%;
-  min-width: 320px;
-  border-radius: 7px;
+  border-radius: 12px;
   background: white;
   box-shadow: 0px -2px 0px #dbdbdb inset;
   border: 1px solid #dbdbdb;
   &:hover {
     text-decoration: none;
     cursor: pointer;
   }
+  margin-left: auto;
+  margin-right: auto;
+  height: 500px;
 `;
 
 const Info = styled.div`
@@ -34,6 +35,10 @@ const Title = styled.div`
   font-size: 16px;
   font-weight: 600;
   color: #2e2e2e;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
 `;
 
 const SubTitle = styled.div`
@@ -78,7 +83,7 @@ const projectProfile = Social.getr(`${projectId}/profile`);
 
 if (!projectProfile) return "";
 
-const MAX_DESCRIPTION_LENGTH = 120;
+const MAX_DESCRIPTION_LENGTH = 80;
 
 const { name, description, category } = projectProfile;
 // const name = projectProfile?.name || "No name";
@@ -91,6 +96,8 @@ const donationsForProject = Near.view(donationContractId, "get_donations_for_rec
   recipient_id: projectId,
 });
 
+console.log(donationsForProject);
+
 const [totalAmount, totalDonors] = useMemo(() => {
   if (!donationsForProject) return [null, null];
   const donors = [];

apps/potlock/widget/Project/ListPage.jsx

@@ -5,6 +5,8 @@ const IPFS_BASE_URL = "https://nftstorage.link/ipfs/";
 const HERO_BACKGROUND_IMAGE_URL =
   IPFS_BASE_URL + "bafkreiewg5afxbkvo6jbn6jgv7zm4mtoys22jut65fldqtt7wagar4wbga";
 
+console.log(Social.getr(`${id}/profile`));
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -202,10 +204,6 @@ return (
       />
     </HeroContainer>
     <ProjectsContainer>
-      <SectionHeader>
-        <SectionTitle>All projects</SectionTitle>
-        <ProjectsCount>{projects.length}</ProjectsCount>
-      </SectionHeader>
       <Widget
         src={`${ownerId}/widget/Components.ListSection`}
         props={{
@@ -216,12 +214,12 @@ return (
               loading={
                 <div
                   style={{
-                    width: "320px",
+                    width: "100%",
                     height: "500px",
                     borderRadius: "12px",
                     background: "white",
-                    boxShadow: "0px -2px 0px #464646 inset",
-                    border: "1px solid #292929",
+                    boxShadow: "0px -2px 0px #dbdbdb inset",
+                    border: "1px solid #dbdbdb",
                   }}
                 />
               }