From 80b7053f88825cb0685eb59205e2d08a596749a2 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 21 Aug 2022 13:44:35 +0300
Subject: [PATCH 01/10] feat: profile roles, skills, tournaments, similar
 makers cards/stories/schemas

---
 api/functions/graphql/nexus-typegen.ts        |  92 ++++++++++++++
 api/functions/graphql/schema.graphql          |  45 +++++++
 api/functions/graphql/types/tournaments.js    |  55 +++++++++
 api/functions/graphql/types/users.js          |  91 +++++++++++++-
 .../Components/TrendingCard/TrendingCard.tsx  |   2 +-
 .../CommentsSettingsCard.stories.tsx          |   5 +-
 .../LinkedAccountsCard.stories.tsx            |   6 +-
 .../pages/ProfilePage/AboutCard/AboutCard.tsx |  44 ++++---
 .../pages/ProfilePage/ProfilePage.tsx         |  46 +++++--
 .../RolesCard/RolesCard.stories.tsx           |  31 +++++
 .../pages/ProfilePage/RolesCard/RolesCard.tsx |  58 +++++++++
 .../SimilarMakersCard.stories.tsx             |  22 ++++
 .../SimilarMakersCard/SimilarMakersCard.tsx   |  38 ++++++
 .../SkillsCard/SkillsCard.stories.tsx         |  31 +++++
 .../ProfilePage/SkillsCard/SkillsCard.tsx     |  29 +++++
 .../TournamentsCard.stories.tsx               |  31 +++++
 .../TournamentsCard/TournamentsCard.tsx       |  45 +++++++
 .../pages/ProfilePage/profile.graphql         |  23 ++++
 .../pages/ProfilePage/styles.module.scss      |   9 ++
 src/graphql/index.tsx                         |  78 +++++++++++-
 src/mocks/data/users.ts                       | 113 +++++++++++++++++-
 21 files changed, 856 insertions(+), 38 deletions(-)
 create mode 100644 api/functions/graphql/types/tournaments.js
 create mode 100644 src/features/Profiles/pages/ProfilePage/RolesCard/RolesCard.stories.tsx
 create mode 100644 src/features/Profiles/pages/ProfilePage/RolesCard/RolesCard.tsx
 create mode 100644 src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.stories.tsx
 create mode 100644 src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.tsx
 create mode 100644 src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.stories.tsx
 create mode 100644 src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.tsx
 create mode 100644 src/features/Profiles/pages/ProfilePage/TournamentsCard/TournamentsCard.stories.tsx
 create mode 100644 src/features/Profiles/pages/ProfilePage/TournamentsCard/TournamentsCard.tsx

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index bd8c67e..4c8413f 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -57,6 +57,7 @@ export interface NexusGenInputs {
 
 export interface NexusGenEnums {
   POST_TYPE: "Bounty" | "Question" | "Story"
+  RoleLevelEnum: 3 | 0 | 1 | 2 | 4
   VOTE_ITEM_TYPE: "Bounty" | "PostComment" | "Project" | "Question" | "Story" | "User"
 }
 
@@ -208,6 +209,16 @@ export interface NexusGenObjects {
     isOfficial?: boolean | null; // Boolean
     title: string; // String!
   }
+  Tournament: { // root type
+    cover_image: string; // String!
+    description: string; // String!
+    end_date: NexusGenScalars['Date']; // Date!
+    id: number; // Int!
+    start_date: NexusGenScalars['Date']; // Date!
+    thumbnail_image: string; // String!
+    title: string; // String!
+    website: string; // String!
+  }
   User: { // root type
     avatar: string; // String!
     bio?: string | null; // String
@@ -224,6 +235,16 @@ export interface NexusGenObjects {
     twitter?: string | null; // String
     website?: string | null; // String
   }
+  UserRole: { // root type
+    icon: string; // String!
+    id: number; // Int!
+    level: NexusGenEnums['RoleLevelEnum']; // RoleLevelEnum!
+    title: string; // String!
+  }
+  UserSkill: { // root type
+    id: number; // Int!
+    title: string; // String!
+  }
   Vote: { // root type
     amount_in_sat: number; // Int!
     id: number; // Int!
@@ -357,7 +378,11 @@ export interface NexusGenFieldTypes {
     nostr_prv_key: string | null; // String
     nostr_pub_key: string | null; // String
     role: string | null; // String
+    roles: NexusGenRootTypes['UserRole'][]; // [UserRole!]!
+    similar_makers: NexusGenRootTypes['User'][]; // [User!]!
+    skills: NexusGenRootTypes['UserSkill'][]; // [UserSkill!]!
     stories: NexusGenRootTypes['Story'][]; // [Story!]!
+    tournaments: NexusGenRootTypes['Tournament'][]; // [Tournament!]!
     twitter: string | null; // String
     walletsKeys: NexusGenRootTypes['WalletKey'][]; // [WalletKey!]!
     website: string | null; // String
@@ -405,6 +430,7 @@ export interface NexusGenFieldTypes {
     profile: NexusGenRootTypes['User'] | null; // User
     projectsByCategory: NexusGenRootTypes['Project'][]; // [Project!]!
     searchProjects: NexusGenRootTypes['Project'][]; // [Project!]!
+    similarMakers: NexusGenRootTypes['User'][]; // [User!]!
   }
   Question: { // field return type
     author: NexusGenRootTypes['Author']; // Author!
@@ -442,6 +468,17 @@ export interface NexusGenFieldTypes {
     isOfficial: boolean | null; // Boolean
     title: string; // String!
   }
+  Tournament: { // field return type
+    cover_image: string; // String!
+    description: string; // String!
+    end_date: NexusGenScalars['Date']; // Date!
+    id: number; // Int!
+    start_date: NexusGenScalars['Date']; // Date!
+    tags: NexusGenRootTypes['Tag'][]; // [Tag!]!
+    thumbnail_image: string; // String!
+    title: string; // String!
+    website: string; // String!
+  }
   User: { // field return type
     avatar: string; // String!
     bio: string | null; // String
@@ -455,10 +492,24 @@ export interface NexusGenFieldTypes {
     location: string | null; // String
     name: string; // String!
     role: string | null; // String
+    roles: NexusGenRootTypes['UserRole'][]; // [UserRole!]!
+    similar_makers: NexusGenRootTypes['User'][]; // [User!]!
+    skills: NexusGenRootTypes['UserSkill'][]; // [UserSkill!]!
     stories: NexusGenRootTypes['Story'][]; // [Story!]!
+    tournaments: NexusGenRootTypes['Tournament'][]; // [Tournament!]!
     twitter: string | null; // String
     website: string | null; // String
   }
+  UserRole: { // field return type
+    icon: string; // String!
+    id: number; // Int!
+    level: NexusGenEnums['RoleLevelEnum']; // RoleLevelEnum!
+    title: string; // String!
+  }
+  UserSkill: { // field return type
+    id: number; // Int!
+    title: string; // String!
+  }
   Vote: { // field return type
     amount_in_sat: number; // Int!
     id: number; // Int!
@@ -485,7 +536,11 @@ export interface NexusGenFieldTypes {
     location: string | null; // String
     name: string; // String!
     role: string | null; // String
+    roles: NexusGenRootTypes['UserRole'][]; // [UserRole!]!
+    similar_makers: NexusGenRootTypes['User'][]; // [User!]!
+    skills: NexusGenRootTypes['UserSkill'][]; // [UserSkill!]!
     stories: NexusGenRootTypes['Story'][]; // [Story!]!
+    tournaments: NexusGenRootTypes['Tournament'][]; // [Tournament!]!
     twitter: string | null; // String
     website: string | null; // String
   }
@@ -606,7 +661,11 @@ export interface NexusGenFieldTypeNames {
     nostr_prv_key: 'String'
     nostr_pub_key: 'String'
     role: 'String'
+    roles: 'UserRole'
+    similar_makers: 'User'
+    skills: 'UserSkill'
     stories: 'Story'
+    tournaments: 'Tournament'
     twitter: 'String'
     walletsKeys: 'WalletKey'
     website: 'String'
@@ -654,6 +713,7 @@ export interface NexusGenFieldTypeNames {
     profile: 'User'
     projectsByCategory: 'Project'
     searchProjects: 'Project'
+    similarMakers: 'User'
   }
   Question: { // field return type name
     author: 'Author'
@@ -691,6 +751,17 @@ export interface NexusGenFieldTypeNames {
     isOfficial: 'Boolean'
     title: 'String'
   }
+  Tournament: { // field return type name
+    cover_image: 'String'
+    description: 'String'
+    end_date: 'Date'
+    id: 'Int'
+    start_date: 'Date'
+    tags: 'Tag'
+    thumbnail_image: 'String'
+    title: 'String'
+    website: 'String'
+  }
   User: { // field return type name
     avatar: 'String'
     bio: 'String'
@@ -704,10 +775,24 @@ export interface NexusGenFieldTypeNames {
     location: 'String'
     name: 'String'
     role: 'String'
+    roles: 'UserRole'
+    similar_makers: 'User'
+    skills: 'UserSkill'
     stories: 'Story'
+    tournaments: 'Tournament'
     twitter: 'String'
     website: 'String'
   }
+  UserRole: { // field return type name
+    icon: 'String'
+    id: 'Int'
+    level: 'RoleLevelEnum'
+    title: 'String'
+  }
+  UserSkill: { // field return type name
+    id: 'Int'
+    title: 'String'
+  }
   Vote: { // field return type name
     amount_in_sat: 'Int'
     id: 'Int'
@@ -734,7 +819,11 @@ export interface NexusGenFieldTypeNames {
     location: 'String'
     name: 'String'
     role: 'String'
+    roles: 'UserRole'
+    similar_makers: 'User'
+    skills: 'UserSkill'
     stories: 'Story'
+    tournaments: 'Tournament'
     twitter: 'String'
     website: 'String'
   }
@@ -833,6 +922,9 @@ export interface NexusGenArgTypes {
       skip?: number | null; // Int
       take: number | null; // Int
     }
+    similarMakers: { // args
+      id: number; // Int!
+    }
   }
 }
 
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index 8a3947c..f6f89f6 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -31,7 +31,11 @@ interface BaseUser {
   location: String
   name: String!
   role: String
+  roles: [UserRole!]!
+  similar_makers: [User!]!
+  skills: [UserSkill!]!
   stories: [Story!]!
+  tournaments: [Tournament!]!
   twitter: String
   website: String
 }
@@ -137,7 +141,11 @@ type MyProfile implements BaseUser {
   nostr_prv_key: String
   nostr_pub_key: String
   role: String
+  roles: [UserRole!]!
+  similar_makers: [User!]!
+  skills: [UserSkill!]!
   stories: [Story!]!
+  tournaments: [Tournament!]!
   twitter: String
   walletsKeys: [WalletKey!]!
   website: String
@@ -221,6 +229,7 @@ type Query {
   profile(id: Int!): User
   projectsByCategory(category_id: Int!, skip: Int = 0, take: Int = 10): [Project!]!
   searchProjects(search: String!, skip: Int = 0, take: Int = 50): [Project!]!
+  similarMakers(id: Int!): [User!]!
 }
 
 type Question implements PostBase {
@@ -237,6 +246,14 @@ type Question implements PostBase {
   votes_count: Int!
 }
 
+enum RoleLevelEnum {
+  Advanced
+  Beginner
+  Hobbyist
+  Intermediate
+  Pro
+}
+
 type Story implements PostBase {
   author: Author!
   body: String!
@@ -271,6 +288,18 @@ type Tag {
   title: String!
 }
 
+type Tournament {
+  cover_image: String!
+  description: String!
+  end_date: Date!
+  id: Int!
+  start_date: Date!
+  tags: [Tag!]!
+  thumbnail_image: String!
+  title: String!
+  website: String!
+}
+
 type User implements BaseUser {
   avatar: String!
   bio: String
@@ -284,7 +313,11 @@ type User implements BaseUser {
   location: String
   name: String!
   role: String
+  roles: [UserRole!]!
+  similar_makers: [User!]!
+  skills: [UserSkill!]!
   stories: [Story!]!
+  tournaments: [Tournament!]!
   twitter: String
   website: String
 }
@@ -294,6 +327,18 @@ input UserKeyInputType {
   name: String!
 }
 
+type UserRole {
+  icon: String!
+  id: Int!
+  level: RoleLevelEnum!
+  title: String!
+}
+
+type UserSkill {
+  id: Int!
+  title: String!
+}
+
 enum VOTE_ITEM_TYPE {
   Bounty
   PostComment
diff --git a/api/functions/graphql/types/tournaments.js b/api/functions/graphql/types/tournaments.js
new file mode 100644
index 0000000..9f04081
--- /dev/null
+++ b/api/functions/graphql/types/tournaments.js
@@ -0,0 +1,55 @@
+const {
+    intArg,
+    objectType,
+    stringArg,
+    extendType,
+    nonNull,
+} = require('nexus');
+const { prisma } = require('../../../prisma');
+
+
+
+const Tournament = objectType({
+    name: 'Tournament',
+    definition(t) {
+        t.nonNull.int('id');
+        t.nonNull.string('title');
+        t.nonNull.string('description');
+        t.nonNull.string('thumbnail_image');
+        t.nonNull.string('cover_image');
+        t.nonNull.date('start_date');
+        t.nonNull.date('end_date');
+        t.nonNull.string('website');
+        t.nonNull.list.nonNull.field('tags', {
+            type: "Tag",
+            resolve: (parent) => {
+                // return prisma.hackathon.findUnique({ where: { id: parent.id } }).tags();
+                return [];
+            }
+        });
+    }
+})
+
+const getAllTournaments = extendType({
+    type: "Query",
+    definition(t) {
+        t.nonNull.list.nonNull.field('getAllTournaments', {
+            type: Tournament,
+            args: {
+                sortBy: stringArg(),
+                tag: intArg(),
+            },
+            resolve(_, args) {
+                const { sortBy, tag } = args;
+                return [];
+            }
+        })
+    }
+})
+
+module.exports = {
+    // Types 
+    Tournament,
+    // Queries
+    getAllTournaments,
+}
\ No newline at end of file
diff --git a/api/functions/graphql/types/users.js b/api/functions/graphql/types/users.js
index b633464..3d4d06b 100644
--- a/api/functions/graphql/types/users.js
+++ b/api/functions/graphql/types/users.js
@@ -1,8 +1,9 @@
 
 const { prisma } = require('../../../prisma');
-const { objectType, extendType, intArg, nonNull, inputObjectType, interfaceType, list } = require("nexus");
+const { objectType, extendType, intArg, nonNull, inputObjectType, interfaceType, list, enumType } = require("nexus");
 const { getUserByPubKey } = require("../../../auth/utils/helperFuncs");
 const { removeNulls } = require("./helpers");
+const { Tournament } = require('./tournaments');
 
 
 
@@ -24,6 +25,39 @@ const BaseUser = interfaceType({
         t.string('linkedin')
         t.string('bio')
         t.string('location')
+        t.nonNull.list.nonNull.field('roles', {
+            type: UserRole,
+            resolve: (parent) => {
+                return []
+            }
+        })
+        t.nonNull.list.nonNull.field('skills', {
+            type: UserSkill,
+            resolve: (parent) => {
+                return []
+            }
+        })
+        t.nonNull.list.nonNull.field('tournaments', {
+            type: Tournament,
+            resolve: (parent) => {
+                return []
+            }
+        })
+        t.nonNull.list.nonNull.field('similar_makers', {
+            type: "User",
+            resolve(parent,) {
+                return prisma.user.findMany({
+                    where: {
+                        AND: {
+                            id: {
+                                not: parent.id
+                            }
+                        }
+                    },
+                    take: 3,
+                })
+            }
+        })
 
 
         t.nonNull.list.nonNull.field('stories', {
@@ -40,6 +74,35 @@ const BaseUser = interfaceType({
     },
 })
 
+const RoleLevelEnum = enumType({
+    name: 'RoleLevelEnum',
+    members: {
+        Beginner: 0,
+        Hobbyist: 1,
+        Intermediate: 2,
+        Advanced: 3,
+        Pro: 4,
+    },
+});
+
+const UserRole = objectType({
+    name: 'UserRole',
+    definition(t) {
+        t.nonNull.int('id');
+        t.nonNull.string('title');
+        t.nonNull.string('icon');
+        t.nonNull.field('level', { type: RoleLevelEnum })
+    }
+})
+
+const UserSkill = objectType({
+    name: 'UserSkill',
+    definition(t) {
+        t.nonNull.int('id');
+        t.nonNull.string('title');
+    }
+})
+
 const User = objectType({
     name: 'User',
     definition(t) {
@@ -93,6 +156,30 @@ const profile = extendType({
     }
 })
 
+const similarMakers = extendType({
+    type: "Query",
+    definition(t) {
+        t.nonNull.list.nonNull.field('similarMakers', {
+            type: "User",
+            args: {
+                id: nonNull(intArg())
+            },
+            async resolve(parent, { id }, ctx) {
+                return prisma.user.findMany({
+                    where: {
+                        AND: {
+                            id: {
+                                not: id
+                            }
+                        }
+                    },
+                    take: 3,
+                })
+            }
+        })
+    }
+})
+
 const ProfileDetailsInput = inputObjectType({
     name: 'ProfileDetailsInput',
     definition(t) {
@@ -228,6 +315,7 @@ const updateUserPreferences = extendType({
 
 module.exports = {
     // Types
+
     BaseUser,
     User,
     MyProfile,
@@ -235,6 +323,7 @@ module.exports = {
     // Queries
     me,
     profile,
+    similarMakers,
     // Mutations
     updateProfileDetails,
     updateUserPreferences,
diff --git a/src/features/Posts/Components/TrendingCard/TrendingCard.tsx b/src/features/Posts/Components/TrendingCard/TrendingCard.tsx
index 99f5cfd..8404bf5 100644
--- a/src/features/Posts/Components/TrendingCard/TrendingCard.tsx
+++ b/src/features/Posts/Components/TrendingCard/TrendingCard.tsx
@@ -14,7 +14,7 @@ export default function TrendingCard() {
 
     return (
         <Card onlyMd>
-            <h3 className="text-body2 font-bolder mb-16">Trending on BOLT.FUN</h3>
+            <h3 className="text-body2 font-bolder mb-16">Trending on BOLT🔩FUN</h3>
             <ul className='flex flex-col'>
                 {
                     trendingPosts.loading ?
diff --git a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/CommentsSettingsCard/CommentsSettingsCard.stories.tsx b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/CommentsSettingsCard/CommentsSettingsCard.stories.tsx
index d06fa34..1f0538f 100644
--- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/CommentsSettingsCard/CommentsSettingsCard.stories.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/CommentsSettingsCard/CommentsSettingsCard.stories.tsx
@@ -3,7 +3,7 @@ import { MOCK_DATA } from 'src/mocks/data';
 import CommentsSettingsCard from './CommentsSettingsCard';
 
 export default {
-    title: 'Profiles/Profile Page/Comments Settings Card',
+    title: 'Profiles/Edit Profile Page/Comments Settings Card',
     component: CommentsSettingsCard,
     argTypes: {
         backgroundColor: { control: 'color' },
@@ -16,5 +16,6 @@ const Template: ComponentStory<typeof CommentsSettingsCard> = (args) => <Comment
 
 export const Default = Template.bind({});
 Default.args = {
-
+    nostr_prv_key: "1234389753205473258327580937245",
+    nostr_pub_key: "55234231277835473258327580937245",
 }
diff --git a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.stories.tsx b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.stories.tsx
index 319570a..cc26f76 100644
--- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.stories.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkedAccountsCard/LinkedAccountsCard.stories.tsx
@@ -1,8 +1,9 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
 import AccountCard from './LinkedAccountsCard';
 
 export default {
-    title: 'Profiles/Profile Page/Account Card',
+    title: 'Profiles/Edit Profile Page/Linked Wallets Card',
     component: AccountCard,
     argTypes: {
         backgroundColor: { control: 'color' },
@@ -15,5 +16,6 @@ const Template: ComponentStory<typeof AccountCard> = (args) => <AccountCard {...
 
 export const Default = Template.bind({});
 Default.args = {
-
+    value: MOCK_DATA['user'].walletsKeys,
+    onChange: () => { }
 }
diff --git a/src/features/Profiles/pages/ProfilePage/AboutCard/AboutCard.tsx b/src/features/Profiles/pages/ProfilePage/AboutCard/AboutCard.tsx
index 8be108c..c995476 100644
--- a/src/features/Profiles/pages/ProfilePage/AboutCard/AboutCard.tsx
+++ b/src/features/Profiles/pages/ProfilePage/AboutCard/AboutCard.tsx
@@ -29,24 +29,28 @@ export default function AboutCard({ user, isOwner }: Props) {
             hasValue: user.website,
             text: user.website?.replace(/(^\w+:|^)\/\//, '').replace(/\/$/, ""),
             icon: FiGlobe,
+            colors: "bg-gray-100 text-gray-900",
             url: user.website && withHttp(user.website)
         },
         {
             hasValue: user.twitter,
             text: user.twitter,
             icon: FiTwitter,
+            colors: "bg-blue-100 text-blue-500",
             url: `https://twitter.com/@${user.twitter}`
         },
         {
             hasValue: user.github,
             text: user.github,
             icon: FiGithub,
+            colors: "bg-pink-100 text-pink-600",
             url: `https://github.com/${user.github}`
         },
         {
             hasValue: user.linkedin,
             text: "LinkedIn",
             icon: FiLinkedin,
+            colors: "bg-sky-100 text-cyan-600",
             url: user.linkedin && withHttp(user.linkedin),
         }
     ];
@@ -65,37 +69,41 @@ export default function AboutCard({ user, isOwner }: Props) {
             </div>
             <div className="p-24 pt-0">
                 <div className="flex flex-col gap-16">
-                    <h1 className="text-h2 font-bolder break-words">
-                        {user.name}
-                    </h1>
+                    <div>
+                        <h1 className="text-h2 font-bolder break-words">
+                            {user.name}
+                        </h1>
 
-                    {links.some(link => link.hasValue) && <div className="flex flex-wrap gap-16">
+                        {<p className="text-body3 font-medium text-gray-600">
+                            {user.jobTitle ? user.jobTitle : "No job title added"}
+                        </p>}
+                    </div>
+                    {<div className="flex flex-wrap gap-16">
                         {links.filter(link => link.hasValue || isOwner).map((link, idx) => link.hasValue ?
                             <a
                                 key={idx}
                                 href={link.url!}
-                                className="text-body4 text-primary-700 font-medium"
+                                className={`w-40 aspect-square rounded-full flex justify-center items-center ${link.colors}`}
                                 target='_blank'
                                 rel="noreferrer">
-                                <link.icon className="scale-125 mr-8" /> <span className="align-middle">{link.text}</span>
-                            </a> :
-                            <p
-                                key={idx}
-                                className="text-body4 text-primary-700 font-medium"
-                            >
-                                <link.icon className="scale-125 mr-8" /> <span className="align-middle">---</span>
-                            </p>)}
+                                <link.icon className="scale-125" />
+                            </a>
+                            :
+                            (isOwner &&
+                                <p
+                                    key={idx}
+                                    className={`text-body4 py-8 px-16 rounded-24 font-medium ${link.colors}`}
+                                >
+                                    <link.icon className="scale-125 mr-8" /> <span className="align-middle">---</span>
+                                </p>))}
                     </div>}
 
-                    {(user.jobTitle || isOwner) && <p className="text-body4 font-medium">
-                        {user.jobTitle ? user.jobTitle : "No job title added"}
-                    </p>}
 
-                    {(user.lightning_address || isOwner) && <p className="text-body5 font-medium">
+                    {<p className="text-body5 font-medium">
                         {user.lightning_address ? `⚡${user.lightning_address}` : "⚡ No lightning address"}
                     </p>}
 
-                    {(user.bio || isOwner) && <p className="text-body5 font-medium">
+                    {<p className="text-body5 font-medium">
                         {user.bio ? user.bio : "No bio added"}
                     </p>}
                 </div>
diff --git a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
index 7cdd415..2f01217 100644
--- a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
+++ b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
@@ -4,9 +4,15 @@ import NotFoundPage from "src/features/Shared/pages/NotFoundPage/NotFoundPage"
 import { useProfileQuery } from "src/graphql"
 import AboutCard from "./AboutCard/AboutCard"
 import { Helmet } from 'react-helmet'
-import { useAppSelector } from 'src/utils/hooks';
+import { useAppSelector, useMediaQuery } from 'src/utils/hooks';
 import styles from './styles.module.scss'
 import StoriesCard from "./StoriesCard/StoriesCard"
+import RolesCard from "./RolesCard/RolesCard"
+import SkillsCard from "./SkillsCard/SkillsCard"
+import TournamentsCard from "./TournamentsCard/TournamentsCard"
+import { MEDIA_QUERIES } from "src/utils/theme"
+import TrendingCard from "src/features/Posts/Components/TrendingCard/TrendingCard"
+import SimilarMakersCard from "./SimilarMakersCard/SimilarMakersCard"
 
 export default function ProfilePage() {
 
@@ -17,7 +23,10 @@ export default function ProfilePage() {
         },
         skip: isNaN(Number(id)),
     })
-    const isOwner = useAppSelector(state => Boolean(state.user.me?.id && state.user.me?.id === profileQuery.data?.profile?.id))
+    const { isOwner } = useAppSelector(state => ({
+        isOwner: Boolean(state.user.me?.id && state.user.me?.id === profileQuery.data?.profile?.id),
+    }))
+    const isMediumScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
 
 
     if (profileQuery.loading)
@@ -39,12 +48,33 @@ export default function ProfilePage() {
             </Helmet>
             <div className={`page-container ${styles.grid}`}
             >
-                <aside></aside>
-                <main className="flex flex-col gap-24">
-                    <AboutCard user={profileQuery.data.profile} isOwner={isOwner} />
-                    <StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
-                </main>
-                <aside></aside>
+                {isMediumScreen ?
+                    <>
+                        <aside>
+
+                            <RolesCard roles={profileQuery.data.profile.roles} />
+                            <SkillsCard skills={profileQuery.data.profile.skills} />
+                            <TournamentsCard tournaments={profileQuery.data.profile.tournaments} />
+                        </aside>
+                        <main>
+
+                            <AboutCard user={profileQuery.data.profile} isOwner={isOwner} />
+                            <StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
+                        </main>
+                        <aside>
+                            <SimilarMakersCard makers={profileQuery.data.profile.similar_makers} />
+                        </aside>
+                    </>
+                    :
+                    <>
+                        <main>
+                            <AboutCard user={profileQuery.data.profile} isOwner={isOwner} />
+                            <RolesCard roles={profileQuery.data.profile.roles} />
+                            <SkillsCard skills={profileQuery.data.profile.skills} />
+                            <StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
+                        </main>
+                    </>
+                }
             </div>
         </>
     )
diff --git a/src/features/Profiles/pages/ProfilePage/RolesCard/RolesCard.stories.tsx b/src/features/Profiles/pages/ProfilePage/RolesCard/RolesCard.stories.tsx
new file mode 100644
index 0000000..d38ce5b
--- /dev/null
+++ b/src/features/Profiles/pages/ProfilePage/RolesCard/RolesCard.stories.tsx
@@ -0,0 +1,31 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+import RolesCard from './RolesCard';
+
+export default {
+    title: 'Profiles/Profile Page/Roles Card',
+    component: RolesCard,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+
+} as ComponentMeta<typeof RolesCard>;
+
+
+const Template: ComponentStory<typeof RolesCard> = (args) => <div className="max-w-[326px]"><RolesCard {...args} ></RolesCard></div>
+
+export const Default = Template.bind({});
+Default.args = {
+    roles: MOCK_DATA['user'].roles
+}
+
+export const Empty = Template.bind({});
+Empty.args = {
+    roles: [],
+}
+
+export const EmptyOwner = Template.bind({});
+EmptyOwner.args = {
+    roles: [],
+    isOwner: true
+}
\ No newline at end of file
diff --git a/src/features/Profiles/pages/ProfilePage/RolesCard/RolesCard.tsx b/src/features/Profiles/pages/ProfilePage/RolesCard/RolesCard.tsx
new file mode 100644
index 0000000..0389e42
--- /dev/null
+++ b/src/features/Profiles/pages/ProfilePage/RolesCard/RolesCard.tsx
@@ -0,0 +1,58 @@
+import Card from 'src/Components/Card/Card'
+import Button from 'src/Components/Button/Button'
+import { RoleLevelEnum, User } from 'src/graphql';
+
+
+
+interface Props {
+    roles: User['roles'][number][]
+    isOwner?: boolean;
+}
+
+export default function RolesCard({ roles, isOwner }: Props) {
+
+    return (
+        <Card>
+            <p className="text-body2 font-bold">🎛️  Roles</p>
+            <div className="mt-16">
+                {roles.length === 0 && <>
+                    <p className="text-gray-700 text-body4">No roles added</p>
+                    {isOwner && <Button color='primary' className='mt-16' size='sm' href='/edit-profile/roles-skills'>Add roles</Button>}
+                </>}
+                <ul className=' flex flex-col gap-16'>
+                    {
+                        roles
+                            .map(role => {
+
+                                let levelInt = 0;
+                                if (role.level === RoleLevelEnum.Hobbyist) levelInt = 1;
+                                if (role.level === RoleLevelEnum.Intermediate) levelInt = 2;
+                                if (role.level === RoleLevelEnum.Advanced) levelInt = 3;
+                                if (role.level === RoleLevelEnum.Pro) levelInt = 4;
+                                return {
+                                    ...role,
+                                    level: levelInt
+                                }
+                            })
+                            .sort((a, b) => b.level - a.level)
+                            .map((role) => <li
+                                key={role.id}
+                                className={`flex gap-16 items-center rounded-8 cursor-pointer font-bold p-4active:scale-95 transition-transform`}
+                            >
+                                <span className={`bg-gray-50 rounded-8 w-48 h-48 text-center py-8`}>{role.icon}</span>
+                                <div className='grow'>
+                                    <p className="font-medium text-gray-800">
+                                        {role.title}
+                                    </p>
+                                    <div className="flex gap-4 mt-16">
+                                        {Array(5).fill(0).map((_, idx) => {
+                                            return <div key={idx} className={`flex-1 h-[2px] rounded-4 ${(idx) <= role.level ? "bg-primary-500" : "bg-gray-100"}`} />
+                                        })}
+                                    </div>
+                                </div>
+                            </li>)}
+                </ul>
+            </div>
+        </Card>
+    )
+}
diff --git a/src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.stories.tsx b/src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.stories.tsx
new file mode 100644
index 0000000..fa60ff8
--- /dev/null
+++ b/src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.stories.tsx
@@ -0,0 +1,22 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+
+import SimilarMakersCard from './SimilarMakersCard';
+
+export default {
+    title: 'Profiles/Profile Page/Similar Makers Card',
+    component: SimilarMakersCard,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof SimilarMakersCard>;
+
+
+const Template: ComponentStory<typeof SimilarMakersCard> = (args) => <div className="max-w-[326px]"><SimilarMakersCard {...args as any} ></SimilarMakersCard></div>
+
+export const Default = Template.bind({});
+Default.args = {
+    makers: MOCK_DATA['user'].similar_makers
+}
+
+
diff --git a/src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.tsx b/src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.tsx
new file mode 100644
index 0000000..0136b4a
--- /dev/null
+++ b/src/features/Profiles/pages/ProfilePage/SimilarMakersCard/SimilarMakersCard.tsx
@@ -0,0 +1,38 @@
+
+import { Link } from 'react-router-dom'
+import Card from 'src/Components/Card/Card'
+import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
+import { User } from 'src/graphql'
+import { createRoute } from 'src/utils/routing'
+
+interface Props {
+    makers: Pick<User,
+        | "id"
+        | "name"
+        | "jobTitle"
+        | 'avatar'
+    >[]
+}
+
+export default function SimilarMakersCard({ makers }: Props) {
+
+
+    return (
+        <Card onlyMd>
+            <h3 className="text-body2 font-bolder">Similar makers</h3>
+            <ul className='flex flex-col'>
+                {makers.map(maker => {
+                    return <Link key={maker.id} to={createRoute({ type: "profile", id: maker.id, username: maker.name })} className="border-b py-16 last-of-type:border-b-0 last-of-type:pb-0">
+                        <li className="flex items-start gap-8">
+                            <Avatar width={40} src={maker.avatar} />
+                            <div>
+                                <p className="text-body4 text-gray-800 font-medium">{maker.name}</p>
+                                <p className="text-body5 text-gray-500 font-medium">{maker.jobTitle}</p>
+                            </div>
+                        </li>
+                    </Link>
+                })}
+            </ul>
+        </Card>
+    )
+}
diff --git a/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.stories.tsx b/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.stories.tsx
new file mode 100644
index 0000000..bf859c8
--- /dev/null
+++ b/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.stories.tsx
@@ -0,0 +1,31 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+import SkillsCard from './SkillsCard';
+
+export default {
+    title: 'Profiles/Profile Page/Skills Card',
+    component: SkillsCard,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+
+} as ComponentMeta<typeof SkillsCard>;
+
+
+const Template: ComponentStory<typeof SkillsCard> = (args) => <div className="max-w-[326px]"><SkillsCard {...args} ></SkillsCard></div>
+
+export const Default = Template.bind({});
+Default.args = {
+    skills: MOCK_DATA['user'].skills
+}
+
+export const Empty = Template.bind({});
+Empty.args = {
+    skills: [],
+}
+
+export const EmptyOwner = Template.bind({});
+EmptyOwner.args = {
+    skills: [],
+    isOwner: true
+}
\ No newline at end of file
diff --git a/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.tsx b/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.tsx
new file mode 100644
index 0000000..3cfb05a
--- /dev/null
+++ b/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.tsx
@@ -0,0 +1,29 @@
+import Card from 'src/Components/Card/Card'
+import Button from 'src/Components/Button/Button'
+import { RoleLevelEnum, User } from 'src/graphql';
+
+
+
+interface Props {
+    skills: User['skills'][number][]
+    isOwner?: boolean;
+}
+
+export default function SkillsCard({ skills, isOwner }: Props) {
+
+    return (
+        <Card>
+            <p className="text-body2 font-bold">🌈  Skills</p>
+            <div className="mt-16">
+                {skills.length === 0 && <>
+                    <p className="text-gray-700 text-body4">No skills added</p>
+                    {isOwner && <Button color='primary' className='mt-16' size='sm' href='/edit-profile/roles-skills'>Add skills</Button>}
+                </>}
+                <ul className=' flex flex-wrap gap-x-8 gap-y-20'>
+                    {
+                        skills.map((skill) => <li key={skill.id} className="px-12 py-4 bg-gray-100 rounded-48 font-medium">{skill.title}</li>)}
+                </ul>
+            </div>
+        </Card>
+    )
+}
diff --git a/src/features/Profiles/pages/ProfilePage/TournamentsCard/TournamentsCard.stories.tsx b/src/features/Profiles/pages/ProfilePage/TournamentsCard/TournamentsCard.stories.tsx
new file mode 100644
index 0000000..ef3155e
--- /dev/null
+++ b/src/features/Profiles/pages/ProfilePage/TournamentsCard/TournamentsCard.stories.tsx
@@ -0,0 +1,31 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+import TournamentsCard from './TournamentsCard';
+
+export default {
+    title: 'Profiles/Profile Page/Tournaments Card',
+    component: TournamentsCard,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+
+} as ComponentMeta<typeof TournamentsCard>;
+
+
+const Template: ComponentStory<typeof TournamentsCard> = (args) => <div className="max-w-[326px]"><TournamentsCard {...args} ></TournamentsCard></div>
+
+export const Default = Template.bind({});
+Default.args = {
+    tournaments: MOCK_DATA['user'].tournaments
+}
+
+export const Empty = Template.bind({});
+Empty.args = {
+    tournaments: [],
+}
+
+export const EmptyOwner = Template.bind({});
+EmptyOwner.args = {
+    tournaments: [],
+    isOwner: true
+}
\ No newline at end of file
diff --git a/src/features/Profiles/pages/ProfilePage/TournamentsCard/TournamentsCard.tsx b/src/features/Profiles/pages/ProfilePage/TournamentsCard/TournamentsCard.tsx
new file mode 100644
index 0000000..ef96f2e
--- /dev/null
+++ b/src/features/Profiles/pages/ProfilePage/TournamentsCard/TournamentsCard.tsx
@@ -0,0 +1,45 @@
+import Card from 'src/Components/Card/Card'
+import Button from 'src/Components/Button/Button'
+import { RoleLevelEnum, User } from 'src/graphql';
+
+
+
+interface Props {
+    tournaments: Pick<User['tournaments'][number],
+        | 'id'
+        | 'title'
+        | 'thumbnail_image'
+        | 'start_date'
+        | 'end_date'
+    >[]
+    isOwner?: boolean;
+}
+
+export default function TournamentsCard({ tournaments, isOwner }: Props) {
+
+    return (
+        <Card>
+            <p className="text-body2 font-bold">🏆  Tournaments </p>
+            <div className="mt-16">
+                {tournaments.length === 0 && <>
+                    <p className="text-gray-700 text-body4">No tournaments entered.</p>
+                </>}
+                <ul className=' flex flex-wrap gap-x-8 gap-y-20'>
+                    {
+                        tournaments.map((tournament) => {
+
+                            const isLive = ((new Date() < new Date(tournament.end_date)) && (new Date() > new Date(tournament.start_date)));
+
+                            return <li key={tournament.id} className="flex gap-16 items-center">
+                                <img src={tournament.thumbnail_image} className='w-48 border-2 border-gray-100 aspect-square rounded-16 object-cover' alt="" />
+                                <div>
+                                    <p className="text-gray-900 font-medium">{tournament.title}</p>
+                                    <p className={`${isLive ? "text-green-500" : "text-warning-500"} text-body5 font-medium`}>&#8226; {isLive ? "Live" : "Completed"}</p>
+                                </div>
+                            </li>
+                        })}
+                </ul>
+            </div>
+        </Card>
+    )
+}
diff --git a/src/features/Profiles/pages/ProfilePage/profile.graphql b/src/features/Profiles/pages/ProfilePage/profile.graphql
index 60feb92..8bdaa0e 100644
--- a/src/features/Profiles/pages/ProfilePage/profile.graphql
+++ b/src/features/Profiles/pages/ProfilePage/profile.graphql
@@ -24,5 +24,28 @@ query profile($profileId: Int!) {
         icon
       }
     }
+    skills {
+      id
+      title
+    }
+    roles {
+      id
+      title
+      icon
+      level
+    }
+    tournaments {
+      id
+      title
+      thumbnail_image
+      start_date
+      end_date
+    }
+    similar_makers {
+      id
+      name
+      avatar
+      jobTitle
+    }
   }
 }
diff --git a/src/features/Profiles/pages/ProfilePage/styles.module.scss b/src/features/Profiles/pages/ProfilePage/styles.module.scss
index 9552bd1..f663255 100644
--- a/src/features/Profiles/pages/ProfilePage/styles.module.scss
+++ b/src/features/Profiles/pages/ProfilePage/styles.module.scss
@@ -5,12 +5,21 @@
   grid-template-areas: "main";
 
   > aside:first-of-type {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
     grid-area: aside1;
   }
   > main {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
     grid-area: main;
   }
   > aside:last-of-type {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
     grid-area: aside2;
   }
 
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index f9f95ac..cbcc5d7 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -48,7 +48,11 @@ export type BaseUser = {
   location: Maybe<Scalars['String']>;
   name: Scalars['String'];
   role: Maybe<Scalars['String']>;
+  roles: Array<UserRole>;
+  similar_makers: Array<User>;
+  skills: Array<UserSkill>;
   stories: Array<Story>;
+  tournaments: Array<Tournament>;
   twitter: Maybe<Scalars['String']>;
   website: Maybe<Scalars['String']>;
 };
@@ -204,7 +208,11 @@ export type MyProfile = BaseUser & {
   nostr_prv_key: Maybe<Scalars['String']>;
   nostr_pub_key: Maybe<Scalars['String']>;
   role: Maybe<Scalars['String']>;
+  roles: Array<UserRole>;
+  similar_makers: Array<User>;
+  skills: Array<UserSkill>;
   stories: Array<Story>;
+  tournaments: Array<Tournament>;
   twitter: Maybe<Scalars['String']>;
   walletsKeys: Array<WalletKey>;
   website: Maybe<Scalars['String']>;
@@ -291,6 +299,7 @@ export type Query = {
   profile: Maybe<User>;
   projectsByCategory: Array<Project>;
   searchProjects: Array<Project>;
+  similarMakers: Array<User>;
 };
 
 
@@ -370,6 +379,11 @@ export type QuerySearchProjectsArgs = {
   take?: InputMaybe<Scalars['Int']>;
 };
 
+
+export type QuerySimilarMakersArgs = {
+  id: Scalars['Int'];
+};
+
 export type Question = PostBase & {
   __typename?: 'Question';
   author: Author;
@@ -385,6 +399,14 @@ export type Question = PostBase & {
   votes_count: Scalars['Int'];
 };
 
+export enum RoleLevelEnum {
+  Advanced = 'Advanced',
+  Beginner = 'Beginner',
+  Hobbyist = 'Hobbyist',
+  Intermediate = 'Intermediate',
+  Pro = 'Pro'
+}
+
 export type Story = PostBase & {
   __typename?: 'Story';
   author: Author;
@@ -421,6 +443,19 @@ export type Tag = {
   title: Scalars['String'];
 };
 
+export type Tournament = {
+  __typename?: 'Tournament';
+  cover_image: Scalars['String'];
+  description: Scalars['String'];
+  end_date: Scalars['Date'];
+  id: Scalars['Int'];
+  start_date: Scalars['Date'];
+  tags: Array<Tag>;
+  thumbnail_image: Scalars['String'];
+  title: Scalars['String'];
+  website: Scalars['String'];
+};
+
 export type User = BaseUser & {
   __typename?: 'User';
   avatar: Scalars['String'];
@@ -435,7 +470,11 @@ export type User = BaseUser & {
   location: Maybe<Scalars['String']>;
   name: Scalars['String'];
   role: Maybe<Scalars['String']>;
+  roles: Array<UserRole>;
+  similar_makers: Array<User>;
+  skills: Array<UserSkill>;
   stories: Array<Story>;
+  tournaments: Array<Tournament>;
   twitter: Maybe<Scalars['String']>;
   website: Maybe<Scalars['String']>;
 };
@@ -445,6 +484,20 @@ export type UserKeyInputType = {
   name: Scalars['String'];
 };
 
+export type UserRole = {
+  __typename?: 'UserRole';
+  icon: Scalars['String'];
+  id: Scalars['Int'];
+  level: RoleLevelEnum;
+  title: Scalars['String'];
+};
+
+export type UserSkill = {
+  __typename?: 'UserSkill';
+  id: Scalars['Int'];
+  title: Scalars['String'];
+};
+
 export enum Vote_Item_Type {
   Bounty = 'Bounty',
   PostComment = 'PostComment',
@@ -599,7 +652,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, email: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: 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 }> }> } | null };
+export type ProfileQuery = { __typename?: 'Query', profile: { __typename?: 'User', id: number, name: string, avatar: string, join_date: any, role: string | null, email: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: 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 }> }>, skills: Array<{ __typename?: 'UserSkill', id: number, title: string }>, roles: Array<{ __typename?: 'UserRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, 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 }> } | null };
 
 export type CategoryPageQueryVariables = Exact<{
   categoryId: Scalars['Int'];
@@ -1579,6 +1632,29 @@ export const ProfileDocument = gql`
         icon
       }
     }
+    skills {
+      id
+      title
+    }
+    roles {
+      id
+      title
+      icon
+      level
+    }
+    tournaments {
+      id
+      title
+      thumbnail_image
+      start_date
+      end_date
+    }
+    similar_makers {
+      id
+      name
+      avatar
+      jobTitle
+    }
   }
 }
     `;
diff --git a/src/mocks/data/users.ts b/src/mocks/data/users.ts
index 54c15f3..51e8a1e 100644
--- a/src/mocks/data/users.ts
+++ b/src/mocks/data/users.ts
@@ -1,5 +1,9 @@
-import { MyProfile, User } from "src/graphql";
+import { Chance } from "chance";
+import { MyProfile, RoleLevelEnum, User } from "src/graphql";
 import { posts } from "./posts";
+import { getCoverImage, getAvatarImage } from "./utils";
+
+const chance = new Chance();
 
 export const user: User & MyProfile = {
     id: 123,
@@ -19,8 +23,107 @@ export const user: User & MyProfile = {
     stories: posts.stories,
     nostr_prv_key: "123123124asdfsadfsa8d7fsadfasdf",
     nostr_pub_key: "123124123123dfsadfsa8d7f11sadfasdf",
-    walletsKeys: [{
-        key: "1645h234j2421zxvertw",
-        name: "My alby wallet key"
-    }]
+    walletsKeys: [
+        {
+            key: "1645h234j2421zxvertw",
+            name: "My Alby wallet key"
+        },
+        {
+            key: "66345134234235",
+            name: "My Phoenix wallet key"
+        },],
+    roles: [
+        {
+            id: 12,
+            title: "Developer",
+            icon: "💻️",
+            level: RoleLevelEnum.Pro,
+        },
+        {
+            id: 14,
+            title: "Founder",
+            icon: "🦄️",
+            level: RoleLevelEnum.Intermediate,
+        },
+        {
+            id: 51,
+            title: "Community Manager",
+            icon: "🎉️",
+            level: RoleLevelEnum.Hobbyist,
+        },
+    ],
+    skills: [
+        {
+            id: 1,
+            title: chance.word(),
+        },
+        {
+            id: 2,
+            title: chance.word(),
+        },
+        {
+            id: 3,
+            title: chance.word(),
+        },
+        {
+            id: 4,
+            title: chance.word(),
+        },
+        {
+            id: 5,
+            title: chance.word(),
+        },
+        {
+            id: 6,
+            title: chance.word(),
+        },
+        {
+            id: 7,
+            title: chance.word(),
+        },
+    ],
+    tournaments: [
+        {
+            id: 1,
+            title: "BreezConf",
+            description: chance.paragraph(),
+            cover_image: getCoverImage(),
+            thumbnail_image: getCoverImage(),
+            start_date: new Date(2021, 3).toISOString(),
+            end_date: new Date(2021, 4).toISOString(),
+            tags: [],
+            website: "https://breez-conf.com"
+        },
+        {
+            id: 2,
+            title: "Shock the Web 3",
+            description: chance.paragraph(),
+            cover_image: getCoverImage(),
+            thumbnail_image: getCoverImage(),
+            start_date: new Date(2022, 7).toISOString(),
+            end_date: new Date(2022, 11).toISOString(),
+            tags: [],
+            website: "https://shock-the-web.com"
+        },
+    ],
+    similar_makers: [
+        {
+            id: 144,
+            name: "Johns Beharry",
+            jobTitle: "Manager",
+            avatar: getAvatarImage(),
+        },
+        {
+            id: 155,
+            name: "Edward P",
+            jobTitle: "Front-end Developer",
+            avatar: getAvatarImage(),
+        },
+        {
+            id: 166,
+            name: "Mohammed T",
+            jobTitle: "Front-end Developer",
+            avatar: getAvatarImage(),
+        },
+    ] as User[]
 }

From bb0fbfa572ed04e3110a4f7c965126abd7676dce Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 22 Aug 2022 13:34:30 +0300
Subject: [PATCH 02/10] feat: update roles card, mocks, schema, stories

---
 api/functions/graphql/nexus-typegen.ts        | 119 ++++++++----
 api/functions/graphql/schema.graphql          |  59 ++++--
 api/functions/graphql/types/users.js          | 111 ++++++++++-
 .../pages/EditProfilePage/EditProfilePage.tsx |   9 +-
 .../RolesSkillsTab/RolesSkillsTab.tsx         | 111 +++++++++++
 .../UpdateRolesCard.stories.tsx               |  21 ++
 .../UpdateRolesCard/UpdateRolesCard.tsx       |  80 ++++++++
 .../UpdateSkillsCard.stories.tsx              |  21 ++
 .../UpdateSkillsCard/UpdateSkillsCard.tsx     |  59 ++++++
 .../RolesSkillsTab/rolesSkills.graphql        |  40 ++++
 src/graphql/index.tsx                         | 179 ++++++++++++++++--
 src/mocks/data.ts                             |   6 +-
 src/mocks/data/users.ts                       | 148 ++++++++++-----
 src/mocks/handlers.ts                         |  16 +-
 src/mocks/resolvers.ts                        |   7 +
 15 files changed, 841 insertions(+), 145 deletions(-)
 create mode 100644 src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
 create mode 100644 src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.stories.tsx
 create mode 100644 src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx
 create mode 100644 src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.stories.tsx
 create mode 100644 src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.tsx
 create mode 100644 src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/rolesSkills.graphql

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 4c8413f..68d20f0 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -28,6 +28,13 @@ declare global {
 }
 
 export interface NexusGenInputs {
+  MakerRoleInput: { // input type
+    id: number; // Int!
+    level: NexusGenEnums['RoleLevelEnum']; // RoleLevelEnum!
+  }
+  MakerSkillInput: { // input type
+    id: number; // Int!
+  }
   ProfileDetailsInput: { // input type
     avatar?: string | null; // String
     bio?: string | null; // String
@@ -41,6 +48,10 @@ export interface NexusGenInputs {
     twitter?: string | null; // String
     website?: string | null; // String
   }
+  ProfileRolesInput: { // input type
+    roles: NexusGenInputs['MakerRoleInput'][]; // [MakerRoleInput!]!
+    skills: NexusGenInputs['MakerSkillInput'][]; // [MakerSkillInput!]!
+  }
   StoryInputType: { // input type
     body: string; // String!
     cover_image?: string | null; // String
@@ -125,6 +136,11 @@ export interface NexusGenObjects {
     prizes: string; // String!
     touranments: string; // String!
   }
+  GenericMakerRole: { // root type
+    icon: string; // String!
+    id: number; // Int!
+    title: string; // String!
+  }
   Hackathon: { // root type
     cover_image: string; // String!
     description: string; // String!
@@ -141,6 +157,16 @@ export interface NexusGenObjects {
     metadata?: string | null; // String
     minSendable?: number | null; // Int
   }
+  MakerRole: { // root type
+    icon: string; // String!
+    id: number; // Int!
+    level: NexusGenEnums['RoleLevelEnum']; // RoleLevelEnum!
+    title: string; // String!
+  }
+  MakerSkill: { // root type
+    id: number; // Int!
+    title: string; // String!
+  }
   Mutation: {};
   MyProfile: { // root type
     avatar: string; // String!
@@ -235,16 +261,6 @@ export interface NexusGenObjects {
     twitter?: string | null; // String
     website?: string | null; // String
   }
-  UserRole: { // root type
-    icon: string; // String!
-    id: number; // Int!
-    level: NexusGenEnums['RoleLevelEnum']; // RoleLevelEnum!
-    title: string; // String!
-  }
-  UserSkill: { // root type
-    id: number; // Int!
-    title: string; // String!
-  }
   Vote: { // root type
     amount_in_sat: number; // Int!
     id: number; // Int!
@@ -336,6 +352,11 @@ export interface NexusGenFieldTypes {
     prizes: string; // String!
     touranments: string; // String!
   }
+  GenericMakerRole: { // field return type
+    icon: string; // String!
+    id: number; // Int!
+    title: string; // String!
+  }
   Hackathon: { // field return type
     cover_image: string; // String!
     description: string; // String!
@@ -353,6 +374,16 @@ export interface NexusGenFieldTypes {
     metadata: string | null; // String
     minSendable: number | null; // Int
   }
+  MakerRole: { // field return type
+    icon: string; // String!
+    id: number; // Int!
+    level: NexusGenEnums['RoleLevelEnum']; // RoleLevelEnum!
+    title: string; // String!
+  }
+  MakerSkill: { // field return type
+    id: number; // Int!
+    title: string; // String!
+  }
   Mutation: { // field return type
     confirmDonation: NexusGenRootTypes['Donation']; // Donation!
     confirmVote: NexusGenRootTypes['Vote']; // Vote!
@@ -360,6 +391,7 @@ export interface NexusGenFieldTypes {
     deleteStory: NexusGenRootTypes['Story'] | null; // Story
     donate: NexusGenRootTypes['Donation']; // Donation!
     updateProfileDetails: NexusGenRootTypes['MyProfile'] | null; // MyProfile
+    updateProfileRoles: NexusGenRootTypes['MyProfile'] | null; // MyProfile
     updateUserPreferences: NexusGenRootTypes['MyProfile']; // MyProfile!
     vote: NexusGenRootTypes['Vote']; // Vote!
   }
@@ -378,9 +410,9 @@ export interface NexusGenFieldTypes {
     nostr_prv_key: string | null; // String
     nostr_pub_key: string | null; // String
     role: string | null; // String
-    roles: NexusGenRootTypes['UserRole'][]; // [UserRole!]!
+    roles: NexusGenRootTypes['MakerRole'][]; // [MakerRole!]!
     similar_makers: NexusGenRootTypes['User'][]; // [User!]!
-    skills: NexusGenRootTypes['UserSkill'][]; // [UserSkill!]!
+    skills: NexusGenRootTypes['MakerSkill'][]; // [MakerSkill!]!
     stories: NexusGenRootTypes['Story'][]; // [Story!]!
     tournaments: NexusGenRootTypes['Tournament'][]; // [Tournament!]!
     twitter: string | null; // String
@@ -414,6 +446,8 @@ export interface NexusGenFieldTypes {
     allCategories: NexusGenRootTypes['Category'][]; // [Category!]!
     allProjects: NexusGenRootTypes['Project'][]; // [Project!]!
     getAllHackathons: NexusGenRootTypes['Hackathon'][]; // [Hackathon!]!
+    getAllMakersRoles: NexusGenRootTypes['GenericMakerRole'][]; // [GenericMakerRole!]!
+    getAllMakersSkills: NexusGenRootTypes['MakerSkill'][]; // [MakerSkill!]!
     getCategory: NexusGenRootTypes['Category']; // Category!
     getDonationsStats: NexusGenRootTypes['DonationsStats']; // DonationsStats!
     getFeed: NexusGenRootTypes['Post'][]; // [Post!]!
@@ -492,24 +526,14 @@ export interface NexusGenFieldTypes {
     location: string | null; // String
     name: string; // String!
     role: string | null; // String
-    roles: NexusGenRootTypes['UserRole'][]; // [UserRole!]!
+    roles: NexusGenRootTypes['MakerRole'][]; // [MakerRole!]!
     similar_makers: NexusGenRootTypes['User'][]; // [User!]!
-    skills: NexusGenRootTypes['UserSkill'][]; // [UserSkill!]!
+    skills: NexusGenRootTypes['MakerSkill'][]; // [MakerSkill!]!
     stories: NexusGenRootTypes['Story'][]; // [Story!]!
     tournaments: NexusGenRootTypes['Tournament'][]; // [Tournament!]!
     twitter: string | null; // String
     website: string | null; // String
   }
-  UserRole: { // field return type
-    icon: string; // String!
-    id: number; // Int!
-    level: NexusGenEnums['RoleLevelEnum']; // RoleLevelEnum!
-    title: string; // String!
-  }
-  UserSkill: { // field return type
-    id: number; // Int!
-    title: string; // String!
-  }
   Vote: { // field return type
     amount_in_sat: number; // Int!
     id: number; // Int!
@@ -536,9 +560,9 @@ export interface NexusGenFieldTypes {
     location: string | null; // String
     name: string; // String!
     role: string | null; // String
-    roles: NexusGenRootTypes['UserRole'][]; // [UserRole!]!
+    roles: NexusGenRootTypes['MakerRole'][]; // [MakerRole!]!
     similar_makers: NexusGenRootTypes['User'][]; // [User!]!
-    skills: NexusGenRootTypes['UserSkill'][]; // [UserSkill!]!
+    skills: NexusGenRootTypes['MakerSkill'][]; // [MakerSkill!]!
     stories: NexusGenRootTypes['Story'][]; // [Story!]!
     tournaments: NexusGenRootTypes['Tournament'][]; // [Tournament!]!
     twitter: string | null; // String
@@ -619,6 +643,11 @@ export interface NexusGenFieldTypeNames {
     prizes: 'String'
     touranments: 'String'
   }
+  GenericMakerRole: { // field return type name
+    icon: 'String'
+    id: 'Int'
+    title: 'String'
+  }
   Hackathon: { // field return type name
     cover_image: 'String'
     description: 'String'
@@ -636,6 +665,16 @@ export interface NexusGenFieldTypeNames {
     metadata: 'String'
     minSendable: 'Int'
   }
+  MakerRole: { // field return type name
+    icon: 'String'
+    id: 'Int'
+    level: 'RoleLevelEnum'
+    title: 'String'
+  }
+  MakerSkill: { // field return type name
+    id: 'Int'
+    title: 'String'
+  }
   Mutation: { // field return type name
     confirmDonation: 'Donation'
     confirmVote: 'Vote'
@@ -643,6 +682,7 @@ export interface NexusGenFieldTypeNames {
     deleteStory: 'Story'
     donate: 'Donation'
     updateProfileDetails: 'MyProfile'
+    updateProfileRoles: 'MyProfile'
     updateUserPreferences: 'MyProfile'
     vote: 'Vote'
   }
@@ -661,9 +701,9 @@ export interface NexusGenFieldTypeNames {
     nostr_prv_key: 'String'
     nostr_pub_key: 'String'
     role: 'String'
-    roles: 'UserRole'
+    roles: 'MakerRole'
     similar_makers: 'User'
-    skills: 'UserSkill'
+    skills: 'MakerSkill'
     stories: 'Story'
     tournaments: 'Tournament'
     twitter: 'String'
@@ -697,6 +737,8 @@ export interface NexusGenFieldTypeNames {
     allCategories: 'Category'
     allProjects: 'Project'
     getAllHackathons: 'Hackathon'
+    getAllMakersRoles: 'GenericMakerRole'
+    getAllMakersSkills: 'MakerSkill'
     getCategory: 'Category'
     getDonationsStats: 'DonationsStats'
     getFeed: 'Post'
@@ -775,24 +817,14 @@ export interface NexusGenFieldTypeNames {
     location: 'String'
     name: 'String'
     role: 'String'
-    roles: 'UserRole'
+    roles: 'MakerRole'
     similar_makers: 'User'
-    skills: 'UserSkill'
+    skills: 'MakerSkill'
     stories: 'Story'
     tournaments: 'Tournament'
     twitter: 'String'
     website: 'String'
   }
-  UserRole: { // field return type name
-    icon: 'String'
-    id: 'Int'
-    level: 'RoleLevelEnum'
-    title: 'String'
-  }
-  UserSkill: { // field return type name
-    id: 'Int'
-    title: 'String'
-  }
   Vote: { // field return type name
     amount_in_sat: 'Int'
     id: 'Int'
@@ -819,9 +851,9 @@ export interface NexusGenFieldTypeNames {
     location: 'String'
     name: 'String'
     role: 'String'
-    roles: 'UserRole'
+    roles: 'MakerRole'
     similar_makers: 'User'
-    skills: 'UserSkill'
+    skills: 'MakerSkill'
     stories: 'Story'
     tournaments: 'Tournament'
     twitter: 'String'
@@ -861,6 +893,9 @@ export interface NexusGenArgTypes {
     updateProfileDetails: { // args
       data?: NexusGenInputs['ProfileDetailsInput'] | null; // ProfileDetailsInput
     }
+    updateProfileRoles: { // args
+      data?: NexusGenInputs['ProfileRolesInput'] | null; // ProfileRolesInput
+    }
     updateUserPreferences: { // args
       userKeys?: NexusGenInputs['UserKeyInputType'][] | null; // [UserKeyInputType!]
     }
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index f6f89f6..226590b 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -31,9 +31,9 @@ interface BaseUser {
   location: String
   name: String!
   role: String
-  roles: [UserRole!]!
+  roles: [MakerRole!]!
   similar_makers: [User!]!
-  skills: [UserSkill!]!
+  skills: [MakerSkill!]!
   stories: [Story!]!
   tournaments: [Tournament!]!
   twitter: String
@@ -96,6 +96,12 @@ type DonationsStats {
   touranments: String!
 }
 
+type GenericMakerRole {
+  icon: String!
+  id: Int!
+  title: String!
+}
+
 type Hackathon {
   cover_image: String!
   description: String!
@@ -115,6 +121,27 @@ type LnurlDetails {
   minSendable: Int
 }
 
+type MakerRole {
+  icon: String!
+  id: Int!
+  level: RoleLevelEnum!
+  title: String!
+}
+
+input MakerRoleInput {
+  id: Int!
+  level: RoleLevelEnum!
+}
+
+type MakerSkill {
+  id: Int!
+  title: String!
+}
+
+input MakerSkillInput {
+  id: Int!
+}
+
 type Mutation {
   confirmDonation(payment_request: String!, preimage: String!): Donation!
   confirmVote(payment_request: String!, preimage: String!): Vote!
@@ -122,6 +149,7 @@ type Mutation {
   deleteStory(id: Int!): Story
   donate(amount_in_sat: Int!): Donation!
   updateProfileDetails(data: ProfileDetailsInput): MyProfile
+  updateProfileRoles(data: ProfileRolesInput): MyProfile
   updateUserPreferences(userKeys: [UserKeyInputType!]): MyProfile!
   vote(amount_in_sat: Int!, item_id: Int!, item_type: VOTE_ITEM_TYPE!): Vote!
 }
@@ -141,9 +169,9 @@ type MyProfile implements BaseUser {
   nostr_prv_key: String
   nostr_pub_key: String
   role: String
-  roles: [UserRole!]!
+  roles: [MakerRole!]!
   similar_makers: [User!]!
-  skills: [UserSkill!]!
+  skills: [MakerSkill!]!
   stories: [Story!]!
   tournaments: [Tournament!]!
   twitter: String
@@ -193,6 +221,11 @@ input ProfileDetailsInput {
   website: String
 }
 
+input ProfileRolesInput {
+  roles: [MakerRoleInput!]!
+  skills: [MakerSkillInput!]!
+}
+
 type Project {
   awards: [Award!]!
   category: Category!
@@ -213,6 +246,8 @@ type Query {
   allCategories: [Category!]!
   allProjects(skip: Int = 0, take: Int = 50): [Project!]!
   getAllHackathons(sortBy: String, tag: Int): [Hackathon!]!
+  getAllMakersRoles: [GenericMakerRole!]!
+  getAllMakersSkills: [MakerSkill!]!
   getCategory(id: Int!): Category!
   getDonationsStats: DonationsStats!
   getFeed(skip: Int = 0, sortBy: String, tag: Int = 0, take: Int = 10): [Post!]!
@@ -313,9 +348,9 @@ type User implements BaseUser {
   location: String
   name: String!
   role: String
-  roles: [UserRole!]!
+  roles: [MakerRole!]!
   similar_makers: [User!]!
-  skills: [UserSkill!]!
+  skills: [MakerSkill!]!
   stories: [Story!]!
   tournaments: [Tournament!]!
   twitter: String
@@ -327,18 +362,6 @@ input UserKeyInputType {
   name: String!
 }
 
-type UserRole {
-  icon: String!
-  id: Int!
-  level: RoleLevelEnum!
-  title: String!
-}
-
-type UserSkill {
-  id: Int!
-  title: String!
-}
-
 enum VOTE_ITEM_TYPE {
   Bounty
   PostComment
diff --git a/api/functions/graphql/types/users.js b/api/functions/graphql/types/users.js
index 3d4d06b..7f6a815 100644
--- a/api/functions/graphql/types/users.js
+++ b/api/functions/graphql/types/users.js
@@ -26,13 +26,13 @@ const BaseUser = interfaceType({
         t.string('bio')
         t.string('location')
         t.nonNull.list.nonNull.field('roles', {
-            type: UserRole,
+            type: MakerRole,
             resolve: (parent) => {
                 return []
             }
         })
         t.nonNull.list.nonNull.field('skills', {
-            type: UserSkill,
+            type: MakerSkill,
             resolve: (parent) => {
                 return []
             }
@@ -74,6 +74,8 @@ const BaseUser = interfaceType({
     },
 })
 
+
+
 const RoleLevelEnum = enumType({
     name: 'RoleLevelEnum',
     members: {
@@ -85,8 +87,17 @@ const RoleLevelEnum = enumType({
     },
 });
 
-const UserRole = objectType({
-    name: 'UserRole',
+const GenericMakerRole = objectType({
+    name: 'GenericMakerRole',
+    definition(t) {
+        t.nonNull.int('id');
+        t.nonNull.string('title');
+        t.nonNull.string('icon');
+    }
+})
+
+const MakerRole = objectType({
+    name: 'MakerRole',
     definition(t) {
         t.nonNull.int('id');
         t.nonNull.string('title');
@@ -95,14 +106,40 @@ const UserRole = objectType({
     }
 })
 
-const UserSkill = objectType({
-    name: 'UserSkill',
+const getAllMakersRoles = extendType({
+    type: "Query",
+    definition(t) {
+        t.nonNull.list.nonNull.field('getAllMakersRoles', {
+            type: GenericMakerRole,
+            async resolve(parent, args, context) {
+                return []
+            }
+        })
+    }
+})
+
+
+const MakerSkill = objectType({
+    name: 'MakerSkill',
     definition(t) {
         t.nonNull.int('id');
         t.nonNull.string('title');
     }
 })
 
+const getAllMakersSkills = extendType({
+    type: "Query",
+    definition(t) {
+        t.nonNull.list.nonNull.field('getAllMakersSkills', {
+            type: MakerSkill,
+            async resolve(parent, args, context) {
+                return []
+            }
+        })
+    }
+})
+
+
 const User = objectType({
     name: 'User',
     definition(t) {
@@ -312,6 +349,65 @@ const updateUserPreferences = extendType({
 
 
 
+const MakerRoleInput = inputObjectType({
+    name: "MakerRoleInput",
+    definition(t) {
+        t.nonNull.int('id');
+        t.nonNull.field('level', { type: RoleLevelEnum })
+    }
+})
+
+const MakerSkillInput = inputObjectType({
+    name: "MakerSkillInput",
+    definition(t) {
+        t.nonNull.int('id');
+    }
+})
+
+
+const ProfileRolesInput = inputObjectType({
+    name: 'ProfileRolesInput',
+    definition(t) {
+        t.nonNull.list.nonNull.field('roles', {
+            type: MakerRoleInput,
+        })
+        t.nonNull.list.nonNull.field('skills', {
+            type: MakerSkillInput,
+        })
+    }
+})
+
+const updateProfileRoles = extendType({
+    type: 'Mutation',
+    definition(t) {
+        t.field('updateProfileRoles', {
+            type: 'MyProfile',
+            args: { data: ProfileRolesInput },
+            async resolve(_root, args, ctx) {
+                const user = await getUserByPubKey(ctx.userPubKey);
+
+                // Do some validation
+                if (!user)
+                    throw new Error("You have to login");
+                // TODO: validate new data
+
+
+                // Preprocess & insert
+
+                return prisma.user.update({
+                    where: {
+                        id: user.id,
+                    },
+                    // data: removeNulls(args.data)
+                })
+            }
+        })
+    },
+})
+
+
+
+
 
 module.exports = {
     // Types
@@ -324,7 +420,10 @@ module.exports = {
     me,
     profile,
     similarMakers,
+    getAllMakersRoles,
+    getAllMakersSkills,
     // Mutations
     updateProfileDetails,
     updateUserPreferences,
+    updateProfileRoles,
 }
diff --git a/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx b/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
index 870bf14..67d8a04 100644
--- a/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
@@ -2,20 +2,24 @@ import { Navigate, NavLink, Route, Routes } from "react-router-dom";
 import LoadingPage from "src/Components/LoadingPage/LoadingPage";
 import NotFoundPage from "src/features/Shared/pages/NotFoundPage/NotFoundPage";
 import Slider from "src/Components/Slider/Slider";
-import { useProfileQuery } from "src/graphql";
 import { useAppSelector, useMediaQuery } from "src/utils/hooks";
 import UpdateMyProfileTab from "./UpdateMyProfileTab/UpdateMyProfileTab";
 import { Helmet } from 'react-helmet'
 import { MEDIA_QUERIES } from "src/utils/theme";
 import PreferencesTab from "./PreferencesTab/PreferencesTab";
+import RolesSkillsTab from "./RolesSkillsTab/RolesSkillsTab";
 import Card from "src/Components/Card/Card";
 
 
 const links = [
     {
-        text: "👾 My Profile",
+        text: "🤠  Basic information",
         path: 'my-profile',
     },
+    {
+        text: "🎛️  Roles & Skills",
+        path: 'roles-skills',
+    },
     {
         text: "⚙️  Settings & Preferences",
         path: 'preferences',
@@ -85,6 +89,7 @@ export default function EditProfilePage() {
                     <Routes>
                         <Route index element={<Navigate to='my-profile' />} />
                         <Route path='my-profile' element={<UpdateMyProfileTab />} />
+                        <Route path='roles-skills' element={<RolesSkillsTab />} />
                         <Route path='preferences' element={<PreferencesTab />
                         } />
                     </Routes>
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
new file mode 100644
index 0000000..35a09ca
--- /dev/null
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
@@ -0,0 +1,111 @@
+
+import NotFoundPage from "src/features/Shared/pages/NotFoundPage/NotFoundPage";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Controller, SubmitHandler, useForm } from 'react-hook-form';
+import SaveChangesCard from '../SaveChangesCard/SaveChangesCard';
+import { toast } from 'react-toastify';
+import { NotificationsService } from 'src/services';
+import { NetworkStatus } from '@apollo/client';
+import { usePrompt } from 'src/utils/hooks';
+import { UpdateUserRolesSkillsMutationVariables, useMyProfileRolesSkillsQuery, useUpdateUserRolesSkillsMutation } from 'src/graphql'
+import LoadingPage from "src/Components/LoadingPage/LoadingPage";
+import UpdateRolesCard from "./UpdateRolesCard/UpdateRolesCard";
+
+
+interface Props {
+}
+
+
+
+export type IRolesSkillsForm = NonNullable<UpdateUserRolesSkillsMutationVariables['data']>;
+
+const schema: yup.SchemaOf<IRolesSkillsForm> = yup.object({
+    roles: yup.array().of(
+        yup.object().shape({
+            id: yup.number().required(),
+            role: yup.string().required(),
+        }).required()
+    ).required(),
+    skills: yup.array().of(
+        yup.object().shape({
+            id: yup.number().required(),
+        }).required()
+    ).required(),
+}).required();
+
+export default function PreferencesTab() {
+
+    const { formState: { isDirty, }, handleSubmit, reset, control } = useForm<IRolesSkillsForm>({
+        defaultValues: {
+            roles: [],
+            skills: [],
+        },
+        resolver: yupResolver(schema),
+    });
+
+    const query = useMyProfileRolesSkillsQuery({
+        onCompleted: data => {
+            if (data.me) reset(data.me)
+        },
+        notifyOnNetworkStatusChange: true,
+    });
+    const [mutate, mutationStatus] = useUpdateUserRolesSkillsMutation();
+
+
+    usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
+
+
+    if (query.networkStatus === NetworkStatus.loading)
+        return <LoadingPage />
+
+    if (!query.data || !query.data?.me)
+        return <NotFoundPage />
+
+    if (!query.data?.getAllMakersRoles || !query.data?.getAllMakersSkills)
+        return null;
+
+    const onSubmit: SubmitHandler<IRolesSkillsForm> = data => {
+        const toastId = toast.loading("Saving changes...", NotificationsService.defaultOptions)
+        mutate({
+            variables: {
+                data
+            },
+            onCompleted: ({ updateProfileRoles }) => {
+                if (updateProfileRoles) {
+                    reset(updateProfileRoles);
+                    toast.update(toastId, { render: "Saved changes successfully", type: "success", ...NotificationsService.defaultOptions, isLoading: false });
+                }
+            }
+        })
+            .catch(() => {
+                toast.update(toastId, { render: "A network error happened", type: "error", ...NotificationsService.defaultOptions, isLoading: false });
+                mutationStatus.reset()
+            })
+    };
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
+            <div className="col-span-2 flex flex-col gap-24">
+                <Controller
+                    control={control}
+                    name="roles"
+                    render={({ field: { onChange, value } }) => (
+                        <UpdateRolesCard
+                            allRoles={query.data?.getAllMakersRoles!}
+                            value={value}
+                            onChange={onChange} />
+                    )}
+                />
+            </div>
+            <div className="self-start sticky-side-element">
+                <SaveChangesCard
+                    isLoading={mutationStatus.loading}
+                    isDirty={isDirty}
+                    onSubmit={handleSubmit(onSubmit)}
+                    onCancel={() => reset()}
+                />
+            </div>
+        </div>
+    )
+}
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.stories.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.stories.tsx
new file mode 100644
index 0000000..0bd3b91
--- /dev/null
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.stories.tsx
@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+import UpdateRolesCard from './UpdateRolesCard';
+
+export default {
+    title: 'Profiles/Edit Profile Page/Update Roles Card',
+    component: UpdateRolesCard,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+
+} as ComponentMeta<typeof UpdateRolesCard>;
+
+
+const Template: ComponentStory<typeof UpdateRolesCard> = (args) => <UpdateRolesCard {...args} ></UpdateRolesCard>
+
+export const Default = Template.bind({});
+Default.args = {
+    value: MOCK_DATA['user'].roles,
+    onChange: () => { }
+}
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx
new file mode 100644
index 0000000..ed31dd4
--- /dev/null
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import { Control, useFieldArray } from 'react-hook-form'
+import Card from 'src/Components/Card/Card'
+import { GenericMakerRole, MakerRole, RoleLevelEnum } from 'src/graphql'
+import { IRolesSkillsForm } from '../RolesSkillsTab'
+
+type Value = Pick<MakerRole, 'id' | 'level'>
+
+interface Props {
+    allRoles: Pick<GenericMakerRole, 'id' | 'title' | 'icon'>[];
+    value: Value[],
+    onChange: (newValue: Value[]) => void
+}
+
+export default function UpdateRolesCard(props: Props) {
+
+    const add = (idx: number) => {
+        props.onChange([...props.value.slice(-2), { ...props.allRoles[idx], level: RoleLevelEnum.Beginner }])
+    }
+
+    const remove = (idx: number) => {
+        props.onChange(props.value.filter(v => v.id !== props.allRoles[idx].id))
+    }
+
+    const setLevel = (roleId: number, level: RoleLevelEnum) => {
+        props.onChange(props.value.map(v => {
+            if (v.id !== roleId) return v;
+            return {
+                ...v,
+                level
+            }
+        }))
+    }
+
+
+    return (
+        <Card>
+            <p className="text-body2 font-bold">🎛️  Roles</p>
+            <p className="text-body4 text-gray-600 mt-8"> Select your top 3 roles, and let other makers know what your level is.</p>
+            <ul className=' flex flex-wrap gap-8 mt-24'>
+                {props.allRoles.map((role, idx) => {
+                    const isActive = props.value.some(v => v.id === role.id);
+
+                    return <button
+                        key={role.id}
+                        className={`
+                    px-12 py-8 border rounded-10 text-body5 font-medium
+                    active:scale-95 transition-transform
+                    ${!isActive ? "bg-gray-100 hover:bg-gray-200 border-gray-200" : "bg-primary-100 text-primary-600 border-primary-200"}
+                    `}
+                        onClick={() => isActive ? remove(idx) : add(idx)}
+                    >{role.icon} {role.title}
+                    </button>
+                })}
+            </ul>
+
+            {props.value.length > 0 && <div className="pt-24 mt-24 border-t border-gray-200">
+                <ul className="grid grid-cols-1 lg:grid-cols-[auto_1fr] items-center gap-16">
+                    {props.value.map(role => {
+                        const { title, icon } = props.allRoles.find(r => r.id === role.id)!;
+
+                        return <>
+                            <p className="shrink-0 text-body4 whitespace-nowrap">{icon} {title}</p>
+                            <div className="flex flex-wrap gap-8 grow text-body5 mb-8 last-of-type:mb-0">
+                                {[RoleLevelEnum.Beginner, RoleLevelEnum.Hobbyist, RoleLevelEnum.Intermediate, RoleLevelEnum.Advanced, RoleLevelEnum.Pro].map(r =>
+                                    <button className={` 
+                                px-12 py-4 bg-gray-100 border rounded-8 flex-1
+                                active:scale-95 transition-transform
+                                ${r !== role.level ? "bg-gray-100 hover:bg-gray-200 border-gray-200" : "bg-primary-100 text-primary-600 border-primary-200"}
+                                `}
+                                        onClick={() => setLevel(role.id, r)}
+                                    >{r}</button>
+                                )}</div>
+                        </>
+                    })}
+                </ul>
+            </div>}
+        </Card>
+    )
+}
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.stories.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.stories.tsx
new file mode 100644
index 0000000..4b08dbb
--- /dev/null
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.stories.tsx
@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+import UpdateSkillsCard from './UpdateSkillsCard';
+
+export default {
+    title: 'Profiles/Edit Profile Page/Update Skills Card',
+    component: UpdateSkillsCard,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+
+} as ComponentMeta<typeof UpdateSkillsCard>;
+
+
+const Template: ComponentStory<typeof UpdateSkillsCard> = (args) => <UpdateSkillsCard {...args} ></UpdateSkillsCard>
+
+export const Default = Template.bind({});
+Default.args = {
+    value: MOCK_DATA['user'].skills,
+    onChange: () => { }
+}
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.tsx
new file mode 100644
index 0000000..ba85701
--- /dev/null
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import { Control, useFieldArray } from 'react-hook-form'
+import Card from 'src/Components/Card/Card'
+import { GenericMakerRole, MakerRole, MakerSkill, RoleLevelEnum } from 'src/graphql'
+import { IRolesSkillsForm } from '../RolesSkillsTab'
+
+type Value = Pick<MakerSkill, 'id'>
+
+interface Props {
+    allSkills: Pick<MakerSkill, 'id' | 'title'>[];
+    value: Value[],
+    onChange: (newValue: Value[]) => void
+}
+
+export default function UpdateSkillsCard(props: Props) {
+
+    const add = (idx: number) => {
+        props.onChange([...props.value.slice(-2), { ...props.allSkills[idx] }])
+    }
+
+    const remove = (idx: number) => {
+        props.onChange(props.value.filter(v => v.id !== props.allSkills[idx].id))
+    }
+
+    const setLevel = (roleId: number, level: RoleLevelEnum) => {
+        props.onChange(props.value.map(v => {
+            if (v.id !== roleId) return v;
+            return {
+                ...v,
+                level
+            }
+        }))
+    }
+
+
+    return (
+        <Card>
+            <p className="text-body2 font-bold">🌈  Skills</p>
+            <p className="text-body4 text-gray-600 mt-8">Add some of your skills and let other makers know what you’re good at.</p>
+            {/* <ul className=' flex flex-wrap gap-8 mt-24'>
+                {props.allSkills.map((role, idx) => {
+                    const isActive = props.value.some(v => v.id === role.id);
+
+                    return <button
+                        key={role.id}
+                        className={`
+                    px-12 py-8 border rounded-10 text-body5 font-medium
+                    active:scale-95 transition-transform
+                    ${!isActive ? "bg-gray-100 hover:bg-gray-200 border-gray-200" : "bg-primary-100 text-primary-600 border-primary-200"}
+                    `}
+                        onClick={() => isActive ? remove(idx) : add(idx)}
+                    >{role.icon} {role.title}
+                    </button>
+                })}
+            </ul> */}
+
+        </Card>
+    )
+}
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/rolesSkills.graphql b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/rolesSkills.graphql
new file mode 100644
index 0000000..e80ea58
--- /dev/null
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/rolesSkills.graphql
@@ -0,0 +1,40 @@
+query MyProfileRolesSkills {
+  me {
+    id
+    skills {
+      id
+      title
+    }
+    roles {
+      id
+      title
+      icon
+      level
+    }
+  }
+  getAllMakersRoles {
+    id
+    title
+    icon
+  }
+  getAllMakersSkills {
+    id
+    title
+  }
+}
+
+mutation UpdateUserRolesSkills($data: ProfileRolesInput) {
+  updateProfileRoles(data: $data) {
+    id
+    skills {
+      id
+      title
+    }
+    roles {
+      id
+      title
+      icon
+      level
+    }
+  }
+}
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index cbcc5d7..e5f3a8d 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -48,9 +48,9 @@ export type BaseUser = {
   location: Maybe<Scalars['String']>;
   name: Scalars['String'];
   role: Maybe<Scalars['String']>;
-  roles: Array<UserRole>;
+  roles: Array<MakerRole>;
   similar_makers: Array<User>;
-  skills: Array<UserSkill>;
+  skills: Array<MakerSkill>;
   stories: Array<Story>;
   tournaments: Array<Tournament>;
   twitter: Maybe<Scalars['String']>;
@@ -115,6 +115,13 @@ export type DonationsStats = {
   touranments: Scalars['String'];
 };
 
+export type GenericMakerRole = {
+  __typename?: 'GenericMakerRole';
+  icon: Scalars['String'];
+  id: Scalars['Int'];
+  title: Scalars['String'];
+};
+
 export type Hackathon = {
   __typename?: 'Hackathon';
   cover_image: Scalars['String'];
@@ -136,6 +143,29 @@ export type LnurlDetails = {
   minSendable: Maybe<Scalars['Int']>;
 };
 
+export type MakerRole = {
+  __typename?: 'MakerRole';
+  icon: Scalars['String'];
+  id: Scalars['Int'];
+  level: RoleLevelEnum;
+  title: Scalars['String'];
+};
+
+export type MakerRoleInput = {
+  id: Scalars['Int'];
+  level: RoleLevelEnum;
+};
+
+export type MakerSkill = {
+  __typename?: 'MakerSkill';
+  id: Scalars['Int'];
+  title: Scalars['String'];
+};
+
+export type MakerSkillInput = {
+  id: Scalars['Int'];
+};
+
 export type Mutation = {
   __typename?: 'Mutation';
   confirmDonation: Donation;
@@ -144,6 +174,7 @@ export type Mutation = {
   deleteStory: Maybe<Story>;
   donate: Donation;
   updateProfileDetails: Maybe<MyProfile>;
+  updateProfileRoles: Maybe<MyProfile>;
   updateUserPreferences: MyProfile;
   vote: Vote;
 };
@@ -181,6 +212,11 @@ export type MutationUpdateProfileDetailsArgs = {
 };
 
 
+export type MutationUpdateProfileRolesArgs = {
+  data: InputMaybe<ProfileRolesInput>;
+};
+
+
 export type MutationUpdateUserPreferencesArgs = {
   userKeys: InputMaybe<Array<UserKeyInputType>>;
 };
@@ -208,9 +244,9 @@ export type MyProfile = BaseUser & {
   nostr_prv_key: Maybe<Scalars['String']>;
   nostr_pub_key: Maybe<Scalars['String']>;
   role: Maybe<Scalars['String']>;
-  roles: Array<UserRole>;
+  roles: Array<MakerRole>;
   similar_makers: Array<User>;
-  skills: Array<UserSkill>;
+  skills: Array<MakerSkill>;
   stories: Array<Story>;
   tournaments: Array<Tournament>;
   twitter: Maybe<Scalars['String']>;
@@ -261,6 +297,11 @@ export type ProfileDetailsInput = {
   website: InputMaybe<Scalars['String']>;
 };
 
+export type ProfileRolesInput = {
+  roles: Array<MakerRoleInput>;
+  skills: Array<MakerSkillInput>;
+};
+
 export type Project = {
   __typename?: 'Project';
   awards: Array<Award>;
@@ -283,6 +324,8 @@ export type Query = {
   allCategories: Array<Category>;
   allProjects: Array<Project>;
   getAllHackathons: Array<Hackathon>;
+  getAllMakersRoles: Array<GenericMakerRole>;
+  getAllMakersSkills: Array<MakerSkill>;
   getCategory: Category;
   getDonationsStats: DonationsStats;
   getFeed: Array<Post>;
@@ -470,9 +513,9 @@ export type User = BaseUser & {
   location: Maybe<Scalars['String']>;
   name: Scalars['String'];
   role: Maybe<Scalars['String']>;
-  roles: Array<UserRole>;
+  roles: Array<MakerRole>;
   similar_makers: Array<User>;
-  skills: Array<UserSkill>;
+  skills: Array<MakerSkill>;
   stories: Array<Story>;
   tournaments: Array<Tournament>;
   twitter: Maybe<Scalars['String']>;
@@ -484,20 +527,6 @@ export type UserKeyInputType = {
   name: Scalars['String'];
 };
 
-export type UserRole = {
-  __typename?: 'UserRole';
-  icon: Scalars['String'];
-  id: Scalars['Int'];
-  level: RoleLevelEnum;
-  title: Scalars['String'];
-};
-
-export type UserSkill = {
-  __typename?: 'UserSkill';
-  id: Scalars['Int'];
-  title: Scalars['String'];
-};
-
 export enum Vote_Item_Type {
   Bounty = 'Bounty',
   PostComment = 'PostComment',
@@ -635,6 +664,18 @@ export type UpdateUserPreferencesMutationVariables = Exact<{
 
 export type UpdateUserPreferencesMutation = { __typename?: 'Mutation', updateUserPreferences: { __typename?: 'MyProfile', id: number, nostr_pub_key: string | null, nostr_prv_key: string | null, walletsKeys: Array<{ __typename?: 'WalletKey', key: string, name: string }> } };
 
+export type MyProfileRolesSkillsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type MyProfileRolesSkillsQuery = { __typename?: 'Query', me: { __typename?: 'MyProfile', id: number, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } | null, getAllMakersRoles: Array<{ __typename?: 'GenericMakerRole', id: number, title: string, icon: string }>, getAllMakersSkills: Array<{ __typename?: 'MakerSkill', id: number, title: string }> };
+
+export type UpdateUserRolesSkillsMutationVariables = Exact<{
+  data: InputMaybe<ProfileRolesInput>;
+}>;
+
+
+export type UpdateUserRolesSkillsMutation = { __typename?: 'Mutation', updateProfileRoles: { __typename?: 'MyProfile', id: number, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } | null };
+
 export type MyProfileAboutQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -652,7 +693,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, email: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: 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 }> }>, skills: Array<{ __typename?: 'UserSkill', id: number, title: string }>, roles: Array<{ __typename?: 'UserRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, 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 }> } | null };
+export type ProfileQuery = { __typename?: 'Query', profile: { __typename?: 'User', id: number, name: string, avatar: string, join_date: any, role: string | null, email: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: 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 }> }>, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, 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 }> } | null };
 
 export type CategoryPageQueryVariables = Exact<{
   categoryId: Scalars['Int'];
@@ -1512,6 +1553,102 @@ export function useUpdateUserPreferencesMutation(baseOptions?: Apollo.MutationHo
 export type UpdateUserPreferencesMutationHookResult = ReturnType<typeof useUpdateUserPreferencesMutation>;
 export type UpdateUserPreferencesMutationResult = Apollo.MutationResult<UpdateUserPreferencesMutation>;
 export type UpdateUserPreferencesMutationOptions = Apollo.BaseMutationOptions<UpdateUserPreferencesMutation, UpdateUserPreferencesMutationVariables>;
+export const MyProfileRolesSkillsDocument = gql`
+    query MyProfileRolesSkills {
+  me {
+    id
+    skills {
+      id
+      title
+    }
+    roles {
+      id
+      title
+      icon
+      level
+    }
+  }
+  getAllMakersRoles {
+    id
+    title
+    icon
+  }
+  getAllMakersSkills {
+    id
+    title
+  }
+}
+    `;
+
+/**
+ * __useMyProfileRolesSkillsQuery__
+ *
+ * To run a query within a React component, call `useMyProfileRolesSkillsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMyProfileRolesSkillsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMyProfileRolesSkillsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useMyProfileRolesSkillsQuery(baseOptions?: Apollo.QueryHookOptions<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
+      }
+export function useMyProfileRolesSkillsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
+        }
+export type MyProfileRolesSkillsQueryHookResult = ReturnType<typeof useMyProfileRolesSkillsQuery>;
+export type MyProfileRolesSkillsLazyQueryHookResult = ReturnType<typeof useMyProfileRolesSkillsLazyQuery>;
+export type MyProfileRolesSkillsQueryResult = Apollo.QueryResult<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>;
+export const UpdateUserRolesSkillsDocument = gql`
+    mutation UpdateUserRolesSkills($data: ProfileRolesInput) {
+  updateProfileRoles(data: $data) {
+    id
+    skills {
+      id
+      title
+    }
+    roles {
+      id
+      title
+      icon
+      level
+    }
+  }
+}
+    `;
+export type UpdateUserRolesSkillsMutationFn = Apollo.MutationFunction<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>;
+
+/**
+ * __useUpdateUserRolesSkillsMutation__
+ *
+ * To run a mutation, you first call `useUpdateUserRolesSkillsMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpdateUserRolesSkillsMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [updateUserRolesSkillsMutation, { data, loading, error }] = useUpdateUserRolesSkillsMutation({
+ *   variables: {
+ *      data: // value for 'data'
+ *   },
+ * });
+ */
+export function useUpdateUserRolesSkillsMutation(baseOptions?: Apollo.MutationHookOptions<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>(UpdateUserRolesSkillsDocument, options);
+      }
+export type UpdateUserRolesSkillsMutationHookResult = ReturnType<typeof useUpdateUserRolesSkillsMutation>;
+export type UpdateUserRolesSkillsMutationResult = Apollo.MutationResult<UpdateUserRolesSkillsMutation>;
+export type UpdateUserRolesSkillsMutationOptions = Apollo.BaseMutationOptions<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>;
 export const MyProfileAboutDocument = gql`
     query MyProfileAbout {
   me {
diff --git a/src/mocks/data.ts b/src/mocks/data.ts
index a660dcf..8e86892 100644
--- a/src/mocks/data.ts
+++ b/src/mocks/data.ts
@@ -1,7 +1,7 @@
 import { hackathons } from "./data/hackathon";
 import { posts, feed, generatePostComments } from "./data/posts";
 import { categories, projects } from "./data/projects";
-import { user } from "./data/users";
+import { allMakersRoles, allMakersSkills, user } from "./data/users";
 
 export const MOCK_DATA = {
     projects,
@@ -10,5 +10,7 @@ export const MOCK_DATA = {
     feed,
     hackathons,
     generatePostComments: generatePostComments,
-    user: user
+    user: user,
+    allMakersRoles: allMakersRoles,
+    allMakersSkills: allMakersSkills,
 }
\ No newline at end of file
diff --git a/src/mocks/data/users.ts b/src/mocks/data/users.ts
index 51e8a1e..eade93e 100644
--- a/src/mocks/data/users.ts
+++ b/src/mocks/data/users.ts
@@ -1,9 +1,101 @@
 import { Chance } from "chance";
-import { MyProfile, RoleLevelEnum, User } from "src/graphql";
+import { GenericMakerRole, MakerSkill, MyProfile, RoleLevelEnum, User } from "src/graphql";
+import { randomItem, randomItems } from "src/utils/helperFunctions";
 import { posts } from "./posts";
 import { getCoverImage, getAvatarImage } from "./utils";
 
 const chance = new Chance();
+export const allMakersRoles: GenericMakerRole[] = [
+    {
+        id: 1,
+        title: "Frontend Dev",
+        icon: "💄"
+    },
+    {
+        id: 2,
+        title: "Backend Dev",
+        icon: "💻️"
+    }, {
+        id: 3,
+        title: "UI/UX Designer",
+        icon: "🌈️️"
+    },
+    {
+        id: 4,
+        title: "Community Manager",
+        icon: "🎉️️"
+    },
+    {
+        id: 5,
+        title: "Founder",
+        icon: "🦄️"
+    },
+    {
+        id: 6,
+        title: "Marketer",
+        icon: "🚨️"
+    },
+    {
+        id: 7,
+        title: "Content Creator",
+        icon: "🎥️"
+    },
+    {
+        id: 8,
+        title: "Researcher",
+        icon: "🔬"
+    },
+    {
+        id: 9,
+        title: "Data engineer",
+        icon: "💿️"
+    },
+    {
+        id: 10,
+        title: "Growth hacker",
+        icon: "📉️"
+    },
+    {
+        id: 11,
+        title: "Technical Writer",
+        icon: "✍️️"
+    },
+]
+
+export const allMakersSkills: MakerSkill[] = [
+    {
+        id: 1,
+        title: "Figma"
+    },
+    {
+        id: 2,
+        title: "Prototyping"
+    }, {
+        id: 3,
+        title: "Writing"
+    }, {
+        id: 4,
+        title: "CSS"
+    }, {
+        id: 5,
+        title: "React.js"
+    }, {
+        id: 6,
+        title: "Wordpress"
+    }, {
+        id: 7,
+        title: "Principle app"
+    }, {
+        id: 8,
+        title: "UX design"
+    }, {
+        id: 9,
+        title: "User research"
+    }, {
+        id: 10,
+        title: "User testing"
+    },
+]
 
 export const user: User & MyProfile = {
     id: 123,
@@ -32,56 +124,8 @@ export const user: User & MyProfile = {
             key: "66345134234235",
             name: "My Phoenix wallet key"
         },],
-    roles: [
-        {
-            id: 12,
-            title: "Developer",
-            icon: "💻️",
-            level: RoleLevelEnum.Pro,
-        },
-        {
-            id: 14,
-            title: "Founder",
-            icon: "🦄️",
-            level: RoleLevelEnum.Intermediate,
-        },
-        {
-            id: 51,
-            title: "Community Manager",
-            icon: "🎉️",
-            level: RoleLevelEnum.Hobbyist,
-        },
-    ],
-    skills: [
-        {
-            id: 1,
-            title: chance.word(),
-        },
-        {
-            id: 2,
-            title: chance.word(),
-        },
-        {
-            id: 3,
-            title: chance.word(),
-        },
-        {
-            id: 4,
-            title: chance.word(),
-        },
-        {
-            id: 5,
-            title: chance.word(),
-        },
-        {
-            id: 6,
-            title: chance.word(),
-        },
-        {
-            id: 7,
-            title: chance.word(),
-        },
-    ],
+    roles: randomItems(3, ...allMakersRoles).map(role => ({ ...role, level: randomItem(...Object.values(RoleLevelEnum)) })),
+    skills: randomItems(7, ...allMakersSkills),
     tournaments: [
         {
             id: 1,
@@ -127,3 +171,5 @@ export const user: User & MyProfile = {
         },
     ] as User[]
 }
+
+
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 94b5557..9325296 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -1,6 +1,6 @@
 
 import { graphql } from 'msw'
-import { allCategories, getAllHackathons, getCategory, getFeed, getMyDrafts, getPostById, getProject, getTrendingPosts, hottestProjects, me, newProjects, popularTags, profile, projectsByCategory, searchProjects } from './resolvers'
+import { allCategories, getAllHackathons, getAllMakersRoles, getAllMakersSkills, getCategory, getFeed, getMyDrafts, getPostById, getProject, getTrendingPosts, hottestProjects, me, newProjects, popularTags, profile, projectsByCategory, searchProjects } from './resolvers'
 import {
     NavCategoriesQuery,
     ExploreProjectsQuery,
@@ -31,6 +31,7 @@ import {
     GetMyDraftsQuery,
     MyProfileAboutQuery,
     MyProfilePreferencesQuery,
+    MyProfileRolesSkillsQuery,
 } from 'src/graphql'
 
 const delay = (ms = 1000) => new Promise((res) => setTimeout(res, ms + Math.random() * 1000))
@@ -197,8 +198,6 @@ export const handlers = [
 
     graphql.query<MeQuery>('Me', async (req, res, ctx) => {
         await delay()
-        console.log("ME");
-
         return res(
             ctx.data({
                 me: me()
@@ -226,6 +225,17 @@ export const handlers = [
     }),
 
 
+    graphql.query<MyProfileRolesSkillsQuery>('MyProfileRolesSkills', async (req, res, ctx) => {
+        await delay()
+        return res(
+            ctx.data({
+                me: { ...me(), roles: [], skills: [] },
+                getAllMakersRoles: getAllMakersRoles(),
+                getAllMakersSkills: getAllMakersSkills(),
+            })
+        )
+    }),
+
 
     graphql.query<ProfileQuery>('profile', async (req, res, ctx) => {
         await delay()
diff --git a/src/mocks/resolvers.ts b/src/mocks/resolvers.ts
index d09f614..80fa46b 100644
--- a/src/mocks/resolvers.ts
+++ b/src/mocks/resolvers.ts
@@ -84,6 +84,13 @@ export function profile() {
     return { ...MOCK_DATA['user'], __typename: 'User' } as User
 }
 
+export function getAllMakersRoles() {
+    return MOCK_DATA['allMakersRoles']
+}
+
+export function getAllMakersSkills() {
+    return MOCK_DATA['allMakersSkills']
+}
 export function getMyDrafts(): Query['getMyDrafts'] {
     return MOCK_DATA['posts'].stories;
 }
\ No newline at end of file

From bf7825b4fe050846eeadc9098861a66b8b829fa8 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 22 Aug 2022 14:12:15 +0300
Subject: [PATCH 03/10] feat: update user skills card, skills input component

---
 .../RolesSkillsTab/RolesSkillsTab.tsx         |  11 ++
 .../UpdateSkillsCard/SkillsInput.tsx          | 130 ++++++++++++++++++
 .../UpdateSkillsCard/UpdateSkillsCard.tsx     |  58 ++++----
 src/redux/features/modals.slice.ts            |   2 +-
 4 files changed, 166 insertions(+), 35 deletions(-)
 create mode 100644 src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/SkillsInput.tsx

diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
index 35a09ca..fac8d8c 100644
--- a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
@@ -11,6 +11,7 @@ import { usePrompt } from 'src/utils/hooks';
 import { UpdateUserRolesSkillsMutationVariables, useMyProfileRolesSkillsQuery, useUpdateUserRolesSkillsMutation } from 'src/graphql'
 import LoadingPage from "src/Components/LoadingPage/LoadingPage";
 import UpdateRolesCard from "./UpdateRolesCard/UpdateRolesCard";
+import UpdateSkillsCard from "./UpdateSkillsCard/UpdateSkillsCard";
 
 
 interface Props {
@@ -97,6 +98,16 @@ export default function PreferencesTab() {
                             onChange={onChange} />
                     )}
                 />
+                <Controller
+                    control={control}
+                    name="skills"
+                    render={({ field: { onChange, value } }) => (
+                        <UpdateSkillsCard
+                            allSkills={query.data?.getAllMakersSkills!}
+                            value={value}
+                            onChange={onChange} />
+                    )}
+                />
             </div>
             <div className="self-start sticky-side-element">
                 <SaveChangesCard
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/SkillsInput.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/SkillsInput.tsx
new file mode 100644
index 0000000..c410c4d
--- /dev/null
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/SkillsInput.tsx
@@ -0,0 +1,130 @@
+
+
+import Select from 'react-select';
+import { OnChangeValue, StylesConfig, components, OptionProps } from "react-select";
+import Avatar from "src/features/Profiles/Components/Avatar/Avatar";
+import { FiSearch } from 'react-icons/fi';
+import { useState } from 'react';
+import { MyProfileRolesSkillsQuery } from 'src/graphql';
+
+
+
+type Skill = MyProfileRolesSkillsQuery['getAllMakersSkills'][number]
+
+interface Props {
+    classes?: {
+        container?: string
+        input?: string
+    }
+    placeholder?: string,
+    onSelect?: (selectedUser: Skill) => void
+    options: Skill[]
+}
+
+
+
+
+// const OptionComponent = (props: OptionProps<Skill>) => {
+//     return (
+//         <div>
+//             <components.Option {...props} className='!flex items-center gap-16 !py-16'>
+//                 <Avatar src={props.data.avatar} width={48} />
+//                 <div>
+//                     <p className="font-medium self-center">
+//                         {props.data.name}
+//                     </p>
+//                     <p className="text-body5 text-gray-500">
+//                         {props.data.jobTitle}
+//                     </p>
+//                 </div>
+//             </components.Option>
+
+//         </div>
+//     );
+// };
+
+
+const colourStyles: StylesConfig = {
+
+    control: (styles, state) => ({
+        ...styles,
+        padding: '5px 16px',
+        borderRadius: 12,
+        // border: 'none',
+        // boxShadow: 'none',
+
+        ":hover": {
+            cursor: "pointer"
+        },
+        ":focus-within": {
+            '--tw-border-opacity': '1',
+            borderColor: 'rgb(179 160 255 / var(--tw-border-opacity))',
+            outlineColor: '#9E88FF',
+            '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
+            '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
+            boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+            '--tw-ring-color': 'rgb(179 160 255 / var(--tw-ring-opacity))',
+            '--tw-ring-opacity': '0.5'
+        }
+
+    }),
+    multiValueRemove: (styles) => ({
+        ...styles,
+        ":hover": {
+            background: 'none'
+        }
+    }),
+    indicatorsContainer: () => ({ display: 'none' }),
+    clearIndicator: () => ({ display: 'none' }),
+    indicatorSeparator: () => ({ display: "none" }),
+    input: (styles, state) => ({
+        ...styles,
+        " input": {
+            boxShadow: 'none !important'
+        },
+    }),
+    multiValue: styles => ({
+        ...styles,
+        padding: '4px 12px',
+        borderRadius: 48,
+        fontWeight: 500
+    }),
+    valueContainer: (styles) => ({
+        ...styles,
+        paddingLeft: 0,
+        paddingRight: 0,
+    })
+}
+
+
+export default function SkillsInput({
+    classes,
+    ...props }: Props) {
+
+    const handleChange = (newValue: OnChangeValue<Skill, false>,) => {
+        if (newValue)
+            props.onSelect?.(newValue);
+    }
+
+    return (
+        <div className={`${classes?.container}`}>
+            <Select
+                value={null}
+                placeholder={'Search and add skill'}
+                options={props.options}
+                onChange={handleChange as any}
+                styles={colourStyles as any}
+                getOptionLabel={o => o?.title!}
+                maxMenuHeight={Math.max(200, Math.min(window.innerHeight / 5, 400))}
+                theme={(theme) => ({
+                    ...theme,
+                    borderRadius: 8,
+                    colors: {
+                        ...theme.colors,
+                        primary: 'var(--primary)',
+                    },
+                })}
+            />
+        </div>
+    )
+}
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.tsx
index ba85701..f34846a 100644
--- a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateSkillsCard/UpdateSkillsCard.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
-import { Control, useFieldArray } from 'react-hook-form'
+import React, { useMemo } from 'react'
+import { GrClose } from 'react-icons/gr'
 import Card from 'src/Components/Card/Card'
-import { GenericMakerRole, MakerRole, MakerSkill, RoleLevelEnum } from 'src/graphql'
-import { IRolesSkillsForm } from '../RolesSkillsTab'
+import { MakerSkill } from 'src/graphql'
+import SkillsInput from './SkillsInput'
 
 type Value = Pick<MakerSkill, 'id'>
 
@@ -14,22 +14,21 @@ interface Props {
 
 export default function UpdateSkillsCard(props: Props) {
 
-    const add = (idx: number) => {
-        props.onChange([...props.value.slice(-2), { ...props.allSkills[idx] }])
+    const add = (newValue: Value) => {
+        props.onChange([...props.value, newValue])
     }
 
-    const remove = (idx: number) => {
-        props.onChange(props.value.filter(v => v.id !== props.allSkills[idx].id))
-    }
+    const idToValue = useMemo(() => {
+        const map = new Map<number, Props['allSkills'][number]>();
+        for (let i = 0; i < props.allSkills.length; i++) {
+            const element = props.allSkills[i];
+            map.set(element.id, element);
+        }
+        return map;
+    }, [props.allSkills])
 
-    const setLevel = (roleId: number, level: RoleLevelEnum) => {
-        props.onChange(props.value.map(v => {
-            if (v.id !== roleId) return v;
-            return {
-                ...v,
-                level
-            }
-        }))
+    const remove = (id: number) => {
+        props.onChange(props.value.filter(v => v.id !== id))
     }
 
 
@@ -37,23 +36,14 @@ export default function UpdateSkillsCard(props: Props) {
         <Card>
             <p className="text-body2 font-bold">🌈  Skills</p>
             <p className="text-body4 text-gray-600 mt-8">Add some of your skills and let other makers know what you’re good at.</p>
-            {/* <ul className=' flex flex-wrap gap-8 mt-24'>
-                {props.allSkills.map((role, idx) => {
-                    const isActive = props.value.some(v => v.id === role.id);
-
-                    return <button
-                        key={role.id}
-                        className={`
-                    px-12 py-8 border rounded-10 text-body5 font-medium
-                    active:scale-95 transition-transform
-                    ${!isActive ? "bg-gray-100 hover:bg-gray-200 border-gray-200" : "bg-primary-100 text-primary-600 border-primary-200"}
-                    `}
-                        onClick={() => isActive ? remove(idx) : add(idx)}
-                    >{role.icon} {role.title}
-                    </button>
-                })}
-            </ul> */}
-
+            <div className="mt-16">
+                <SkillsInput options={props.allSkills.filter(skill => !props.value.some(v => v.id === skill.id))} onSelect={add} />
+            </div>
+            {props.value.length > 0 && <ul className=' flex flex-wrap gap-x-8 gap-y-20 mt-16'>
+                {props.value.map((skill) => <li key={skill.id} className="px-16 py-8 bg-gray-100 rounded-48 text-body5 font-medium">
+                    {idToValue.get(skill.id)?.title} <button className='ml-8' onClick={() => remove(skill.id)}><GrClose /></button>
+                </li>)}
+            </ul>}
         </Card>
     )
 }
diff --git a/src/redux/features/modals.slice.ts b/src/redux/features/modals.slice.ts
index c718a4f..f4e547e 100644
--- a/src/redux/features/modals.slice.ts
+++ b/src/redux/features/modals.slice.ts
@@ -8,8 +8,8 @@ import { InsertLinkModal } from 'src/Components/Inputs/TextEditor/InsertLinkModa
 import { Claim_FundWithdrawCard, Claim_CopySignatureCard, Claim_GenerateSignatureCard, Claim_SubmittedCard } from "src/features/Projects/pages/ProjectPage/ClaimProject";
 import { ModalCard } from "src/Components/Modals/ModalsContainer/ModalsContainer";
 import { ConfirmModal } from "src/Components/Modals/ConfirmModal";
-import { LinkingAccountModal } from "src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkingAccountModal";
 import { RemoveWalletKeyModal } from "src/features/Profiles/pages/EditProfilePage/PreferencesTab/RemoveWalletKeyModal";
+import { LinkingAccountModal } from "src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkingAccountModal";
 
 import { ComponentProps } from "react";
 import { generateId } from "src/utils/helperFunctions";

From 1895a8cf16f1c428d3f9662fa86ddbae5d9c1cfc Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 22 Aug 2022 15:58:24 +0300
Subject: [PATCH 04/10] feat: built api & db tables for skills/roles and
 updating/querying them

---
 api/functions/graphql/types/users.js          | 53 +++++++++--
 .../migration.sql                             | 57 ++++++++++++
 .../migration.sql                             |  8 ++
 .../migration.sql                             |  9 ++
 prisma/schema.prisma                          | 27 ++++++
 prisma/seed/data.js                           | 93 +++++++++++++++++++
 prisma/seed/index.js                          | 28 +++++-
 .../RolesSkillsTab/RolesSkillsTab.tsx         |  9 +-
 .../UpdateRolesCard/UpdateRolesCard.tsx       |  4 +-
 9 files changed, 273 insertions(+), 15 deletions(-)
 create mode 100644 prisma/migrations/20220822112427_add_roles_skills_to_users_table/migration.sql
 create mode 100644 prisma/migrations/20220822113244_add_level_field_to_user_roles_table/migration.sql
 create mode 100644 prisma/migrations/20220822122053_change_level_field_to_int/migration.sql

diff --git a/api/functions/graphql/types/users.js b/api/functions/graphql/types/users.js
index 7f6a815..361decd 100644
--- a/api/functions/graphql/types/users.js
+++ b/api/functions/graphql/types/users.js
@@ -27,14 +27,29 @@ const BaseUser = interfaceType({
         t.string('location')
         t.nonNull.list.nonNull.field('roles', {
             type: MakerRole,
-            resolve: (parent) => {
-                return []
+            resolve: async (parent) => {
+                const data = await prisma.user.findUnique({
+                    where: {
+                        id: parent.id
+                    },
+                    select: {
+                        roles: {
+                            select: {
+                                role: true,
+                                level: true
+                            }
+                        },
+                    }
+                })
+                return data.roles.map(data => {
+                    return ({ ...data.role, level: data.level })
+                })
             }
         })
         t.nonNull.list.nonNull.field('skills', {
             type: MakerSkill,
             resolve: (parent) => {
-                return []
+                return prisma.user.findUnique({ where: { id: parent.id } }).skills();
             }
         })
         t.nonNull.list.nonNull.field('tournaments', {
@@ -112,7 +127,7 @@ const getAllMakersRoles = extendType({
         t.nonNull.list.nonNull.field('getAllMakersRoles', {
             type: GenericMakerRole,
             async resolve(parent, args, context) {
-                return []
+                return prisma.workRole.findMany();
             }
         })
     }
@@ -133,7 +148,7 @@ const getAllMakersSkills = extendType({
         t.nonNull.list.nonNull.field('getAllMakersSkills', {
             type: MakerSkill,
             async resolve(parent, args, context) {
-                return []
+                return prisma.skill.findMany();
             }
         })
     }
@@ -389,16 +404,38 @@ const updateProfileRoles = extendType({
                 // Do some validation
                 if (!user)
                     throw new Error("You have to login");
-                // TODO: validate new data
 
+                await prisma.user.update({
+                    where: {
+                        id: user.id,
+                    },
+                    data: {
+                        skills: {
+                            set: [],
+                        },
+                        roles: {
+                            deleteMany: {}
+                        },
+                    },
+                }
+                )
 
-                // Preprocess & insert
 
                 return prisma.user.update({
                     where: {
                         id: user.id,
                     },
-                    // data: removeNulls(args.data)
+                    data: {
+                        skills: {
+                            connect: args.data.skills,
+                        },
+                        roles: {
+                            create: args.data.roles.map(r => {
+                                console.log(({ roleId: r.id, level: r.level }));
+                                return ({ roleId: r.id, level: r.level })
+                            })
+                        }
+                    }
                 })
             }
         })
diff --git a/prisma/migrations/20220822112427_add_roles_skills_to_users_table/migration.sql b/prisma/migrations/20220822112427_add_roles_skills_to_users_table/migration.sql
new file mode 100644
index 0000000..e1a4a18
--- /dev/null
+++ b/prisma/migrations/20220822112427_add_roles_skills_to_users_table/migration.sql
@@ -0,0 +1,57 @@
+-- AlterTable
+ALTER TABLE "UserKey" ALTER COLUMN "name" SET DEFAULT E'My new wallet key';
+
+-- CreateTable
+CREATE TABLE "UsersOnWorkRoles" (
+    "userId" INTEGER NOT NULL,
+    "roleId" INTEGER NOT NULL,
+
+    CONSTRAINT "UsersOnWorkRoles_pkey" PRIMARY KEY ("userId","roleId")
+);
+
+-- CreateTable
+CREATE TABLE "WorkRole" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "icon" TEXT NOT NULL,
+
+    CONSTRAINT "WorkRole_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Skill" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+
+    CONSTRAINT "Skill_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_SkillToUser" (
+    "A" INTEGER NOT NULL,
+    "B" INTEGER NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "WorkRole_title_key" ON "WorkRole"("title");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Skill_title_key" ON "Skill"("title");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "_SkillToUser_AB_unique" ON "_SkillToUser"("A", "B");
+
+-- CreateIndex
+CREATE INDEX "_SkillToUser_B_index" ON "_SkillToUser"("B");
+
+-- AddForeignKey
+ALTER TABLE "UsersOnWorkRoles" ADD CONSTRAINT "UsersOnWorkRoles_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UsersOnWorkRoles" ADD CONSTRAINT "UsersOnWorkRoles_roleId_fkey" FOREIGN KEY ("roleId") REFERENCES "WorkRole"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_SkillToUser" ADD FOREIGN KEY ("A") REFERENCES "Skill"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_SkillToUser" ADD FOREIGN KEY ("B") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/migrations/20220822113244_add_level_field_to_user_roles_table/migration.sql b/prisma/migrations/20220822113244_add_level_field_to_user_roles_table/migration.sql
new file mode 100644
index 0000000..16db1e9
--- /dev/null
+++ b/prisma/migrations/20220822113244_add_level_field_to_user_roles_table/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `level` to the `UsersOnWorkRoles` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "UsersOnWorkRoles" ADD COLUMN     "level" TEXT NOT NULL;
diff --git a/prisma/migrations/20220822122053_change_level_field_to_int/migration.sql b/prisma/migrations/20220822122053_change_level_field_to_int/migration.sql
new file mode 100644
index 0000000..019c60e
--- /dev/null
+++ b/prisma/migrations/20220822122053_change_level_field_to_int/migration.sql
@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - Changed the type of `level` on the `UsersOnWorkRoles` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
+
+*/
+-- AlterTable
+ALTER TABLE "UsersOnWorkRoles" DROP COLUMN "level",
+ADD COLUMN     "level" INTEGER NOT NULL;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 09cdc25..cf4d8d8 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -65,6 +65,8 @@ model User {
   posts_comments PostComment[]
   donations      Donation[]
   userKeys       UserKey[]
+  skills         Skill[]
+  roles          UsersOnWorkRoles[]
 }
 
 model UserKey {
@@ -75,6 +77,31 @@ model UserKey {
   user_id Int?
 }
 
+model UsersOnWorkRoles {
+  user   User     @relation(fields: [userId], references: [id])
+  userId Int
+  role   WorkRole @relation(fields: [roleId], references: [id])
+  roleId Int
+
+  level Int
+
+  @@id([userId, roleId])
+}
+
+model WorkRole {
+  id    Int                @id @default(autoincrement())
+  title String             @unique
+  icon  String
+  users UsersOnWorkRoles[]
+}
+
+model Skill {
+  id    Int    @id @default(autoincrement())
+  title String @unique
+
+  users User[]
+}
+
 // -----------------
 // Projects
 // -----------------
diff --git a/prisma/seed/data.js b/prisma/seed/data.js
index 4f22d06..cc482df 100644
--- a/prisma/seed/data.js
+++ b/prisma/seed/data.js
@@ -418,10 +418,103 @@ const hackathons = [
     },
 ]
 
+const roles = [
+    {
+        id: 1,
+        title: "Frontend Dev",
+        icon: "💄"
+    },
+    {
+        id: 2,
+        title: "Backend Dev",
+        icon: "💻️"
+    }, {
+        id: 3,
+        title: "UI/UX Designer",
+        icon: "🌈️️"
+    },
+    {
+        id: 4,
+        title: "Community Manager",
+        icon: "🎉️️"
+    },
+    {
+        id: 5,
+        title: "Founder",
+        icon: "🦄️"
+    },
+    {
+        id: 6,
+        title: "Marketer",
+        icon: "🚨️"
+    },
+    {
+        id: 7,
+        title: "Content Creator",
+        icon: "🎥️"
+    },
+    {
+        id: 8,
+        title: "Researcher",
+        icon: "🔬"
+    },
+    {
+        id: 9,
+        title: "Data engineer",
+        icon: "💿️"
+    },
+    {
+        id: 10,
+        title: "Growth hacker",
+        icon: "📉️"
+    },
+    {
+        id: 11,
+        title: "Technical Writer",
+        icon: "✍️️"
+    },
+]
+
+const skills = [
+    {
+        id: 1,
+        title: "Figma"
+    },
+    {
+        id: 2,
+        title: "Prototyping"
+    }, {
+        id: 3,
+        title: "Writing"
+    }, {
+        id: 4,
+        title: "CSS"
+    }, {
+        id: 5,
+        title: "React.js"
+    }, {
+        id: 6,
+        title: "Wordpress"
+    }, {
+        id: 7,
+        title: "Principle app"
+    }, {
+        id: 8,
+        title: "UX design"
+    }, {
+        id: 9,
+        title: "User research"
+    }, {
+        id: 10,
+        title: "User testing"
+    },
+]
 
 module.exports = {
     categories,
     projects,
     tags,
     hackathons,
+    roles,
+    skills,
 }
\ No newline at end of file
diff --git a/prisma/seed/index.js b/prisma/seed/index.js
index 1484395..abc52d5 100644
--- a/prisma/seed/index.js
+++ b/prisma/seed/index.js
@@ -1,6 +1,6 @@
 const { PrismaClient } = require("@prisma/client");
 const { generatePrivateKey, getPublicKey } = require("../../api/utils/nostr-tools");
-const { categories, projects, tags, hackathons } = require("./data");
+const { categories, projects, tags, hackathons, roles, skills } = require("./data");
 const Chance = require('chance');
 const { getCoverImage, randomItems, random } = require("./helpers");
 
@@ -58,7 +58,11 @@ async function main() {
 
     // await createHackathons();
 
-    await fillUserKeysTable()
+    // await fillUserKeysTable()
+
+    // await createRoles();
+
+    // await createSkills();
 
 }
 
@@ -169,6 +173,26 @@ async function fillUserKeysTable() {
     })
 }
 
+async function createRoles() {
+    console.log("Creating Users Roles");
+    await prisma.workRole.createMany({
+        data: roles.map(item => ({
+            id: item.id,
+            title: item.title,
+            icon: item.icon,
+        }))
+    })
+}
+
+async function createSkills() {
+    console.log("Creating Users Skills");
+    await prisma.skill.createMany({
+        data: skills.map(item => ({
+            id: item.id,
+            title: item.title,
+        }))
+    })
+}
 
 
 main()
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
index fac8d8c..7a76d69 100644
--- a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
@@ -25,7 +25,7 @@ const schema: yup.SchemaOf<IRolesSkillsForm> = yup.object({
     roles: yup.array().of(
         yup.object().shape({
             id: yup.number().required(),
-            role: yup.string().required(),
+            level: yup.string().required(),
         }).required()
     ).required(),
     skills: yup.array().of(
@@ -70,7 +70,10 @@ export default function PreferencesTab() {
         const toastId = toast.loading("Saving changes...", NotificationsService.defaultOptions)
         mutate({
             variables: {
-                data
+                data: {
+                    roles: data.roles.map(v => ({ id: v.id, level: v.level })),
+                    skills: data.skills.map(v => ({ id: v.id })),
+                }
             },
             onCompleted: ({ updateProfileRoles }) => {
                 if (updateProfileRoles) {
@@ -113,7 +116,7 @@ export default function PreferencesTab() {
                 <SaveChangesCard
                     isLoading={mutationStatus.loading}
                     isDirty={isDirty}
-                    onSubmit={handleSubmit(onSubmit)}
+                    onSubmit={handleSubmit(onSubmit, e => console.log(e))}
                     onCancel={() => reset()}
                 />
             </div>
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx
index ed31dd4..167493a 100644
--- a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx
@@ -59,7 +59,7 @@ export default function UpdateRolesCard(props: Props) {
                     {props.value.map(role => {
                         const { title, icon } = props.allRoles.find(r => r.id === role.id)!;
 
-                        return <>
+                        return <React.Fragment key={role.id}>
                             <p className="shrink-0 text-body4 whitespace-nowrap">{icon} {title}</p>
                             <div className="flex flex-wrap gap-8 grow text-body5 mb-8 last-of-type:mb-0">
                                 {[RoleLevelEnum.Beginner, RoleLevelEnum.Hobbyist, RoleLevelEnum.Intermediate, RoleLevelEnum.Advanced, RoleLevelEnum.Pro].map(r =>
@@ -71,7 +71,7 @@ export default function UpdateRolesCard(props: Props) {
                                         onClick={() => setLevel(role.id, r)}
                                     >{r}</button>
                                 )}</div>
-                        </>
+                        </React.Fragment >
                     })}
                 </ul>
             </div>}

From 03352e4bc9358ef6e8c82cb58e88564f3ab6aa83 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 23 Aug 2022 09:35:15 +0300
Subject: [PATCH 05/10] feat: add skeletons to roles-tabs

---
 .../RolesSkillsTab.Skeleton.tsx               | 44 +++++++++++++++++++
 .../RolesSkillsTab/RolesSkillsTab.tsx         |  3 +-
 src/mocks/handlers.ts                         |  2 +-
 3 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.Skeleton.tsx

diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.Skeleton.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.Skeleton.tsx
new file mode 100644
index 0000000..b84e4ce
--- /dev/null
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.Skeleton.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import Card from 'src/Components/Card/Card';
+import Skeleton from 'react-loading-skeleton';
+import { random } from 'src/utils/helperFunctions';
+
+export default function RolesSkillsTabSkeleton() {
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
+            <div className="col-span-2 flex flex-col gap-24">
+                <Card>
+                    <p className="text-body2 font-bold"><Skeleton width="15ch" /></p>
+                    <p className="text-body4 text-gray-600 mt-8">
+                        <Skeleton width="90%" />
+                    </p>
+                    <ul className=' flex flex-wrap gap-8 mt-24'>
+                        {Array(10).fill(0).map((_, idx) => {
+
+                            return <div
+                                key={idx}
+                                className={`px-12 py-8 border rounded-10 text-body5 font-medium`}
+                            ><Skeleton width={`${Math.round(random(8, 15))}ch`} />
+                            </div>
+                        })}
+                    </ul>
+                    <div className="py-80"></div>
+                </Card>
+                <Card>
+                    <p className="text-body2 font-bold"><Skeleton width="12ch" /></p>
+                    <p className="text-body4 text-gray-600 mt-8">
+                        <Skeleton width="80%" />
+                    </p>
+                    <ul className=' flex flex-wrap gap-x-8 gap-y-20 mt-16'>
+                        {Array(8).fill(0).map((_, idx) => <li key={idx} className="px-16 py-8 bg-gray-100 rounded-48 text-body5 font-medium">
+                            <Skeleton width={`${Math.round(random(3, 12))}ch`} />
+                        </li>)}
+                    </ul>
+                </Card>
+            </div>
+            <div className="">
+
+            </div>
+        </div>
+    )
+}
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
index 7a76d69..a858c58 100644
--- a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
@@ -12,6 +12,7 @@ import { UpdateUserRolesSkillsMutationVariables, useMyProfileRolesSkillsQuery, u
 import LoadingPage from "src/Components/LoadingPage/LoadingPage";
 import UpdateRolesCard from "./UpdateRolesCard/UpdateRolesCard";
 import UpdateSkillsCard from "./UpdateSkillsCard/UpdateSkillsCard";
+import RolesSkillsTabSkeleton from "./RolesSkillsTab.Skeleton";
 
 
 interface Props {
@@ -58,7 +59,7 @@ export default function PreferencesTab() {
 
 
     if (query.networkStatus === NetworkStatus.loading)
-        return <LoadingPage />
+        return <RolesSkillsTabSkeleton />
 
     if (!query.data || !query.data?.me)
         return <NotFoundPage />
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 9325296..453d0ef 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -229,7 +229,7 @@ export const handlers = [
         await delay()
         return res(
             ctx.data({
-                me: { ...me(), roles: [], skills: [] },
+                me: { ...me() },
                 getAllMakersRoles: getAllMakersRoles(),
                 getAllMakersSkills: getAllMakersSkills(),
             })

From feac07c98338b3d292583f32648a927912c80e96 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 23 Aug 2022 09:47:09 +0300
Subject: [PATCH 06/10] fix: show 'add' btns on skills card when owner

---
 src/features/Profiles/pages/ProfilePage/ProfilePage.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
index 2f01217..08ac563 100644
--- a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
+++ b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
@@ -11,7 +11,6 @@ import RolesCard from "./RolesCard/RolesCard"
 import SkillsCard from "./SkillsCard/SkillsCard"
 import TournamentsCard from "./TournamentsCard/TournamentsCard"
 import { MEDIA_QUERIES } from "src/utils/theme"
-import TrendingCard from "src/features/Posts/Components/TrendingCard/TrendingCard"
 import SimilarMakersCard from "./SimilarMakersCard/SimilarMakersCard"
 
 export default function ProfilePage() {
@@ -69,8 +68,8 @@ export default function ProfilePage() {
                     <>
                         <main>
                             <AboutCard user={profileQuery.data.profile} isOwner={isOwner} />
-                            <RolesCard roles={profileQuery.data.profile.roles} />
-                            <SkillsCard skills={profileQuery.data.profile.skills} />
+                            <RolesCard roles={profileQuery.data.profile.roles} isOwner={isOwner} />
+                            <SkillsCard skills={profileQuery.data.profile.skills} isOwner={isOwner} />
                             <StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
                         </main>
                     </>

From bdcf5a18482b4d3b024425f7388e60168504a96f Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 23 Aug 2022 10:05:42 +0300
Subject: [PATCH 07/10] fix: show owner card on desktop, fix keys warning

---
 .../RolesSkillsTab/RolesSkillsTab.tsx         | 20 ++++++++++++++++++-
 .../UpdateRolesCard/UpdateRolesCard.tsx       |  8 +++++---
 .../pages/ProfilePage/ProfilePage.tsx         |  7 ++++---
 .../ProfilePage/SkillsCard/SkillsCard.tsx     |  6 ++----
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
index a858c58..85f0471 100644
--- a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
@@ -6,13 +6,14 @@ import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import SaveChangesCard from '../SaveChangesCard/SaveChangesCard';
 import { toast } from 'react-toastify';
 import { NotificationsService } from 'src/services';
-import { NetworkStatus } from '@apollo/client';
+import { gql, NetworkStatus, useApolloClient } from '@apollo/client';
 import { usePrompt } from 'src/utils/hooks';
 import { UpdateUserRolesSkillsMutationVariables, useMyProfileRolesSkillsQuery, useUpdateUserRolesSkillsMutation } from 'src/graphql'
 import LoadingPage from "src/Components/LoadingPage/LoadingPage";
 import UpdateRolesCard from "./UpdateRolesCard/UpdateRolesCard";
 import UpdateSkillsCard from "./UpdateSkillsCard/UpdateSkillsCard";
 import RolesSkillsTabSkeleton from "./RolesSkillsTab.Skeleton";
+import { useEffect } from "react";
 
 
 interface Props {
@@ -54,6 +55,23 @@ export default function PreferencesTab() {
     });
     const [mutate, mutationStatus] = useUpdateUserRolesSkillsMutation();
 
+    const apolloClient = useApolloClient();
+
+    useEffect(() => {
+        console.log(apolloClient.readFragment({
+            id: "User:1",
+            fragment: gql`
+        fragment MyUser on User{
+            id
+            name
+            skills
+        }
+        `
+        }))
+
+    }, [apolloClient])
+
+
 
     usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
 
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx
index 167493a..1ddeec6 100644
--- a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx
@@ -37,7 +37,7 @@ export default function UpdateRolesCard(props: Props) {
         <Card>
             <p className="text-body2 font-bold">🎛️  Roles</p>
             <p className="text-body4 text-gray-600 mt-8"> Select your top 3 roles, and let other makers know what your level is.</p>
-            <ul className=' flex flex-wrap gap-8 mt-24'>
+            <div className=' flex flex-wrap gap-8 mt-24'>
                 {props.allRoles.map((role, idx) => {
                     const isActive = props.value.some(v => v.id === role.id);
 
@@ -52,7 +52,7 @@ export default function UpdateRolesCard(props: Props) {
                     >{role.icon} {role.title}
                     </button>
                 })}
-            </ul>
+            </div>
 
             {props.value.length > 0 && <div className="pt-24 mt-24 border-t border-gray-200">
                 <ul className="grid grid-cols-1 lg:grid-cols-[auto_1fr] items-center gap-16">
@@ -63,7 +63,9 @@ export default function UpdateRolesCard(props: Props) {
                             <p className="shrink-0 text-body4 whitespace-nowrap">{icon} {title}</p>
                             <div className="flex flex-wrap gap-8 grow text-body5 mb-8 last-of-type:mb-0">
                                 {[RoleLevelEnum.Beginner, RoleLevelEnum.Hobbyist, RoleLevelEnum.Intermediate, RoleLevelEnum.Advanced, RoleLevelEnum.Pro].map(r =>
-                                    <button className={` 
+                                    <button
+                                        key={r}
+                                        className={` 
                                 px-12 py-4 bg-gray-100 border rounded-8 flex-1
                                 active:scale-95 transition-transform
                                 ${r !== role.level ? "bg-gray-100 hover:bg-gray-200 border-gray-200" : "bg-primary-100 text-primary-600 border-primary-200"}
diff --git a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
index 08ac563..fc0189e 100644
--- a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
+++ b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
@@ -25,6 +25,7 @@ export default function ProfilePage() {
     const { isOwner } = useAppSelector(state => ({
         isOwner: Boolean(state.user.me?.id && state.user.me?.id === profileQuery.data?.profile?.id),
     }))
+
     const isMediumScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
 
 
@@ -51,9 +52,9 @@ export default function ProfilePage() {
                     <>
                         <aside>
 
-                            <RolesCard roles={profileQuery.data.profile.roles} />
-                            <SkillsCard skills={profileQuery.data.profile.skills} />
-                            <TournamentsCard tournaments={profileQuery.data.profile.tournaments} />
+                            <RolesCard roles={profileQuery.data.profile.roles} isOwner={isOwner} />
+                            <SkillsCard skills={profileQuery.data.profile.skills} isOwner={isOwner} />
+                            <TournamentsCard tournaments={profileQuery.data.profile.tournaments} isOwner={isOwner} />
                         </aside>
                         <main>
 
diff --git a/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.tsx b/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.tsx
index 3cfb05a..913d4e1 100644
--- a/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.tsx
+++ b/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.tsx
@@ -6,11 +6,10 @@ import { RoleLevelEnum, User } from 'src/graphql';
 
 interface Props {
     skills: User['skills'][number][]
-    isOwner?: boolean;
+    isOwner: boolean;
 }
 
 export default function SkillsCard({ skills, isOwner }: Props) {
-
     return (
         <Card>
             <p className="text-body2 font-bold">🌈  Skills</p>
@@ -20,8 +19,7 @@ export default function SkillsCard({ skills, isOwner }: Props) {
                     {isOwner && <Button color='primary' className='mt-16' size='sm' href='/edit-profile/roles-skills'>Add skills</Button>}
                 </>}
                 <ul className=' flex flex-wrap gap-x-8 gap-y-20'>
-                    {
-                        skills.map((skill) => <li key={skill.id} className="px-12 py-4 bg-gray-100 rounded-48 font-medium">{skill.title}</li>)}
+                    {skills.map((skill) => <li key={skill.id} className="px-12 py-4 bg-gray-100 rounded-48 font-medium">{skill.title}</li>)}
                 </ul>
             </div>
         </Card>

From 4b9cb9463448c2de3f904c7e3dbab6be94873fbc Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 23 Aug 2022 10:29:00 +0300
Subject: [PATCH 08/10] update: reflect roles/skills changes on profile
 immediately

---
 api/functions/graphql/types/users.js          |  5 +--
 .../RolesSkillsTab/RolesSkillsTab.tsx         | 33 ++++++++++---------
 .../pages/ProfilePage/ProfilePage.tsx         | 24 ++++++++++++++
 3 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/api/functions/graphql/types/users.js b/api/functions/graphql/types/users.js
index 361decd..7173b36 100644
--- a/api/functions/graphql/types/users.js
+++ b/api/functions/graphql/types/users.js
@@ -430,10 +430,7 @@ const updateProfileRoles = extendType({
                             connect: args.data.skills,
                         },
                         roles: {
-                            create: args.data.roles.map(r => {
-                                console.log(({ roleId: r.id, level: r.level }));
-                                return ({ roleId: r.id, level: r.level })
-                            })
+                            create: args.data.roles.map(r => ({ roleId: r.id, level: r.level }))
                         }
                     }
                 })
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
index 85f0471..9b11935 100644
--- a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
@@ -9,11 +9,9 @@ import { NotificationsService } from 'src/services';
 import { gql, NetworkStatus, useApolloClient } from '@apollo/client';
 import { usePrompt } from 'src/utils/hooks';
 import { UpdateUserRolesSkillsMutationVariables, useMyProfileRolesSkillsQuery, useUpdateUserRolesSkillsMutation } from 'src/graphql'
-import LoadingPage from "src/Components/LoadingPage/LoadingPage";
 import UpdateRolesCard from "./UpdateRolesCard/UpdateRolesCard";
 import UpdateSkillsCard from "./UpdateSkillsCard/UpdateSkillsCard";
 import RolesSkillsTabSkeleton from "./RolesSkillsTab.Skeleton";
-import { useEffect } from "react";
 
 
 interface Props {
@@ -53,23 +51,26 @@ export default function PreferencesTab() {
         },
         notifyOnNetworkStatusChange: true,
     });
-    const [mutate, mutationStatus] = useUpdateUserRolesSkillsMutation();
 
-    const apolloClient = useApolloClient();
-
-    useEffect(() => {
-        console.log(apolloClient.readFragment({
-            id: "User:1",
-            fragment: gql`
-        fragment MyUser on User{
-            id
-            name
-            skills
+    const apolloClient = useApolloClient()
+    const [mutate, mutationStatus] = useUpdateUserRolesSkillsMutation({
+        onCompleted: data => {
+            apolloClient.writeFragment({
+                id: `User:${data.updateProfileRoles?.id}`,
+                data: {
+                    roles: data.updateProfileRoles?.roles,
+                    skills: data.updateProfileRoles?.skills
+                },
+                fragment: gql`
+                fragment user on User{
+                    roles
+                    skills
+                }
+                `
+            })
         }
-        `
-        }))
+    });
 
-    }, [apolloClient])
 
 
 
diff --git a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
index fc0189e..5730ba5 100644
--- a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
+++ b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
@@ -12,6 +12,8 @@ import SkillsCard from "./SkillsCard/SkillsCard"
 import TournamentsCard from "./TournamentsCard/TournamentsCard"
 import { MEDIA_QUERIES } from "src/utils/theme"
 import SimilarMakersCard from "./SimilarMakersCard/SimilarMakersCard"
+import { useEffect } from "react"
+import { gql, useApolloClient } from "@apollo/client"
 
 export default function ProfilePage() {
 
@@ -29,6 +31,28 @@ export default function ProfilePage() {
     const isMediumScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
 
 
+    const apolloClient = useApolloClient();
+
+    const profileFetched = !!profileQuery.data?.profile
+
+    useEffect(() => {
+        if (profileFetched)
+            console.log(apolloClient.readFragment({
+                id: `User:${id}`,
+                fragment: gql`
+        fragment MyUser on User{
+            id
+            name
+            roles{
+                id
+                title
+            }
+        }
+        `
+            }))
+
+    }, [apolloClient, profileFetched])
+
     if (profileQuery.loading)
         return <LoadingPage />
 

From 5534fe518a05ee0246530e42814f3f6a788d2244 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 23 Aug 2022 11:10:51 +0300
Subject: [PATCH 09/10] feat: make all profile sections reactive to mutation
 changes

---
 .../BasicProfileInfoTab.Skeleton.tsx}         |   2 +-
 .../BasicProfileInfoTab.tsx}                  |  17 +-
 .../BasicProfileInfoTab/profileAbout.graphql  |  28 ++
 .../pages/EditProfilePage/EditProfilePage.tsx |   8 +-
 .../RolesSkillsTab/RolesSkillsTab.tsx         |  17 +-
 .../RolesSkillsTab/rolesSkills.graphql        |  24 +-
 .../UpdateMyProfileTab/profileAbout.graphql   |  37 ---
 .../pages/ProfilePage/ProfilePage.tsx         |  22 +-
 .../pages/ProfilePage/profile.graphql         |  26 +-
 src/graphql/index.tsx                         | 291 +++++++++---------
 src/utils/apollo.ts                           |   3 +
 11 files changed, 209 insertions(+), 266 deletions(-)
 rename src/features/Profiles/pages/EditProfilePage/{UpdateMyProfileTab/UpdateMyProfileTab.Skeleton.tsx => BasicProfileInfoTab/BasicProfileInfoTab.Skeleton.tsx} (95%)
 rename src/features/Profiles/pages/EditProfilePage/{UpdateMyProfileTab/UpdateMyProfileTab.tsx => BasicProfileInfoTab/BasicProfileInfoTab.tsx} (95%)
 create mode 100644 src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/profileAbout.graphql
 delete mode 100644 src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/profileAbout.graphql

diff --git a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.Skeleton.tsx b/src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/BasicProfileInfoTab.Skeleton.tsx
similarity index 95%
rename from src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.Skeleton.tsx
rename to src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/BasicProfileInfoTab.Skeleton.tsx
index 51e7e45..3954b5f 100644
--- a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.Skeleton.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/BasicProfileInfoTab.Skeleton.tsx
@@ -1,7 +1,7 @@
 import Card from 'src/Components/Card/Card';
 import Skeleton from 'react-loading-skeleton';
 
-export default function UpdateProfileAboutTabSkeleton() {
+export default function BasicProfileInfoTabSkeleton() {
     return (
         <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
             <div className="col-span-2 flex flex-col gap-24">
diff --git a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.tsx b/src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/BasicProfileInfoTab.tsx
similarity index 95%
rename from src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.tsx
rename to src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/BasicProfileInfoTab.tsx
index 2af4dbe..0d31d32 100644
--- a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/UpdateMyProfileTab.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/BasicProfileInfoTab.tsx
@@ -1,6 +1,5 @@
 import { SubmitHandler, useForm } from "react-hook-form"
-import Button from "src/Components/Button/Button";
-import { User, useUpdateProfileAboutMutation, useMyProfileAboutQuery, UpdateProfileAboutMutationVariables } from "src/graphql";
+import { useUpdateProfileAboutMutation, useMyProfileAboutQuery, UpdateProfileAboutMutationVariables, UserBasicInfoFragmentDoc } from "src/graphql";
 import { NotificationsService } from "src/services/notifications.service";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -9,10 +8,10 @@ import { useAppDispatch, usePrompt } from "src/utils/hooks";
 import SaveChangesCard from "../SaveChangesCard/SaveChangesCard";
 import { toast } from "react-toastify";
 import Card from "src/Components/Card/Card";
-import LoadingPage from "src/Components/LoadingPage/LoadingPage";
 import NotFoundPage from "src/features/Shared/pages/NotFoundPage/NotFoundPage";
 import { setUser } from "src/redux/features/user.slice";
-import UpdateProfileAboutTabSkeleton from "./UpdateMyProfileTab.Skeleton";
+import UpdateProfileAboutTabSkeleton from "./BasicProfileInfoTab.Skeleton";
+import { useApolloClient } from "@apollo/client";
 
 interface Props {
 }
@@ -53,7 +52,7 @@ const schema: yup.SchemaOf<IFormInputs> = yup.object({
 
 }).required();
 
-export default function UpdateMyProfileTab() {
+export default function BasicProfileInfoTab() {
 
     const { register, formState: { errors, isDirty, }, handleSubmit, reset } = useForm<IFormInputs>({
         defaultValues: {},
@@ -61,7 +60,7 @@ export default function UpdateMyProfileTab() {
         mode: 'onBlur',
     });
 
-
+    const apolloClient = useApolloClient()
     const profileQuery = useMyProfileAboutQuery({
         onCompleted: data => {
             if (data.me)
@@ -70,6 +69,7 @@ export default function UpdateMyProfileTab() {
     })
     const [mutate, mutationStatus] = useUpdateProfileAboutMutation();
 
+
     const dispatch = useAppDispatch()
     usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
 
@@ -106,6 +106,11 @@ export default function UpdateMyProfileTab() {
                 if (data) {
                     dispatch(setUser(data))
                     reset(data);
+                    apolloClient.writeFragment({
+                        id: `User:${data?.id}`,
+                        data,
+                        fragment: UserBasicInfoFragmentDoc,
+                    })
                     toast.update(toastId, { render: "Saved changes successfully", type: "success", ...NotificationsService.defaultOptions, isLoading: false });
                 }
             }
diff --git a/src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/profileAbout.graphql b/src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/profileAbout.graphql
new file mode 100644
index 0000000..2c485e8
--- /dev/null
+++ b/src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/profileAbout.graphql
@@ -0,0 +1,28 @@
+fragment UserBasicInfo on BaseUser {
+  id
+  name
+  avatar
+  join_date
+  role
+  email
+  jobTitle
+  lightning_address
+  website
+  twitter
+  github
+  linkedin
+  bio
+  location
+}
+
+query MyProfileAbout {
+  me {
+    ...UserBasicInfo
+  }
+}
+
+mutation updateProfileAbout($data: ProfileDetailsInput) {
+  updateProfileDetails(data: $data) {
+    ...UserBasicInfo
+  }
+}
diff --git a/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx b/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
index 67d8a04..204250b 100644
--- a/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
@@ -3,18 +3,18 @@ import LoadingPage from "src/Components/LoadingPage/LoadingPage";
 import NotFoundPage from "src/features/Shared/pages/NotFoundPage/NotFoundPage";
 import Slider from "src/Components/Slider/Slider";
 import { useAppSelector, useMediaQuery } from "src/utils/hooks";
-import UpdateMyProfileTab from "./UpdateMyProfileTab/UpdateMyProfileTab";
 import { Helmet } from 'react-helmet'
 import { MEDIA_QUERIES } from "src/utils/theme";
 import PreferencesTab from "./PreferencesTab/PreferencesTab";
 import RolesSkillsTab from "./RolesSkillsTab/RolesSkillsTab";
 import Card from "src/Components/Card/Card";
+import BasicProfileInfoTab from "./BasicProfileInfoTab/BasicProfileInfoTab";
 
 
 const links = [
     {
         text: "🤠  Basic information",
-        path: 'my-profile',
+        path: 'basic-info',
     },
     {
         text: "🎛️  Roles & Skills",
@@ -87,8 +87,8 @@ export default function EditProfilePage() {
                 </aside>
                 <main className="md:col-span-3">
                     <Routes>
-                        <Route index element={<Navigate to='my-profile' />} />
-                        <Route path='my-profile' element={<UpdateMyProfileTab />} />
+                        <Route index element={<Navigate to='basic-info' />} />
+                        <Route path='basic-info' element={<BasicProfileInfoTab />} />
                         <Route path='roles-skills' element={<RolesSkillsTab />} />
                         <Route path='preferences' element={<PreferencesTab />
                         } />
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
index 9b11935..587b318 100644
--- a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/RolesSkillsTab.tsx
@@ -8,7 +8,7 @@ import { toast } from 'react-toastify';
 import { NotificationsService } from 'src/services';
 import { gql, NetworkStatus, useApolloClient } from '@apollo/client';
 import { usePrompt } from 'src/utils/hooks';
-import { UpdateUserRolesSkillsMutationVariables, useMyProfileRolesSkillsQuery, useUpdateUserRolesSkillsMutation } from 'src/graphql'
+import { UpdateUserRolesSkillsMutationVariables, useMyProfileRolesSkillsQuery, useUpdateUserRolesSkillsMutation, UserRolesSkillsFragmentDoc } from 'src/graphql'
 import UpdateRolesCard from "./UpdateRolesCard/UpdateRolesCard";
 import UpdateSkillsCard from "./UpdateSkillsCard/UpdateSkillsCard";
 import RolesSkillsTabSkeleton from "./RolesSkillsTab.Skeleton";
@@ -54,19 +54,14 @@ export default function PreferencesTab() {
 
     const apolloClient = useApolloClient()
     const [mutate, mutationStatus] = useUpdateUserRolesSkillsMutation({
-        onCompleted: data => {
+        onCompleted: ({ updateProfileRoles: data }) => {
             apolloClient.writeFragment({
-                id: `User:${data.updateProfileRoles?.id}`,
+                id: `User:${data?.id}`,
                 data: {
-                    roles: data.updateProfileRoles?.roles,
-                    skills: data.updateProfileRoles?.skills
+                    roles: data?.roles,
+                    skills: data?.skills
                 },
-                fragment: gql`
-                fragment user on User{
-                    roles
-                    skills
-                }
-                `
+                fragment: UserRolesSkillsFragmentDoc,
             })
         }
     });
diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/rolesSkills.graphql b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/rolesSkills.graphql
index e80ea58..0f1957d 100644
--- a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/rolesSkills.graphql
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/rolesSkills.graphql
@@ -1,16 +1,20 @@
+fragment UserRolesSkills on BaseUser {
+  skills {
+    id
+    title
+  }
+  roles {
+    id
+    title
+    icon
+    level
+  }
+}
+
 query MyProfileRolesSkills {
   me {
     id
-    skills {
-      id
-      title
-    }
-    roles {
-      id
-      title
-      icon
-      level
-    }
+    ...UserRolesSkills
   }
   getAllMakersRoles {
     id
diff --git a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/profileAbout.graphql b/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/profileAbout.graphql
deleted file mode 100644
index 3517a9b..0000000
--- a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileTab/profileAbout.graphql
+++ /dev/null
@@ -1,37 +0,0 @@
-query MyProfileAbout {
-  me {
-    id
-    name
-    avatar
-    join_date
-    role
-    email
-    jobTitle
-    lightning_address
-    website
-    twitter
-    github
-    linkedin
-    bio
-    location
-  }
-}
-
-mutation updateProfileAbout($data: ProfileDetailsInput) {
-  updateProfileDetails(data: $data) {
-    id
-    name
-    avatar
-    join_date
-    role
-    email
-    jobTitle
-    lightning_address
-    website
-    twitter
-    github
-    linkedin
-    bio
-    location
-  }
-}
diff --git a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
index 5730ba5..50f709c 100644
--- a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
+++ b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
@@ -31,27 +31,6 @@ export default function ProfilePage() {
     const isMediumScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
 
 
-    const apolloClient = useApolloClient();
-
-    const profileFetched = !!profileQuery.data?.profile
-
-    useEffect(() => {
-        if (profileFetched)
-            console.log(apolloClient.readFragment({
-                id: `User:${id}`,
-                fragment: gql`
-        fragment MyUser on User{
-            id
-            name
-            roles{
-                id
-                title
-            }
-        }
-        `
-            }))
-
-    }, [apolloClient, profileFetched])
 
     if (profileQuery.loading)
         return <LoadingPage />
@@ -59,6 +38,7 @@ export default function ProfilePage() {
     if (!profileQuery.data?.profile)
         return <NotFoundPage />
 
+
     return (
         <>
             <Helmet>
diff --git a/src/features/Profiles/pages/ProfilePage/profile.graphql b/src/features/Profiles/pages/ProfilePage/profile.graphql
index 8bdaa0e..76829c8 100644
--- a/src/features/Profiles/pages/ProfilePage/profile.graphql
+++ b/src/features/Profiles/pages/ProfilePage/profile.graphql
@@ -1,19 +1,5 @@
 query profile($profileId: Int!) {
   profile(id: $profileId) {
-    id
-    name
-    avatar
-    join_date
-    role
-    email
-    jobTitle
-    lightning_address
-    website
-    twitter
-    github
-    linkedin
-    bio
-    location
     stories {
       id
       title
@@ -24,16 +10,6 @@ query profile($profileId: Int!) {
         icon
       }
     }
-    skills {
-      id
-      title
-    }
-    roles {
-      id
-      title
-      icon
-      level
-    }
     tournaments {
       id
       title
@@ -47,5 +23,7 @@ query profile($profileId: Int!) {
       avatar
       jobTitle
     }
+    ...UserBasicInfo
+    ...UserRolesSkills
   }
 }
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index e5f3a8d..cf552b9 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -652,29 +652,11 @@ export type PostDetailsQueryVariables = Exact<{
 
 export type PostDetailsQuery = { __typename?: 'Query', getPostById: { __typename?: 'Bounty', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, cover_image: string | null, deadline: string, reward_amount: number, applicants_count: number, author: { __typename?: 'Author', id: number, name: string, avatar: string, join_date: any }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, applications: Array<{ __typename?: 'BountyApplication', id: number, date: string, workplan: string, author: { __typename?: 'Author', id: number, name: string, avatar: string } }> } | { __typename?: 'Question', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, author: { __typename?: 'Author', id: number, name: string, avatar: string, join_date: any }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } | { __typename?: 'Story', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, cover_image: string | null, is_published: boolean | null, author: { __typename?: 'Author', id: number, name: string, avatar: string, join_date: any }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } };
 
-export type MyProfilePreferencesQueryVariables = Exact<{ [key: string]: never; }>;
+type UserBasicInfo_MyProfile_Fragment = { __typename?: 'MyProfile', id: number, name: string, avatar: string, join_date: any, role: string | null, email: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: string | null, github: string | null, linkedin: string | null, bio: string | null, location: string | null };
 
+type UserBasicInfo_User_Fragment = { __typename?: 'User', id: number, name: string, avatar: string, join_date: any, role: string | null, email: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: string | null, github: string | null, linkedin: string | null, bio: string | null, location: string | null };
 
-export type MyProfilePreferencesQuery = { __typename?: 'Query', me: { __typename?: 'MyProfile', id: number, nostr_prv_key: string | null, nostr_pub_key: string | null, walletsKeys: Array<{ __typename?: 'WalletKey', key: string, name: string }> } | null };
-
-export type UpdateUserPreferencesMutationVariables = Exact<{
-  walletsKeys: InputMaybe<Array<UserKeyInputType> | UserKeyInputType>;
-}>;
-
-
-export type UpdateUserPreferencesMutation = { __typename?: 'Mutation', updateUserPreferences: { __typename?: 'MyProfile', id: number, nostr_pub_key: string | null, nostr_prv_key: string | null, walletsKeys: Array<{ __typename?: 'WalletKey', key: string, name: string }> } };
-
-export type MyProfileRolesSkillsQueryVariables = Exact<{ [key: string]: never; }>;
-
-
-export type MyProfileRolesSkillsQuery = { __typename?: 'Query', me: { __typename?: 'MyProfile', id: number, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } | null, getAllMakersRoles: Array<{ __typename?: 'GenericMakerRole', id: number, title: string, icon: string }>, getAllMakersSkills: Array<{ __typename?: 'MakerSkill', id: number, title: string }> };
-
-export type UpdateUserRolesSkillsMutationVariables = Exact<{
-  data: InputMaybe<ProfileRolesInput>;
-}>;
-
-
-export type UpdateUserRolesSkillsMutation = { __typename?: 'Mutation', updateProfileRoles: { __typename?: 'MyProfile', id: number, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } | null };
+export type UserBasicInfoFragment = UserBasicInfo_MyProfile_Fragment | UserBasicInfo_User_Fragment;
 
 export type MyProfileAboutQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -688,12 +670,42 @@ export type UpdateProfileAboutMutationVariables = Exact<{
 
 export type UpdateProfileAboutMutation = { __typename?: 'Mutation', updateProfileDetails: { __typename?: 'MyProfile', id: number, name: string, avatar: string, join_date: any, role: string | null, email: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: string | null, github: string | null, linkedin: string | null, bio: string | null, location: string | null } | null };
 
+export type MyProfilePreferencesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type MyProfilePreferencesQuery = { __typename?: 'Query', me: { __typename?: 'MyProfile', id: number, nostr_prv_key: string | null, nostr_pub_key: string | null, walletsKeys: Array<{ __typename?: 'WalletKey', key: string, name: string }> } | null };
+
+export type UpdateUserPreferencesMutationVariables = Exact<{
+  walletsKeys: InputMaybe<Array<UserKeyInputType> | UserKeyInputType>;
+}>;
+
+
+export type UpdateUserPreferencesMutation = { __typename?: 'Mutation', updateUserPreferences: { __typename?: 'MyProfile', id: number, nostr_pub_key: string | null, nostr_prv_key: string | null, walletsKeys: Array<{ __typename?: 'WalletKey', key: string, name: string }> } };
+
+type UserRolesSkills_MyProfile_Fragment = { __typename?: 'MyProfile', skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> };
+
+type UserRolesSkills_User_Fragment = { __typename?: 'User', skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> };
+
+export type UserRolesSkillsFragment = UserRolesSkills_MyProfile_Fragment | UserRolesSkills_User_Fragment;
+
+export type MyProfileRolesSkillsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type MyProfileRolesSkillsQuery = { __typename?: 'Query', me: { __typename?: 'MyProfile', id: number, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } | null, getAllMakersRoles: Array<{ __typename?: 'GenericMakerRole', id: number, title: string, icon: string }>, getAllMakersSkills: Array<{ __typename?: 'MakerSkill', id: number, title: string }> };
+
+export type UpdateUserRolesSkillsMutationVariables = Exact<{
+  data: InputMaybe<ProfileRolesInput>;
+}>;
+
+
+export type UpdateUserRolesSkillsMutation = { __typename?: 'Mutation', updateProfileRoles: { __typename?: 'MyProfile', id: number, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } | null };
+
 export type ProfileQueryVariables = Exact<{
   profileId: Scalars['Int'];
 }>;
 
 
-export type ProfileQuery = { __typename?: 'Query', profile: { __typename?: 'User', id: number, name: string, avatar: string, join_date: any, role: string | null, email: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: 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 }> }>, skills: Array<{ __typename?: 'MakerSkill', id: number, title: string }>, roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, 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 }> } | null };
+export type ProfileQuery = { __typename?: 'Query', profile: { __typename?: 'User', id: number, name: string, avatar: string, join_date: any, role: string | null, email: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: 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 CategoryPageQueryVariables = Exact<{
   categoryId: Scalars['Int'];
@@ -741,7 +753,38 @@ export type ConfirmVoteMutationVariables = Exact<{
 
 export type ConfirmVoteMutation = { __typename?: 'Mutation', confirmVote: { __typename?: 'Vote', id: number, amount_in_sat: number, payment_request: string, payment_hash: string, paid: boolean, item_type: Vote_Item_Type, item_id: number } };
 
-
+export const UserBasicInfoFragmentDoc = gql`
+    fragment UserBasicInfo on BaseUser {
+  id
+  name
+  avatar
+  join_date
+  role
+  email
+  jobTitle
+  lightning_address
+  website
+  twitter
+  github
+  linkedin
+  bio
+  location
+}
+    `;
+export const UserRolesSkillsFragmentDoc = gql`
+    fragment UserRolesSkills on BaseUser {
+  skills {
+    id
+    title
+  }
+  roles {
+    id
+    title
+    icon
+    level
+  }
+}
+    `;
 export const OfficialTagsDocument = gql`
     query OfficialTags {
   officialTags {
@@ -1474,6 +1517,73 @@ export function usePostDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOption
 export type PostDetailsQueryHookResult = ReturnType<typeof usePostDetailsQuery>;
 export type PostDetailsLazyQueryHookResult = ReturnType<typeof usePostDetailsLazyQuery>;
 export type PostDetailsQueryResult = Apollo.QueryResult<PostDetailsQuery, PostDetailsQueryVariables>;
+export const MyProfileAboutDocument = gql`
+    query MyProfileAbout {
+  me {
+    ...UserBasicInfo
+  }
+}
+    ${UserBasicInfoFragmentDoc}`;
+
+/**
+ * __useMyProfileAboutQuery__
+ *
+ * To run a query within a React component, call `useMyProfileAboutQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMyProfileAboutQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMyProfileAboutQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useMyProfileAboutQuery(baseOptions?: Apollo.QueryHookOptions<MyProfileAboutQuery, MyProfileAboutQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
+      }
+export function useMyProfileAboutLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyProfileAboutQuery, MyProfileAboutQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
+        }
+export type MyProfileAboutQueryHookResult = ReturnType<typeof useMyProfileAboutQuery>;
+export type MyProfileAboutLazyQueryHookResult = ReturnType<typeof useMyProfileAboutLazyQuery>;
+export type MyProfileAboutQueryResult = Apollo.QueryResult<MyProfileAboutQuery, MyProfileAboutQueryVariables>;
+export const UpdateProfileAboutDocument = gql`
+    mutation updateProfileAbout($data: ProfileDetailsInput) {
+  updateProfileDetails(data: $data) {
+    ...UserBasicInfo
+  }
+}
+    ${UserBasicInfoFragmentDoc}`;
+export type UpdateProfileAboutMutationFn = Apollo.MutationFunction<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>;
+
+/**
+ * __useUpdateProfileAboutMutation__
+ *
+ * To run a mutation, you first call `useUpdateProfileAboutMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpdateProfileAboutMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [updateProfileAboutMutation, { data, loading, error }] = useUpdateProfileAboutMutation({
+ *   variables: {
+ *      data: // value for 'data'
+ *   },
+ * });
+ */
+export function useUpdateProfileAboutMutation(baseOptions?: Apollo.MutationHookOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>(UpdateProfileAboutDocument, options);
+      }
+export type UpdateProfileAboutMutationHookResult = ReturnType<typeof useUpdateProfileAboutMutation>;
+export type UpdateProfileAboutMutationResult = Apollo.MutationResult<UpdateProfileAboutMutation>;
+export type UpdateProfileAboutMutationOptions = Apollo.BaseMutationOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>;
 export const MyProfilePreferencesDocument = gql`
     query MyProfilePreferences {
   me {
@@ -1557,16 +1667,7 @@ export const MyProfileRolesSkillsDocument = gql`
     query MyProfileRolesSkills {
   me {
     id
-    skills {
-      id
-      title
-    }
-    roles {
-      id
-      title
-      icon
-      level
-    }
+    ...UserRolesSkills
   }
   getAllMakersRoles {
     id
@@ -1578,7 +1679,7 @@ export const MyProfileRolesSkillsDocument = gql`
     title
   }
 }
-    `;
+    ${UserRolesSkillsFragmentDoc}`;
 
 /**
  * __useMyProfileRolesSkillsQuery__
@@ -1649,116 +1750,9 @@ export function useUpdateUserRolesSkillsMutation(baseOptions?: Apollo.MutationHo
 export type UpdateUserRolesSkillsMutationHookResult = ReturnType<typeof useUpdateUserRolesSkillsMutation>;
 export type UpdateUserRolesSkillsMutationResult = Apollo.MutationResult<UpdateUserRolesSkillsMutation>;
 export type UpdateUserRolesSkillsMutationOptions = Apollo.BaseMutationOptions<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>;
-export const MyProfileAboutDocument = gql`
-    query MyProfileAbout {
-  me {
-    id
-    name
-    avatar
-    join_date
-    role
-    email
-    jobTitle
-    lightning_address
-    website
-    twitter
-    github
-    linkedin
-    bio
-    location
-  }
-}
-    `;
-
-/**
- * __useMyProfileAboutQuery__
- *
- * To run a query within a React component, call `useMyProfileAboutQuery` and pass it any options that fit your needs.
- * When your component renders, `useMyProfileAboutQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useMyProfileAboutQuery({
- *   variables: {
- *   },
- * });
- */
-export function useMyProfileAboutQuery(baseOptions?: Apollo.QueryHookOptions<MyProfileAboutQuery, MyProfileAboutQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
-      }
-export function useMyProfileAboutLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyProfileAboutQuery, MyProfileAboutQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
-        }
-export type MyProfileAboutQueryHookResult = ReturnType<typeof useMyProfileAboutQuery>;
-export type MyProfileAboutLazyQueryHookResult = ReturnType<typeof useMyProfileAboutLazyQuery>;
-export type MyProfileAboutQueryResult = Apollo.QueryResult<MyProfileAboutQuery, MyProfileAboutQueryVariables>;
-export const UpdateProfileAboutDocument = gql`
-    mutation updateProfileAbout($data: ProfileDetailsInput) {
-  updateProfileDetails(data: $data) {
-    id
-    name
-    avatar
-    join_date
-    role
-    email
-    jobTitle
-    lightning_address
-    website
-    twitter
-    github
-    linkedin
-    bio
-    location
-  }
-}
-    `;
-export type UpdateProfileAboutMutationFn = Apollo.MutationFunction<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>;
-
-/**
- * __useUpdateProfileAboutMutation__
- *
- * To run a mutation, you first call `useUpdateProfileAboutMutation` within a React component and pass it any options that fit your needs.
- * When your component renders, `useUpdateProfileAboutMutation` returns a tuple that includes:
- * - A mutate function that you can call at any time to execute the mutation
- * - An object with fields that represent the current status of the mutation's execution
- *
- * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
- *
- * @example
- * const [updateProfileAboutMutation, { data, loading, error }] = useUpdateProfileAboutMutation({
- *   variables: {
- *      data: // value for 'data'
- *   },
- * });
- */
-export function useUpdateProfileAboutMutation(baseOptions?: Apollo.MutationHookOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>(UpdateProfileAboutDocument, options);
-      }
-export type UpdateProfileAboutMutationHookResult = ReturnType<typeof useUpdateProfileAboutMutation>;
-export type UpdateProfileAboutMutationResult = Apollo.MutationResult<UpdateProfileAboutMutation>;
-export type UpdateProfileAboutMutationOptions = Apollo.BaseMutationOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>;
 export const ProfileDocument = gql`
     query profile($profileId: Int!) {
   profile(id: $profileId) {
-    id
-    name
-    avatar
-    join_date
-    role
-    email
-    jobTitle
-    lightning_address
-    website
-    twitter
-    github
-    linkedin
-    bio
-    location
     stories {
       id
       title
@@ -1769,16 +1763,6 @@ export const ProfileDocument = gql`
         icon
       }
     }
-    skills {
-      id
-      title
-    }
-    roles {
-      id
-      title
-      icon
-      level
-    }
     tournaments {
       id
       title
@@ -1792,9 +1776,12 @@ export const ProfileDocument = gql`
       avatar
       jobTitle
     }
+    ...UserBasicInfo
+    ...UserRolesSkills
   }
 }
-    `;
+    ${UserBasicInfoFragmentDoc}
+${UserRolesSkillsFragmentDoc}`;
 
 /**
  * __useProfileQuery__
diff --git a/src/utils/apollo.ts b/src/utils/apollo.ts
index aac1f1e..55abc16 100644
--- a/src/utils/apollo.ts
+++ b/src/utils/apollo.ts
@@ -49,6 +49,9 @@ export const apolloClient = new ApolloClient({
         httpLink
     ]),
     cache: new InMemoryCache({
+        possibleTypes: {
+            BaseUser: ['User', 'MyProfile']
+        },
         typePolicies: {
             Query: {
                 fields: {

From 5c93377623092e5ec87a9b4f6d747f07a24d3939 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Wed, 31 Aug 2022 16:28:45 +0300
Subject: [PATCH 10/10] fix: fixing QA issues

---
 .../RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx      | 6 +++---
 .../Profiles/pages/ProfilePage/RolesCard/RolesCard.tsx      | 4 ++--
 .../Profiles/pages/ProfilePage/SkillsCard/SkillsCard.tsx    | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx
index 1ddeec6..1b15db3 100644
--- a/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/RolesSkillsTab/UpdateRolesCard/UpdateRolesCard.tsx
@@ -55,19 +55,19 @@ export default function UpdateRolesCard(props: Props) {
             </div>
 
             {props.value.length > 0 && <div className="pt-24 mt-24 border-t border-gray-200">
-                <ul className="grid grid-cols-1 lg:grid-cols-[auto_1fr] items-center gap-16">
+                <ul className="grid grid-cols-1 2xl:grid-cols-[auto_1fr] items-center gap-16">
                     {props.value.map(role => {
                         const { title, icon } = props.allRoles.find(r => r.id === role.id)!;
 
                         return <React.Fragment key={role.id}>
-                            <p className="shrink-0 text-body4 whitespace-nowrap">{icon} {title}</p>
+                            <p className="shrink-0 font-medium text-body4 whitespace-nowrap">{icon} {title}</p>
                             <div className="flex flex-wrap gap-8 grow text-body5 mb-8 last-of-type:mb-0">
                                 {[RoleLevelEnum.Beginner, RoleLevelEnum.Hobbyist, RoleLevelEnum.Intermediate, RoleLevelEnum.Advanced, RoleLevelEnum.Pro].map(r =>
                                     <button
                                         key={r}
                                         className={` 
                                 px-12 py-4 bg-gray-100 border rounded-8 flex-1
-                                active:scale-95 transition-transform
+                                active:scale-95 transition-transform  font-medium
                                 ${r !== role.level ? "bg-gray-100 hover:bg-gray-200 border-gray-200" : "bg-primary-100 text-primary-600 border-primary-200"}
                                 `}
                                         onClick={() => setLevel(role.id, r)}
diff --git a/src/features/Profiles/pages/ProfilePage/RolesCard/RolesCard.tsx b/src/features/Profiles/pages/ProfilePage/RolesCard/RolesCard.tsx
index 0389e42..c2e7408 100644
--- a/src/features/Profiles/pages/ProfilePage/RolesCard/RolesCard.tsx
+++ b/src/features/Profiles/pages/ProfilePage/RolesCard/RolesCard.tsx
@@ -39,9 +39,9 @@ export default function RolesCard({ roles, isOwner }: Props) {
                                 key={role.id}
                                 className={`flex gap-16 items-center rounded-8 cursor-pointer font-bold p-4active:scale-95 transition-transform`}
                             >
-                                <span className={`bg-gray-50 rounded-8 w-48 h-48 text-center py-8`}>{role.icon}</span>
+                                <span className={`bg-gray-50 rounded-8 w-40 h-40 text-center py-8`}>{role.icon}</span>
                                 <div className='grow'>
-                                    <p className="font-medium text-gray-800">
+                                    <p className="font-medium text-body5 text-gray-800">
                                         {role.title}
                                     </p>
                                     <div className="flex gap-4 mt-16">
diff --git a/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.tsx b/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.tsx
index 913d4e1..e937d72 100644
--- a/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.tsx
+++ b/src/features/Profiles/pages/ProfilePage/SkillsCard/SkillsCard.tsx
@@ -1,6 +1,6 @@
 import Card from 'src/Components/Card/Card'
 import Button from 'src/Components/Button/Button'
-import { RoleLevelEnum, User } from 'src/graphql';
+import { User } from 'src/graphql';
 
 
 
@@ -19,7 +19,7 @@ export default function SkillsCard({ skills, isOwner }: Props) {
                     {isOwner && <Button color='primary' className='mt-16' size='sm' href='/edit-profile/roles-skills'>Add skills</Button>}
                 </>}
                 <ul className=' flex flex-wrap gap-x-8 gap-y-20'>
-                    {skills.map((skill) => <li key={skill.id} className="px-12 py-4 bg-gray-100 rounded-48 font-medium">{skill.title}</li>)}
+                    {skills.map((skill) => <li key={skill.id} className="text-body5 border border-gray-200 px-12 py-4 bg-gray-100 rounded-48 font-medium">{skill.title}</li>)}
                 </ul>
             </div>
         </Card>