Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop #3082

Closed
wants to merge 2 commits into from
Closed

Develop #3082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77a14eb
Fix: Improve UI Consistency for Date of Birth Calendar on User Profil…
Dec 27, 2024
ef90c0f
Update Settings.tsx
Faizankhan1104 Dec 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@
"scripts": {
"serve": "cross-env ESLINT_NO_DEV_ERRORS=true vite --config config/vite.config.ts",
"build": "tsc && vite build --config config/vite.config.ts",
"start": "node setup.ts",
"preview": "vite preview --config config/vite.config.ts",
"test": "cross-env NODE_ENV=test jest --env=./scripts/custom-test-env.js --watchAll --coverage",
"eject": "react-scripts eject",
Expand Down
2 changes: 1 addition & 1 deletion src/assets/css/app.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions src/screens/OrganizationEvents/OrganizationEvents.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@
flex-direction: row;
margin-bottom: 15px;
}

.datebox {
width: 90%;
border-radius: 7px;
Expand All @@ -206,6 +207,7 @@
margin-right: 5px;
margin-left: 5px;
}

.checkboxdiv > label {
margin-right: 50px;
}
Expand Down
10 changes: 10 additions & 0 deletions src/screens/UserPortal/Settings/Settings.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,13 @@
font-size: 1.2rem;
font-weight: 600;
}

.scrollableCardBody {
max-height: min(220px, 50vh);
overflow-y: auto;
scroll-behavior: smooth;
}

.cardHeader {
padding: 1.25rem 1rem 1rem 1rem;
border-bottom: 1px solid var(--bs-gray-200);
Expand Down Expand Up @@ -93,6 +95,7 @@
opacity: 1;
color: black !important;
}

.opendrawer {
position: fixed;
display: flex;
Expand All @@ -114,11 +117,18 @@
transition: background-color 0.5s ease;
background-color: var(--bs-primary);
}

.collapseSidebarButton:hover {
transition: background-color 0.5s ease;
background-color: var(--bs-primary);
}

.textField {
font-size: 14px;
background-color: rgba(245, 245, 245);
border: 1px solid var(--bs-border-color);
}

@media (max-width: 1120px) {
.collapseSidebarButton {
width: calc(250px);
Expand Down
38 changes: 26 additions & 12 deletions src/screens/UserPortal/Settings/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import { useMutation, useQuery } from '@apollo/client';
import { errorHandler } from 'utils/errorHandler';
import { toast } from 'react-toastify';
import { CHECK_AUTH } from 'GraphQl/Queries/Queries';
import { DatePicker } from '@mui/x-date-pickers';
import useLocalStorage from 'utils/useLocalstorage';
import dayjs from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
educationGradeEnum,
employmentStatusEnum,
Expand All @@ -23,7 +27,6 @@ import Avatar from 'components/Avatar/Avatar';
import type { InterfaceEvent } from 'components/EventManagement/EventAttendance/InterfaceEvents';
import { EventsAttendedByUser } from 'components/UserPortal/UserProfile/EventsAttendedByUser';
import UserAddressFields from 'components/UserPortal/UserProfile/UserAddressFields';

/**
* The Settings component allows users to view and update their profile settings.
* It includes functionality to handle image uploads, reset changes, and save updated user details.
Expand Down Expand Up @@ -124,7 +127,7 @@ export default function settings(): JSX.Element {
* @param fieldName - The name of the field to be updated.
* @param value - The new value for the field.
*/
const handleFieldChange = (fieldName: string, value: string): void => {
const handleFieldChange = (fieldName: string, value: Date | string): void => {
setisUpdated(true);
setUserDetails((prevState) => ({
...prevState,
Expand All @@ -141,7 +144,6 @@ export default function settings(): JSX.Element {
(fileInputRef.current as HTMLInputElement).click();
}
};

/**
* Resets the user details to the values fetched from the server.
*/
Expand Down Expand Up @@ -440,15 +442,27 @@ export default function settings(): JSX.Element {
>
{t('birthDate')}
</Form.Label>
<Form.Control
type="date"
id="birthDate"
value={userDetails.birthDate}
onChange={(e) =>
handleFieldChange('birthDate', e.target.value)
}
className={`${styles.cardControl}`}
/>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
value={dayjs(userDetails.birthDate)}
className={`${styles.textField}`}
onChange={(date) => {
if (date) {
console.log(date.toISOString());
handleFieldChange(
'birthDate',
date.toISOString(),
);
}
}}
slotProps={{
textField: {
id: "birthDate",
error: false,
},
}}
/>
</LocalizationProvider>
Comment on lines +445 to +465
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Handle user’s invalid dates gracefully
The date picker logic is well-structured. However, if the user manually inputs an invalid date or if dayjs(userDetails.birthDate) is not a valid date, you might want to handle this more gracefully than logging to console. Consider adding date validation or error feedback to improve the user experience.

 if (date && date.isValid()) {
   handleFieldChange(
     'birthDate',
     date.toISOString(),
   );
 }
- console.log(date.toISOString());
+ // Potentially notify the user if date is invalid

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools
🪛 eslint

[error] 460-460: Replace "birthDate" with 'birthDate'

(prettier/prettier)

</Col>
</Row>
<Row className="mb-1">
Expand Down
Loading