feat: create read only profile page

CHANGELOG.md

@@ -250,4 +250,4 @@
 
 * 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))
+* update member profile view ([fff2de1](https://github.com/graasp/graasp-account/commit/fff2de144ca27897b081a1d59237e4892c410024))

cypress/e2e/profile.cy.ts → 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');
   });
 

cypress/e2e/memberProfile.cy.ts

@@ -0,0 +1,95 @@
+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,
+  MEMBER_EMPTY_PUBLIC_PROFILE,
+  MEMBER_PUBLIC_PROFILE,
+} from '../fixtures/members';
+
+describe('Check member info', () => {
+  beforeEach(() => {
+    cy.setUpApi({
+      currentMember: BOB,
+      currentProfile: MEMBER_PUBLIC_PROFILE,
+    });
+    cy.visit(PROFILE_PATH);
+    cy.wait('@getCurrentMember');
+    cy.wait('@getOwnProfile');
+  });
+
+  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);
+  });
+
+  it('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,
+    );
+  });
+});
+
+describe('Check empty member public profile info', () => {
+  beforeEach(() => {
+    cy.setUpApi({
+      currentMember: BOB,
+      currentProfile: MEMBER_EMPTY_PUBLIC_PROFILE,
+    });
+    cy.visit(PROFILE_PATH);
+    cy.wait('@getCurrentMember');
+    cy.wait('@getOwnProfile');
+  });
+
+  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 biography has been specified',
+    );
+
+    // displays a message indicating no LinkedIn ID is available
+    cy.get(`#${PUBLIC_PROFILE_LINKEDIN_ID}`).should(
+      'contain',
+      '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 username has been specified',
+    );
+
+    // displays a message indicating no Facebook ID is available
+    cy.get(`#${PUBLIC_PROFILE_FACEBOOK_ID}`).should(
+      'contain',
+      'No Facebook username has been specified',
+    );
+  });
+});

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';
@@ -9,6 +9,7 @@ export const BOB = MemberFactory({
   name: 'BOB',
   email: '[email protected]',
   createdAt: '2021-04-13 14:56:34.749946',
+  extra: { lang: 'en', hasAvatar: true },
 });
 export const MEMBERS: {
   [name: string]: Member & {
@@ -40,3 +41,26 @@ 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,
+};
+export const MEMBER_EMPTY_PUBLIC_PROFILE: PublicProfile = {
+  id: 'ecafbd2a-5642-31fb-ae93-0242ac130004',
+  member: BOB,
+  bio: '',
+  twitterID: '',
+  facebookID: '',
+  linkedinID: '',
+  createdAt: '2021-04-13 14:56:34.749946',
+  updatedAt: '2021-04-13 14:56:34.749946',
+  visibility: false,
+};

cypress/support/commands.ts

@@ -1,12 +1,17 @@
 /// <reference types="cypress" />
 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,21 +23,24 @@ Cypress.Commands.add(
   ({
     members = Object.values(MEMBERS),
     currentMember = CURRENT_MEMBER,
+    currentProfile = MEMBER_PUBLIC_PROFILE,
     getCurrentMemberError = false,
+    getCurrentProfileError = false,
     editMemberError = false,
     getAvatarUrlError = false,
     postAvatarError = false,
     updatePasswordError = false,
   } = {}) => {
     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();
 

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,26 @@ export const redirectionReply = {
   body: '<h1>Mock Auth Page</h1>',
 };
 
+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');
+};
 export const mockGetCurrentMember = (
   currentMember = CURRENT_MEMBER,
   shouldThrowError = false,

src/App.tsx

@@ -9,6 +9,7 @@ import { CustomInitialLoader, withAuthorization } from '@graasp/ui';
 
 import { GRAASP_AUTH_HOST } from './config/env';
 import {
+  EDIT_MEMBER_INFO,
   HOME_PATH,
   MANAGE_ACCOUNT_PATH,
   PASSWORD_SETTINGS_PATH,
@@ -18,11 +19,12 @@ import {
 } from './config/paths';
 import { hooks } from './config/queryClient';
 import DestructiveSettingsScreen from './pages/DestructiveSettingsScreen';
+import EditMemberPersonalInformation from './pages/EditMemberPersonalInformation';
+import EditPublicProfileScreen from './pages/EditPublicProfileScreen';
 import HomePage from './pages/HomePage';
-import MemberScreen from './pages/MemberScreen';
+import MemberProfileScreen from './pages/MemberProfileScreen';
 import PageWrapper from './pages/PageWrapper';
 import PasswordSettingsScreen from './pages/PasswordSettingsScreen';
-import PublicProfileScreen from './pages/PublicProfileScreen';
 import StorageScreen from './pages/StorageScreen';
 
 export const App = (): JSX.Element => {
@@ -52,7 +54,11 @@ export const App = (): JSX.Element => {
     withAuthorizationProps,
   );
   const MemberProfileWithAuthorization = withAuthorization(
-    MemberScreen,
+    MemberProfileScreen,
+    withAuthorizationProps,
+  );
+  const EditMemberProfileWithAuthorization = withAuthorization(
+    EditMemberPersonalInformation,
     withAuthorizationProps,
   );
   const PasswordSettingsWithAuthorization = withAuthorization(
@@ -64,7 +70,7 @@ export const App = (): JSX.Element => {
     withAuthorizationProps,
   );
   const PublicProfileWithAuthorization = withAuthorization(
-    PublicProfileScreen,
+    EditPublicProfileScreen,
     withAuthorizationProps,
   );
   const DestructiveSettingsWithAuthorization = withAuthorization(
@@ -81,6 +87,10 @@ export const App = (): JSX.Element => {
             path={PROFILE_PATH}
             element={<MemberProfileWithAuthorization />}
           />
+          <Route
+            path={EDIT_MEMBER_INFO}
+            element={<EditMemberProfileWithAuthorization />}
+          />
           <Route
             path={PASSWORD_SETTINGS_PATH}
             element={<PasswordSettingsWithAuthorization />}

src/components/common/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 => (
+  <Stack
+    border="1px solid"
+    borderColor="divider"
+    borderRadius={1}
+    p={2}
+    spacing={1}
+  >
+    {children}
+  </Stack>
+);
+
+export default RoundedStack;

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 => (
+  <Stack direction="row" spacing={1}>
+    <Typography variant="body1" color="textSecondary">
+      {icon}
+    </Typography>
+
+    <Typography variant="body1" id={contentId}>
+      {href ? <Link to={href}>{content}</Link> : content}
+    </Typography>
+  </Stack>
+);
+export default DisplayingMemberPublicProfileLinks;