Merge pull request #11 from PotLock/feat/create-project-page

create & edit a project page

README.md

@@ -2,6 +2,8 @@
 
 PotLock application refactoring using Além.
 
+[Access the staging app here.](https://app.potlock.org/staging.potlock.near/widget/IndexLoader)
+
 ### How to use
 
 Create the `.env` file with the following content:

src/assets/svgs/InfoIcon.tsx

@@ -0,0 +1,15 @@
+const InfoIcon = (props: any) => {
+  return (
+    <svg {...props} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.0001 13.3327V9.99935M10.0001 6.66602H10.0084M18.3334 9.99935C18.3334 14.6017 14.6025 18.3327 10.0001 18.3327C5.39771 18.3327 1.66675 14.6017 1.66675 9.99935C1.66675 5.39698 5.39771 1.66602 10.0001 1.66602C14.6025 1.66602 18.3334 5.39698 18.3334 9.99935Z"
+        stroke="#475467"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default InfoIcon;

src/components/Hero/Hero.tsx

@@ -1,4 +1,4 @@
-import { State, useState } from "alem";
+import { State, context, useState } from "alem";
 import {
   Button,
   ButtonRegisterProject,
@@ -13,6 +13,7 @@ import {
 import DonationStats from "../../pages/Projects/components/DonationStats/DonationStats";
 import getProjects from "@app/services/getProjects";
 import ModalDonation from "@app/modals/ModalDonation";
+import ListsSDK from "@app/SDK/lists";
 
 const Hero = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -33,6 +34,11 @@ const Hero = () => {
     }
   };
 
+  const accountId = context.accountId;
+
+  const allRegistrations = ListsSDK.getRegistrations() || [];
+  const isRegisteredProject = allRegistrations.find((registration: any) => registration.registrant_id === accountId);
+
   return (
     <HeroContainer>
       <HeaderContainer>
@@ -66,7 +72,11 @@ const Hero = () => {
           <Button onClick={openDonateRandomlyModal}>Donate Randomly</Button>
           {/* <ButtonRegisterProject href={"?tab=createproject"}>Register Your Project</ButtonRegisterProject> */}
           {isModalOpen && <ModalDonation projectId={getRandomProject()} onClose={closeDonateRandomlyModal} />}
-          <ButtonRegisterProject>Register Your Project</ButtonRegisterProject>
+          <ButtonRegisterProject
+            href={isRegisteredProject ? `?tab=project&projectId=${accountId}` : "?tab=createproject"}
+          >
+            {isRegisteredProject ? "View Your Project" : "Register Your Project"}
+          </ButtonRegisterProject>
         </ButtonsContainer>
         <DonationStats />
       </HeaderContainer>

src/components/InfoSegment/InfoSegment.tsx

@@ -0,0 +1,28 @@
+import { Container, Description, Heading, Text } from "./styles";
+import InfoIcon from "@app/assets/svgs/InfoIcon";
+
+const InfoSegment = ({ title, description }: { title: string; description: string }) => {
+  const icon = (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.0001 13.3327V9.99935M10.0001 6.66602H10.0084M18.3334 9.99935C18.3334 14.6017 14.6025 18.3327 10.0001 18.3327C5.39771 18.3327 1.66675 14.6017 1.66675 9.99935C1.66675 5.39698 5.39771 1.66602 10.0001 1.66602C14.6025 1.66602 18.3334 5.39698 18.3334 9.99935Z"
+        stroke="#475467"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+
+  return (
+    <Container>
+      <InfoIcon />
+      <Text>
+        <Heading>{title}</Heading>
+        <Description>{description}</Description>
+      </Text>
+    </Container>
+  );
+};
+
+export default InfoSegment;

src/components/InfoSegment/styles.ts

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 1em;
+  gap: 0.75em;
+  background: #fcfcfd;
+  border: 1px solid #d0d5dd;
+  border-radius: 4px;
+  width: 100%;
+  svg {
+    width: 20px;
+  }
+`;
+
+export const Text = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 0.75em;
+`;
+
+export const Heading = styled.div`
+  font-style: normal;
+  font-weight: 600;
+  font-size: 0.95em;
+  line-height: 1.25em;
+  color: #344054;
+`;
+
+export const Description = styled.p`
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.95em;
+  line-height: 1.25em;
+  color: #475467;
+  white-space: wrap;
+  margin: 0px;
+`;

src/components/Inputs/Date/Date.tsx

@@ -1,7 +1,7 @@
 import { Container, Error, Input, InputContainer, Label } from "./styles";
 
 type Props = {
-  label?: string;
+  label?: any;
   placeholder?: string;
   value?: string;
   onChange: (value: string) => void;

src/components/Inputs/SelectMultiple/SelectMultiple.tsx

@@ -0,0 +1,29 @@
+import { TypeAhead } from "alem";
+import { Container, Label } from "./styles";
+
+type Props = {
+  label: string;
+  options: any;
+  onChange: (selected: any) => void;
+  placeholder: string;
+  selected: any;
+};
+
+const SelectMultiple = (props: Props) => {
+  const { label, options, onChange, placeholder, selected } = props;
+
+  return (
+    <Container>
+      {label && <Label>{label}</Label>}
+      <Typeahead
+        options={options}
+        multiple
+        onChange={onChange}
+        placeholder={placeholder}
+        // selected={selected}
+      />
+    </Container>
+  );
+};
+
+export default SelectMultiple;

src/components/Inputs/SelectMultiple/styles.ts

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0px;
+  gap: 0.45em;
+  width: 100%;
+`;
+
+export const Label = styled.label`
+  font-style: normal;
+  // font-weight: 600;
+  font-size: 0.95em;
+  line-height: 1.25em;
+  color: #344054;
+`;

src/pages/CreateProject/CreateProject.tsx

@@ -0,0 +1,28 @@
+import { useParams } from "alem";
+import Header from "./components/Header/Header";
+import CreateForm from "./components/CreateForm/CreateForm";
+
+const CreateProject = () => {
+  const { tab } = useParams();
+  const edit = tab === "editproject";
+
+  return (
+    <>
+      <Header
+        {...{
+          title1: edit ? "Edit your project" : "Create new project",
+          description: `${
+            edit ? "Update your " : "Create a "
+          } profile for your impact project to receive direct donations, qualify for funding rounds, join NEAR's accelerator, and get discovered across social platforms.`,
+          centered: false,
+          containerStyle: {
+            background: "#FEF6EE",
+          },
+        }}
+      />
+      <CreateForm edit={edit} />
+    </>
+  );
+};
+
+export default CreateProject;

src/pages/CreateProject/components/AccountsStack/AccountsStack.tsx

@@ -0,0 +1,55 @@
+import { useMemo } from "alem";
+import { MoreAccountsContainer, MoreAccountsText, StackContainer } from "./styles";
+import ProfileImage from "@app/components/mob.near/ProfileImage";
+
+const AccountsStack = ({
+  accountIds,
+  maxDisplayCount,
+  sendToBack,
+}: {
+  accountIds: string[];
+  maxDisplayCount?: number;
+  sendToBack: boolean;
+}) => {
+  const MAX_DISPLAY_COUNT = maxDisplayCount || 5;
+
+  const accounts = useMemo(() => accountIds.slice(0, MAX_DISPLAY_COUNT), [accountIds]);
+
+  return (
+    <StackContainer>
+      {accountIds.length > MAX_DISPLAY_COUNT && (
+        <MoreAccountsContainer
+          style={{
+            zIndex: accountIds.length + 1,
+          }}
+        >
+          <MoreAccountsText>{MAX_DISPLAY_COUNT}+</MoreAccountsText>
+        </MoreAccountsContainer>
+      )}
+      {accounts.map((accountId: string, idx: number) => {
+        return (
+          <ProfileImage
+            {...{
+              accountId,
+              style: {
+                width: "28px",
+                height: "28px",
+                zIndex: sendToBack ? 0 : accountIds.length - idx,
+                margin: "0 -8px 0 0",
+                border: "2px solid white",
+                borderRadius: "50%",
+                background: "white",
+              },
+              className: "mb-2",
+              imageClassName: "rounded-circle w-100 h-100 d-block",
+              thumbnail: false,
+              tooltip: true,
+            }}
+          />
+        );
+      })}
+    </StackContainer>
+  );
+};
+
+export default AccountsStack;

src/pages/CreateProject/components/AccountsStack/styles.ts

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+export const StackContainer = styled.div`
+  width: 200px;
+  height: 30px;
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: row;
+  @media screen and (max-width: 768px) {
+    margin-left: 36px;
+  }
+`;
+
+export const MoreAccountsContainer = styled.div`
+  width: 28px;
+  height: 28px;
+  border: 2px solid white;
+  border-radius: 50%;
+  background: #dd3345;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: -8px;
+`;
+
+export const MoreAccountsText = styled.div`
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+  text-align: center;
+`;