feat: add projects card to user profile

2026-02-05 22:54:24 +01:00 · 2022-10-04 15:29:52 +03:00
parent b4bf13e54a
commit 08c8dc065c
11 changed files with 121 additions and 7 deletions
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -548,6 +548,7 @@ export interface NexusGenFieldTypes {
    name: string; // String!
    nostr_prv_key: string | null; // String
    nostr_pub_key: string | null; // String
+    projects: NexusGenRootTypes['Project'][]; // [Project!]!
    role: string | null; // String
    roles: NexusGenRootTypes['MakerRole'][]; // [MakerRole!]!
    similar_makers: NexusGenRootTypes['User'][]; // [User!]!
@@ -744,6 +745,7 @@ export interface NexusGenFieldTypes {
    linkedin: string | null; // String
    location: string | null; // String
    name: string; // String!
+    projects: NexusGenRootTypes['Project'][]; // [Project!]!
    role: string | null; // String
    roles: NexusGenRootTypes['MakerRole'][]; // [MakerRole!]!
    similar_makers: NexusGenRootTypes['User'][]; // [User!]!
@@ -781,6 +783,7 @@ export interface NexusGenFieldTypes {
    linkedin: string | null; // String
    location: string | null; // String
    name: string; // String!
+    projects: NexusGenRootTypes['Project'][]; // [Project!]!
    role: string | null; // String
    roles: NexusGenRootTypes['MakerRole'][]; // [MakerRole!]!
    similar_makers: NexusGenRootTypes['User'][]; // [User!]!
@@ -937,6 +940,7 @@ export interface NexusGenFieldTypeNames {
    name: 'String'
    nostr_prv_key: 'String'
    nostr_pub_key: 'String'
+    projects: 'Project'
    role: 'String'
    roles: 'MakerRole'
    similar_makers: 'User'
@@ -1133,6 +1137,7 @@ export interface NexusGenFieldTypeNames {
    linkedin: 'String'
    location: 'String'
    name: 'String'
+    projects: 'Project'
    role: 'String'
    roles: 'MakerRole'
    similar_makers: 'User'
@@ -1170,6 +1175,7 @@ export interface NexusGenFieldTypeNames {
    linkedin: 'String'
    location: 'String'
    name: 'String'
+    projects: 'Project'
    role: 'String'
    roles: 'MakerRole'
    similar_makers: 'User'
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -31,6 +31,7 @@ interface BaseUser {
  linkedin: String
  location: String
  name: String!
+  projects: [Project!]!
  role: String
  roles: [MakerRole!]!
  similar_makers: [User!]!
@@ -216,6 +217,7 @@ type MyProfile implements BaseUser {
  name: String!
  nostr_prv_key: String
  nostr_pub_key: String
+  projects: [Project!]!
  role: String
  roles: [MakerRole!]!
  similar_makers: [User!]!
@@ -554,6 +556,7 @@ type User implements BaseUser {
  linkedin: String
  location: String
  name: String!
+  projects: [Project!]!
  role: String
  roles: [MakerRole!]!
  similar_makers: [User!]!
--- a/api/functions/graphql/types/users.js
+++ b/api/functions/graphql/types/users.js
@@ -72,6 +72,19 @@ const BaseUser = interfaceType({
                }).then(d => d.map(item => item.tournament))
            }
        })
+        t.nonNull.list.nonNull.field('projects', {
+            type: "Project",
+            resolve: async (parent) => {
+                return prisma.projectMember.findMany({
+                    where: {
+                        userId: parent.id
+                    },
+                    include: {
+                        project: true
+                    }
+                }).then(d => d.map(item => item.project))
+            }
+        })
        t.nonNull.list.nonNull.field('similar_makers', {
            type: "User",
            resolve(parent,) {
--- a/src/features/Profiles/pages/ProfilePage/AboutCard/AboutCard.tsx
+++ b/src/features/Profiles/pages/ProfilePage/AboutCard/AboutCard.tsx
@@ -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}`}
                                    >
--- a/src/features/Profiles/pages/ProfilePage/MakerProjectsCard/MakerProjectsCard.stories.tsx
+++ b/src/features/Profiles/pages/ProfilePage/MakerProjectsCard/MakerProjectsCard.stories.tsx
@@ -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 = {
+}
+
+
--- a/src/features/Profiles/pages/ProfilePage/MakerProjectsCard/MakerProjectsCard.tsx
+++ b/src/features/Profiles/pages/ProfilePage/MakerProjectsCard/MakerProjectsCard.tsx
@@ -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>
+    )
+}
--- a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
+++ b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
@@ -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>
                    </>
--- a/src/features/Profiles/pages/ProfilePage/profile.graphql
+++ b/src/features/Profiles/pages/ProfilePage/profile.graphql
@@ -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
--- a/src/features/Projects/pages/ProjectPage/ProjectPage.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectPage.tsx
@@ -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 ?
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -48,6 +48,7 @@ export type BaseUser = {
  linkedin: Maybe<Scalars['String']>;
  location: Maybe<Scalars['String']>;
  name: Scalars['String'];
+  projects: Array<Project>;
  role: Maybe<Scalars['String']>;
  roles: Array<MakerRole>;
  similar_makers: Array<User>;
@@ -325,6 +326,7 @@ export type MyProfile = BaseUser & {
  name: Scalars['String'];
  nostr_prv_key: Maybe<Scalars['String']>;
  nostr_pub_key: Maybe<Scalars['String']>;
+  projects: Array<Project>;
  role: Maybe<Scalars['String']>;
  roles: Array<MakerRole>;
  similar_makers: Array<User>;
@@ -813,6 +815,7 @@ export type User = BaseUser & {
  linkedin: Maybe<Scalars['String']>;
  location: Maybe<Scalars['String']>;
  name: Scalars['String'];
+  projects: Array<Project>;
  role: Maybe<Scalars['String']>;
  roles: Array<MakerRole>;
  similar_makers: Array<User>;
@@ -1020,7 +1023,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'];
@@ -2283,6 +2286,17 @@ export const ProfileDocument = gql`
      start_date
      end_date
    }
+    projects {
+      id
+      hashtag
+      title
+      thumbnail_image
+      category {
+        id
+        icon
+        title
+      }
+    }
    similar_makers {
      id
      name
--- a/src/mocks/data/users.ts
+++ b/src/mocks/data/users.ts
@@ -2,6 +2,7 @@ import { Chance } from "chance";
 import { GenericMakerRole, MakerSkill, MyProfile, RoleLevelEnum, Tournament, User } from "src/graphql";
 import { randomItem, randomItems } from "src/utils/helperFunctions";
 import { posts } from "./posts";
+import { projects } from "./projects";
 import { getCoverImage, getAvatarImage } from "./utils";

 const chance = new Chance();
@@ -177,7 +178,8 @@ export const users: (User & MyProfile)[] = [{
    roles: randomItems(3, ...allMakersRoles).map(role => ({ ...role, level: randomItem(...Object.values(RoleLevelEnum)) })),
    skills: randomItems(7, ...allMakersSkills),
    tournaments,
-    similar_makers
+    similar_makers,
+    projects: projects.slice(0, 3),
 },
 {
    id: 441,
@@ -216,7 +218,8 @@ export const users: (User & MyProfile)[] = [{
    roles: randomItems(3, ...allMakersRoles).map(role => ({ ...role, level: randomItem(...Object.values(RoleLevelEnum)) })),
    skills: randomItems(7, ...allMakersSkills),
    tournaments,
-    similar_makers
+    similar_makers,
+    projects: projects.slice(0, 3),
 },
 {
    id: 422,
@@ -254,7 +257,8 @@ export const users: (User & MyProfile)[] = [{
    roles: randomItems(3, ...allMakersRoles).map(role => ({ ...role, level: randomItem(...Object.values(RoleLevelEnum)) })),
    skills: randomItems(7, ...allMakersSkills),
    tournaments,
-    similar_makers
+    similar_makers,
+    projects: projects.slice(0, 3),
 },
 {
    id: 511,
@@ -292,7 +296,8 @@ export const users: (User & MyProfile)[] = [{
    roles: randomItems(3, ...allMakersRoles).map(role => ({ ...role, level: randomItem(...Object.values(RoleLevelEnum)) })),
    skills: randomItems(7, ...allMakersSkills),
    tournaments,
-    similar_makers
+    similar_makers,
+    projects: projects.slice(0, 3),
 }]