Add calendar picker to edit profile DOB field - #78
Conversation
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@Athlead-client/src/Components/EditForm.jsx`:
- Around line 162-164: Update CalendarPicker’s currentMonth initialization or
synchronization to derive from the selectedDate prop when one exists, so opening
the picker displays the month containing the existing DOB; retain today as the
fallback when selectedDate is unavailable.
- Around line 139-160: Update the DOB field in the EditForm component: associate
the label and input with htmlFor="DOB" and id="DOB", and wrap the Calendar icon
in a type="button" button carrying aria-label="Open date picker" and
aria-expanded={isCalendarOpen}. Move the click handler to the button and render
Calendar with aria-hidden="true".
- Around line 162-169: Update every non-submit button rendered by CalendarPicker
to explicitly use type="button", including the previous, month dropdown, year
dropdown, and next controls, so interacting with calendar navigation cannot
submit the surrounding EditForm.
- Around line 165-167: Update the calendar onSelect handler in the DOB field to
call setValue with options that trigger validation and update the relevant
dirty/touched form state, so selecting a valid date clears errors.DOB after a
failed submit. Preserve the existing formatted value assignment.
- Around line 164-166: Normalize DOB consistently in EditForm: store the field
as dd/MM/yyyy, convert the CalendarPicker value before setValue in its onSelect
handler, and apply the same conversion when loading the initial value and
processing manual edits. Ensure the value appended to /api/edit never uses the
ISO yyyy-MM-dd format.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 2438c818-a773-42f0-8c15-bf9d3acc1182
📒 Files selected for processing (1)
Athlead-client/src/Components/EditForm.jsx
| selectedDate={watch("DOB")} | ||
| onSelect={(formatted) => { | ||
| setValue("DOB", formatted); |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n -C 6 \
-e 'CalendarPicker|dd/MM/yyyy|parseDate|register\(.*DOB|append\(.*DOB|/api/edit' \
--glob '*.{js,jsx,ts,tsx}' .Repository: Harsh-vardhan09/AthLead
Length of output: 12546
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '--- BEAUTY ---\n'
fd -i 'EditForm|Signup|CalendarPicker|index\.js' . -t f -x sh -c 'echo "### $1"; wc -l "$1"; ast-grep outline "$1" 2>/dev/null | head -120 || true' sh {}
printf '\n--- Backend DOB edit/me routes ---\n'
rg -n -C 8 'editUser|DOB|birthdate|date|/api/auth/me|/api/me|/api/user/me' Backend/index.jsRepository: Harsh-vardhan09/AthLead
Length of output: 252
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '%s\n' '--- matching files ---'
fd -i 'EditForm|Signup|CalendarPicker|index\.js' . -t f
printf '%s\n' '--- Backend DOB edit/me routes ---'
rg -n -C 8 'editUser|DOB|birthdate|date|/api/auth/me|/api/me|/api/user/me' Backend/index.js || true
printf '%s\n' '--- client DOB usage ---'
rg -n -C 6 'DOB|Date of Birth|/api/edit|api\.patch|append\("DOB"|"DOB"\)' Athlead-client/src --glob '*.{js,jsx,ts,tsx}'Repository: Harsh-vardhan09/AthLead
Length of output: 13289
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '%s\n' '--- authController outline ---'
ast-grep outline Backend/controllers/authController.js 2>/dev/null || true
printf '%s\n' '--- editUser and getUser implementations ---'
rg -n -C 12 'export(?: \{|function)? (?:editUser|getUser)|editUser|function editUser|function getUser|DOB' Backend/controllers/authController.js
printf '%s\n' '--- Signup submit data flow ---'
rg -n -C 8 'onOtpVerified|formattedData.DOB|api\.post|/api.*signup|signup|DOB' Athlead-client/src/pages/Signup.jsx
printf '%s\n' '--- EditForm initial load/data flow ---'
rg -n -C 10 'useEffect|fetch|editData|user\.DOB|data\.DOB|watch\("DOB"\)|reset|handleSubmit|handleSubmit\(onSubmit\)' Athlead-client/src/Components/EditForm.jsxRepository: Harsh-vardhan09/AthLead
Length of output: 10498
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '%s\n' '--- editUser with parsed values and getUser ---'
sed -n '117,180p' Backend/controllers/authController.js | cat -n
printf '%s\n' '--- authController DOB parsing ---'
rg -n -C 3 'DOB|new Date|parse|split|toISOString|format' Backend/controllers/authController.js
printf '%s\n' '--- exact DOB-related text in repo ---'
rg -n 'DOB|Date of Birth|dd/MM|DD/MM|YYYY-MM|YYYY-MM-DD|split\(\"\/\"\)|split\(\'\/\'\)' Athlead-client Backend --glob '*.{js,jsx,ts,tsx,json}'Repository: Harsh-vardhan09/AthLead
Length of output: 2451
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '%s\n' '--- DOB-related text in repo ---'
rg -n 'DOB|Date of Birth|dd/MM|DD/MM|YYYY-MM|YYYY-MM-DD|split\("/",|split\(.*\/.*\)' Athlead-client Backend --glob '*.{js,jsx,ts,tsx,json}' || true
printf '%s\n' '--- user schema DOB reference ---'
fd -i 'user|auth|model|controller|route' Backend -t f -x sh -c 'echo "### $1"; rg -n -C 4 "DOB|Date|date" "$1" || true' sh {}
printf '%s\n' '--- EditForm data binding region ---'
sed -n '1,120p' Athlead-client/src/Components/EditForm.jsx | cat -nRepository: Harsh-vardhan09/AthLead
Length of output: 16325
Normalize the edited DOB before submitting.
CalendarPicker writes dd/MM/yyyy into DOB, then EditForm.jsx appends it unchanged to /api/edit. Store DOB in that input format instead of the ISO string, then convert the selected value to dd/MM/yyyy before calling setValue. Apply the same normalization to initial load and manual edits so /api/edit does not send yyyy-MM-dd, which fails the Signup validator and Date.parse check.
🧰 Tools
🪛 ast-grep (0.45.0)
[warning] 165-165: Avoid using the initial state variable in setState
Context: setValue("DOB", formatted)
Note: [CWE-710] Improper Adherence to Coding Standards. Security best practice.
(setstate-same-var)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Athlead-client/src/Components/EditForm.jsx` around lines 164 - 166, Normalize
DOB consistently in EditForm: store the field as dd/MM/yyyy, convert the
CalendarPicker value before setValue in its onSelect handler, and apply the same
conversion when loading the initial value and processing manual edits. Ensure
the value appended to /api/edit never uses the ISO yyyy-MM-dd format.

Changes
Testing
Summary by CodeRabbit
DD/MM/YYYYformat.