fix: show owner card on desktop, fix keys warning

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)
 

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"}

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>
 

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>