Fix user profile buttons layout and added form validation

PalisadoesFoundation · Nov 14, 2023 · 1c6fdb6 · 1c6fdb6
1 parent 464e546
commit 1c6fdb6
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 38 deletions.
diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
-import { toast } from 'react-toastify';
 import { ReactComponent as AngleRightIcon } from 'assets/svgs/angleRight.svg';
 import { ReactComponent as LogoutIcon } from 'assets/svgs/logout.svg';
 import { ReactComponent as OrganizationsIcon } from 'assets/svgs/organizations.svg';
@@ -28,7 +27,7 @@ const leftDrawer = ({
   const firstName = localStorage.getItem('FirstName');
   const lastName = localStorage.getItem('LastName');
   const userImage = localStorage.getItem('UserImage');
-
+  const userId = localStorage.getItem('id');
   const history = useHistory();
 
   const logout = (): void => {
@@ -135,7 +134,7 @@ const leftDrawer = ({
             className={styles.profileContainer}
             data-testid="profileBtn"
             onClick={(): void => {
-              toast.success('Profile page coming soon!');
+              history.push(`/member/id=${userId}`);
             }}
           >
             <div className={styles.imageContainer}>

diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import Button from 'react-bootstrap/Button';
 import { useHistory } from 'react-router-dom';
-import { toast } from 'react-toastify';
 import { ReactComponent as AngleRightIcon } from 'assets/svgs/angleRight.svg';
 import { ReactComponent as LogoutIcon } from 'assets/svgs/logout.svg';
 import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
@@ -35,6 +34,7 @@ const leftDrawerEvent = ({
   const firstName = localStorage.getItem('FirstName');
   const lastName = localStorage.getItem('LastName');
   const userImage = localStorage.getItem('UserImage');
+  const userId = localStorage.getItem('id');
 
   const history = useHistory();
   const logout = (): void => {
@@ -138,7 +138,7 @@ const leftDrawerEvent = ({
             className={styles.profileContainer}
             data-testid="profileBtn"
             onClick={(): void => {
-              toast.success('Profile page coming soon!');
+              history.push(`/member/id=${userId}`);
             }}
           >
             <div className={styles.imageContainer}>

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -7,7 +7,6 @@ import React, { useEffect, useState } from 'react';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
-import { toast } from 'react-toastify';
 import type { TargetsType } from 'state/reducers/routesReducer';
 import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
 import { ReactComponent as AngleRightIcon } from 'assets/svgs/angleRight.svg';
@@ -49,7 +48,7 @@ const leftDrawerOrg = ({
   const firstName = localStorage.getItem('FirstName');
   const lastName = localStorage.getItem('LastName');
   const userImage = localStorage.getItem('UserImage');
-
+  const userId = localStorage.getItem('id');
   const history = useHistory();
 
   // Set organization data
@@ -184,7 +183,7 @@ const leftDrawerOrg = ({
             className={styles.profileContainer}
             data-testid="profileBtn"
             onClick={(): void => {
-              toast.success('Profile page coming soon!');
+              history.push(`/member/id=${userId}`);
             }}
           >
             <div className={styles.imageContainer}>

diff --git a/src/components/UserUpdate/UserUpdate.tsx b/src/components/UserUpdate/UserUpdate.tsx
@@ -6,6 +6,7 @@ import Button from 'react-bootstrap/Button';
 import styles from './UserUpdate.module.css';
 import convertToBase64 from 'utils/convertToBase64';
 import { USER_DETAILS } from 'GraphQl/Queries/Queries';
+import { useLocation } from 'react-router-dom';
 
 import { languages } from 'utils/languages';
 import { toast } from 'react-toastify';
@@ -21,7 +22,8 @@ interface InterfaceUserUpdateProps {
 const UserUpdate: React.FC<InterfaceUserUpdateProps> = ({
   id,
 }): JSX.Element => {
-  const currentUrl = localStorage.getItem('id');
+  const location = useLocation<InterfaceUserUpdateProps>();
+  const currentUrl = location.state?.id || localStorage.getItem('id') || id;
   const { t } = useTranslation('translation', {
     keyPrefix: 'userUpdate',
   });
@@ -41,7 +43,7 @@ const UserUpdate: React.FC<InterfaceUserUpdateProps> = ({
     loading: loading,
     error: error,
   } = useQuery(USER_DETAILS, {
-    variables: { id: localStorage.getItem('id') ?? id }, // For testing we are sending the id as a prop
+    variables: { id: currentUrl }, // For testing we are sending the id as a prop
   });
   React.useEffect(() => {
     if (data) {
@@ -65,13 +67,31 @@ const UserUpdate: React.FC<InterfaceUserUpdateProps> = ({
 
   const loginLink = async (): Promise<void> => {
     try {
+      const firstName = formState.firstName;
+      const lastName = formState.lastName;
+      const email = formState.email;
+      const file = formState.file;
+      let toSubmit = true;
+      if (firstName.trim().length == 0 || !firstName) {
+        toast.warning('First Name cannot be blank!');
+        toSubmit = false;
+      }
+      if (lastName.trim().length == 0 || !lastName) {
+        toast.warning('Last Name cannot be blank!');
+        toSubmit = false;
+      }
+      if (email.trim().length == 0 || !email) {
+        toast.warning('Email cannot be blank!');
+        toSubmit = false;
+      }
+      if (!toSubmit) return;
       const { data } = await updateUser({
         variables: {
           //Currently on these  fields are supported by the api
-          firstName: formState.firstName,
-          lastName: formState.lastName,
-          email: formState.email,
-          file: formState.file,
+          firstName,
+          lastName,
+          email,
+          file,
         },
       });
       /* istanbul ignore next */

diff --git a/src/screens/MemberDetail/MemberDetail.module.css b/src/screens/MemberDetail/MemberDetail.module.css
@@ -112,6 +112,16 @@
   justify-content: space-between;
 }
 
+.flexclm {
+  display: flex;
+  flex-direction: column;
+}
+
+.btngroup {
+  display: flex;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
 @media screen and (max-width: 1200px) {
   .justifysp {
     padding-left: 55px;
@@ -336,13 +346,12 @@
   border-color: #31bb6b;
   background-color: #31bb6b;
   color: white;
-  padding-right: 10px;
-  padding-left: 10px;
-  justify-content: flex-end;
-  float: right;
-  text-align: right;
   box-shadow: none;
   height: 2.5rem;
+  width: max-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .userImage {

diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx
@@ -28,7 +28,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
   const [state, setState] = useState(1);
 
   const location = useLocation<MemberDetailProps>();
-  const currentUrl = window.location.href.split('=')[1];
+  const currentUrl = location.state?.id || localStorage.getItem('id') || id;
   document.title = t('title');
 
   const [adda] = useMutation(ADD_ADMIN_MUTATION);
@@ -37,7 +37,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
     loading: loading,
     error: error,
   } = useQuery(USER_DETAILS, {
-    variables: { id: location.state?.id ?? id }, // For testing we are sending the id as a prop
+    variables: { id: currentUrl }, // For testing we are sending the id as a prop
   });
 
   if (loading) {
@@ -94,23 +94,25 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
           <Col sm={8}>
             {state == 1 ? (
               <div className={styles.mainpageright}>
-                <Row className={styles.justifysp}>
+                <Row className={styles.flexclm}>
                   <p className={styles.logintitle}>{t('title')}</p>
-                  <Button
-                    className={styles.memberfontcreatedbtn}
-                    onClick={addAdmin}
-                  >
-                    {t('addAdmin')}
-                  </Button>
-                  <Button
-                    className={styles.memberfontcreatedbtn}
-                    role="stateBtn"
-                    onClick={(): void => {
-                      setState(2);
-                    }}
-                  >
-                    edit
-                  </Button>
+                  <div className={styles.btngroup}>
+                    <Button
+                      className={styles.memberfontcreatedbtn}
+                      onClick={addAdmin}
+                    >
+                      {t('addAdmin')}
+                    </Button>
+                    <Button
+                      className={styles.memberfontcreatedbtn}
+                      role="stateBtn"
+                      onClick={(): void => {
+                        setState(2);
+                      }}
+                    >
+                      Edit Profile
+                    </Button>
+                  </div>
                 </Row>
                 <Row className={styles.justifysp}>
                   <Col sm={6} lg={4}>
@@ -283,7 +285,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
                 </section>
               </div>
             ) : (
-              <UserUpdate id="abcd" />
+              <UserUpdate id={currentUrl} />
             )}
           </Col>
         </Row>