From 1c6fdb65d750a68fbf34863c532004c1f82ca6c2 Mon Sep 17 00:00:00 2001 From: skbhagat0502 Date: Wed, 15 Nov 2023 00:03:49 +0530 Subject: [PATCH] Fix user profile buttons layout and added form validation --- src/components/LeftDrawer/LeftDrawer.tsx | 5 +-- .../LeftDrawerEvent/LeftDrawerEvent.tsx | 4 +- .../LeftDrawerOrg/LeftDrawerOrg.tsx | 5 +-- src/components/UserUpdate/UserUpdate.tsx | 32 ++++++++++++--- .../MemberDetail/MemberDetail.module.css | 19 ++++++--- src/screens/MemberDetail/MemberDetail.tsx | 40 ++++++++++--------- 6 files changed, 67 insertions(+), 38 deletions(-) diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx index 57eacce0a7..d0b6220021 100644 --- 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}`); }} >
diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx index 2e3ac65cde..5feb818a89 100644 --- 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}`); }} >
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx index 13c40da74d..73c5e4364d 100644 --- 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}`); }} >
diff --git a/src/components/UserUpdate/UserUpdate.tsx b/src/components/UserUpdate/UserUpdate.tsx index 95e43874c9..e445db77aa 100644 --- 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 = ({ id, }): JSX.Element => { - const currentUrl = localStorage.getItem('id'); + const location = useLocation(); + const currentUrl = location.state?.id || localStorage.getItem('id') || id; const { t } = useTranslation('translation', { keyPrefix: 'userUpdate', }); @@ -41,7 +43,7 @@ const UserUpdate: React.FC = ({ 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 = ({ const loginLink = async (): Promise => { 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 index 53f1ff9ccb..3d2ec749e3 100644 --- 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 index 914996ce35..53f889e6f7 100644 --- a/src/screens/MemberDetail/MemberDetail.tsx +++ b/src/screens/MemberDetail/MemberDetail.tsx @@ -28,7 +28,7 @@ const MemberDetail: React.FC = ({ id }): JSX.Element => { const [state, setState] = useState(1); const location = useLocation(); - 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 = ({ 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 = ({ id }): JSX.Element => { {state == 1 ? (
- +

{t('title')}

- - +
+ + +
@@ -283,7 +285,7 @@ const MemberDetail: React.FC = ({ id }): JSX.Element => {
) : ( - + )}