feat: build library profile page (UI) (#41)

* feat: build library profile page (UI) * style: add icons to social media link * build: connect public profile with hooks and mutations * feat: use social-links module to subtract social links * fix: rename from library profile to public profile and create a custom text editor component * fix: rename to public profile instead of library profile * fix: fix input's name to sync with profile data * fix: remove reolution i18next and linting * fix: update query client version
graasp · Dec 21, 2023 · c51d8f4 · c51d8f4
1 parent 508d5e8
commit c51d8f4
Show file tree

Hide file tree

Showing 10 changed files with 1,573 additions and 1,852 deletions.
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@graasp/query-client": "2.0.1",
+    "@graasp/query-client": "2.2.0",
     "@graasp/sdk": "2.0.1",
     "@graasp/translations": "1.19.4",
     "@graasp/ui": "4.0.0",
@@ -34,7 +34,6 @@
     "connected-react-router": "6.9.3",
     "filesize": "^10.0.12",
     "http-status-codes": "2.3.0",
-    "i18next": "^23.6.0",
     "immutable": "4.3.4",
     "lodash.truncate": "4.4.2",
     "node-fetch": "2.7.0",
@@ -47,6 +46,7 @@
     "react-router": "6.16.0",
     "react-router-dom": "6.16.0",
     "react-toastify": "9.1.3",
+    "social-links": "^1.14.0",
     "stylis-plugin-rtl": "2.1.1",
     "uuid": "9.0.1"
   },

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -11,13 +11,15 @@ import {
   AVATAR_SETTINGS_PATH,
   HOME_PATH,
   PASSWORD_SETTINGS_PATH,
+  PUBLIC_PROFILE_PATH,
   STORAGE_PATH,
 } from '../config/paths';
 import { hooks } from '../config/queryClient';
 import MainProviders from './context/MainProviders';
 import AvatarSettings from './main/AvatarSettings';
 import MemberProfileScreen from './main/MemberProfileScreen';
 import PasswordSettings from './main/PasswordSettings';
+import PublicProfileScreen from './main/PublicProfileScreen';
 import StockageScreen from './main/StockageScreen';
 
 export const App = (): JSX.Element => {
@@ -54,6 +56,10 @@ export const App = (): JSX.Element => {
     StockageScreen,
     withAuthorizationProps,
   );
+  const PublicProfileWithAutorization = withAuthorization(
+    PublicProfileScreen,
+    withAuthorizationProps,
+  );
 
   if (currentMember) {
     return (
@@ -72,6 +78,10 @@ export const App = (): JSX.Element => {
               path={AVATAR_SETTINGS_PATH}
               element={<AvatarSettingsWithAutorization />}
             />
+            <Route
+              path={PUBLIC_PROFILE_PATH}
+              element={<PublicProfileWithAutorization />}
+            />
             <Route path={STORAGE_PATH} element={<StockageWithAutorization />} />
 
             {/*

diff --git a/src/components/common/TextField.tsx b/src/components/common/TextField.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { IconButton, InputAdornment, SvgIcon, TextField } from '@mui/material';
+
+interface Props {
+  label: string;
+  value: string;
+  name: string;
+  helperText: string | false;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  Icon?: typeof SvgIcon;
+  isError: boolean;
+  rows?: number;
+  multiline?: boolean;
+  required?: boolean;
+}
+const TextFieldWithValidation = ({
+  label,
+  onChange,
+  value,
+  name,
+  Icon,
+  helperText,
+  isError,
+  rows = 4,
+  multiline = false,
+  required = false,
+}: Props): JSX.Element => (
+  <TextField
+    label={label}
+    variant="outlined"
+    onChange={onChange}
+    type="text"
+    margin="dense"
+    fullWidth
+    name={name}
+    value={value}
+    helperText={helperText}
+    error={isError}
+    rows={rows}
+    required={required}
+    multiline={multiline}
+    InputProps={
+      Icon && {
+        startAdornment: (
+          <InputAdornment position="start">
+            <IconButton edge="end">
+              <Icon />
+            </IconButton>
+          </InputAdornment>
+        ),
+      }
+    }
+  />
+);
+
+export default TextFieldWithValidation;
diff --git a/src/components/main/MainMenu.tsx b/src/components/main/MainMenu.tsx
@@ -4,6 +4,7 @@ import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import CameraAltIcon from '@mui/icons-material/CameraAlt';
 import DataUsageIcon from '@mui/icons-material/DataUsage';
 import PasswordIcon from '@mui/icons-material/Password';
+import ProfileIcon from '@mui/icons-material/Person2';
 import { ListItemButton } from '@mui/material';
 import List from '@mui/material/List';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -16,6 +17,7 @@ import {
   AVATAR_SETTINGS_PATH,
   HOME_PATH,
   PASSWORD_SETTINGS_PATH,
+  PUBLIC_PROFILE_PATH,
   STORAGE_PATH,
 } from '../../config/paths';
 
@@ -70,6 +72,16 @@ const MainMenu = (): JSX.Element => {
 
         <ListItemText primary={t('MAIN_MENU_STORAGE')} />
       </ListItemButton>
+      <ListItemButton
+        onClick={() => goTo(PUBLIC_PROFILE_PATH)}
+        selected={pathname === PUBLIC_PROFILE_PATH}
+      >
+        <ListItemIcon>
+          <ProfileIcon />
+        </ListItemIcon>
+
+        <ListItemText primary={t('MAIN_MENU_PUBLIC_PROFILE')} />
+      </ListItemButton>
       {/* <ListItemButton
         button
         onClick={() => goTo(SUBSCRIPTIONS_PATH)}