From 27af2e83c6904526d6cac8e0b447fa18dde1d7a8 Mon Sep 17 00:00:00 2001 From: Mariem Date: Mon, 27 May 2024 09:59:39 +0200 Subject: [PATCH 01/14] feat: create read only profile page --- src/App.tsx | 10 + .../main/MemberPersonalInformation.tsx | 74 ++++++++ src/components/main/MemberPublicProfile.tsx | 74 ++++++++ src/config/paths.ts | 1 + src/langs/en.json | 5 +- src/langs/fr.json | 5 +- src/pages/EditMemberPersonalInformation.tsx | 158 ++++++++++++++++ src/pages/MemberScreen.tsx | 171 ++---------------- 8 files changed, 340 insertions(+), 158 deletions(-) create mode 100644 src/components/main/MemberPersonalInformation.tsx create mode 100644 src/components/main/MemberPublicProfile.tsx create mode 100644 src/pages/EditMemberPersonalInformation.tsx diff --git a/src/App.tsx b/src/App.tsx index a5544cec3..70b36327a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,7 @@ import { CustomInitialLoader, withAuthorization } from '@graasp/ui'; import { GRAASP_AUTH_HOST } from './config/env'; import { AVATAR_SETTINGS_PATH, + EDIT_MEMBER_INFO, HOME_PATH, MANAGE_ACCOUNT_PATH, PASSWORD_SETTINGS_PATH, @@ -18,6 +19,7 @@ import { import { hooks } from './config/queryClient'; import AvatarSettingsScreen from './pages/AvatarSettingsScreen'; import DestructiveSettingsScreen from './pages/DestructiveSettingsScreen'; +import EditMemberPersonalInformation from './pages/EditMemberPersonalInformation'; import MemberScreen from './pages/MemberScreen'; import PageWrapper from './pages/PageWrapper'; import PasswordSettingsScreen from './pages/PasswordSettingsScreen'; @@ -46,6 +48,10 @@ export const App = (): JSX.Element => { MemberScreen, withAuthorizationProps, ); + const EditMemberProfileWithAuthorization = withAuthorization( + EditMemberPersonalInformation, + withAuthorizationProps, + ); const PasswordSettingsWithAuthorization = withAuthorization( PasswordSettingsScreen, withAuthorizationProps, @@ -76,6 +82,10 @@ export const App = (): JSX.Element => { path={HOME_PATH} element={} /> + } + /> } diff --git a/src/components/main/MemberPersonalInformation.tsx b/src/components/main/MemberPersonalInformation.tsx new file mode 100644 index 000000000..d7be08f5e --- /dev/null +++ b/src/components/main/MemberPersonalInformation.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; + +import { Box, Button, Grid, Typography } from '@mui/material'; + +import { useAccountTranslation } from '@/config/i18n'; +import { EDIT_MEMBER_INFO } from '@/config/paths'; +import { hooks } from '@/config/queryClient'; + +const MemberPersonalInformation = (): JSX.Element => { + const { data: member } = hooks.useCurrentMember(); + const { t } = useAccountTranslation(); + const push = useNavigate(); + + const goTo = (path: string) => { + push(path); + }; + return ( + + + + + {t('PERSONAL_INFORMATION_TITLE')} + + + + + + + + + + {t('PROFILE_MEMBER_NAME')} + + + + {member?.name} + + + + {t('PROFILE_EMAIL_TITLE')} + + + + {member?.email} + + + + {t('PASSWORD_TITLE')} + + + + ********** + + + + ); +}; + +export default MemberPersonalInformation; diff --git a/src/components/main/MemberPublicProfile.tsx b/src/components/main/MemberPublicProfile.tsx new file mode 100644 index 000000000..41c1648ba --- /dev/null +++ b/src/components/main/MemberPublicProfile.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; + +import FacebookIcon from '@mui/icons-material/Facebook'; +import LinkedInIcon from '@mui/icons-material/LinkedIn'; +import TwitterIcon from '@mui/icons-material/Twitter'; +import { Box, Button, Grid, Typography } from '@mui/material'; + +import { useAccountTranslation } from '@/config/i18n'; +import { PUBLIC_PROFILE_PATH } from '@/config/paths'; +import { hooks } from '@/config/queryClient'; + +const MemberPublicProfile = (): JSX.Element => { + const { data } = hooks.useOwnProfile(); + const { t } = useAccountTranslation(); + const push = useNavigate(); + + const goTo = (path: string) => { + push(path); + }; + return ( + + + + Public Profile + + + + + + + + + {t('PUBLIC_PROFILE_BIO')} + + {data?.bio} + + + + + + {data?.linkedinID} + + + + + + + + {data?.twitterID} + + + + + + + + {data?.facebookID} + + + + ); +}; + +export default MemberPublicProfile; diff --git a/src/config/paths.ts b/src/config/paths.ts index 0d7c7abe7..5fb86181a 100644 --- a/src/config/paths.ts +++ b/src/config/paths.ts @@ -7,3 +7,4 @@ export const PASSWORD_SETTINGS_PATH = '/password'; export const AVATAR_SETTINGS_PATH = '/avatar'; export const PUBLIC_PROFILE_PATH = '/public-profile'; export const MANAGE_ACCOUNT_PATH = '/manage'; +export const EDIT_MEMBER_INFO = '/edit-info'; diff --git a/src/langs/en.json b/src/langs/en.json index a611c5c39..366a86a9e 100644 --- a/src/langs/en.json +++ b/src/langs/en.json @@ -16,6 +16,7 @@ "MAIN_MENU_STORAGE": "Storage", "SAVE_ACTIONS_TOGGLE_TOOLTIP": "We collect analytics data to improve your user experience while browsing Graasp.", "PROFILE_TITLE": "Profile", + "PERSONAL_INFORMATION_TITLE": "Personal information", "PROFILE_MEMBER_NAME": "Username", "PROFILE_MEMBER_ID_TITLE": "Member ID", "PROFILE_LANGUAGE_TITLE": "Language", @@ -33,6 +34,7 @@ "PROFILE_AVATAR_TITLE": "Profile Picture", "PROFILE_AVATAR_INFORMATION": "Update Profile picture", "PROFILE_AVATAR_CURRENT_ALT": "Profile Picture", + "PASSWORD_TITLE": "Password", "PASSWORD_SETTINGS_TITLE": "Change Password", "PASSWORD_SETTINGS_CURRENT_LABEL": "Current Password", "PASSWORD_SETTINGS_CURRENT_INFORMATION": "Leave this field empty if you do not already have a password set.", @@ -65,5 +67,6 @@ "DELETE_CONFIRMATION_VALUE": "delete", "DESTRUCTIVE_SETTINGS_DETAILS": "Please be aware that the actions outlined here have potentially irreversible consequences. Ensure you thoroughly review any restrictions before proceeding, and only take action once you are certain.", "USERNAME_EMPTY_ERROR": "The field cannot be empty", - "USERNAME_LENGTH_ERROR": "Username must be between {{min}} and {{max}} characters long" + "USERNAME_LENGTH_ERROR": "Username must be between {{min}} and {{max}} characters long", + "EDIT_BUTTON": "Edit" } diff --git a/src/langs/fr.json b/src/langs/fr.json index 8f934e33a..16e3c4a30 100644 --- a/src/langs/fr.json +++ b/src/langs/fr.json @@ -16,6 +16,7 @@ "MAIN_MENU_STORAGE": "Stockage", "SAVE_ACTIONS_TOGGLE_TOOLTIP": "Nous recueillons des données analytiques afin d'améliorer votre expérience utilisateur lorsque vous naviguez sur Graasp.", "PROFILE_TITLE": "Profil", + "PERSONAL_INFORMATION_TITLE": "Informations personelles", "PROFILE_MEMBER_NAME": "Nom de l'utilisateur", "PROFILE_MEMBER_ID_TITLE": "Identifiant de l'utilisateur", "PROFILE_LANGUAGE_TITLE": "Langue", @@ -33,6 +34,7 @@ "PROFILE_AVATAR_TITLE": "Image de profil", "PROFILE_AVATAR_INFORMATION": "Changer l'image de profil", "PROFILE_AVATAR_CURRENT_ALT": "Image de profil", + "PASSWORD_TITLE": "Mot de passe", "PASSWORD_SETTINGS_TITLE": "Changer le mot de passe", "PASSWORD_SETTINGS_CURRENT_LABEL": "Mot de passe actuel", "PASSWORD_SETTINGS_CURRENT_INFORMATION": "Laissez le champ vide si vous n'avez pas précédemment défini de mot de passe.", @@ -65,5 +67,6 @@ "DELETE_CONFIRMATION_VALUE": "supprimer", "DESTRUCTIVE_SETTINGS_DETAILS": "Veuillez noter que les opérations décrites ici ont des conséquences potentiellement irréversibles. Assurez-vous d’examiner attentivement toutes les restrictions avant de continuer avant de continuer.", "USERNAME_EMPTY_ERROR": "Le champ ne peut pas être vide", - "USERNAME_LENGTH_ERROR": "Le nom d'utilisateur doit contenir entre {{min}} et {{max}} caractères" + "USERNAME_LENGTH_ERROR": "Le nom d'utilisateur doit contenir entre {{min}} et {{max}} caractères", + "EDIT_BUTTON": "Modifier" } diff --git a/src/pages/EditMemberPersonalInformation.tsx b/src/pages/EditMemberPersonalInformation.tsx new file mode 100644 index 000000000..9bebd13fb --- /dev/null +++ b/src/pages/EditMemberPersonalInformation.tsx @@ -0,0 +1,158 @@ +import React from 'react'; + +import FileCopyIcon from '@mui/icons-material/FileCopy'; +import { + Alert, + Box, + Grid, + IconButton, + Stack, + Switch, + Tooltip, + Typography, +} from '@mui/material'; + +import { formatDate } from '@graasp/sdk'; +import { DEFAULT_LANG } from '@graasp/translations'; +import { Loader } from '@graasp/ui'; + +import EmailPreferenceSwitch from '@/components/main/EmailPreferenceSwitch'; +import LanguageSwitch from '@/components/main/LanguageSwitch'; +import UsernameForm from '@/components/main/UsernameForm'; +import { DEFAULT_EMAIL_FREQUENCY } from '@/config/constants'; +import { useAccountTranslation } from '@/config/i18n'; +import notifier from '@/config/notifier'; +import { hooks, mutations } from '@/config/queryClient'; +import { + MEMBER_PROFILE_ANALYTICS_SWITCH_ID, + MEMBER_PROFILE_LANGUAGE_SWITCH_ID, +} from '@/config/selectors'; +import { COPY_MEMBER_ID_TO_CLIPBOARD } from '@/types/clipboard'; +import { copyToClipboard } from '@/utils/clipboard'; + +const EditMemberPersonalInformation = (): JSX.Element | null => { + const { t, i18n } = useAccountTranslation(); + const { t: translateAccount } = useAccountTranslation(); + const { data: member, isLoading } = hooks.useCurrentMember(); + const { mutate: editMember } = mutations.useEditMember(); + if (member) { + const copyIdToClipboard = () => { + copyToClipboard(member.id, { + onSuccess: () => { + notifier({ type: COPY_MEMBER_ID_TO_CLIPBOARD.SUCCESS, payload: {} }); + }, + onError: () => { + notifier({ type: COPY_MEMBER_ID_TO_CLIPBOARD.FAILURE, payload: {} }); + }, + }); + }; + + const handleOnToggle = (event: { target: { checked: boolean } }): void => { + editMember({ + id: member.id, + enableSaveActions: event.target.checked, + }); + }; + + return ( + + + + {t('PROFILE_TITLE')} + + + + {t('PROFILE_MEMBER_NAME')} + + + + + + + {/* todo: display only as light user */} + + + + {t('PROFILE_MEMBER_ID_TITLE')} + + + + {member.id} + + + + + + + + + {t('PROFILE_EMAIL_TITLE')} + + + {member.email} + + + + + {t('PROFILE_CREATED_AT_TITLE')} + + + + {formatDate(member.createdAt, { locale: i18n.language })} + + + + + + {t('PROFILE_LANGUAGE_TITLE')} + + + + + + + + {t('PROFILE_EMAIL_FREQUENCY_TITLE')} + + + + + + + + {t('PROFILE_SAVE_ACTIONS_TITLE')} + + + + + + + + + + ); + } + if (isLoading) { + return ; + } + + if (!member) { + return {t('User is not unauthenticated')}; + } + + return null; +}; + +export default EditMemberPersonalInformation; diff --git a/src/pages/MemberScreen.tsx b/src/pages/MemberScreen.tsx index c6eb615a3..a553e50aa 100644 --- a/src/pages/MemberScreen.tsx +++ b/src/pages/MemberScreen.tsx @@ -1,158 +1,17 @@ -import FileCopyIcon from '@mui/icons-material/FileCopy'; -import { - Alert, - Box, - Grid, - IconButton, - Stack, - Switch, - Tooltip, - Typography, -} from '@mui/material'; - -import { formatDate } from '@graasp/sdk'; -import { DEFAULT_LANG } from '@graasp/translations'; -import { Loader } from '@graasp/ui'; - -import EmailPreferenceSwitch from '@/components/main/EmailPreferenceSwitch'; -import LanguageSwitch from '@/components/main/LanguageSwitch'; -import UsernameForm from '@/components/main/UsernameForm'; -import { DEFAULT_EMAIL_FREQUENCY } from '@/config/constants'; -import { useAccountTranslation } from '@/config/i18n'; -import notifier from '@/config/notifier'; -import { hooks, mutations } from '@/config/queryClient'; -import { - MEMBER_PROFILE_ANALYTICS_SWITCH_ID, - MEMBER_PROFILE_LANGUAGE_SWITCH_ID, -} from '@/config/selectors'; -import { COPY_MEMBER_ID_TO_CLIPBOARD } from '@/types/clipboard'; -import { copyToClipboard } from '@/utils/clipboard'; - -const MemberProfileScreen = (): JSX.Element | null => { - const { t, i18n } = useAccountTranslation(); - const { t: translateAccount } = useAccountTranslation(); - const { data: member, isLoading } = hooks.useCurrentMember(); - const { mutate: editMember } = mutations.useEditMember(); - - if (member) { - const copyIdToClipboard = () => { - copyToClipboard(member.id, { - onSuccess: () => { - notifier({ type: COPY_MEMBER_ID_TO_CLIPBOARD.SUCCESS, payload: {} }); - }, - onError: () => { - notifier({ type: COPY_MEMBER_ID_TO_CLIPBOARD.FAILURE, payload: {} }); - }, - }); - }; - - const handleOnToggle = (event: { target: { checked: boolean } }): void => { - editMember({ - id: member.id, - enableSaveActions: event.target.checked, - }); - }; - - return ( - - - - {t('PROFILE_TITLE')} - - - - {t('PROFILE_MEMBER_NAME')} - - - - - - - {/* todo: display only as light user */} - - - - {t('PROFILE_MEMBER_ID_TITLE')} - - - - {member.id} - - - - - - - - - {t('PROFILE_EMAIL_TITLE')} - - - {member.email} - - - - - {t('PROFILE_CREATED_AT_TITLE')} - - - - {formatDate(member.createdAt, { locale: i18n.language })} - - - - - - {t('PROFILE_LANGUAGE_TITLE')} - - - - - - - - {t('PROFILE_EMAIL_FREQUENCY_TITLE')} - - - - - - - - {t('PROFILE_SAVE_ACTIONS_TITLE')} - - - - - - - - - - ); - } - - if (isLoading) { - return ; - } - - if (!member) { - return {t('User is not unauthenticated')}; - } - - return null; -}; +import { Box, Divider, Typography } from '@mui/material'; + +import MemberPersonalInformation from '@/components/main/MemberPersonalInformation'; +import MemberPublicProfile from '@/components/main/MemberPublicProfile'; + +const MemberProfileScreen = (): JSX.Element | null => ( + + + My Profile + + + + + +); export default MemberProfileScreen; From 94c40377b3650d1c1b3d467a891a72c3f74cced8 Mon Sep 17 00:00:00 2001 From: Mariem Date: Mon, 27 May 2024 14:38:06 +0200 Subject: [PATCH 02/14] fix: fix public profile box --- src/components/main/MemberPublicProfile.tsx | 32 ++++++++++----------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/components/main/MemberPublicProfile.tsx b/src/components/main/MemberPublicProfile.tsx index 41c1648ba..978951945 100644 --- a/src/components/main/MemberPublicProfile.tsx +++ b/src/components/main/MemberPublicProfile.tsx @@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom'; import FacebookIcon from '@mui/icons-material/Facebook'; import LinkedInIcon from '@mui/icons-material/LinkedIn'; import TwitterIcon from '@mui/icons-material/Twitter'; -import { Box, Button, Grid, Typography } from '@mui/material'; +import { Box, Button, Grid, Stack, Typography } from '@mui/material'; import { useAccountTranslation } from '@/config/i18n'; import { PUBLIC_PROFILE_PATH } from '@/config/paths'; @@ -37,36 +37,34 @@ const MemberPublicProfile = (): JSX.Element => { - - + + {t('PUBLIC_PROFILE_BIO')} {data?.bio} - - + + + - - + {data?.linkedinID} - - + + - - + {data?.twitterID} - - + + - - + {data?.facebookID} - - + + ); }; From 80dd299a394b70ad0fb489817efd83fc4ff7ccb6 Mon Sep 17 00:00:00 2001 From: Mariem Date: Tue, 28 May 2024 13:54:46 +0200 Subject: [PATCH 03/14] feat: add tests for member personal information --- cypress/e2e/memberProfile.cy.ts | 23 +++++++++++++++++++ .../main/MemberPersonalInformation.tsx | 15 ++++++++---- 2 files changed, 33 insertions(+), 5 deletions(-) create mode 100644 cypress/e2e/memberProfile.cy.ts diff --git a/cypress/e2e/memberProfile.cy.ts b/cypress/e2e/memberProfile.cy.ts new file mode 100644 index 000000000..5ee5cf145 --- /dev/null +++ b/cypress/e2e/memberProfile.cy.ts @@ -0,0 +1,23 @@ +import { + MEMBER_PROFILE_EMAIL_ID, + USERNAME_DISPLAY_ID, +} from '@/config/selectors'; + +import { BOB } from '../fixtures/members'; + +describe('Check member info', () => { + beforeEach(() => { + cy.setUpApi({ + currentMember: BOB, + }); + cy.visit('/'); + cy.wait('@getCurrentMember'); + }); + + it('displays the correct member info', () => { + // displays the correct member name + cy.get(`#${USERNAME_DISPLAY_ID}`).should('contain', BOB.name); + // displays the correct member email + cy.get(`#${MEMBER_PROFILE_EMAIL_ID}`).should('contain', BOB.email); + }); +}); diff --git a/src/components/main/MemberPersonalInformation.tsx b/src/components/main/MemberPersonalInformation.tsx index d7be08f5e..3e0b37c8f 100644 --- a/src/components/main/MemberPersonalInformation.tsx +++ b/src/components/main/MemberPersonalInformation.tsx @@ -6,6 +6,10 @@ import { Box, Button, Grid, Typography } from '@mui/material'; import { useAccountTranslation } from '@/config/i18n'; import { EDIT_MEMBER_INFO } from '@/config/paths'; import { hooks } from '@/config/queryClient'; +import { + MEMBER_PROFILE_EMAIL_ID, + USERNAME_DISPLAY_ID, +} from '@/config/selectors'; const MemberPersonalInformation = (): JSX.Element => { const { data: member } = hooks.useCurrentMember(); @@ -48,7 +52,9 @@ const MemberPersonalInformation = (): JSX.Element => { - {member?.name} + + {member?.name} + @@ -56,16 +62,15 @@ const MemberPersonalInformation = (): JSX.Element => { - {member?.email} + + {member?.email} + {t('PASSWORD_TITLE')} - - ********** - ); From 7a103c2045e71cfa51933c03b8060be35fb98dc4 Mon Sep 17 00:00:00 2001 From: Mariem Date: Thu, 30 May 2024 14:58:23 +0200 Subject: [PATCH 04/14] fix: fix tests for member profile --- ...{profile.cy.ts => editMemberProfile.cy.ts} | 12 +++---- cypress/e2e/memberProfile.cy.ts | 34 +++++++++++++++++-- cypress/fixtures/members.ts | 14 +++++++- cypress/support/commands.ts | 14 ++++++-- cypress/support/server.ts | 27 ++++++++++++++- src/components/main/MemberPublicProfile.tsx | 22 +++++++++--- src/config/selectors.ts | 5 +++ 7 files changed, 111 insertions(+), 17 deletions(-) rename cypress/e2e/{profile.cy.ts => editMemberProfile.cy.ts} (96%) diff --git a/cypress/e2e/profile.cy.ts b/cypress/e2e/editMemberProfile.cy.ts similarity index 96% rename from cypress/e2e/profile.cy.ts rename to cypress/e2e/editMemberProfile.cy.ts index 9650e4083..b60fea39a 100644 --- a/cypress/e2e/profile.cy.ts +++ b/cypress/e2e/editMemberProfile.cy.ts @@ -1,4 +1,4 @@ -import { PROFILE_PATH } from 'config/paths'; +import { EDIT_MEMBER_INFO } from 'config/paths'; import { MEMBER_PROFILE_ANALYTICS_SWITCH_ID, @@ -57,7 +57,7 @@ const changeUsername = (newUserName: string) => { describe('Change username', () => { beforeEach(() => { cy.setUpApi({ currentMember: BOB }); - cy.visit(PROFILE_PATH); + cy.visit(EDIT_MEMBER_INFO); }); it('Username field cannot be empty', () => { @@ -116,7 +116,7 @@ describe('Checks the analytics switch', () => { enableSaveActions: true, }, }); - cy.visit(PROFILE_PATH); + cy.visit(EDIT_MEMBER_INFO); // wait on current member request to update then the mock response for current member cy.wait('@getCurrentMember'); }); @@ -138,7 +138,7 @@ describe('Checks the analytics switch', () => { enableSaveActions: false, }, }); - cy.visit(PROFILE_PATH); + cy.visit(EDIT_MEMBER_INFO); // wait on current member request to update then the mock response for current member cy.wait('@getCurrentMember'); }); @@ -158,7 +158,7 @@ describe('Checks the language switch', () => { cy.setUpApi({ currentMember, }); - cy.visit(PROFILE_PATH); + cy.visit(EDIT_MEMBER_INFO); cy.wait('@getCurrentMember'); }); it('should select an option from the select component', () => { @@ -177,7 +177,7 @@ describe('Checks the current member language', () => { cy.setUpApi({ currentMember: { ...currentMember, extra: { lang: 'es' } }, }); - cy.visit(PROFILE_PATH); + cy.visit(EDIT_MEMBER_INFO); cy.wait('@getCurrentMember'); }); diff --git a/cypress/e2e/memberProfile.cy.ts b/cypress/e2e/memberProfile.cy.ts index 5ee5cf145..2977e5a4e 100644 --- a/cypress/e2e/memberProfile.cy.ts +++ b/cypress/e2e/memberProfile.cy.ts @@ -1,17 +1,24 @@ +import { PROFILE_PATH } from '@/config/paths'; import { MEMBER_PROFILE_EMAIL_ID, + PUBLIC_PROFILE_BIO_ID, + PUBLIC_PROFILE_FACEBOOK_ID, + PUBLIC_PROFILE_LINKEDIN_ID, + PUBLIC_PROFILE_TWITTER_ID, USERNAME_DISPLAY_ID, } from '@/config/selectors'; -import { BOB } from '../fixtures/members'; +import { BOB, MEMBER_PUBLIC_PROFILE } from '../fixtures/members'; describe('Check member info', () => { beforeEach(() => { cy.setUpApi({ currentMember: BOB, + currentProfile: MEMBER_PUBLIC_PROFILE, }); - cy.visit('/'); + cy.visit(PROFILE_PATH); cy.wait('@getCurrentMember'); + cy.wait('@getOwnProfile'); }); it('displays the correct member info', () => { @@ -20,4 +27,27 @@ describe('Check member info', () => { // displays the correct member email cy.get(`#${MEMBER_PROFILE_EMAIL_ID}`).should('contain', BOB.email); }); + + it.only('displays the correct public profile info', () => { + // displays the correct bio + cy.get(`#${PUBLIC_PROFILE_BIO_ID}`).should( + 'contain', + MEMBER_PUBLIC_PROFILE.bio, + ); + // displays the correct member linkedin + cy.get(`#${PUBLIC_PROFILE_LINKEDIN_ID}`).should( + 'contain', + MEMBER_PUBLIC_PROFILE.linkedinID, + ); + // displays the correct member twitter + cy.get(`#${PUBLIC_PROFILE_TWITTER_ID}`).should( + 'contain', + MEMBER_PUBLIC_PROFILE.twitterID, + ); + // displays the correct member facebook + cy.get(`#${PUBLIC_PROFILE_FACEBOOK_ID}`).should( + 'contain', + MEMBER_PUBLIC_PROFILE.facebookID, + ); + }); }); diff --git a/cypress/fixtures/members.ts b/cypress/fixtures/members.ts index 3cf31291c..2cadcdeb3 100644 --- a/cypress/fixtures/members.ts +++ b/cypress/fixtures/members.ts @@ -1,4 +1,4 @@ -import { Member, MemberFactory } from '@graasp/sdk'; +import { Member, MemberFactory, PublicProfile } from '@graasp/sdk'; import { MemberForTest } from '../support/utils'; import { AVATAR_LINK } from './thumbnails/links'; @@ -40,3 +40,15 @@ export const MEMBER_WITH_AVATAR: MemberForTest = { // this only exists for test thumbnail: AVATAR_LINK, }; + +export const MEMBER_PUBLIC_PROFILE: PublicProfile = { + id: 'ecafbd2a-5642-31fb-ae93-0242ac130004', + member: BOB, + bio: 'text', + twitterID: 'twitter_handle', + facebookID: 'fb_handle', + linkedinID: 'linkedin_handle', + createdAt: '2021-04-13 14:56:34.749946', + updatedAt: '2021-04-13 14:56:34.749946', + visibility: false, +}; diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 484449a1b..674c7337f 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -1,12 +1,17 @@ /// import { CookieKeys } from '@graasp/sdk'; -import { CURRENT_MEMBER, MEMBERS } from '../fixtures/members'; +import { + CURRENT_MEMBER, + MEMBERS, + MEMBER_PUBLIC_PROFILE, +} from '../fixtures/members'; import { mockEditMember, mockGetCurrentMember, mockGetCurrentMemberAvatar, mockGetMember, + mockGetOwnProfile, mockPostAvatar, mockSignInRedirection, mockSignOut, @@ -18,7 +23,9 @@ Cypress.Commands.add( ({ members = Object.values(MEMBERS), currentMember = CURRENT_MEMBER, + currentProfile = MEMBER_PUBLIC_PROFILE, getCurrentMemberError = false, + getCurrentProfileError = false, editMemberError = false, getAvatarUrlError = false, postAvatarError = false, @@ -26,13 +33,14 @@ Cypress.Commands.add( } = {}) => { const cachedMembers = JSON.parse(JSON.stringify(members)); const cachedCurrentMember = JSON.parse(JSON.stringify(currentMember)); + const cachedCurrentProfile = JSON.parse(JSON.stringify(currentProfile)); // hide cookie banner by default cy.setCookie(CookieKeys.AcceptCookies, 'true'); - mockGetMember(cachedMembers); - mockGetCurrentMember(cachedCurrentMember, getCurrentMemberError); + mockGetMember(cachedMembers); + mockGetOwnProfile(cachedCurrentProfile, getCurrentProfileError); mockSignInRedirection(); diff --git a/cypress/support/server.ts b/cypress/support/server.ts index 635146eb5..9071aca0b 100644 --- a/cypress/support/server.ts +++ b/cypress/support/server.ts @@ -8,7 +8,7 @@ import { import { StatusCodes } from 'http-status-codes'; -import { CURRENT_MEMBER } from '../fixtures/members'; +import { CURRENT_MEMBER, MEMBER_PUBLIC_PROFILE } from '../fixtures/members'; import { ID_FORMAT, MemberForTest } from './utils'; const { @@ -18,6 +18,7 @@ const { buildPatchMember, buildUploadAvatarRoute, buildUpdateMemberPasswordRoute, + GET_OWN_PROFILE, } = API_ROUTES; export const SIGN_IN_PATH = buildSignInPath({ @@ -31,6 +32,30 @@ export const redirectionReply = { body: '

Mock Auth Page

', }; +export const mockGetOwnProfile = ( + publicProfile = MEMBER_PUBLIC_PROFILE, + shouldThrowError = false, +): void => { + cy.intercept( + { + method: HttpMethod.Get, + url: `${API_HOST}/members/${GET_OWN_PROFILE}`, + }, + ({ reply }) => { + if (shouldThrowError) { + return reply({ + statusCode: StatusCodes.INTERNAL_SERVER_ERROR, + body: null, + }); + } + return reply({ statusCode: StatusCodes.OK, body: publicProfile }); + }, + ).as('getOwnProfile'); +}; +// console.log( +// mockGetOwnProfile(MEMBER_PUBLIC_PROFILE, false), +// 'mockGetOwnProfile', +// ); export const mockGetCurrentMember = ( currentMember = CURRENT_MEMBER, shouldThrowError = false, diff --git a/src/components/main/MemberPublicProfile.tsx b/src/components/main/MemberPublicProfile.tsx index 978951945..4769b8aab 100644 --- a/src/components/main/MemberPublicProfile.tsx +++ b/src/components/main/MemberPublicProfile.tsx @@ -9,6 +9,12 @@ import { Box, Button, Grid, Stack, Typography } from '@mui/material'; import { useAccountTranslation } from '@/config/i18n'; import { PUBLIC_PROFILE_PATH } from '@/config/paths'; import { hooks } from '@/config/queryClient'; +import { + PUBLIC_PROFILE_BIO_ID, + PUBLIC_PROFILE_FACEBOOK_ID, + PUBLIC_PROFILE_LINKEDIN_ID, + PUBLIC_PROFILE_TWITTER_ID, +} from '@/config/selectors'; const MemberPublicProfile = (): JSX.Element => { const { data } = hooks.useOwnProfile(); @@ -42,27 +48,35 @@ const MemberPublicProfile = (): JSX.Element => { {t('PUBLIC_PROFILE_BIO')} - {data?.bio} + + {data?.bio} + - {data?.linkedinID} + + {data?.linkedinID} + - {data?.twitterID} + + {data?.twitterID} + - {data?.facebookID} + + {data?.facebookID} + diff --git a/src/config/selectors.ts b/src/config/selectors.ts index 89e272c6f..07e5cd2e3 100644 --- a/src/config/selectors.ts +++ b/src/config/selectors.ts @@ -38,3 +38,8 @@ export const AVATAR_UPLOAD_ICON_CY = 'avatarUploadIconCy'; export const CROP_MODAL_CONFIRM_BUTTON_ID = 'cropModalConfirmButton'; export const buildDataCyWrapper = (dataCy: string): string => `[data-cy="${dataCy}"]`; + +export const PUBLIC_PROFILE_BIO_ID = 'publicProfileBioId'; +export const PUBLIC_PROFILE_LINKEDIN_ID = 'publicProfileLinkedInId'; +export const PUBLIC_PROFILE_TWITTER_ID = 'publicProfileTwitterId'; +export const PUBLIC_PROFILE_FACEBOOK_ID = 'publicProfileFacebookId'; From 4abdd0bc1ed6d7ec5bbee2b1585f71261f64c4d3 Mon Sep 17 00:00:00 2001 From: Mariem Date: Thu, 30 May 2024 15:09:55 +0200 Subject: [PATCH 05/14] fix: remove .only and console logs comments --- cypress/e2e/memberProfile.cy.ts | 2 +- cypress/support/server.ts | 4 ---- src/components/main/MemberCard.tsx | 2 -- 3 files changed, 1 insertion(+), 7 deletions(-) diff --git a/cypress/e2e/memberProfile.cy.ts b/cypress/e2e/memberProfile.cy.ts index 2977e5a4e..13a6c1c0c 100644 --- a/cypress/e2e/memberProfile.cy.ts +++ b/cypress/e2e/memberProfile.cy.ts @@ -28,7 +28,7 @@ describe('Check member info', () => { cy.get(`#${MEMBER_PROFILE_EMAIL_ID}`).should('contain', BOB.email); }); - it.only('displays the correct public profile info', () => { + it('displays the correct public profile info', () => { // displays the correct bio cy.get(`#${PUBLIC_PROFILE_BIO_ID}`).should( 'contain', diff --git a/cypress/support/server.ts b/cypress/support/server.ts index 9071aca0b..f52e33921 100644 --- a/cypress/support/server.ts +++ b/cypress/support/server.ts @@ -52,10 +52,6 @@ export const mockGetOwnProfile = ( }, ).as('getOwnProfile'); }; -// console.log( -// mockGetOwnProfile(MEMBER_PUBLIC_PROFILE, false), -// 'mockGetOwnProfile', -// ); export const mockGetCurrentMember = ( currentMember = CURRENT_MEMBER, shouldThrowError = false, diff --git a/src/components/main/MemberCard.tsx b/src/components/main/MemberCard.tsx index 572c018a5..4b7428922 100644 --- a/src/components/main/MemberCard.tsx +++ b/src/components/main/MemberCard.tsx @@ -90,8 +90,6 @@ const MemberCard = (): JSX.Element | null => { } }; - // console.log(avatarUrl, 'avatarUrl'); - return ( From 14898d8c832e4ba2dab84d38ad4fed6ddd99c1a8 Mon Sep 17 00:00:00 2001 From: Mariem Date: Thu, 30 May 2024 15:25:57 +0200 Subject: [PATCH 06/14] fix: add translation --- src/components/main/MemberPublicProfile.tsx | 2 +- src/langs/en.json | 4 ++-- src/langs/fr.json | 2 +- src/pages/MemberScreen.tsx | 22 +++++++++++---------- 4 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/components/main/MemberPublicProfile.tsx b/src/components/main/MemberPublicProfile.tsx index 4769b8aab..a38f38a70 100644 --- a/src/components/main/MemberPublicProfile.tsx +++ b/src/components/main/MemberPublicProfile.tsx @@ -35,7 +35,7 @@ const MemberPublicProfile = (): JSX.Element => { > - Public Profile + {t('PUBLIC_PROFILE_TITLE')} + + + + diff --git a/src/components/main/MemberPublicProfile.tsx b/src/components/main/MemberPublicProfile.tsx index a38f38a70..5aa28c3ba 100644 --- a/src/components/main/MemberPublicProfile.tsx +++ b/src/components/main/MemberPublicProfile.tsx @@ -1,5 +1,4 @@ -import React from 'react'; -import { useNavigate } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import FacebookIcon from '@mui/icons-material/Facebook'; import LinkedInIcon from '@mui/icons-material/LinkedIn'; @@ -19,11 +18,7 @@ import { const MemberPublicProfile = (): JSX.Element => { const { data } = hooks.useOwnProfile(); const { t } = useAccountTranslation(); - const push = useNavigate(); - const goTo = (path: string) => { - push(path); - }; return ( { }} > - + {t('PUBLIC_PROFILE_TITLE')} - - + + + + @@ -48,35 +45,76 @@ const MemberPublicProfile = (): JSX.Element => { {t('PUBLIC_PROFILE_BIO')} - - {data?.bio} - + {data?.bio ? ( + + {data.bio} + + ) : ( + + {t('PUBLIC_PROFILE_BIO_EMPTY_MSG')} + + )} - - - - {data?.linkedinID} + + + {data?.linkedinID ? ( + + {data?.linkedinID} + + ) : ( + + {t('PUBLIC_PROFILE_LINKEDIN_EMPTY_MSG')} + + )} - - {data?.twitterID} - + {data?.twitterID ? ( + + {data?.twitterID} + + ) : ( + + {t('PUBLIC_PROFILE_TWITTER_EMPTY_MSG')} + + )} - - {data?.facebookID} - + {data?.facebookID ? ( + + {data?.facebookID} + + ) : ( + + {t('PUBLIC_PROFILE_FACEBOOK_EMPTY_MSG')} + + )} diff --git a/src/langs/en.json b/src/langs/en.json index eb084792f..a5e99b1d9 100644 --- a/src/langs/en.json +++ b/src/langs/en.json @@ -21,7 +21,8 @@ "PROFILE_MEMBER_NAME": "Username", "PROFILE_MEMBER_ID_TITLE": "Member ID", "PROFILE_LANGUAGE_TITLE": "Language", - "PROFILE_CREATED_AT_TITLE": "Member Since {{date}}", + "PROFILE_CREATED_AT_INFO": "Member Since {{date}}", + "PROFILE_CREATED_AT_TITLE": "Member Since", "PROFILE_EMAIL_TITLE": "Email", "PROFILE_EMAIL_FREQUENCY_TITLE": "Email Frequency", "PROFILE_SAVE_ACTIONS_TITLE": "Enable Analytics", @@ -49,12 +50,16 @@ "PUBLIC_PROFILE_DESCRIPTION": "Personalize your public profile to let other users interested in your work know a bit more about you. You can make it private anytime.", "PUBLIC_PROFILE_LINKEDIN_LINK": "LinkedIn ID", "PUBLIC_PROFILE_LINKEDIN_LINK_ERROR_MSG": "LinkedIn Link is not a valid url", + "PUBLIC_PROFILE_LINKEDIN_EMPTY_MSG": "No LinkedIn ID available", "PUBLIC_PROFILE_TWITTER_LINK": "Twitter ID", "PUBLIC_PROFILE_TWITTER_LINK_ERROR_MSG": "Twitter Link is not a valid url", + "PUBLIC_PROFILE_TWITTER_EMPTY_MSG": "No Twitter ID available", "PUBLIC_PROFILE_FACEBOOK_LINK": "Facebook ID", "PUBLIC_PROFILE_FACEBOOK_LINK_ERROR_MSG": "facebook Link is not a valid url", + "PUBLIC_PROFILE_FACEBOOK_EMPTY_MSG": "No Facebook ID available", "PUBLIC_PROFILE_BIO": "Bio", "PUBLIC_PROFILE_BIO_ERROR_MSG": "Bio is a required field", + "PUBLIC_PROFILE_BIO_EMPTY_MSG": "No Bio available", "PUBLIC_PROFILE_VISIBILITY": "Make this profile public", "PUBLIC_PROFILE_SUBMIT_TEXT": "Save Changes", "PUBLIC_PROFILE_CHECK_TEXT": "Check Profile", diff --git a/src/langs/fr.json b/src/langs/fr.json index fa247255d..e7971ebc7 100644 --- a/src/langs/fr.json +++ b/src/langs/fr.json @@ -21,7 +21,8 @@ "PROFILE_MEMBER_NAME": "Nom de l'utilisateur", "PROFILE_MEMBER_ID_TITLE": "Identifiant de l'utilisateur", "PROFILE_LANGUAGE_TITLE": "Langue", - "PROFILE_CREATED_AT_TITLE": "Membre depuis {{date}}", + "PROFILE_CREATED_AT_INFO": "Membre depuis {{date}}", + "PROFILE_CREATED_AT_TITLE": "Membre depuis", "PROFILE_EMAIL_TITLE": "Email", "PROFILE_EMAIL_FREQUENCY_TITLE": "Fréquence d'envoi d'email", "PROFILE_SAVE_ACTIONS_TITLE": "Activer la sauvegarde des interactions", @@ -49,12 +50,16 @@ "PUBLIC_PROFILE_DESCRIPTION": "Personnalisez votre profil public pour permettre aux autres utilisateurs intéressés par votre travail d'en savoir un peu plus sur vous. Vous pouvez le rendre privé à tout moment.", "PUBLIC_PROFILE_LINKEDIN_LINK": "Identifiant LinkedIn", "PUBLIC_PROFILE_LINKEDIN_LINK_ERROR_MSG": "Le lien LinkedIn n'est pas valide", + "PUBLIC_PROFILE_LINKEDIN_EMPTY_MSG": "Aucun identifiant LinkedIn disponible", "PUBLIC_PROFILE_TWITTER_LINK": "Identifiant Twitter", "PUBLIC_PROFILE_TWITTER_LINK_ERROR_MSG": "Le lien Twitter n'est pas valide", + "PUBLIC_PROFILE_TWITTER_EMPTY_MSG": "Aucun identifiant Twitter disponible", "PUBLIC_PROFILE_FACEBOOK_LINK": "Identifiant Facebook", "PUBLIC_PROFILE_FACEBOOK_LINK_ERROR_MSG": "Le lien Facebook n'est pas valide", + "PUBLIC_PROFILE_FACEBOOK_EMPTY_MSG": "Aucun identifiant Facebook disponible", "PUBLIC_PROFILE_BIO": "Biographie", "PUBLIC_PROFILE_BIO_ERROR_MSG": "Biographie est un champ obligatoire", + "PUBLIC_PROFILE_BIO_EMPTY_MSG": "Aucun biographie disponible", "PUBLIC_PROFILE_VISIBILITY": "Rendre public ce profil", "PUBLIC_PROFILE_SUBMIT_TEXT": "Sauvegarder les modifications", "PUBLIC_PROFILE_CHECK_TEXT": "Voir le profil", diff --git a/src/pages/PublicProfileScreen.tsx b/src/pages/EditPublicProfileScreen.tsx similarity index 98% rename from src/pages/PublicProfileScreen.tsx rename to src/pages/EditPublicProfileScreen.tsx index fd50aeda1..a69e30205 100644 --- a/src/pages/PublicProfileScreen.tsx +++ b/src/pages/EditPublicProfileScreen.tsx @@ -42,7 +42,7 @@ const initialDirtyFieldsState = { facebookID: false, visibility: false, }; -const PublicProfileScreen = (): JSX.Element => { +const EditPublicProfileScreen = (): JSX.Element => { const { t } = useAccountTranslation(); const { data, refetch } = hooks.useOwnProfile(); @@ -243,4 +243,4 @@ const PublicProfileScreen = (): JSX.Element => { ); }; -export default PublicProfileScreen; +export default EditPublicProfileScreen; diff --git a/src/pages/MemberScreen.tsx b/src/pages/MemberProfileScreen.tsx similarity index 100% rename from src/pages/MemberScreen.tsx rename to src/pages/MemberProfileScreen.tsx From e8cbb19bcd8ae41d431772cc89db185f8543fee8 Mon Sep 17 00:00:00 2001 From: Mariem Date: Wed, 5 Jun 2024 10:47:16 +0200 Subject: [PATCH 08/14] fix: fix review comments --- CHANGELOG.md | 233 ++++++++++-------- .../main/MemberPersonalInformation.tsx | 77 ++---- src/components/main/MemberProfileItem.tsx | 27 ++ src/components/main/MemberPublicProfile.tsx | 162 +++++------- .../main/MemberPublicProfileItem.tsx | 45 ++++ src/components/main/RoundedStack.tsx | 20 ++ src/langs/en.json | 4 +- src/langs/fr.json | 4 +- src/pages/EditMemberPersonalInformation.tsx | 2 - src/pages/MemberProfileScreen.tsx | 10 +- 10 files changed, 318 insertions(+), 266 deletions(-) create mode 100644 src/components/main/MemberProfileItem.tsx create mode 100644 src/components/main/MemberPublicProfileItem.tsx create mode 100644 src/components/main/RoundedStack.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 230503bfc..9a76489e6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,225 +2,252 @@ ## [2.7.0](https://github.com/graasp/graasp-account/compare/v2.6.2...v2.7.0) (2024-05-28) + ### Features -- create home page ([#228](https://github.com/graasp/graasp-account/issues/228)) ([2009635](https://github.com/graasp/graasp-account/commit/2009635a5e3b595abba67c6a42dcc7a71a702b6d)) -- delete avatar page ([#243](https://github.com/graasp/graasp-account/issues/243)) ([7bfc374](https://github.com/graasp/graasp-account/commit/7bfc374b785c9b3d7aa064f3801e873ea94c82db)) +* create home page ([#228](https://github.com/graasp/graasp-account/issues/228)) ([2009635](https://github.com/graasp/graasp-account/commit/2009635a5e3b595abba67c6a42dcc7a71a702b6d)) +* delete avatar page ([#243](https://github.com/graasp/graasp-account/issues/243)) ([7bfc374](https://github.com/graasp/graasp-account/commit/7bfc374b785c9b3d7aa064f3801e873ea94c82db)) + ### Bug Fixes -- **deps:** update dependency @graasp/query-client to v3.8.0 ([#223](https://github.com/graasp/graasp-account/issues/223)) ([f2c2cf8](https://github.com/graasp/graasp-account/commit/f2c2cf8fed752df74a6bab7067686f6d386193c1)) -- **deps:** update dependency filesize to v10.1.2 ([#230](https://github.com/graasp/graasp-account/issues/230)) ([5064ab4](https://github.com/graasp/graasp-account/commit/5064ab47d5b6bb232d5f7786ed86f200b6d620f6)) -- **deps:** update dependency i18next to v23.11.4 ([#227](https://github.com/graasp/graasp-account/issues/227)) ([862537a](https://github.com/graasp/graasp-account/commit/862537a5c12046da1e80d568eb5fa09c27030cf8)) -- **deps:** update react-router monorepo to v6.23.1 ([#229](https://github.com/graasp/graasp-account/issues/229)) ([e9982dc](https://github.com/graasp/graasp-account/commit/e9982dc53070e6cf2a9659d3d605990da53addff)) -- update yarn ([#231](https://github.com/graasp/graasp-account/issues/231)) ([e66bb35](https://github.com/graasp/graasp-account/commit/e66bb35a884a34058adfe966e2be1103f712b404)) +* **deps:** update dependency @graasp/query-client to v3.8.0 ([#223](https://github.com/graasp/graasp-account/issues/223)) ([f2c2cf8](https://github.com/graasp/graasp-account/commit/f2c2cf8fed752df74a6bab7067686f6d386193c1)) +* **deps:** update dependency filesize to v10.1.2 ([#230](https://github.com/graasp/graasp-account/issues/230)) ([5064ab4](https://github.com/graasp/graasp-account/commit/5064ab47d5b6bb232d5f7786ed86f200b6d620f6)) +* **deps:** update dependency i18next to v23.11.4 ([#227](https://github.com/graasp/graasp-account/issues/227)) ([862537a](https://github.com/graasp/graasp-account/commit/862537a5c12046da1e80d568eb5fa09c27030cf8)) +* **deps:** update react-router monorepo to v6.23.1 ([#229](https://github.com/graasp/graasp-account/issues/229)) ([e9982dc](https://github.com/graasp/graasp-account/commit/e9982dc53070e6cf2a9659d3d605990da53addff)) +* update yarn ([#231](https://github.com/graasp/graasp-account/issues/231)) ([e66bb35](https://github.com/graasp/graasp-account/commit/e66bb35a884a34058adfe966e2be1103f712b404)) ## [2.6.2](https://github.com/graasp/graasp-account/compare/v2.6.1...v2.6.2) (2024-05-04) + ### Bug Fixes -- **deps:** update dependency @graasp/sdk to v4.9.0 ([#213](https://github.com/graasp/graasp-account/issues/213)) ([0ea8af1](https://github.com/graasp/graasp-account/commit/0ea8af197b69af3b00300e34a5f90b7302b25daa)) -- **deps:** update dependency i18next to v23.11.3 ([#216](https://github.com/graasp/graasp-account/issues/216)) ([65cef2b](https://github.com/graasp/graasp-account/commit/65cef2b683025e98a358b9ae269cd1bd3eccb7c1)) -- **deps:** update mui (non-major) ([#190](https://github.com/graasp/graasp-account/issues/190)) ([ddbf21d](https://github.com/graasp/graasp-account/commit/ddbf21d9d0c68d7a5df40fb3db7d1c6724aa08df)) -- **test:** ensure language can be changed with the select ([#217](https://github.com/graasp/graasp-account/issues/217)) ([1a30302](https://github.com/graasp/graasp-account/commit/1a30302004eeee36419e3948c6affc5c11963d5d)) -- update deps ([ddb5e33](https://github.com/graasp/graasp-account/commit/ddb5e330359fac932b8c2511fb5457297fc24ff7)) +* **deps:** update dependency @graasp/sdk to v4.9.0 ([#213](https://github.com/graasp/graasp-account/issues/213)) ([0ea8af1](https://github.com/graasp/graasp-account/commit/0ea8af197b69af3b00300e34a5f90b7302b25daa)) +* **deps:** update dependency i18next to v23.11.3 ([#216](https://github.com/graasp/graasp-account/issues/216)) ([65cef2b](https://github.com/graasp/graasp-account/commit/65cef2b683025e98a358b9ae269cd1bd3eccb7c1)) +* **deps:** update mui (non-major) ([#190](https://github.com/graasp/graasp-account/issues/190)) ([ddbf21d](https://github.com/graasp/graasp-account/commit/ddbf21d9d0c68d7a5df40fb3db7d1c6724aa08df)) +* **test:** ensure language can be changed with the select ([#217](https://github.com/graasp/graasp-account/issues/217)) ([1a30302](https://github.com/graasp/graasp-account/commit/1a30302004eeee36419e3948c6affc5c11963d5d)) +* update deps ([ddb5e33](https://github.com/graasp/graasp-account/commit/ddb5e330359fac932b8c2511fb5457297fc24ff7)) ## [2.6.1](https://github.com/graasp/graasp-account/compare/v2.6.0...v2.6.1) (2024-04-24) + ### Bug Fixes -- **deps:** update dependency @graasp/query-client to v3.4.2 ([#200](https://github.com/graasp/graasp-account/issues/200)) ([a0280d5](https://github.com/graasp/graasp-account/commit/a0280d5bab8d6158a955baf2eb688c8ed319645a)) -- **deps:** update dependency i18next to v23.11.2 ([#197](https://github.com/graasp/graasp-account/issues/197)) ([5f5ff65](https://github.com/graasp/graasp-account/commit/5f5ff65c6dfa88c110b973feb8b5d4964c3270be)) -- update dependencies ([#208](https://github.com/graasp/graasp-account/issues/208)) ([e54f3f0](https://github.com/graasp/graasp-account/commit/e54f3f07cb733385e9d3dfedb90c5a76ed919150)) -- use format size from sdk ([#205](https://github.com/graasp/graasp-account/issues/205)) ([4880982](https://github.com/graasp/graasp-account/commit/48809823a95e1f3b701f1afe7e4ba3a50f8c2abe)) +* **deps:** update dependency @graasp/query-client to v3.4.2 ([#200](https://github.com/graasp/graasp-account/issues/200)) ([a0280d5](https://github.com/graasp/graasp-account/commit/a0280d5bab8d6158a955baf2eb688c8ed319645a)) +* **deps:** update dependency i18next to v23.11.2 ([#197](https://github.com/graasp/graasp-account/issues/197)) ([5f5ff65](https://github.com/graasp/graasp-account/commit/5f5ff65c6dfa88c110b973feb8b5d4964c3270be)) +* update dependencies ([#208](https://github.com/graasp/graasp-account/issues/208)) ([e54f3f0](https://github.com/graasp/graasp-account/commit/e54f3f07cb733385e9d3dfedb90c5a76ed919150)) +* use format size from sdk ([#205](https://github.com/graasp/graasp-account/issues/205)) ([4880982](https://github.com/graasp/graasp-account/commit/48809823a95e1f3b701f1afe7e4ba3a50f8c2abe)) ## [2.6.0](https://github.com/graasp/graasp-account/compare/v2.5.0...v2.6.0) (2024-04-19) + ### Features -- delete delete account from main profile page ([#201](https://github.com/graasp/graasp-account/issues/201)) ([df1dbab](https://github.com/graasp/graasp-account/commit/df1dbab706bc2518a2f2ace9197fef38edbcfe71)) +* delete delete account from main profile page ([#201](https://github.com/graasp/graasp-account/issues/201)) ([df1dbab](https://github.com/graasp/graasp-account/commit/df1dbab706bc2518a2f2ace9197fef38edbcfe71)) ## [2.5.0](https://github.com/graasp/graasp-account/compare/v2.4.0...v2.5.0) (2024-04-17) + ### Features -- allow to change username ([#180](https://github.com/graasp/graasp-account/issues/180)) ([16012f4](https://github.com/graasp/graasp-account/commit/16012f41694b1c6efab7342dc8c58be7a59437e5)) -- update MemberScreen to udpate enableSaveActions in member ([#186](https://github.com/graasp/graasp-account/issues/186)) ([4fda13b](https://github.com/graasp/graasp-account/commit/4fda13b2b1b8467d18c7d40c23c9a049631ae596)) +* allow to change username ([#180](https://github.com/graasp/graasp-account/issues/180)) ([16012f4](https://github.com/graasp/graasp-account/commit/16012f41694b1c6efab7342dc8c58be7a59437e5)) +* update MemberScreen to udpate enableSaveActions in member ([#186](https://github.com/graasp/graasp-account/issues/186)) ([4fda13b](https://github.com/graasp/graasp-account/commit/4fda13b2b1b8467d18c7d40c23c9a049631ae596)) + ### Bug Fixes -- apply new limits ([#195](https://github.com/graasp/graasp-account/issues/195)) ([2ccc2e6](https://github.com/graasp/graasp-account/commit/2ccc2e627066fbbcec1ea4783619b185d5c919a3)) -- Cypress test related to username validation ([16012f4](https://github.com/graasp/graasp-account/commit/16012f41694b1c6efab7342dc8c58be7a59437e5)) -- **deps:** update dependency @emotion/styled to v11.11.5 ([#181](https://github.com/graasp/graasp-account/issues/181)) ([f949c6c](https://github.com/graasp/graasp-account/commit/f949c6cf185fa3312144c04407193f25298f9d8d)) -- **deps:** update dependency @graasp/translations to v1.26.0 ([#196](https://github.com/graasp/graasp-account/issues/196)) ([c17c242](https://github.com/graasp/graasp-account/commit/c17c242a28f670c309a042d4ef7717333456c290)) -- **deps:** update dependency @graasp/ui to v4.15.0 ([#183](https://github.com/graasp/graasp-account/issues/183)) ([64011c2](https://github.com/graasp/graasp-account/commit/64011c2371b4080d18f876317cee3671a2e0ce74)) -- **deps:** update uppy packages ([#178](https://github.com/graasp/graasp-account/issues/178)) ([9d3a850](https://github.com/graasp/graasp-account/commit/9d3a850fe2a4625fb4281278ac3d0afc75e53a18)) -- test allow to change username ([16012f4](https://github.com/graasp/graasp-account/commit/16012f41694b1c6efab7342dc8c58be7a59437e5)) +* apply new limits ([#195](https://github.com/graasp/graasp-account/issues/195)) ([2ccc2e6](https://github.com/graasp/graasp-account/commit/2ccc2e627066fbbcec1ea4783619b185d5c919a3)) +* Cypress test related to username validation ([16012f4](https://github.com/graasp/graasp-account/commit/16012f41694b1c6efab7342dc8c58be7a59437e5)) +* **deps:** update dependency @emotion/styled to v11.11.5 ([#181](https://github.com/graasp/graasp-account/issues/181)) ([f949c6c](https://github.com/graasp/graasp-account/commit/f949c6cf185fa3312144c04407193f25298f9d8d)) +* **deps:** update dependency @graasp/translations to v1.26.0 ([#196](https://github.com/graasp/graasp-account/issues/196)) ([c17c242](https://github.com/graasp/graasp-account/commit/c17c242a28f670c309a042d4ef7717333456c290)) +* **deps:** update dependency @graasp/ui to v4.15.0 ([#183](https://github.com/graasp/graasp-account/issues/183)) ([64011c2](https://github.com/graasp/graasp-account/commit/64011c2371b4080d18f876317cee3671a2e0ce74)) +* **deps:** update uppy packages ([#178](https://github.com/graasp/graasp-account/issues/178)) ([9d3a850](https://github.com/graasp/graasp-account/commit/9d3a850fe2a4625fb4281278ac3d0afc75e53a18)) +* test allow to change username ([16012f4](https://github.com/graasp/graasp-account/commit/16012f41694b1c6efab7342dc8c58be7a59437e5)) ## [2.4.0](https://github.com/graasp/graasp-account/compare/v2.3.5...v2.4.0) (2024-04-15) + ### Features -- update main component, favicon and font ([#187](https://github.com/graasp/graasp-account/issues/187)) ([0ff23c2](https://github.com/graasp/graasp-account/commit/0ff23c2128ea18fef20c5bc43443263387804d7a)) +* update main component, favicon and font ([#187](https://github.com/graasp/graasp-account/issues/187)) ([0ff23c2](https://github.com/graasp/graasp-account/commit/0ff23c2128ea18fef20c5bc43443263387804d7a)) + ### Bug Fixes -- small ui issues on the progress bar ([7c3db90](https://github.com/graasp/graasp-account/commit/7c3db902c42c734b242b5c93a93523fbcc8333d8)) +* small ui issues on the progress bar ([7c3db90](https://github.com/graasp/graasp-account/commit/7c3db902c42c734b242b5c93a93523fbcc8333d8)) ## [2.3.5](https://github.com/graasp/graasp-account/compare/v2.3.4...v2.3.5) (2024-04-03) + ### Bug Fixes -- allow stacked notifications ([#182](https://github.com/graasp/graasp-account/issues/182)) ([2b8d9d3](https://github.com/graasp/graasp-account/commit/2b8d9d3de414f56792c20a1eee57a95e09dae29b)) -- set width of public profile form ([#169](https://github.com/graasp/graasp-account/issues/169)) ([6ac3756](https://github.com/graasp/graasp-account/commit/6ac37566262530265bdc15475b52211cf46e02d0)) +* allow stacked notifications ([#182](https://github.com/graasp/graasp-account/issues/182)) ([2b8d9d3](https://github.com/graasp/graasp-account/commit/2b8d9d3de414f56792c20a1eee57a95e09dae29b)) +* set width of public profile form ([#169](https://github.com/graasp/graasp-account/issues/169)) ([6ac3756](https://github.com/graasp/graasp-account/commit/6ac37566262530265bdc15475b52211cf46e02d0)) ## [2.3.4](https://github.com/graasp/graasp-account/compare/v2.3.3...v2.3.4) (2024-03-25) + ### Bug Fixes -- accept query params for validation social links ([#165](https://github.com/graasp/graasp-account/issues/165)) ([296e085](https://github.com/graasp/graasp-account/commit/296e0855e9253fbff729aec774a74e97556a728f)) -- **arabic:** crop modal translations ([#145](https://github.com/graasp/graasp-account/issues/145)) ([54629a5](https://github.com/graasp/graasp-account/commit/54629a5f652f49f33adb4ea7d6fc31e466a950d6)) -- **deps:** update dependency @graasp/query-client to v2.9.1 ([#140](https://github.com/graasp/graasp-account/issues/140)) ([9232dcf](https://github.com/graasp/graasp-account/commit/9232dcfc40088a00ce47fc2c0e6525ef3223ed68)) -- **deps:** update dependency @graasp/query-client to v3 ([#152](https://github.com/graasp/graasp-account/issues/152)) ([3738415](https://github.com/graasp/graasp-account/commit/3738415c55be75af961f6a4121ba0555766e1e82)) -- **deps:** update dependency @graasp/sdk to v4.2.0 ([#150](https://github.com/graasp/graasp-account/issues/150)) ([8f3d0b8](https://github.com/graasp/graasp-account/commit/8f3d0b806758639522cb96a1717e4fa272cf798a)) -- **deps:** update dependency @graasp/sdk to v4.2.1 ([#160](https://github.com/graasp/graasp-account/issues/160)) ([3056813](https://github.com/graasp/graasp-account/commit/3056813fc51c594cf57a4b8ec962a57bf4a7a474)) -- **deps:** update dependency @graasp/translations to v1.25.3 ([#148](https://github.com/graasp/graasp-account/issues/148)) ([29cf23a](https://github.com/graasp/graasp-account/commit/29cf23aa7947c9770941e4f4797dc1160b7786f8)) -- **deps:** update dependency @graasp/ui to v4.11.0 ([#151](https://github.com/graasp/graasp-account/issues/151)) ([9469b38](https://github.com/graasp/graasp-account/commit/9469b38a8f9f7e7c562df9393739e4508c32173b)) -- **deps:** update dependency axios to v1.6.8 ([#157](https://github.com/graasp/graasp-account/issues/157)) ([5e4ca37](https://github.com/graasp/graasp-account/commit/5e4ca379f45489fe6d12ef32001f6344be4f90f1)) -- **deps:** update dependency filesize to v10.1.1 ([#168](https://github.com/graasp/graasp-account/issues/168)) ([51ae5f8](https://github.com/graasp/graasp-account/commit/51ae5f81fe4096cbb9a4bd7f73defd9f07a504c0)) -- **deps:** update dependency react-toastify to v10.0.5 ([#154](https://github.com/graasp/graasp-account/issues/154)) ([718878c](https://github.com/graasp/graasp-account/commit/718878c20950aeab384bbe00ec056013e97bdc28)) -- **deps:** update mui (non-major) ([#143](https://github.com/graasp/graasp-account/issues/143)) ([b6dc51e](https://github.com/graasp/graasp-account/commit/b6dc51ef1bb8793025e0a9f3ebbce112a5374e32)) -- **deps:** update mui (non-major) ([#164](https://github.com/graasp/graasp-account/issues/164)) ([1aa1719](https://github.com/graasp/graasp-account/commit/1aa1719b8c2da2c18d484e8acf1a1402e4f39c21)) -- **deps:** update uppy packages ([#82](https://github.com/graasp/graasp-account/issues/82)) ([f94e94c](https://github.com/graasp/graasp-account/commit/f94e94cdc670cef0eeab7b201803ad63d7e4a43c)) -- fix platform mobile colors ([#171](https://github.com/graasp/graasp-account/issues/171)) ([3042d61](https://github.com/graasp/graasp-account/commit/3042d61f73a7d38257e8a64a47a495af23955bfb)) -- **french:** crop modal translations ([#144](https://github.com/graasp/graasp-account/issues/144)) ([f7c98b6](https://github.com/graasp/graasp-account/commit/f7c98b62b854f3f2d6b7984fe0c35a06ff61501b)) -- **spanish:** update crop modal translations ([#155](https://github.com/graasp/graasp-account/issues/155)) ([1605f09](https://github.com/graasp/graasp-account/commit/1605f0929b96cc50f9edb5fc498c5471241f1a3a)) -- **spanish:** update translations ([#146](https://github.com/graasp/graasp-account/issues/146)) ([a120573](https://github.com/graasp/graasp-account/commit/a120573867a84878f73bbfcfd2c912041ece4623)) +* accept query params for validation social links ([#165](https://github.com/graasp/graasp-account/issues/165)) ([296e085](https://github.com/graasp/graasp-account/commit/296e0855e9253fbff729aec774a74e97556a728f)) +* **arabic:** crop modal translations ([#145](https://github.com/graasp/graasp-account/issues/145)) ([54629a5](https://github.com/graasp/graasp-account/commit/54629a5f652f49f33adb4ea7d6fc31e466a950d6)) +* **deps:** update dependency @graasp/query-client to v2.9.1 ([#140](https://github.com/graasp/graasp-account/issues/140)) ([9232dcf](https://github.com/graasp/graasp-account/commit/9232dcfc40088a00ce47fc2c0e6525ef3223ed68)) +* **deps:** update dependency @graasp/query-client to v3 ([#152](https://github.com/graasp/graasp-account/issues/152)) ([3738415](https://github.com/graasp/graasp-account/commit/3738415c55be75af961f6a4121ba0555766e1e82)) +* **deps:** update dependency @graasp/sdk to v4.2.0 ([#150](https://github.com/graasp/graasp-account/issues/150)) ([8f3d0b8](https://github.com/graasp/graasp-account/commit/8f3d0b806758639522cb96a1717e4fa272cf798a)) +* **deps:** update dependency @graasp/sdk to v4.2.1 ([#160](https://github.com/graasp/graasp-account/issues/160)) ([3056813](https://github.com/graasp/graasp-account/commit/3056813fc51c594cf57a4b8ec962a57bf4a7a474)) +* **deps:** update dependency @graasp/translations to v1.25.3 ([#148](https://github.com/graasp/graasp-account/issues/148)) ([29cf23a](https://github.com/graasp/graasp-account/commit/29cf23aa7947c9770941e4f4797dc1160b7786f8)) +* **deps:** update dependency @graasp/ui to v4.11.0 ([#151](https://github.com/graasp/graasp-account/issues/151)) ([9469b38](https://github.com/graasp/graasp-account/commit/9469b38a8f9f7e7c562df9393739e4508c32173b)) +* **deps:** update dependency axios to v1.6.8 ([#157](https://github.com/graasp/graasp-account/issues/157)) ([5e4ca37](https://github.com/graasp/graasp-account/commit/5e4ca379f45489fe6d12ef32001f6344be4f90f1)) +* **deps:** update dependency filesize to v10.1.1 ([#168](https://github.com/graasp/graasp-account/issues/168)) ([51ae5f8](https://github.com/graasp/graasp-account/commit/51ae5f81fe4096cbb9a4bd7f73defd9f07a504c0)) +* **deps:** update dependency react-toastify to v10.0.5 ([#154](https://github.com/graasp/graasp-account/issues/154)) ([718878c](https://github.com/graasp/graasp-account/commit/718878c20950aeab384bbe00ec056013e97bdc28)) +* **deps:** update mui (non-major) ([#143](https://github.com/graasp/graasp-account/issues/143)) ([b6dc51e](https://github.com/graasp/graasp-account/commit/b6dc51ef1bb8793025e0a9f3ebbce112a5374e32)) +* **deps:** update mui (non-major) ([#164](https://github.com/graasp/graasp-account/issues/164)) ([1aa1719](https://github.com/graasp/graasp-account/commit/1aa1719b8c2da2c18d484e8acf1a1402e4f39c21)) +* **deps:** update uppy packages ([#82](https://github.com/graasp/graasp-account/issues/82)) ([f94e94c](https://github.com/graasp/graasp-account/commit/f94e94cdc670cef0eeab7b201803ad63d7e4a43c)) +* fix platform mobile colors ([#171](https://github.com/graasp/graasp-account/issues/171)) ([3042d61](https://github.com/graasp/graasp-account/commit/3042d61f73a7d38257e8a64a47a495af23955bfb)) +* **french:** crop modal translations ([#144](https://github.com/graasp/graasp-account/issues/144)) ([f7c98b6](https://github.com/graasp/graasp-account/commit/f7c98b62b854f3f2d6b7984fe0c35a06ff61501b)) +* **spanish:** update crop modal translations ([#155](https://github.com/graasp/graasp-account/issues/155)) ([1605f09](https://github.com/graasp/graasp-account/commit/1605f0929b96cc50f9edb5fc498c5471241f1a3a)) +* **spanish:** update translations ([#146](https://github.com/graasp/graasp-account/issues/146)) ([a120573](https://github.com/graasp/graasp-account/commit/a120573867a84878f73bbfcfd2c912041ece4623)) ## [2.3.3](https://github.com/graasp/graasp-account/compare/v2.3.2...v2.3.3) (2024-03-08) + ### Bug Fixes -- crop modal ([#134](https://github.com/graasp/graasp-account/issues/134)) ([924c3b7](https://github.com/graasp/graasp-account/commit/924c3b7e6d10c2613d13bc43092b72e7383d3f2b)) -- **deps:** update dependency @emotion/react to v11.11.4 ([#119](https://github.com/graasp/graasp-account/issues/119)) ([15d7629](https://github.com/graasp/graasp-account/commit/15d7629d4fff632a5b46afe8bf68228bd417b8d2)) -- **deps:** update dependency @graasp/query-client to v2.8.0 ([#130](https://github.com/graasp/graasp-account/issues/130)) ([c8448a3](https://github.com/graasp/graasp-account/commit/c8448a36c0ca4a9f05e4a2c9329339e0ea270a30)) -- **deps:** update dependency @graasp/sdk to v4.1.0 ([#123](https://github.com/graasp/graasp-account/issues/123)) ([4459516](https://github.com/graasp/graasp-account/commit/4459516ec465d03a5807072795c0d46636628827)) -- **deps:** update dependency @graasp/ui to v4.9.0 ([#124](https://github.com/graasp/graasp-account/issues/124)) ([466b851](https://github.com/graasp/graasp-account/commit/466b851c62d417e7041019fad8a0e7b56129a954)) -- **deps:** update dependency @mui/lab to v5.0.0-alpha.166 ([#110](https://github.com/graasp/graasp-account/issues/110)) ([54cf1a1](https://github.com/graasp/graasp-account/commit/54cf1a1de2d0f1550bac0e84d1e267f0e10c2ac8)) -- **deps:** update dependency i18next to v23.10.1 ([#135](https://github.com/graasp/graasp-account/issues/135)) ([7cbca52](https://github.com/graasp/graasp-account/commit/7cbca529bb9185f04fbd1d818af5b2da1d16a7c2)) -- **deps:** update dependency react-i18next to v14.1.0 ([#133](https://github.com/graasp/graasp-account/issues/133)) ([b548cdd](https://github.com/graasp/graasp-account/commit/b548cdd83360250e2d342750341e45f57df355ff)) -- **deps:** update mui (non-major) ([#129](https://github.com/graasp/graasp-account/issues/129)) ([64dd558](https://github.com/graasp/graasp-account/commit/64dd55868efff56eadc337b01ead290ae9be8d36)) -- **deps:** update react-router monorepo to v6.22.3 ([#122](https://github.com/graasp/graasp-account/issues/122)) ([2c6244a](https://github.com/graasp/graasp-account/commit/2c6244a1e700990d0786acca631e9a48e2ee0d4b)) +* crop modal ([#134](https://github.com/graasp/graasp-account/issues/134)) ([924c3b7](https://github.com/graasp/graasp-account/commit/924c3b7e6d10c2613d13bc43092b72e7383d3f2b)) +* **deps:** update dependency @emotion/react to v11.11.4 ([#119](https://github.com/graasp/graasp-account/issues/119)) ([15d7629](https://github.com/graasp/graasp-account/commit/15d7629d4fff632a5b46afe8bf68228bd417b8d2)) +* **deps:** update dependency @graasp/query-client to v2.8.0 ([#130](https://github.com/graasp/graasp-account/issues/130)) ([c8448a3](https://github.com/graasp/graasp-account/commit/c8448a36c0ca4a9f05e4a2c9329339e0ea270a30)) +* **deps:** update dependency @graasp/sdk to v4.1.0 ([#123](https://github.com/graasp/graasp-account/issues/123)) ([4459516](https://github.com/graasp/graasp-account/commit/4459516ec465d03a5807072795c0d46636628827)) +* **deps:** update dependency @graasp/ui to v4.9.0 ([#124](https://github.com/graasp/graasp-account/issues/124)) ([466b851](https://github.com/graasp/graasp-account/commit/466b851c62d417e7041019fad8a0e7b56129a954)) +* **deps:** update dependency @mui/lab to v5.0.0-alpha.166 ([#110](https://github.com/graasp/graasp-account/issues/110)) ([54cf1a1](https://github.com/graasp/graasp-account/commit/54cf1a1de2d0f1550bac0e84d1e267f0e10c2ac8)) +* **deps:** update dependency i18next to v23.10.1 ([#135](https://github.com/graasp/graasp-account/issues/135)) ([7cbca52](https://github.com/graasp/graasp-account/commit/7cbca529bb9185f04fbd1d818af5b2da1d16a7c2)) +* **deps:** update dependency react-i18next to v14.1.0 ([#133](https://github.com/graasp/graasp-account/issues/133)) ([b548cdd](https://github.com/graasp/graasp-account/commit/b548cdd83360250e2d342750341e45f57df355ff)) +* **deps:** update mui (non-major) ([#129](https://github.com/graasp/graasp-account/issues/129)) ([64dd558](https://github.com/graasp/graasp-account/commit/64dd55868efff56eadc337b01ead290ae9be8d36)) +* **deps:** update react-router monorepo to v6.22.3 ([#122](https://github.com/graasp/graasp-account/issues/122)) ([2c6244a](https://github.com/graasp/graasp-account/commit/2c6244a1e700990d0786acca631e9a48e2ee0d4b)) ## [2.3.2](https://github.com/graasp/graasp-account/compare/v2.3.1...v2.3.2) (2024-02-27) + ### Bug Fixes -- update esm deps ([#117](https://github.com/graasp/graasp-account/issues/117)) ([bed6f61](https://github.com/graasp/graasp-account/commit/bed6f61214052e931b00dd67b77ccd2106669a9d)) +* update esm deps ([#117](https://github.com/graasp/graasp-account/issues/117)) ([bed6f61](https://github.com/graasp/graasp-account/commit/bed6f61214052e931b00dd67b77ccd2106669a9d)) ## [2.3.1](https://github.com/graasp/graasp-account/compare/v2.3.0...v2.3.1) (2024-02-26) + ### Bug Fixes -- update deps to use esm ([#108](https://github.com/graasp/graasp-account/issues/108)) ([5cc8466](https://github.com/graasp/graasp-account/commit/5cc84662d045152259cbf18cb8c4dfa908c23f8a)) -- update translation and make translation more gender neutral ([#107](https://github.com/graasp/graasp-account/issues/107)) ([434c52e](https://github.com/graasp/graasp-account/commit/434c52e8ae5c16d1c80ee689a2d42918c4040c5b)) +* update deps to use esm ([#108](https://github.com/graasp/graasp-account/issues/108)) ([5cc8466](https://github.com/graasp/graasp-account/commit/5cc84662d045152259cbf18cb8c4dfa908c23f8a)) +* update translation and make translation more gender neutral ([#107](https://github.com/graasp/graasp-account/issues/107)) ([434c52e](https://github.com/graasp/graasp-account/commit/434c52e8ae5c16d1c80ee689a2d42918c4040c5b)) ## [2.3.0](https://github.com/graasp/graasp-account/compare/v2.2.0...v2.3.0) (2024-02-20) + ### Features -- translate fr.json via GitLocalize ([#93](https://github.com/graasp/graasp-account/issues/93)) ([d4a406b](https://github.com/graasp/graasp-account/commit/d4a406bfd77733ba741ad06212d23f6f48aa0e0b)) +* translate fr.json via GitLocalize ([#93](https://github.com/graasp/graasp-account/issues/93)) ([d4a406b](https://github.com/graasp/graasp-account/commit/d4a406bfd77733ba741ad06212d23f6f48aa0e0b)) + ### Bug Fixes -- add timestamp in html ([#89](https://github.com/graasp/graasp-account/issues/89)) ([f07bb91](https://github.com/graasp/graasp-account/commit/f07bb91ebabb73b3c7c0f9d6d33fff152158477e)) -- **arabic:** update translations ([#100](https://github.com/graasp/graasp-account/issues/100)) ([823a58d](https://github.com/graasp/graasp-account/commit/823a58d30121cb24e6b0a4c1676222182fa9ff0f)) -- **deps:** update dependency @graasp/query-client to v2.3.2 ([#80](https://github.com/graasp/graasp-account/issues/80)) ([a47ac46](https://github.com/graasp/graasp-account/commit/a47ac4654babb15fbe83aa9dd716710b473f16da)) -- **deps:** update dependency @graasp/query-client to v2.6.2 ([#99](https://github.com/graasp/graasp-account/issues/99)) ([518878e](https://github.com/graasp/graasp-account/commit/518878ebe00e4de9c894fc4b653659d2eb3620b9)) -- **deps:** update dependency @graasp/translations to v1.23.0 ([#71](https://github.com/graasp/graasp-account/issues/71)) ([15f8a3d](https://github.com/graasp/graasp-account/commit/15f8a3d6a14e105d36e1d896d6e9f4d88744ec8d)) -- **deps:** update dependency @graasp/ui to v4.7.0 ([#72](https://github.com/graasp/graasp-account/issues/72)) ([91f8c53](https://github.com/graasp/graasp-account/commit/91f8c536634c41e61279e30bb6bbc1d9d17cbf76)) -- **deps:** update dependency axios to v1.6.7 ([#91](https://github.com/graasp/graasp-account/issues/91)) ([d2aa00f](https://github.com/graasp/graasp-account/commit/d2aa00f13e6775f821cc440a7ce5e03dd811bb8f)) -- **deps:** update mui (non-major) ([#56](https://github.com/graasp/graasp-account/issues/56)) ([539bf23](https://github.com/graasp/graasp-account/commit/539bf23899d8756bff37624cc0145696801eca38)) -- **german:** update translations ([#94](https://github.com/graasp/graasp-account/issues/94)) ([432a6d1](https://github.com/graasp/graasp-account/commit/432a6d14543c17d470404b9553cf341e6bd46a48)) -- **italian:** update translations ([#95](https://github.com/graasp/graasp-account/issues/95)) ([b0ae431](https://github.com/graasp/graasp-account/commit/b0ae431e383fc30543cd81144047cfa1d29435c5)) -- remove unused components ([e2c0137](https://github.com/graasp/graasp-account/commit/e2c013776cf27cdcd2461edb87735843525d4051)) -- remove unused files ([68a9164](https://github.com/graasp/graasp-account/commit/68a9164bf739f1ea118b49b0341053dc9ca1ac01)) -- upgrade yarn to v4.1.0 ([99c88f6](https://github.com/graasp/graasp-account/commit/99c88f6d7382f69f6abacee222b3c06759163f36)) +* add timestamp in html ([#89](https://github.com/graasp/graasp-account/issues/89)) ([f07bb91](https://github.com/graasp/graasp-account/commit/f07bb91ebabb73b3c7c0f9d6d33fff152158477e)) +* **arabic:** update translations ([#100](https://github.com/graasp/graasp-account/issues/100)) ([823a58d](https://github.com/graasp/graasp-account/commit/823a58d30121cb24e6b0a4c1676222182fa9ff0f)) +* **deps:** update dependency @graasp/query-client to v2.3.2 ([#80](https://github.com/graasp/graasp-account/issues/80)) ([a47ac46](https://github.com/graasp/graasp-account/commit/a47ac4654babb15fbe83aa9dd716710b473f16da)) +* **deps:** update dependency @graasp/query-client to v2.6.2 ([#99](https://github.com/graasp/graasp-account/issues/99)) ([518878e](https://github.com/graasp/graasp-account/commit/518878ebe00e4de9c894fc4b653659d2eb3620b9)) +* **deps:** update dependency @graasp/translations to v1.23.0 ([#71](https://github.com/graasp/graasp-account/issues/71)) ([15f8a3d](https://github.com/graasp/graasp-account/commit/15f8a3d6a14e105d36e1d896d6e9f4d88744ec8d)) +* **deps:** update dependency @graasp/ui to v4.7.0 ([#72](https://github.com/graasp/graasp-account/issues/72)) ([91f8c53](https://github.com/graasp/graasp-account/commit/91f8c536634c41e61279e30bb6bbc1d9d17cbf76)) +* **deps:** update dependency axios to v1.6.7 ([#91](https://github.com/graasp/graasp-account/issues/91)) ([d2aa00f](https://github.com/graasp/graasp-account/commit/d2aa00f13e6775f821cc440a7ce5e03dd811bb8f)) +* **deps:** update mui (non-major) ([#56](https://github.com/graasp/graasp-account/issues/56)) ([539bf23](https://github.com/graasp/graasp-account/commit/539bf23899d8756bff37624cc0145696801eca38)) +* **german:** update translations ([#94](https://github.com/graasp/graasp-account/issues/94)) ([432a6d1](https://github.com/graasp/graasp-account/commit/432a6d14543c17d470404b9553cf341e6bd46a48)) +* **italian:** update translations ([#95](https://github.com/graasp/graasp-account/issues/95)) ([b0ae431](https://github.com/graasp/graasp-account/commit/b0ae431e383fc30543cd81144047cfa1d29435c5)) +* remove unused components ([e2c0137](https://github.com/graasp/graasp-account/commit/e2c013776cf27cdcd2461edb87735843525d4051)) +* remove unused files ([68a9164](https://github.com/graasp/graasp-account/commit/68a9164bf739f1ea118b49b0341053dc9ca1ac01)) +* upgrade yarn to v4.1.0 ([99c88f6](https://github.com/graasp/graasp-account/commit/99c88f6d7382f69f6abacee222b3c06759163f36)) ## [2.2.0](https://github.com/graasp/graasp-account/compare/v2.1.1...v2.2.0) (2024-02-01) + ### Features -- create delete account page ([#74](https://github.com/graasp/graasp-account/issues/74)) ([d77c88a](https://github.com/graasp/graasp-account/commit/d77c88a03dd5750a8e6b7502c3e8be7c1bf6e12d)) +* create delete account page ([#74](https://github.com/graasp/graasp-account/issues/74)) ([d77c88a](https://github.com/graasp/graasp-account/commit/d77c88a03dd5750a8e6b7502c3e8be7c1bf6e12d)) + ### Bug Fixes -- use type module in package json ([493a243](https://github.com/graasp/graasp-account/commit/493a2432979be8160e5b9d7026a29e1968d13bc0)) +* use type module in package json ([493a243](https://github.com/graasp/graasp-account/commit/493a2432979be8160e5b9d7026a29e1968d13bc0)) ## [2.1.1](https://github.com/graasp/graasp-account/compare/v2.1.0...v2.1.1) (2024-01-24) + ### Bug Fixes -- **deps:** update dependency @graasp/sdk to v3.5.0 ([#81](https://github.com/graasp/graasp-account/issues/81)) ([c0cf734](https://github.com/graasp/graasp-account/commit/c0cf734c24a45f12c164a5bc0e715c70b94a70f1)) -- update dependencies and fix spanish issues ([#77](https://github.com/graasp/graasp-account/issues/77)) ([831982f](https://github.com/graasp/graasp-account/commit/831982f762ebfe70c4683200b34736b380d0481c)) +* **deps:** update dependency @graasp/sdk to v3.5.0 ([#81](https://github.com/graasp/graasp-account/issues/81)) ([c0cf734](https://github.com/graasp/graasp-account/commit/c0cf734c24a45f12c164a5bc0e715c70b94a70f1)) +* update dependencies and fix spanish issues ([#77](https://github.com/graasp/graasp-account/issues/77)) ([831982f](https://github.com/graasp/graasp-account/commit/831982f762ebfe70c4683200b34736b380d0481c)) ## [2.1.0](https://github.com/graasp/graasp-account/compare/v2.0.2...v2.1.0) (2024-01-10) + ### Features -- build library profile page (UI) ([#41](https://github.com/graasp/graasp-account/issues/41)) ([c51d8f4](https://github.com/graasp/graasp-account/commit/c51d8f47cd0caf8a66e40d88432f219c2a985b26)) +* build library profile page (UI) ([#41](https://github.com/graasp/graasp-account/issues/41)) ([c51d8f4](https://github.com/graasp/graasp-account/commit/c51d8f47cd0caf8a66e40d88432f219c2a985b26)) + ### Bug Fixes -- add translations for notifier profile update and creation ([#65](https://github.com/graasp/graasp-account/issues/65)) ([3db33c0](https://github.com/graasp/graasp-account/commit/3db33c03409415067edad3bab3751c55a264bd31)) -- **ar:** update ([#62](https://github.com/graasp/graasp-account/issues/62)) ([2fa7a04](https://github.com/graasp/graasp-account/commit/2fa7a0415ad7bbd7c0bd3f9a7044405ad76362eb)) -- **deps:** update dependency @emotion/react to v11.11.3 ([#60](https://github.com/graasp/graasp-account/issues/60)) ([d00ffb0](https://github.com/graasp/graasp-account/commit/d00ffb01d65dbf40ab88686c85d8eab51156bce0)) -- **deps:** update dependency @graasp/query-client to v2.2.1 ([#61](https://github.com/graasp/graasp-account/issues/61)) ([080d486](https://github.com/graasp/graasp-account/commit/080d486a49c529ef9e143e2e50abfd1782c28284)) -- **deps:** update dependency @graasp/ui to v4.0.1 ([#51](https://github.com/graasp/graasp-account/issues/51)) ([566d382](https://github.com/graasp/graasp-account/commit/566d382e37dd3c653fc90b9a0072b79426c5c67a)) -- **de:** update ([#59](https://github.com/graasp/graasp-account/issues/59)) ([597fe95](https://github.com/graasp/graasp-account/commit/597fe95cc2c2674e0599cfdc26d8aca0b3e7618d)) -- **es:** add language ([#67](https://github.com/graasp/graasp-account/issues/67)) ([72683af](https://github.com/graasp/graasp-account/commit/72683af88ddcd3cf51ac4a8cedd30e6ca3f9c7aa)) -- **fr:** update ([#58](https://github.com/graasp/graasp-account/issues/58)) ([d3ff94c](https://github.com/graasp/graasp-account/commit/d3ff94ce3c9f6df8c7d279b2cee8b9ee66b16447)) -- **it:** update ([#63](https://github.com/graasp/graasp-account/issues/63)) ([5833b00](https://github.com/graasp/graasp-account/commit/5833b00ce9c9a0728d0ae3b36cba988988dc5ada)) -- udpate release-please condition ([e1be130](https://github.com/graasp/graasp-account/commit/e1be13088779fc79a96deb87ef59472d0ce92ef9)) -- **ui:** remove IconButtons for start adornment in social links ([3db33c0](https://github.com/graasp/graasp-account/commit/3db33c03409415067edad3bab3751c55a264bd31)) +* add translations for notifier profile update and creation ([#65](https://github.com/graasp/graasp-account/issues/65)) ([3db33c0](https://github.com/graasp/graasp-account/commit/3db33c03409415067edad3bab3751c55a264bd31)) +* **ar:** update ([#62](https://github.com/graasp/graasp-account/issues/62)) ([2fa7a04](https://github.com/graasp/graasp-account/commit/2fa7a0415ad7bbd7c0bd3f9a7044405ad76362eb)) +* **deps:** update dependency @emotion/react to v11.11.3 ([#60](https://github.com/graasp/graasp-account/issues/60)) ([d00ffb0](https://github.com/graasp/graasp-account/commit/d00ffb01d65dbf40ab88686c85d8eab51156bce0)) +* **deps:** update dependency @graasp/query-client to v2.2.1 ([#61](https://github.com/graasp/graasp-account/issues/61)) ([080d486](https://github.com/graasp/graasp-account/commit/080d486a49c529ef9e143e2e50abfd1782c28284)) +* **deps:** update dependency @graasp/ui to v4.0.1 ([#51](https://github.com/graasp/graasp-account/issues/51)) ([566d382](https://github.com/graasp/graasp-account/commit/566d382e37dd3c653fc90b9a0072b79426c5c67a)) +* **de:** update ([#59](https://github.com/graasp/graasp-account/issues/59)) ([597fe95](https://github.com/graasp/graasp-account/commit/597fe95cc2c2674e0599cfdc26d8aca0b3e7618d)) +* **es:** add language ([#67](https://github.com/graasp/graasp-account/issues/67)) ([72683af](https://github.com/graasp/graasp-account/commit/72683af88ddcd3cf51ac4a8cedd30e6ca3f9c7aa)) +* **fr:** update ([#58](https://github.com/graasp/graasp-account/issues/58)) ([d3ff94c](https://github.com/graasp/graasp-account/commit/d3ff94ce3c9f6df8c7d279b2cee8b9ee66b16447)) +* **it:** update ([#63](https://github.com/graasp/graasp-account/issues/63)) ([5833b00](https://github.com/graasp/graasp-account/commit/5833b00ce9c9a0728d0ae3b36cba988988dc5ada)) +* udpate release-please condition ([e1be130](https://github.com/graasp/graasp-account/commit/e1be13088779fc79a96deb87ef59472d0ce92ef9)) +* **ui:** remove IconButtons for start adornment in social links ([3db33c0](https://github.com/graasp/graasp-account/commit/3db33c03409415067edad3bab3751c55a264bd31)) ## [2.0.2](https://github.com/graasp/graasp-account/compare/v2.0.1...v2.0.2) (2023-11-24) + ### Bug Fixes -- update workflow vars in prod ([f1aa0bc](https://github.com/graasp/graasp-account/commit/f1aa0bc608b3d791f4b26d8384237592c8c0941e)) +* update workflow vars in prod ([f1aa0bc](https://github.com/graasp/graasp-account/commit/f1aa0bc608b3d791f4b26d8384237592c8c0941e)) ## [2.0.1](https://github.com/graasp/graasp-account/compare/v2.0.0...v2.0.1) (2023-11-16) + ### Bug Fixes -- **trans:** storage translations ([#48](https://github.com/graasp/graasp-account/issues/48)) ([a6d6ba8](https://github.com/graasp/graasp-account/commit/a6d6ba87604a18bda05a01385616b0646c4d1e56)) -- update message and redirect to auth ([#46](https://github.com/graasp/graasp-account/issues/46)) ([2c8d3ef](https://github.com/graasp/graasp-account/commit/2c8d3ef50087e6b91133f841071818c72118a3a4)) -- use yarn 4, notify on password change ([#40](https://github.com/graasp/graasp-account/issues/40)) ([7fdde36](https://github.com/graasp/graasp-account/commit/7fdde36af4ec6aa44989a4062b1663628c62c037)) +* **trans:** storage translations ([#48](https://github.com/graasp/graasp-account/issues/48)) ([a6d6ba8](https://github.com/graasp/graasp-account/commit/a6d6ba87604a18bda05a01385616b0646c4d1e56)) +* update message and redirect to auth ([#46](https://github.com/graasp/graasp-account/issues/46)) ([2c8d3ef](https://github.com/graasp/graasp-account/commit/2c8d3ef50087e6b91133f841071818c72118a3a4)) +* use yarn 4, notify on password change ([#40](https://github.com/graasp/graasp-account/issues/40)) ([7fdde36](https://github.com/graasp/graasp-account/commit/7fdde36af4ec6aa44989a4062b1663628c62c037)) ## [2.0.0](https://github.com/graasp/graasp-account/compare/v1.0.0...v2.0.0) (2023-11-03) + ### ⚠ BREAKING CHANGES -- remove immutable ([#38](https://github.com/graasp/graasp-account/issues/38)) +* remove immutable ([#38](https://github.com/graasp/graasp-account/issues/38)) ### Features -- remove immutable ([#38](https://github.com/graasp/graasp-account/issues/38)) ([1064593](https://github.com/graasp/graasp-account/commit/1064593e677619ee626f0261e3c64897fd461af8)) +* remove immutable ([#38](https://github.com/graasp/graasp-account/issues/38)) ([1064593](https://github.com/graasp/graasp-account/commit/1064593e677619ee626f0261e3c64897fd461af8)) + ### Bug Fixes -- **deps:** update mui (non-major) ([#19](https://github.com/graasp/graasp-account/issues/19)) ([9f1a0b8](https://github.com/graasp/graasp-account/commit/9f1a0b89271258d9266b85ab6fdf1ea6915650ce)) -- update deps and env var ([#32](https://github.com/graasp/graasp-account/issues/32)) ([d5940f9](https://github.com/graasp/graasp-account/commit/d5940f9a96a5145127633a89aaaf241821a76239)) +* **deps:** update mui (non-major) ([#19](https://github.com/graasp/graasp-account/issues/19)) ([9f1a0b8](https://github.com/graasp/graasp-account/commit/9f1a0b89271258d9266b85ab6fdf1ea6915650ce)) +* update deps and env var ([#32](https://github.com/graasp/graasp-account/issues/32)) ([d5940f9](https://github.com/graasp/graasp-account/commit/d5940f9a96a5145127633a89aaaf241821a76239)) + ### Documentation -- update readme with gitlocalize ([aca33b7](https://github.com/graasp/graasp-account/commit/aca33b7affd4302b043b9df2031747d7cbef940c)) +* update readme with gitlocalize ([aca33b7](https://github.com/graasp/graasp-account/commit/aca33b7affd4302b043b9df2031747d7cbef940c)) ## 1.0.0 (2023-09-27) + ### Features -- add info about what storage includes ([077f997](https://github.com/graasp/graasp-account/commit/077f997bbf63f05dd65912159e7a6803a33d56fb)) -- add translation ([1eed95f](https://github.com/graasp/graasp-account/commit/1eed95fbee0331bef0bff257b1a00e6b956b37bb)) -- update member profile view ([fff2de1](https://github.com/graasp/graasp-account/commit/fff2de144ca27897b081a1d59237e4892c410024)) +* add info about what storage includes ([077f997](https://github.com/graasp/graasp-account/commit/077f997bbf63f05dd65912159e7a6803a33d56fb)) +* add translation ([1eed95f](https://github.com/graasp/graasp-account/commit/1eed95fbee0331bef0bff257b1a00e6b956b37bb)) +* update member profile view ([fff2de1](https://github.com/graasp/graasp-account/commit/fff2de144ca27897b081a1d59237e4892c410024)) \ No newline at end of file diff --git a/src/components/main/MemberPersonalInformation.tsx b/src/components/main/MemberPersonalInformation.tsx index 4548ba8a8..bafe43d05 100644 --- a/src/components/main/MemberPersonalInformation.tsx +++ b/src/components/main/MemberPersonalInformation.tsx @@ -1,6 +1,6 @@ import { Link } from 'react-router-dom'; -import { Box, Button, Grid, Typography } from '@mui/material'; +import { Button, Grid, Stack, Typography } from '@mui/material'; import { useAccountTranslation } from '@/config/i18n'; import { EDIT_MEMBER_INFO } from '@/config/paths'; @@ -10,62 +10,37 @@ import { USERNAME_DISPLAY_ID, } from '@/config/selectors'; +import MemberProfileItem from './MemberProfileItem'; +import RoundedStack from './RoundedStack'; + const MemberPersonalInformation = (): JSX.Element => { const { data: member } = hooks.useCurrentMember(); const { t } = useAccountTranslation(); return ( - - - - - {t('PERSONAL_INFORMATION_TITLE')} - - - - - - - - - - - - {t('PROFILE_MEMBER_NAME')} - - - - - {member?.name} - - - - - {t('PROFILE_EMAIL_TITLE')} - - - - - {member?.email} - - - - - {t('PASSWORD_TITLE')} - - + + + {t('PERSONAL_INFORMATION_TITLE')} + + + + + + + + - + ); }; diff --git a/src/components/main/MemberProfileItem.tsx b/src/components/main/MemberProfileItem.tsx new file mode 100644 index 000000000..ca902e88a --- /dev/null +++ b/src/components/main/MemberProfileItem.tsx @@ -0,0 +1,27 @@ +import { Grid, Typography } from '@mui/material'; + +type Props = { + title: string; + content?: string; + contentId: string; +}; +const MemberProfileItem = ({ + title, + content, + contentId, +}: Props): JSX.Element => ( + <> + + + {title} + + + + + {content} + + + +); + +export default MemberProfileItem; diff --git a/src/components/main/MemberPublicProfile.tsx b/src/components/main/MemberPublicProfile.tsx index 5aa28c3ba..b1cbad73d 100644 --- a/src/components/main/MemberPublicProfile.tsx +++ b/src/components/main/MemberPublicProfile.tsx @@ -1,9 +1,9 @@ import { Link } from 'react-router-dom'; -import FacebookIcon from '@mui/icons-material/Facebook'; -import LinkedInIcon from '@mui/icons-material/LinkedIn'; -import TwitterIcon from '@mui/icons-material/Twitter'; -import { Box, Button, Grid, Stack, Typography } from '@mui/material'; +import { Button, Stack, Typography } from '@mui/material'; + +import { Facebook, Linkedin, Twitter } from 'lucide-react'; +import SocialLinks from 'social-links'; import { useAccountTranslation } from '@/config/i18n'; import { PUBLIC_PROFILE_PATH } from '@/config/paths'; @@ -15,109 +15,67 @@ import { PUBLIC_PROFILE_TWITTER_ID, } from '@/config/selectors'; -const MemberPublicProfile = (): JSX.Element => { - const { data } = hooks.useOwnProfile(); - const { t } = useAccountTranslation(); +import MemberPublicProfileItem from './MemberPublicProfileItem'; +import RoundedStack from './RoundedStack'; - return ( - - - - {t('PUBLIC_PROFILE_TITLE')} - - - - - - - - - - - {t('PUBLIC_PROFILE_BIO')} - - {data?.bio ? ( - - {data.bio} - - ) : ( - - {t('PUBLIC_PROFILE_BIO_EMPTY_MSG')} - - )} - +const MemberPublicProfile = (): JSX.Element | null => { + const socialLinks = new SocialLinks(); - - - - - {data?.linkedinID ? ( - - {data?.linkedinID} - - ) : ( - - {t('PUBLIC_PROFILE_LINKEDIN_EMPTY_MSG')} - - )} - - - - - + const { t } = useAccountTranslation(); + const { data } = hooks.useOwnProfile(); + const publicProfile = { + bio: data?.bio, + linkedinID: data?.linkedinID, + twitterID: data?.twitterID, + facebookID: data?.facebookID, + }; - {data?.twitterID ? ( - - {data?.twitterID} - - ) : ( - - {t('PUBLIC_PROFILE_TWITTER_EMPTY_MSG')} - - )} - - - - - + const { bio, linkedinID, facebookID, twitterID } = publicProfile; + console.log(publicProfile, 'public profile'); - {data?.facebookID ? ( - - {data?.facebookID} - - ) : ( - - {t('PUBLIC_PROFILE_FACEBOOK_EMPTY_MSG')} - - )} - + return ( + + + {t('PUBLIC_PROFILE_TITLE')} + + + - + + + } + content={socialLinks.sanitize('linkedin', linkedinID)} + emptyMessage={t('PUBLIC_PROFILE_LINKEDIN_EMPTY_MSG')} + contentId={PUBLIC_PROFILE_LINKEDIN_ID} + stackDirection="row" + href={socialLinks.sanitize('linkedin', linkedinID)} + /> + } + content={socialLinks.sanitize('twitter', twitterID)} + emptyMessage={t('PUBLIC_PROFILE_TWITTER_EMPTY_MSG')} + contentId={PUBLIC_PROFILE_TWITTER_ID} + stackDirection="row" + href={socialLinks.sanitize('twitter', twitterID)} + /> + } + content={socialLinks.sanitize('facebook', facebookID)} + emptyMessage={t('PUBLIC_PROFILE_FACEBOOK_EMPTY_MSG')} + contentId={PUBLIC_PROFILE_FACEBOOK_ID} + stackDirection="row" + href={socialLinks.sanitize('facebook', facebookID)} + /> + ); }; diff --git a/src/components/main/MemberPublicProfileItem.tsx b/src/components/main/MemberPublicProfileItem.tsx new file mode 100644 index 000000000..0543bb0f0 --- /dev/null +++ b/src/components/main/MemberPublicProfileItem.tsx @@ -0,0 +1,45 @@ +import { Link } from 'react-router-dom'; + +import { Stack, StackOwnProps, Typography } from '@mui/material'; + +type Props = { + icon?: JSX.Element; + title?: string; + content?: string; + emptyMessage: string; + contentId: string; + stackDirection?: StackOwnProps['direction']; + href: string; +}; +const MemberPublicProfileItem = ({ + icon, + title, + content, + emptyMessage, + contentId, + stackDirection, + href, +}: Props): JSX.Element => ( + + {title && ( + + {title} + + )} + {icon && ( + + {icon} + + )} + {content ? ( + + {href ? {content} : content} + + ) : ( + + {emptyMessage} + + )} + +); +export default MemberPublicProfileItem; diff --git a/src/components/main/RoundedStack.tsx b/src/components/main/RoundedStack.tsx new file mode 100644 index 000000000..64f6e6e5c --- /dev/null +++ b/src/components/main/RoundedStack.tsx @@ -0,0 +1,20 @@ +import { ReactNode } from 'react'; + +import { Stack } from '@mui/material'; + +type Props = { + children: ReactNode; +}; +const RoundedStack = ({ children }: Props): JSX.Element => ( + + {children} + +); + +export default RoundedStack; diff --git a/src/langs/en.json b/src/langs/en.json index a5e99b1d9..8e3aa5abb 100644 --- a/src/langs/en.json +++ b/src/langs/en.json @@ -22,7 +22,7 @@ "PROFILE_MEMBER_ID_TITLE": "Member ID", "PROFILE_LANGUAGE_TITLE": "Language", "PROFILE_CREATED_AT_INFO": "Member Since {{date}}", - "PROFILE_CREATED_AT_TITLE": "Member Since", + "PROFILE_CREATED_AT_LABEL": "Member Since", "PROFILE_EMAIL_TITLE": "Email", "PROFILE_EMAIL_FREQUENCY_TITLE": "Email Frequency", "PROFILE_SAVE_ACTIONS_TITLE": "Enable Analytics", @@ -75,7 +75,7 @@ "DESTRUCTIVE_SETTINGS_DETAILS": "Please be aware that the actions outlined here have potentially irreversible consequences. Ensure you thoroughly review any restrictions before proceeding, and only take action once you are certain.", "USERNAME_EMPTY_ERROR": "The field cannot be empty", "USERNAME_LENGTH_ERROR": "Username must be between {{min}} and {{max}} characters long", - "EDIT_BUTTON": "Edit", + "EDIT_BUTTON_LABEL": "Edit", "UPLOAD_PICTURE_TEXT": "Upload picture", "SECURITY_TIPS_TITLE": "Security tips are available", "SECURITY_TIPS_INFORMATION": "You haven't set a password, you can set one to access your account without opening your email.", diff --git a/src/langs/fr.json b/src/langs/fr.json index e7971ebc7..ceb6e58bb 100644 --- a/src/langs/fr.json +++ b/src/langs/fr.json @@ -22,7 +22,7 @@ "PROFILE_MEMBER_ID_TITLE": "Identifiant de l'utilisateur", "PROFILE_LANGUAGE_TITLE": "Langue", "PROFILE_CREATED_AT_INFO": "Membre depuis {{date}}", - "PROFILE_CREATED_AT_TITLE": "Membre depuis", + "PROFILE_CREATED_AT_LABEL": "Membre depuis", "PROFILE_EMAIL_TITLE": "Email", "PROFILE_EMAIL_FREQUENCY_TITLE": "Fréquence d'envoi d'email", "PROFILE_SAVE_ACTIONS_TITLE": "Activer la sauvegarde des interactions", @@ -75,7 +75,7 @@ "DESTRUCTIVE_SETTINGS_DETAILS": "Veuillez noter que les opérations décrites ici ont des conséquences potentiellement irréversibles. Assurez-vous d’examiner attentivement toutes les restrictions avant de continuer avant de continuer.", "USERNAME_EMPTY_ERROR": "Le champ ne peut pas être vide", "USERNAME_LENGTH_ERROR": "Le nom d'utilisateur doit contenir entre {{min}} et {{max}} caractères", - "EDIT_BUTTON": "Modifier", + "EDIT_BUTTON_LABEL": "Modifier", "UPLOAD_PICTURE_TEXT": "Choisir photo", "SECURITY_TIPS_TITLE": "Des recommandations de sécurité sont disponibles", "SECURITY_TIPS_INFORMATION": "Vous n'avez pas défini de mot de passe, vous pouvez en définir un pour accéder à votre compte sans ouvrir votre email.", diff --git a/src/pages/EditMemberPersonalInformation.tsx b/src/pages/EditMemberPersonalInformation.tsx index 9bebd13fb..da96af31c 100644 --- a/src/pages/EditMemberPersonalInformation.tsx +++ b/src/pages/EditMemberPersonalInformation.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import FileCopyIcon from '@mui/icons-material/FileCopy'; import { Alert, diff --git a/src/pages/MemberProfileScreen.tsx b/src/pages/MemberProfileScreen.tsx index b427c5b38..6e2401650 100644 --- a/src/pages/MemberProfileScreen.tsx +++ b/src/pages/MemberProfileScreen.tsx @@ -1,4 +1,4 @@ -import { Box, Divider, Typography } from '@mui/material'; +import { Divider, Stack, Typography } from '@mui/material'; import MemberPersonalInformation from '@/components/main/MemberPersonalInformation'; import MemberPublicProfile from '@/components/main/MemberPublicProfile'; @@ -7,12 +7,14 @@ import { useAccountTranslation } from '@/config/i18n'; const MemberProfileScreen = (): JSX.Element | null => { const { t } = useAccountTranslation(); return ( - - {t('PROFILE_TITLE')} + + + {t('PROFILE_TITLE')} + - + ); }; From 4512e590e1eb66df73d70df8af2da39e72ed52b8 Mon Sep 17 00:00:00 2001 From: Mariem Date: Wed, 5 Jun 2024 14:16:47 +0200 Subject: [PATCH 09/14] fix: fix review comments --- src/components/main/MemberProfileItem.tsx | 4 +- src/components/main/MemberPublicProfile.tsx | 23 ++++----- .../main/MemberPublicProfileItem.tsx | 2 +- src/config/paths.ts | 1 + src/pages/EditMemberPersonalInformation.tsx | 11 ++++- src/pages/EditPublicProfileScreen.tsx | 47 ++++++++++++------- 6 files changed, 52 insertions(+), 36 deletions(-) diff --git a/src/components/main/MemberProfileItem.tsx b/src/components/main/MemberProfileItem.tsx index ca902e88a..5eae0d78d 100644 --- a/src/components/main/MemberProfileItem.tsx +++ b/src/components/main/MemberProfileItem.tsx @@ -11,12 +11,12 @@ const MemberProfileItem = ({ contentId, }: Props): JSX.Element => ( <> - + {title} - + {content} diff --git a/src/components/main/MemberPublicProfile.tsx b/src/components/main/MemberPublicProfile.tsx index b1cbad73d..57bdd5256 100644 --- a/src/components/main/MemberPublicProfile.tsx +++ b/src/components/main/MemberPublicProfile.tsx @@ -22,16 +22,9 @@ const MemberPublicProfile = (): JSX.Element | null => { const socialLinks = new SocialLinks(); const { t } = useAccountTranslation(); - const { data } = hooks.useOwnProfile(); - const publicProfile = { - bio: data?.bio, - linkedinID: data?.linkedinID, - twitterID: data?.twitterID, - facebookID: data?.facebookID, - }; + const { data: publicProfile } = hooks.useOwnProfile(); - const { bio, linkedinID, facebookID, twitterID } = publicProfile; - console.log(publicProfile, 'public profile'); + const { bio, linkedinID, twitterID, facebookID } = publicProfile || {}; return ( @@ -53,27 +46,27 @@ const MemberPublicProfile = (): JSX.Element | null => { /> } - content={socialLinks.sanitize('linkedin', linkedinID)} + content={linkedinID ? socialLinks.sanitize('linkedin', linkedinID) : ''} emptyMessage={t('PUBLIC_PROFILE_LINKEDIN_EMPTY_MSG')} contentId={PUBLIC_PROFILE_LINKEDIN_ID} stackDirection="row" - href={socialLinks.sanitize('linkedin', linkedinID)} + href={linkedinID ? socialLinks.sanitize('linkedin', linkedinID) : ''} /> } - content={socialLinks.sanitize('twitter', twitterID)} + content={twitterID ? socialLinks.sanitize('twitter', twitterID) : ''} emptyMessage={t('PUBLIC_PROFILE_TWITTER_EMPTY_MSG')} contentId={PUBLIC_PROFILE_TWITTER_ID} stackDirection="row" - href={socialLinks.sanitize('twitter', twitterID)} + href={twitterID ? socialLinks.sanitize('twitter', twitterID) : ''} /> } - content={socialLinks.sanitize('facebook', facebookID)} + content={facebookID ? socialLinks.sanitize('facebook', facebookID) : ''} emptyMessage={t('PUBLIC_PROFILE_FACEBOOK_EMPTY_MSG')} contentId={PUBLIC_PROFILE_FACEBOOK_ID} stackDirection="row" - href={socialLinks.sanitize('facebook', facebookID)} + href={facebookID ? socialLinks.sanitize('facebook', facebookID) : ''} /> ); diff --git a/src/components/main/MemberPublicProfileItem.tsx b/src/components/main/MemberPublicProfileItem.tsx index 0543bb0f0..31f3c8953 100644 --- a/src/components/main/MemberPublicProfileItem.tsx +++ b/src/components/main/MemberPublicProfileItem.tsx @@ -36,7 +36,7 @@ const MemberPublicProfileItem = ({ {href ? {content} : content} ) : ( - + {emptyMessage} )} diff --git a/src/config/paths.ts b/src/config/paths.ts index 3adf79cb6..27f021a4f 100644 --- a/src/config/paths.ts +++ b/src/config/paths.ts @@ -7,4 +7,5 @@ export const PAYMENT_CONFIRM_PATH = '/payment/confirm'; export const PASSWORD_SETTINGS_PATH = '/password'; export const PUBLIC_PROFILE_PATH = '/public-profile'; export const MANAGE_ACCOUNT_PATH = '/manage'; +// temporary route export const EDIT_MEMBER_INFO = '/edit-info'; diff --git a/src/pages/EditMemberPersonalInformation.tsx b/src/pages/EditMemberPersonalInformation.tsx index da96af31c..0852c2b19 100644 --- a/src/pages/EditMemberPersonalInformation.tsx +++ b/src/pages/EditMemberPersonalInformation.tsx @@ -1,7 +1,10 @@ +import { Link } from 'react-router-dom'; + import FileCopyIcon from '@mui/icons-material/FileCopy'; import { Alert, Box, + Button, Grid, IconButton, Stack, @@ -20,6 +23,7 @@ import UsernameForm from '@/components/main/UsernameForm'; import { DEFAULT_EMAIL_FREQUENCY } from '@/config/constants'; import { useAccountTranslation } from '@/config/i18n'; import notifier from '@/config/notifier'; +import { PROFILE_PATH } from '@/config/paths'; import { hooks, mutations } from '@/config/queryClient'; import { MEMBER_PROFILE_ANALYTICS_SWITCH_ID, @@ -92,7 +96,7 @@ const EditMemberPersonalInformation = (): JSX.Element | null => { - {t('PROFILE_CREATED_AT_TITLE')} + {t('PROFILE_CREATED_AT_LABEL')} @@ -138,6 +142,11 @@ const EditMemberPersonalInformation = (): JSX.Element | null => { + + + + + ); diff --git a/src/pages/EditPublicProfileScreen.tsx b/src/pages/EditPublicProfileScreen.tsx index a69e30205..8b31039e1 100644 --- a/src/pages/EditPublicProfileScreen.tsx +++ b/src/pages/EditPublicProfileScreen.tsx @@ -1,10 +1,18 @@ import React, { FormEvent, useEffect, useMemo, useState } from 'react'; +import { Link } from 'react-router-dom'; import FacebookIcon from '@mui/icons-material/Facebook'; import LinkedInIcon from '@mui/icons-material/LinkedIn'; import TwitterIcon from '@mui/icons-material/Twitter'; import { LoadingButton } from '@mui/lab'; -import { Box, Checkbox, FormControlLabel, Typography } from '@mui/material'; +import { + Box, + Button, + Checkbox, + FormControlLabel, + Stack, + Typography, +} from '@mui/material'; import { Config, SocialLinks } from 'social-links'; @@ -16,6 +24,7 @@ import { } from '@/config/constants'; import { GRAASP_LIBRARY_HOST } from '@/config/env'; import { useAccountTranslation } from '@/config/i18n'; +import { PROFILE_PATH } from '@/config/paths'; import { hooks, mutations } from '@/config/queryClient'; const config: Config = { @@ -220,23 +229,27 @@ const EditPublicProfileScreen = (): JSX.Element => { } label={t('PUBLIC_PROFILE_VISIBILITY')} /> + + + + - - {t('PUBLIC_PROFILE_SUBMIT_TEXT')} - + + {t('PUBLIC_PROFILE_SUBMIT_TEXT')} + + From 96b49933300e244124da19366cc206305583a78e Mon Sep 17 00:00:00 2001 From: Mariem Date: Thu, 6 Jun 2024 14:39:54 +0200 Subject: [PATCH 10/14] fix: apply review comments and refactor code --- .../{main => common}/RoundedStack.tsx | 0 .../DisplayingMemberPublicProfileLinks.tsx | 27 +++++ .../main/MemberPersonalInformation.tsx | 41 +++---- src/components/main/MemberProfileItem.tsx | 22 ++-- src/components/main/MemberPublicProfile.tsx | 103 +++++++++++------- .../main/MemberPublicProfileItem.tsx | 45 -------- src/config/selectors.ts | 1 + src/langs/en.json | 1 + src/langs/fr.json | 1 + src/pages/EditMemberPersonalInformation.tsx | 6 +- src/pages/EditPublicProfileScreen.tsx | 6 +- src/pages/MemberProfileScreen.tsx | 22 ++-- 12 files changed, 141 insertions(+), 134 deletions(-) rename src/components/{main => common}/RoundedStack.tsx (100%) create mode 100644 src/components/main/DisplayingMemberPublicProfileLinks.tsx delete mode 100644 src/components/main/MemberPublicProfileItem.tsx diff --git a/src/components/main/RoundedStack.tsx b/src/components/common/RoundedStack.tsx similarity index 100% rename from src/components/main/RoundedStack.tsx rename to src/components/common/RoundedStack.tsx diff --git a/src/components/main/DisplayingMemberPublicProfileLinks.tsx b/src/components/main/DisplayingMemberPublicProfileLinks.tsx new file mode 100644 index 000000000..c18c22b58 --- /dev/null +++ b/src/components/main/DisplayingMemberPublicProfileLinks.tsx @@ -0,0 +1,27 @@ +import { Link } from 'react-router-dom'; + +import { Stack, Typography } from '@mui/material'; + +type Props = { + icon?: JSX.Element; + contentId: string; + content?: string; + href?: string; +}; +const DisplayingMemberPublicProfileLinks = ({ + icon, + contentId, + content, + href, +}: Props): JSX.Element => ( + + + {icon} + + + + {href ? {content} : content} + + +); +export default DisplayingMemberPublicProfileLinks; diff --git a/src/components/main/MemberPersonalInformation.tsx b/src/components/main/MemberPersonalInformation.tsx index bafe43d05..19bdb33b2 100644 --- a/src/components/main/MemberPersonalInformation.tsx +++ b/src/components/main/MemberPersonalInformation.tsx @@ -1,17 +1,18 @@ import { Link } from 'react-router-dom'; -import { Button, Grid, Stack, Typography } from '@mui/material'; +import { Button, Stack, Typography } from '@mui/material'; import { useAccountTranslation } from '@/config/i18n'; import { EDIT_MEMBER_INFO } from '@/config/paths'; import { hooks } from '@/config/queryClient'; import { MEMBER_PROFILE_EMAIL_ID, + PASSWORD_DISPLAY_ID, USERNAME_DISPLAY_ID, } from '@/config/selectors'; +import RoundedStack from '../common/RoundedStack'; import MemberProfileItem from './MemberProfileItem'; -import RoundedStack from './RoundedStack'; const MemberPersonalInformation = (): JSX.Element => { const { data: member } = hooks.useCurrentMember(); @@ -21,25 +22,25 @@ const MemberPersonalInformation = (): JSX.Element => { {t('PERSONAL_INFORMATION_TITLE')} - - - + - - - - - + + + + ); }; diff --git a/src/components/main/MemberProfileItem.tsx b/src/components/main/MemberProfileItem.tsx index 5eae0d78d..6be331fd2 100644 --- a/src/components/main/MemberProfileItem.tsx +++ b/src/components/main/MemberProfileItem.tsx @@ -1,4 +1,4 @@ -import { Grid, Typography } from '@mui/material'; +import { Stack, Typography } from '@mui/material'; type Props = { title: string; @@ -10,18 +10,14 @@ const MemberProfileItem = ({ content, contentId, }: Props): JSX.Element => ( - <> - - - {title} - - - - - {content} - - - + + + {title} + + + {content} + + ); export default MemberProfileItem; diff --git a/src/components/main/MemberPublicProfile.tsx b/src/components/main/MemberPublicProfile.tsx index 57bdd5256..a626c1a3a 100644 --- a/src/components/main/MemberPublicProfile.tsx +++ b/src/components/main/MemberPublicProfile.tsx @@ -1,8 +1,10 @@ import { Link } from 'react-router-dom'; +import FacebookIcon from '@mui/icons-material/Facebook'; +import LinkedInIcon from '@mui/icons-material/LinkedIn'; +import TwitterIcon from '@mui/icons-material/Twitter'; import { Button, Stack, Typography } from '@mui/material'; -import { Facebook, Linkedin, Twitter } from 'lucide-react'; import SocialLinks from 'social-links'; import { useAccountTranslation } from '@/config/i18n'; @@ -15,10 +17,10 @@ import { PUBLIC_PROFILE_TWITTER_ID, } from '@/config/selectors'; -import MemberPublicProfileItem from './MemberPublicProfileItem'; -import RoundedStack from './RoundedStack'; +import RoundedStack from '../common/RoundedStack'; +import DisplayingMemberPublicProfileLinks from './DisplayingMemberPublicProfileLinks'; -const MemberPublicProfile = (): JSX.Element | null => { +const MemberPublicProfile = (): JSX.Element => { const socialLinks = new SocialLinks(); const { t } = useAccountTranslation(); @@ -30,44 +32,65 @@ const MemberPublicProfile = (): JSX.Element | null => { {t('PUBLIC_PROFILE_TITLE')} - - - + + + {t('PUBLIC_PROFILE_BIO')} + + {bio ? ( + + {bio} + + ) : ( + + {t('PUBLIC_PROFILE_BIO_EMPTY_MSG')} + + )} + {linkedinID ? ( + } + contentId={PUBLIC_PROFILE_LINKEDIN_ID} + href={socialLinks.sanitize('linkedin', linkedinID)} + content={linkedinID} + /> + ) : ( + } + contentId={PUBLIC_PROFILE_LINKEDIN_ID} + content={t('PUBLIC_PROFILE_LINKEDIN_EMPTY_MSG')} + /> + )} - - } - content={linkedinID ? socialLinks.sanitize('linkedin', linkedinID) : ''} - emptyMessage={t('PUBLIC_PROFILE_LINKEDIN_EMPTY_MSG')} - contentId={PUBLIC_PROFILE_LINKEDIN_ID} - stackDirection="row" - href={linkedinID ? socialLinks.sanitize('linkedin', linkedinID) : ''} - /> - } - content={twitterID ? socialLinks.sanitize('twitter', twitterID) : ''} - emptyMessage={t('PUBLIC_PROFILE_TWITTER_EMPTY_MSG')} - contentId={PUBLIC_PROFILE_TWITTER_ID} - stackDirection="row" - href={twitterID ? socialLinks.sanitize('twitter', twitterID) : ''} - /> - } - content={facebookID ? socialLinks.sanitize('facebook', facebookID) : ''} - emptyMessage={t('PUBLIC_PROFILE_FACEBOOK_EMPTY_MSG')} - contentId={PUBLIC_PROFILE_FACEBOOK_ID} - stackDirection="row" - href={facebookID ? socialLinks.sanitize('facebook', facebookID) : ''} - /> + {twitterID ? ( + } + contentId={PUBLIC_PROFILE_TWITTER_ID} + href={socialLinks.sanitize('linkedin', twitterID)} + content={twitterID} + /> + ) : ( + } + contentId={PUBLIC_PROFILE_TWITTER_ID} + content={t('PUBLIC_PROFILE_TWITTER_EMPTY_MSG')} + /> + )} + {facebookID ? ( + } + contentId={PUBLIC_PROFILE_FACEBOOK_ID} + href={socialLinks.sanitize('linkedin', facebookID)} + content={facebookID} + /> + ) : ( + } + contentId={PUBLIC_PROFILE_FACEBOOK_ID} + content={t('PUBLIC_PROFILE_FACEBOOK_EMPTY_MSG')} + /> + )} ); }; diff --git a/src/components/main/MemberPublicProfileItem.tsx b/src/components/main/MemberPublicProfileItem.tsx deleted file mode 100644 index 31f3c8953..000000000 --- a/src/components/main/MemberPublicProfileItem.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Link } from 'react-router-dom'; - -import { Stack, StackOwnProps, Typography } from '@mui/material'; - -type Props = { - icon?: JSX.Element; - title?: string; - content?: string; - emptyMessage: string; - contentId: string; - stackDirection?: StackOwnProps['direction']; - href: string; -}; -const MemberPublicProfileItem = ({ - icon, - title, - content, - emptyMessage, - contentId, - stackDirection, - href, -}: Props): JSX.Element => ( - - {title && ( - - {title} - - )} - {icon && ( - - {icon} - - )} - {content ? ( - - {href ? {content} : content} - - ) : ( - - {emptyMessage} - - )} - -); -export default MemberPublicProfileItem; diff --git a/src/config/selectors.ts b/src/config/selectors.ts index 07e5cd2e3..d5fb8f502 100644 --- a/src/config/selectors.ts +++ b/src/config/selectors.ts @@ -43,3 +43,4 @@ export const PUBLIC_PROFILE_BIO_ID = 'publicProfileBioId'; export const PUBLIC_PROFILE_LINKEDIN_ID = 'publicProfileLinkedInId'; export const PUBLIC_PROFILE_TWITTER_ID = 'publicProfileTwitterId'; export const PUBLIC_PROFILE_FACEBOOK_ID = 'publicProfileFacebookId'; +export const PASSWORD_DISPLAY_ID = 'passwordDisplayId'; diff --git a/src/langs/en.json b/src/langs/en.json index 8e3aa5abb..05e4986ee 100644 --- a/src/langs/en.json +++ b/src/langs/en.json @@ -8,6 +8,7 @@ "CROP_IMAGE_MODAL_UNEXPECTED_ERROR": "An unexpected error occurred when trying to crop the image, please try again later", "CONFIRM_BUTTON": "Confirm", "CANCEL_BUTTON": "Cancel", + "CLOSE_BUTTON": "Close", "MAIN_MENU_HOME_PAGE": "Home", "MAIN_MENU_PROFILE": "Profile", "MAIN_MENU_AVATAR": "Avatar", diff --git a/src/langs/fr.json b/src/langs/fr.json index ceb6e58bb..5c6f8d494 100644 --- a/src/langs/fr.json +++ b/src/langs/fr.json @@ -8,6 +8,7 @@ "CROP_IMAGE_MODAL_UNEXPECTED_ERROR": "Une erreur inattendue s'est produite lors de la tentative de recadrage de l'image. Veuillez réessayer plus tard.", "CONFIRM_BUTTON": "Confirmer", "CANCEL_BUTTON": "Annuler", + "CLOSE_BUTTON": "Fermer", "MAIN_MENU_HOME_PAGE": "Accueil", "MAIN_MENU_PROFILE": "Profil", "MAIN_MENU_AVATAR": "Avatar", diff --git a/src/pages/EditMemberPersonalInformation.tsx b/src/pages/EditMemberPersonalInformation.tsx index 0852c2b19..e7c2e7df9 100644 --- a/src/pages/EditMemberPersonalInformation.tsx +++ b/src/pages/EditMemberPersonalInformation.tsx @@ -143,9 +143,9 @@ const EditMemberPersonalInformation = (): JSX.Element | null => { - - - + diff --git a/src/pages/EditPublicProfileScreen.tsx b/src/pages/EditPublicProfileScreen.tsx index 8b31039e1..6929424b8 100644 --- a/src/pages/EditPublicProfileScreen.tsx +++ b/src/pages/EditPublicProfileScreen.tsx @@ -230,9 +230,9 @@ const EditPublicProfileScreen = (): JSX.Element => { label={t('PUBLIC_PROFILE_VISIBILITY')} /> - - - + { +const MemberProfileScreen = (): JSX.Element => { const { t } = useAccountTranslation(); return ( - - - {t('PROFILE_TITLE')} - - - - - + + + + {t('PROFILE_TITLE')} + + + + + + ); }; From 9d06230fa53f4ade6b5da35c76e65aacb4fe89a7 Mon Sep 17 00:00:00 2001 From: Mariem Date: Fri, 7 Jun 2024 10:25:23 +0200 Subject: [PATCH 11/14] fix: update empty message texts for the social media profiles --- src/components/main/MemberPublicProfile.tsx | 14 +++++--------- src/langs/en.json | 8 ++++---- src/langs/fr.json | 8 ++++---- src/pages/MemberProfileScreen.tsx | 2 +- 4 files changed, 14 insertions(+), 18 deletions(-) diff --git a/src/components/main/MemberPublicProfile.tsx b/src/components/main/MemberPublicProfile.tsx index a626c1a3a..06e968eee 100644 --- a/src/components/main/MemberPublicProfile.tsx +++ b/src/components/main/MemberPublicProfile.tsx @@ -36,18 +36,14 @@ const MemberPublicProfile = (): JSX.Element => { {t('EDIT_BUTTON_LABEL')} + {t('PUBLIC_PROFILE_BIO')} - {bio ? ( - - {bio} - - ) : ( - - {t('PUBLIC_PROFILE_BIO_EMPTY_MSG')} - - )} + + {bio || t('PUBLIC_PROFILE_BIO_EMPTY_MSG')} + + {linkedinID ? ( } diff --git a/src/langs/en.json b/src/langs/en.json index 05e4986ee..c504d3bd4 100644 --- a/src/langs/en.json +++ b/src/langs/en.json @@ -51,16 +51,16 @@ "PUBLIC_PROFILE_DESCRIPTION": "Personalize your public profile to let other users interested in your work know a bit more about you. You can make it private anytime.", "PUBLIC_PROFILE_LINKEDIN_LINK": "LinkedIn ID", "PUBLIC_PROFILE_LINKEDIN_LINK_ERROR_MSG": "LinkedIn Link is not a valid url", - "PUBLIC_PROFILE_LINKEDIN_EMPTY_MSG": "No LinkedIn ID available", + "PUBLIC_PROFILE_LINKEDIN_EMPTY_MSG": "No LinkedIn username has been specified", "PUBLIC_PROFILE_TWITTER_LINK": "Twitter ID", "PUBLIC_PROFILE_TWITTER_LINK_ERROR_MSG": "Twitter Link is not a valid url", - "PUBLIC_PROFILE_TWITTER_EMPTY_MSG": "No Twitter ID available", + "PUBLIC_PROFILE_TWITTER_EMPTY_MSG": "No Twitter username has been specified", "PUBLIC_PROFILE_FACEBOOK_LINK": "Facebook ID", "PUBLIC_PROFILE_FACEBOOK_LINK_ERROR_MSG": "facebook Link is not a valid url", - "PUBLIC_PROFILE_FACEBOOK_EMPTY_MSG": "No Facebook ID available", + "PUBLIC_PROFILE_FACEBOOK_EMPTY_MSG": "No Facebook username has been specified", "PUBLIC_PROFILE_BIO": "Bio", "PUBLIC_PROFILE_BIO_ERROR_MSG": "Bio is a required field", - "PUBLIC_PROFILE_BIO_EMPTY_MSG": "No Bio available", + "PUBLIC_PROFILE_BIO_EMPTY_MSG": "No biography has been specified", "PUBLIC_PROFILE_VISIBILITY": "Make this profile public", "PUBLIC_PROFILE_SUBMIT_TEXT": "Save Changes", "PUBLIC_PROFILE_CHECK_TEXT": "Check Profile", diff --git a/src/langs/fr.json b/src/langs/fr.json index 5c6f8d494..b31c9ac5b 100644 --- a/src/langs/fr.json +++ b/src/langs/fr.json @@ -51,16 +51,16 @@ "PUBLIC_PROFILE_DESCRIPTION": "Personnalisez votre profil public pour permettre aux autres utilisateurs intéressés par votre travail d'en savoir un peu plus sur vous. Vous pouvez le rendre privé à tout moment.", "PUBLIC_PROFILE_LINKEDIN_LINK": "Identifiant LinkedIn", "PUBLIC_PROFILE_LINKEDIN_LINK_ERROR_MSG": "Le lien LinkedIn n'est pas valide", - "PUBLIC_PROFILE_LINKEDIN_EMPTY_MSG": "Aucun identifiant LinkedIn disponible", + "PUBLIC_PROFILE_LINKEDIN_EMPTY_MSG": "Aucun nom d'utilisateur LinkedIn n'a été spécifié", "PUBLIC_PROFILE_TWITTER_LINK": "Identifiant Twitter", "PUBLIC_PROFILE_TWITTER_LINK_ERROR_MSG": "Le lien Twitter n'est pas valide", - "PUBLIC_PROFILE_TWITTER_EMPTY_MSG": "Aucun identifiant Twitter disponible", + "PUBLIC_PROFILE_TWITTER_EMPTY_MSG": "Aucun nom d'utilisateur Twitter n'a été spécifié", "PUBLIC_PROFILE_FACEBOOK_LINK": "Identifiant Facebook", "PUBLIC_PROFILE_FACEBOOK_LINK_ERROR_MSG": "Le lien Facebook n'est pas valide", - "PUBLIC_PROFILE_FACEBOOK_EMPTY_MSG": "Aucun identifiant Facebook disponible", + "PUBLIC_PROFILE_FACEBOOK_EMPTY_MSG": "Aucun nom d'utilisateur Facebook n'a été spécifié", "PUBLIC_PROFILE_BIO": "Biographie", "PUBLIC_PROFILE_BIO_ERROR_MSG": "Biographie est un champ obligatoire", - "PUBLIC_PROFILE_BIO_EMPTY_MSG": "Aucun biographie disponible", + "PUBLIC_PROFILE_BIO_EMPTY_MSG": "Aucune biographie n'a été spécifiée", "PUBLIC_PROFILE_VISIBILITY": "Rendre public ce profil", "PUBLIC_PROFILE_SUBMIT_TEXT": "Sauvegarder les modifications", "PUBLIC_PROFILE_CHECK_TEXT": "Voir le profil", diff --git a/src/pages/MemberProfileScreen.tsx b/src/pages/MemberProfileScreen.tsx index 8516f2d68..59a3404bb 100644 --- a/src/pages/MemberProfileScreen.tsx +++ b/src/pages/MemberProfileScreen.tsx @@ -7,7 +7,7 @@ import { useAccountTranslation } from '@/config/i18n'; const MemberProfileScreen = (): JSX.Element => { const { t } = useAccountTranslation(); return ( - + {t('PROFILE_TITLE')} From 1c5d4d13141ebb4463a4f66222188709c07abeaf Mon Sep 17 00:00:00 2001 From: Mariem Date: Fri, 7 Jun 2024 10:32:45 +0200 Subject: [PATCH 12/14] fix: update empty message texts for social media profiles in test file --- cypress/e2e/memberProfile.cy.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/cypress/e2e/memberProfile.cy.ts b/cypress/e2e/memberProfile.cy.ts index 1133c3b2b..49e794708 100644 --- a/cypress/e2e/memberProfile.cy.ts +++ b/cypress/e2e/memberProfile.cy.ts @@ -69,24 +69,27 @@ describe('Check empty member public profile info', () => { it('displays the correct public profile info when profile is empty', () => { // displays a message indicating no bio is available - cy.get(`#${PUBLIC_PROFILE_BIO_ID}`).should('contain', 'No Bio available'); + cy.get(`#${PUBLIC_PROFILE_BIO_ID}`).should( + 'contain', + 'No biography has been specified', + ); // displays a message indicating no LinkedIn ID is available cy.get(`#${PUBLIC_PROFILE_LINKEDIN_ID}`).should( 'contain', - 'No LinkedIn ID available', + 'No LinkedIn username has been specified', ); // displays a message indicating no Twitter ID is available cy.get(`#${PUBLIC_PROFILE_TWITTER_ID}`).should( 'contain', - 'No Twitter ID available', + 'No Twitter username has been specified', ); // displays a message indicating no Facebook ID is available cy.get(`#${PUBLIC_PROFILE_FACEBOOK_ID}`).should( 'contain', - 'No Facebook ID available', + 'No Facebook username has been specified', ); }); }); From 1594370d1a25d708a680bcd376d05ed4fea24760 Mon Sep 17 00:00:00 2001 From: Mariem Date: Fri, 7 Jun 2024 13:40:08 +0200 Subject: [PATCH 13/14] fix: add tests for the social media links --- cypress/e2e/memberProfile.cy.ts | 33 +++++++++++++++++++ .../DisplayingMemberPublicProfileLinks.tsx | 10 +++++- src/components/main/MemberPublicProfile.tsx | 10 ++++-- src/config/selectors.ts | 7 ++++ 4 files changed, 57 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/memberProfile.cy.ts b/cypress/e2e/memberProfile.cy.ts index 49e794708..e4299ff65 100644 --- a/cypress/e2e/memberProfile.cy.ts +++ b/cypress/e2e/memberProfile.cy.ts @@ -2,8 +2,11 @@ import { PROFILE_PATH } from '@/config/paths'; import { MEMBER_PROFILE_EMAIL_ID, PUBLIC_PROFILE_BIO_ID, + PUBLIC_PROFILE_FACEBOOK_HREF_ID, PUBLIC_PROFILE_FACEBOOK_ID, + PUBLIC_PROFILE_LINKEDIN_HREF_ID, PUBLIC_PROFILE_LINKEDIN_ID, + PUBLIC_PROFILE_TWITTER_HREF_ID, PUBLIC_PROFILE_TWITTER_ID, USERNAME_DISPLAY_ID, } from '@/config/selectors'; @@ -38,22 +41,52 @@ describe('Check member info', () => { 'contain', MEMBER_PUBLIC_PROFILE.bio, ); + // displays the correct member linkedin cy.get(`#${PUBLIC_PROFILE_LINKEDIN_ID}`).should( 'contain', MEMBER_PUBLIC_PROFILE.linkedinID, ); + // displays the correct member twitter cy.get(`#${PUBLIC_PROFILE_TWITTER_ID}`).should( 'contain', MEMBER_PUBLIC_PROFILE.twitterID, ); + // displays the correct member facebook cy.get(`#${PUBLIC_PROFILE_FACEBOOK_ID}`).should( 'contain', MEMBER_PUBLIC_PROFILE.facebookID, ); }); + it('the social media links are correct', () => { + // displays the correct bio + cy.get(`#${PUBLIC_PROFILE_BIO_ID}`).should( + 'contain', + MEMBER_PUBLIC_PROFILE.bio, + ); + + // displays the correct member linkedin + cy.get(`#${PUBLIC_PROFILE_LINKEDIN_HREF_ID}`).should( + 'have.attr', + 'href', + `https://linkedin.com/in/${MEMBER_PUBLIC_PROFILE.linkedinID}`, + ); + + // displays the correct member twitter + cy.get(`#${PUBLIC_PROFILE_TWITTER_HREF_ID}`).should( + 'have.attr', + 'href', + `https://twitter.com/${MEMBER_PUBLIC_PROFILE.twitterID}`, + ); + // displays the correct member facebook + cy.get(`#${PUBLIC_PROFILE_FACEBOOK_HREF_ID}`).should( + 'have.attr', + 'href', + `https://facebook.com/${MEMBER_PUBLIC_PROFILE.facebookID}`, + ); + }); }); describe('Check empty member public profile info', () => { diff --git a/src/components/main/DisplayingMemberPublicProfileLinks.tsx b/src/components/main/DisplayingMemberPublicProfileLinks.tsx index c18c22b58..df1372a5d 100644 --- a/src/components/main/DisplayingMemberPublicProfileLinks.tsx +++ b/src/components/main/DisplayingMemberPublicProfileLinks.tsx @@ -7,12 +7,14 @@ type Props = { contentId: string; content?: string; href?: string; + hrefId?: string; }; const DisplayingMemberPublicProfileLinks = ({ icon, contentId, content, href, + hrefId, }: Props): JSX.Element => ( @@ -20,7 +22,13 @@ const DisplayingMemberPublicProfileLinks = ({ - {href ? {content} : content} + {href ? ( + + {content} + + ) : ( + content + )} ); diff --git a/src/components/main/MemberPublicProfile.tsx b/src/components/main/MemberPublicProfile.tsx index 06e968eee..4f79f5cac 100644 --- a/src/components/main/MemberPublicProfile.tsx +++ b/src/components/main/MemberPublicProfile.tsx @@ -12,8 +12,11 @@ import { PUBLIC_PROFILE_PATH } from '@/config/paths'; import { hooks } from '@/config/queryClient'; import { PUBLIC_PROFILE_BIO_ID, + PUBLIC_PROFILE_FACEBOOK_HREF_ID, PUBLIC_PROFILE_FACEBOOK_ID, + PUBLIC_PROFILE_LINKEDIN_HREF_ID, PUBLIC_PROFILE_LINKEDIN_ID, + PUBLIC_PROFILE_TWITTER_HREF_ID, PUBLIC_PROFILE_TWITTER_ID, } from '@/config/selectors'; @@ -50,6 +53,7 @@ const MemberPublicProfile = (): JSX.Element => { contentId={PUBLIC_PROFILE_LINKEDIN_ID} href={socialLinks.sanitize('linkedin', linkedinID)} content={linkedinID} + hrefId={PUBLIC_PROFILE_LINKEDIN_HREF_ID} /> ) : ( { } contentId={PUBLIC_PROFILE_TWITTER_ID} - href={socialLinks.sanitize('linkedin', twitterID)} + href={socialLinks.sanitize('twitter', twitterID)} content={twitterID} + hrefId={PUBLIC_PROFILE_TWITTER_HREF_ID} /> ) : ( { } contentId={PUBLIC_PROFILE_FACEBOOK_ID} - href={socialLinks.sanitize('linkedin', facebookID)} + href={socialLinks.sanitize('facebook', facebookID)} content={facebookID} + hrefId={PUBLIC_PROFILE_FACEBOOK_HREF_ID} /> ) : ( `[data-cy="${dataCy}"]`; export const PUBLIC_PROFILE_BIO_ID = 'publicProfileBioId'; + export const PUBLIC_PROFILE_LINKEDIN_ID = 'publicProfileLinkedInId'; +export const PUBLIC_PROFILE_LINKEDIN_HREF_ID = 'publicProfileLinkedInHrefId'; + export const PUBLIC_PROFILE_TWITTER_ID = 'publicProfileTwitterId'; +export const PUBLIC_PROFILE_TWITTER_HREF_ID = 'publicProfileTwitterHrefId'; + export const PUBLIC_PROFILE_FACEBOOK_ID = 'publicProfileFacebookId'; +export const PUBLIC_PROFILE_FACEBOOK_HREF_ID = 'publicProfileFacebookHrefId'; + export const PASSWORD_DISPLAY_ID = 'passwordDisplayId'; From ff080f99808a4fbd036495b11e7a9504be6b1cd3 Mon Sep 17 00:00:00 2001 From: Mariem Date: Fri, 7 Jun 2024 13:47:43 +0200 Subject: [PATCH 14/14] fix: update test for social media links --- cypress/e2e/memberProfile.cy.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/cypress/e2e/memberProfile.cy.ts b/cypress/e2e/memberProfile.cy.ts index e4299ff65..9f8617afa 100644 --- a/cypress/e2e/memberProfile.cy.ts +++ b/cypress/e2e/memberProfile.cy.ts @@ -61,26 +61,20 @@ describe('Check member info', () => { ); }); it('the social media links are correct', () => { - // displays the correct bio - cy.get(`#${PUBLIC_PROFILE_BIO_ID}`).should( - 'contain', - MEMBER_PUBLIC_PROFILE.bio, - ); - - // displays the correct member linkedin + // displays the correct member linkedin link cy.get(`#${PUBLIC_PROFILE_LINKEDIN_HREF_ID}`).should( 'have.attr', 'href', `https://linkedin.com/in/${MEMBER_PUBLIC_PROFILE.linkedinID}`, ); - // displays the correct member twitter + // displays the correct member twitter link cy.get(`#${PUBLIC_PROFILE_TWITTER_HREF_ID}`).should( 'have.attr', 'href', `https://twitter.com/${MEMBER_PUBLIC_PROFILE.twitterID}`, ); - // displays the correct member facebook + // displays the correct member facebook link cy.get(`#${PUBLIC_PROFILE_FACEBOOK_HREF_ID}`).should( 'have.attr', 'href',