aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-02-06 23:24:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into feature/tagging-project-story

Browse Source
This commit is contained in:
MTG2000
2022-10-04 16:10:35 +03:00
parent 310eb0492c 33b42437bc
commit ebeda491ec
13 changed files with 112 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
api/functions/graphql/types/users.js
View File

@@ -72,7 +72,6 @@ const BaseUser = interfaceType({
}).then(d => d.map(item => item.tournament))
}
})
t.nonNull.list.nonNull.field('projects', {
type: "Project",
resolve: async (parent) => {

6
src/features/Profiles/Components/Avatar/Avatar.tsx
View File

@@ -16,7 +16,9 @@ export default function Avatar({ src, alt, className, width = 40, renderTooltip
setTooltipRef,
setTriggerRef,
visible,
} = usePopperTooltip();
} = usePopperTooltip({
});
return (
<>
@@ -28,7 +30,7 @@ export default function Avatar({ src, alt, className, width = 40, renderTooltip
(renderTooltip && visible) && (
<div
ref={setTooltipRef}
{...getTooltipProps({ className: 'tooltip-container' })}
{...getTooltipProps({ className: 'tooltip-container z-10' })}
>
<div {...getArrowProps({ className: 'tooltip-arrow' })} />
{renderTooltip()}

2
src/features/Profiles/pages/ProfilePage/AboutCard/AboutCard.tsx
View File

@@ -100,11 +100,11 @@ export default function AboutCard({ user, isOwner }: Props) {
</a>
:
<CopyToClipboard
key={idx}
text={link.value}
onCopy={() => NotificationsService.info(" Copied to clipboard", { icon: "📋" })}
>
<button
key={idx}
onClick={() => { }}
className={`w-40 aspect-square rounded-full flex justify-center items-center ${link.colors}`}
>

20
src/features/Profiles/pages/ProfilePage/MakerProjectsCard/MakerProjectsCard.stories.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import MakerProjectsCard from './MakerProjectsCard';
export default {
title: 'Profiles/Profile Page/Projects Card',
component: MakerProjectsCard,
argTypes: {
backgroundColor: { control: 'color' },
},
} as ComponentMeta<typeof MakerProjectsCard>;
const Template: ComponentStory<typeof MakerProjectsCard> = (args) => <div className="max-w-[326px]"><MakerProjectsCard {...args as any} ></MakerProjectsCard></div>
export const Default = Template.bind({});
Default.args = {
}

39
src/features/Profiles/pages/ProfilePage/MakerProjectsCard/MakerProjectsCard.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { Link } from 'react-router-dom'
import Button from 'src/Components/Button/Button'
import Card from 'src/Components/Card/Card'
import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
import { ProfileQuery, User, useSimilarProjectsQuery } from 'src/graphql'
import { createRoute } from 'src/utils/routing'
interface Props {
projects: NonNullable<ProfileQuery['profile']>['projects']
isOwner?: boolean;
}
export default function MakerProjectsCard({ projects, isOwner }: Props) {
return (
<Card>
<h3 className="text-body2 font-bolder">🚀 Projects ({projects.length})</h3>
{projects.length === 0 && <>
<p className="text-gray-700 text-body4">😐 No projects listed</p>
{isOwner && <Button color='primary' className='mt-16' size='sm' href={createRoute({ type: "edit-project" })}>List your first project</Button>}
</>}
<ul className='flex flex-col'>
{projects.map(project => {
return <Link key={project.id} to={createRoute({ type: "project", tag: project.hashtag })} className="md:border-b py-16 last-of-type:border-b-0 last-of-type:pb-0">
<li className="flex items-center gap-12">
<img className='w-48 aspect-square rounded-12 border border-gray-100' alt='' src={project.thumbnail_image} />
<div className='overflow-hidden'>
<p className="text-body4 text-gray-800 font-medium whitespace-nowrap overflow-hidden text-ellipsis">{project.title}</p>
<p className="text-body5 text-gray-500">{project.category.icon} {project.category.title}</p>
</div>
</li>
</Link>
})}
</ul>
</Card>
)
}

3
src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
View File

@@ -12,6 +12,7 @@ import SkillsCard from "./SkillsCard/SkillsCard"
import TournamentsCard from "./TournamentsCard/TournamentsCard"
import { MEDIA_QUERIES } from "src/utils/theme"
import SimilarMakersCard from "./SimilarMakersCard/SimilarMakersCard"
import MakerProjectsCard from "./MakerProjectsCard/MakerProjectsCard"
export default function ProfilePage() {
@@ -65,6 +66,7 @@ export default function ProfilePage() {
<StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
</main>
<aside className="min-w-0">
<MakerProjectsCard projects={profileQuery.data.profile.projects} isOwner={isOwner} />
<SimilarMakersCard makers={profileQuery.data.profile.similar_makers} />
</aside>
</>
@@ -74,6 +76,7 @@ export default function ProfilePage() {
<AboutCard user={profileQuery.data.profile} isOwner={isOwner} />
<RolesCard roles={profileQuery.data.profile.roles} isOwner={isOwner} />
<SkillsCard skills={profileQuery.data.profile.skills} isOwner={isOwner} />
<MakerProjectsCard projects={profileQuery.data.profile.projects} isOwner={isOwner} />
<StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
</main>
</>

11
src/features/Profiles/pages/ProfilePage/profile.graphql
View File

@@ -17,6 +17,17 @@ query profile($profileId: Int!) {
start_date
end_date
}
projects {
id
hashtag
title
thumbnail_image
category {
id
icon
title
}
}
similar_makers {
id
name

3
src/features/Projects/pages/ProjectPage/Components/MakersCard/MakersCard.tsx
View File

@@ -2,6 +2,7 @@ import { Link } from 'react-router-dom'
import Badge from 'src/Components/Badge/Badge'
import Card from 'src/Components/Card/Card'
import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
import { sortMembersByRole } from 'src/features/Projects/utils/helperFunctions'
import { ProjectDetailsQuery } from 'src/graphql'
import { createRoute } from 'src/utils/routing'
@@ -20,7 +21,7 @@ export default function MakersCard({ members, recruit_roles }: Props) {
<div className="mt-16">
<div className="flex flex-wrap gap-8">
{members.length === 0 && <p className="text-body4 text-gray-500">Not listed</p>}
{members.map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
{sortMembersByRole(members).map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
<Avatar
width={40}
src={m.user.avatar}

7
src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
View File

@@ -23,6 +23,7 @@ import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
import { Link } from 'react-router-dom';
import { createRoute } from 'src/utils/routing';
import { IoMdClose } from 'react-icons/io';
import { sortMembersByRole } from 'src/features/Projects/utils/helperFunctions';
interface Props extends ModalCard {
@@ -231,14 +232,14 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
</div>}
{project.members.length > 0 &&
<div>
<div className='relative'>
<p className="text-body6 uppercase font-medium text-gray-400 mb-8">MAKERS</p>
<div className="flex flex-wrap gap-8">
{project.members.map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
{sortMembersByRole(project.members).map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
<Avatar
width={40}
src={m.user.avatar}
renderTooltip={() => <div className='bg-white px-12 py-8 border border-gray-200 rounded-12 flex flex-wrap gap-12 shadow-lg'>
renderTooltip={() => <div className='bg-white px-12 py-8 border border-gray-200 rounded-12 flex flex-wrap gap-12 shadow-lg relative z-10'>
<Avatar width={48} src={m.user.avatar} />
<div className='overflow-hidden'>
<p className={`text-black font-medium overflow-hidden text-ellipsis`}>{m.user.name}</p>

2
src/features/Projects/pages/ProjectPage/ProjectPage.tsx
View File

@@ -70,7 +70,7 @@ export default function ProjectPage() {
<img className="w-full h-full border-2 border-white rounded-24" src={project.thumbnail_image} alt="" />
</div>
</div>
<div className={`content-container md:pt-32 bg-white md:bg-inherit`}
<div className={`content-container pb-32 md:pt-32 bg-white md:bg-inherit`}
>
<div className={` ${styles.grid}`}
>{isMediumScreen ?

11
src/features/Projects/utils/helperFunctions.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Team_Member_Role } from "src/graphql";
export function sortMembersByRole<T extends { role: Team_Member_Role }>(members: T[]) {
return [...members].sort((a, b) => {
if (a.role === b.role) return 0
if (a.role === Team_Member_Role.Owner) return -1;
if (b.role === Team_Member_Role.Owner) return +1;
if (a.role === Team_Member_Role.Admin) return -1;
return +1;
})
}

13
src/graphql/index.tsx
View File

@@ -1030,7 +1030,7 @@ export type ProfileQueryVariables = Exact<{
}>;
export type ProfileQuery = { __typename?: 'Query', profile: { __typename?: 'User', id: number, name: string, avatar: string, join_date: any, role: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: string | null, discord: string | null, github: string | null, linkedin: string | null, bio: string | null, location: string | null, stories: Array<{ __typename?: 'Story', id: number, title: string, createdAt: any, tags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null }> }>, tournaments: Array<{ __typename?: 'Tournament', id: number, title: string, thumbnail_image: string, start_date: any, end_date: any }>, similar_makers: Array<{ __typename?: 'User', id: number, name: string, avatar: string, jobTitle: string | null }>, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } | null };
export type ProfileQuery = { __typename?: 'Query', profile: { __typename?: 'User', id: number, name: string, avatar: string, join_date: any, role: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: string | null, discord: string | null, github: string | null, linkedin: string | null, bio: string | null, location: string | null, stories: Array<{ __typename?: 'Story', id: number, title: string, createdAt: any, tags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null }> }>, tournaments: Array<{ __typename?: 'Tournament', id: number, title: string, thumbnail_image: string, start_date: any, end_date: any }>, projects: Array<{ __typename?: 'Project', id: number, hashtag: string, title: string, thumbnail_image: string, category: { __typename?: 'Category', id: number, icon: string | null, title: string } }>, similar_makers: Array<{ __typename?: 'User', id: number, name: string, avatar: string, jobTitle: string | null }>, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } | null };
export type CategoryPageQueryVariables = Exact<{
categoryId: Scalars['Int'];
@@ -2311,6 +2311,17 @@ export const ProfileDocument = gql`
start_date
end_date
}
projects {
id
hashtag
title
thumbnail_image
category {
id
icon
title
}
}
similar_makers {
id
name

8
src/mocks/data/users.ts
View File

@@ -179,7 +179,7 @@ export const users: (User & MyProfile)[] = [{
skills: randomItems(7, ...allMakersSkills),
tournaments,
similar_makers,
projects,
projects: projects.slice(0, 3),
},
{
id: 441,
@@ -219,7 +219,7 @@ export const users: (User & MyProfile)[] = [{
skills: randomItems(7, ...allMakersSkills),
tournaments,
similar_makers,
projects,
projects: projects.slice(0, 3),
},
{
id: 422,
@@ -258,7 +258,7 @@ export const users: (User & MyProfile)[] = [{
skills: randomItems(7, ...allMakersSkills),
tournaments,
similar_makers,
projects,
projects: projects.slice(0, 3),
},
{
id: 511,
@@ -297,7 +297,7 @@ export const users: (User & MyProfile)[] = [{
skills: randomItems(7, ...allMakersSkills),
tournaments,
similar_makers,
projects,
projects: projects.slice(0, 3),
}]