-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implement edit my project page
- Loading branch information
1 parent
ba6fe1c
commit 66ec074
Showing
38 changed files
with
1,524 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import ProjectCard from 'containers/projects/ui/Card'; | ||
| import React from 'react'; | ||
| import Icon from 'components/icon'; | ||
| import eye from 'svgs/icons/eye.svg?sprite'; | ||
| import upload from 'svgs/icons/upload.svg?sprite'; | ||
| import CHEVRON_LEFT from 'svgs/icons/arrow-left.svg?sprite'; | ||
|
|
||
| const FundingHome = () => { | ||
| return ( | ||
| <ProjectCard title=""> | ||
| <div className="flex flex-col items-center justify-center font-display h-[50vh]"> | ||
| <h2 className="md:text-2xl">You have no funding</h2> | ||
| <h2 className="md:text-2xl">Reported for this project</h2> | ||
| <div className="md:w-[406px] text-center font-sans my-5"> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur. Convallis fusce neque odio nunc elementum | ||
| habitant sit sagittis. | ||
| </p> | ||
| </div> | ||
| <button className="bg-green-10 text-black rounded-lg p-2"> Report Funding</button> | ||
| </div> | ||
|
|
||
| <div className="flex items-center justify-end"> | ||
| <button className="flex items-center p-2 mt-6 text-black transition bg-transparent border rounded-lg hover:bg-blue-700"> | ||
| <span className="pr-2"> | ||
| <Icon icon={CHEVRON_LEFT} className="w-3 h-3" /> | ||
| </span> | ||
| Focus Area{' '} | ||
| </button> | ||
| </div> | ||
| </ProjectCard> | ||
| ); | ||
| }; | ||
|
|
||
| export default FundingHome; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import React from 'react' | ||
| import MyProjectList from './list' | ||
|
|
||
| const MyProject = () => { | ||
| return ( | ||
| <> | ||
| <MyProjectList /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default MyProject |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export {default} from './component'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| import cx from 'classnames'; | ||
| import { Menu } from '@headlessui/react'; | ||
| import MyProjectsSentence from 'containers/sentence/my-projects'; | ||
| import Wrapper from 'containers/wrapper'; | ||
| import { setSort } from 'store/myProjects'; | ||
| import { useFetchMemberProjects, useMyInfinityProjects } from 'hooks/my-projects'; | ||
| import { useCallback } from 'react'; | ||
| import { useAppDispatch, useAppSelector } from 'store/hooks'; | ||
| import Button from 'components/button'; | ||
| import Icon from 'components/icon'; | ||
| import Loading from 'components/loading'; | ||
| import CHEVRON_DOWN_SVG from 'svgs/ui/chevron-down.svg?sprite'; | ||
| import Cards from 'containers/cards'; | ||
| import Link from 'next/link'; | ||
|
|
||
| const MyProjectList = () => { | ||
| const { sort } = useAppSelector((state) => state['/myProjects']); | ||
|
|
||
| const dispatch = useAppDispatch(); | ||
| const { | ||
| data: myProjects, | ||
| fetchNextPage: fetchNextPageProjects, | ||
| hasNextPage: hasNextProjectsPage, | ||
| isFetchingNextPage: isFetchingNextProjectsPage, | ||
| isFetching: isFetchingMyProjects, | ||
| isFetched: isFetchedMyProjects, | ||
| } = useMyInfinityProjects({ | ||
| sort, | ||
| perPage: 12, | ||
| }); | ||
|
|
||
| const LOADING = isFetchingMyProjects && !isFetchingMyProjects; | ||
|
|
||
| const handleSortMyProjects = useCallback( | ||
| (value) => { | ||
| dispatch(setSort({ field: 'name', order: value })); | ||
| }, | ||
| [dispatch] | ||
| ); | ||
|
|
||
| const handleOnShowMore = useCallback(() => { | ||
| fetchNextPageProjects(); | ||
| }, [fetchNextPageProjects]); | ||
|
|
||
| return ( | ||
| <> | ||
| <Wrapper> | ||
| <div className="py-8"> | ||
| {!!myProjects.length && ( | ||
| <> | ||
| <MyProjectsSentence type="projects" /> | ||
| <div className="flex justify-between mt-10"> | ||
| <Menu as="div" className="relative"> | ||
| <Menu.Button className="flex items-center space-x-2"> | ||
| <p className="font-semibold">Sort by</p> | ||
| <Icon | ||
| icon={CHEVRON_DOWN_SVG} | ||
| className={cx({ | ||
| 'w-3 h-3': true, | ||
| })} | ||
| /> | ||
| </Menu.Button> | ||
| <Menu.Items className="absolute flex flex-col py-2 bg-white rounded-md shadow-lg focus:outline-none"> | ||
| <Menu.Item> | ||
| {({ active }) => ( | ||
| <button | ||
| className={cx({ | ||
| 'px-4 py-3': true, | ||
| 'bg-grey-20/20': active, | ||
| })} | ||
| type="button" | ||
| onClick={() => handleSortMyProjects('asc')} | ||
| > | ||
| A - Z | ||
| </button> | ||
| )} | ||
| </Menu.Item> | ||
| <Menu.Item> | ||
| {({ active }) => ( | ||
| <button | ||
| className={cx({ | ||
| 'px-4 py-3': true, | ||
| 'bg-grey-20/20': active, | ||
| })} | ||
| type="button" | ||
| onClick={() => handleSortMyProjects('desc')} | ||
| > | ||
| Z - A | ||
| </button> | ||
| )} | ||
| </Menu.Item> | ||
| </Menu.Items> | ||
| </Menu> | ||
| </div> | ||
| </> | ||
| )} | ||
| </div> | ||
|
|
||
| {!myProjects.length && !LOADING && ( | ||
| <div className="flex items-center justify-center px-5 grow "> | ||
| <div className="flex flex-col items-center py-12 pb-20 space-y-4"> | ||
| <p className="md:text-[40px] font-display font-medium">You have no projects added.</p> | ||
| <p className="max-w-sm text-center text-grey-20"> | ||
| Sorry, we have searched in our entire database but we couldn't find any results | ||
| fitting your search criteria. | ||
| </p> | ||
|
|
||
| <button className="px-4 py-2 text-black rounded-lg bg-green-10"> | ||
| <Link href="/my-projects/new">Add Product</Link> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| )} | ||
|
|
||
| {!!myProjects.length && ( | ||
| <div className="pb-10"> | ||
| <Cards | ||
| pathname="/members/projects" | ||
| theme="bg-green-0" | ||
| data={myProjects} | ||
| project={true} | ||
| /> | ||
| </div> | ||
| )} | ||
|
|
||
| {hasNextProjectsPage && ( | ||
| <div className="flex justify-center py-10"> | ||
| <Button | ||
| type="button" | ||
| theme="black-alt" | ||
| size="xl" | ||
| className="overflow-hidden" | ||
| onClick={handleOnShowMore} | ||
| > | ||
| Show more | ||
| <Loading | ||
| visible={isFetchingNextProjectsPage} | ||
| className="absolute flex items-center justify-center w-full h-full bg-white" | ||
| /> | ||
| </Button> | ||
| </div> | ||
| )} | ||
| </Wrapper> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default MyProjectList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export {default} from './component'; |
Oops, something went wrong.