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.

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

replace "First name" and "Surname" input fields with a single "Full Name" field #1084

Merged

Conversation

sahilpatel2712
Copy link
Contributor

✨ Codu Pull Request 💻

Fixes issue #1080

Pull Request details

  • replace "First name" and "Surname" input fields with a single "Full Name" field
  • add Zod validation for the "Full Name" input field.

Any Breaking changes

'None'

Associated Screenshots

Screenshot 2024-10-07 210429

@sahilpatel2712 sahilpatel2712 requested a review from a team as a code owner October 7, 2024 16:06
Copy link

vercel bot commented Oct 7, 2024

@sahilpatel2712 is attempting to deploy a commit to the Codú Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Contributor

coderabbitai bot commented Oct 7, 2024

Walkthrough

The changes in this pull request involve a restructuring of user input fields in the onboarding form. Specifically, the firstName and surname fields have been consolidated into a single name field across various components, schemas, and database structures. This update affects the slideOneSubmitAction function, the UserDetails type, and the relevant database schema, ensuring consistency in data handling and validation. Other related functions and schemas remain unchanged.

Changes

File Path Change Summary
app/(app)/alpha/additional-details/_actions.ts Renamed destructured variables from firstName and surname to name in slideOneSubmitAction.
app/(app)/alpha/additional-details/_client.tsx Updated UserDetails type and logic in AdditionalSignUpDetails to use a single name field.
app/(app)/alpha/additional-details/page.tsx Modified Page function to replace firstName and surname with name in user details query.
schema/additionalUserDetails.ts Changed slideOneSchema to rename firstName to name and removed surname.
app/(app)/alpha/settings/profile.ts Renamed surname to name in saveSettingsFormOneSchema.
server/db/schema.ts Removed firstName and surname fields from the user table schema.
drizzle/0008_remove_firstName_and_surname.sql Added SQL commands to drop firstName and surname columns from the user table.

Possibly related PRs

  • Fix/date to string #990: This PR modifies the UserDetails type in app/(app)/alpha/additional-details/_client.tsx, which is related to the main PR's changes in the same file regarding the consolidation of user name fields.

Poem

🐇 In the meadow where bunnies play,
A name so simple leads the way.
No more first and last to find,
Just one sweet name, perfectly aligned.
Hopping forward, we embrace the change,
A single field, how nice and strange! 🌼


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 2229df0 and b49a0df.

⛔ Files ignored due to path filters (2)
  • drizzle/meta/0008_snapshot.json is excluded by !**/*.json
  • drizzle/meta/_journal.json is excluded by !**/*.json
📒 Files selected for processing (1)
  • app/(app)/alpha/additional-details/_client.tsx (5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • app/(app)/alpha/additional-details/_client.tsx

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

github-actions bot commented Oct 7, 2024

Hello @sahilpatel2712, thanks for opening your first Pull Request. The maintainers will review this Pull Request and provide feedback as soon as possible. Keep up the great work!

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 3

🧹 Outside diff range and nitpick comments (5)
app/(app)/alpha/additional-details/page.tsx (1)

31-31: LGTM! Consider using nullish coalescing for consistency.

The change from separate firstName and surname fields to a single name field in the detailsWithNullsRemoved object is correct and aligns with the PR objectives.

For consistency with modern JavaScript practices, consider using the nullish coalescing operator (??) instead of the logical OR (||). This change would make the code more explicit about handling null and undefined values:

-    name: details?.name || "",
+    name: details?.name ?? "",

This suggestion applies to all similar lines in the detailsWithNullsRemoved object for consistency.

schema/additionalUserDetails.ts (1)

4-8: Consider cultural inclusivity in name handling

While a single name field simplifies the input process, it might not accommodate various cultural naming conventions effectively. Some cultures have different name structures that might not fit well into a single field.

Consider the following options:

  1. Keep the current single name field but add a note explaining that users should enter their full name as they prefer it to be displayed.
  2. Provide optional separate fields for different name components (e.g., given name, family name, middle name) in addition to the full name field, allowing users to input their names in a way that best suits their cultural background.

This approach would enhance cultural inclusivity and provide more flexibility in name handling throughout the application.

app/(app)/alpha/additional-details/_actions.ts (1)

26-26: Consider the impact on name display and usage.

The change to a single 'name' field may affect how names are displayed or used throughout the application. Consider reviewing and updating any code that relies on separate first name and surname fields, such as user profiles, email templates, or admin interfaces.

Would you like assistance in identifying potential areas that might need updates due to this change?

Also applies to: 31-31

app/(app)/alpha/additional-details/_client.tsx (2)

45-45: LGTM! Consider updating related documentation.

The change from separate firstName and surname fields to a single name field in the UserDetails type aligns with the PR objective. This modification simplifies the data structure and is consistent throughout the component.

Consider updating any related documentation or API specifications to reflect this change in the UserDetails type.


103-103: LGTM! Consider adding an aria-label for improved accessibility.

The changes in the SlideOne component correctly implement the new "Full Name" field, including updates to destructuring, default values, and form structure. The error handling has been appropriately adjusted for the new field.

For improved accessibility, consider adding an aria-label to the input field:

 <Input
   id="full-name"
   placeholder="Enter full name"
   invalid={!!errors?.name}
+  aria-label="Full Name"
   {...register("name")}
 />

Also applies to: 111-111, 140-149

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 0cadee6 and 5bbb161.

📒 Files selected for processing (5)
  • app/(app)/alpha/additional-details/_actions.ts (1 hunks)
  • app/(app)/alpha/additional-details/_client.tsx (5 hunks)
  • app/(app)/alpha/additional-details/page.tsx (2 hunks)
  • schema/additionalUserDetails.ts (1 hunks)
  • server/db/schema.ts (0 hunks)
💤 Files with no reviewable changes (1)
  • server/db/schema.ts
🧰 Additional context used
🔇 Additional comments (7)
app/(app)/alpha/additional-details/page.tsx (1)

Line range hint 1-43: Summary: Changes successfully implement the 'Full Name' field consolidation.

The modifications in this file accurately reflect the PR objective of replacing separate 'First name' and 'Surname' fields with a single 'Full Name' field. The changes are minimal, focused, and maintain the overall structure and logic of the component.

Key points:

  1. The database query now fetches the name field instead of firstName and surname.
  2. The detailsWithNullsRemoved object correctly handles the new name field.
  3. These changes are consistent throughout the file and align with the AI-generated summary.

The implementation looks good, and no further changes are necessary for this file.

schema/additionalUserDetails.ts (1)

Line range hint 21-70: Verify compatibility of unchanged schemas

While slideTwoSchema and slideThreeSchema remain unchanged, it's important to ensure they are still compatible with the modifications made to slideOneSchema.

Please run the following script to check for any dependencies between the schemas:

#!/bin/bash
# Description: Check for dependencies between schemas

echo "Checking for dependencies between schemas:"
rg --type typescript --type javascript 'slideOneSchema|slideTwoSchema|slideThreeSchema' -C 5

Review the results to ensure that the unchanged schemas don't rely on the removed firstName or surname fields, and that any code using these schemas together is updated accordingly.

app/(app)/alpha/additional-details/_actions.ts (3)

Line range hint 47-114: LGTM: No changes to slideTwoSubmitAction and slideThreeSubmitAction.

The slideTwoSubmitAction and slideThreeSubmitAction functions remain unchanged, which is consistent with the PR objective of only modifying the name-related fields.


26-26: Verify schema validation for the 'name' field.

Ensure that the slideOneSchema has been updated to validate the new 'name' field instead of separate 'firstName' and 'surname' fields.

Run the following script to check the schema definition:

#!/bin/bash
# Description: Verify the slideOneSchema definition

# Test: Check slideOneSchema definition
echo "Checking slideOneSchema definition:"
rg 'const slideOneSchema = z.object' -A 10 --type ts

26-26: LGTM: Changes align with PR objective.

The modifications to use a single name field instead of separate firstName and surname fields are consistent with the PR's goal of replacing 'First name' and 'Surname' input fields with a single 'Full Name' field.

To ensure consistency across the codebase, please run the following script:

Also applies to: 31-31

app/(app)/alpha/additional-details/_client.tsx (2)

65-65: LGTM! Consistent updates to component logic.

The changes in the AdditionalSignUpDetails component correctly reflect the modification of the UserDetails type. The destructuring and slide determination logic have been updated to use the new name field, ensuring consistency with the new data structure.

Also applies to: 76-76


Line range hint 1-577: Overall, excellent implementation of the 'Full Name' field change.

The changes in this file consistently implement the replacement of 'First name' and 'Surname' fields with a single 'Full Name' field. The modifications are well-executed across the UserDetails type, AdditionalSignUpDetails component, and SlideOne component. The code remains clean, maintainable, and aligns perfectly with the PR objectives.

Great job on maintaining consistency throughout the file and ensuring that all related logic was updated accordingly.

@@ -13,8 +13,7 @@ export default async function Page() {
const details = await db.query.user.findFirst({
columns: {
username: true,
firstName: true,
surname: true,
name: true,
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 7, 2024

Choose a reason for hiding this comment

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

💡 Codebase verification

Remaining references to firstName and surname found. Please update all instances to use the new name field.

  • app/(app)/alpha/settings/profile.ts contains references to firstName and surname.
🔗 Analysis chain

LGTM! Verify database schema consistency.

The change from separate firstName and surname fields to a single name field in the database query aligns with the PR objectives. This modification correctly reflects the consolidation of user name information.

To ensure consistency across the codebase, please run the following script to verify that all references to firstName and surname have been updated:


Copy link
Member

Choose a reason for hiding this comment

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

This can be safely ignored, since this alpha/settings page is legacy and will be deleted.

Copy link
Contributor

Choose a reason for hiding this comment

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

@John-Paul-Larkin, understood. I'll note that the app/(app)/alpha/settings page is legacy and will be deleted.

(_/)
(._.)
/


✏️ Learnings added
Learnt from: John-Paul-Larkin
PR: codu-code/codu#1084
File: app/(app)/alpha/additional-details/page.tsx:16-16
Timestamp: 2024-10-07T18:36:02.876Z
Learning: The `app/(app)/alpha/settings` page is legacy and will be deleted.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

Comment on lines 4 to 8
name: z
.string()
.trim()
.min(2, "Min name length is 2 characters.")
.max(50, "Max name length is 50 characters."),
surname: z
.string()
.trim()
.min(2, "Min name length is 2 characters.")
.min(1, "Min name length is 1 characters.")
.max(50, "Max name length is 50 characters."),
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Consider adjusting the minimum length for the name field

The current minimum length of 1 character for the name field might be too permissive for a full name. This could potentially allow invalid or incomplete name entries.

Consider increasing the minimum length to ensure more meaningful name entries. For example:

-    .min(1, "Min name length is 1 characters.")
+    .min(2, "Min name length is 2 characters.")

Additionally, you might want to consider adding a regex pattern to ensure the name contains at least two words for a full name, similar to the username field.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
name: z
.string()
.trim()
.min(2, "Min name length is 2 characters.")
.max(50, "Max name length is 50 characters."),
surname: z
.string()
.trim()
.min(2, "Min name length is 2 characters.")
.min(1, "Min name length is 1 characters.")
.max(50, "Max name length is 50 characters."),
name: z
.string()
.trim()
.min(2, "Min name length is 2 characters.")
.max(50, "Max name length is 50 characters."),

💡 Codebase verification

Issues Found:

  • firstName and surname are still referenced in app/(app)/alpha/settings/profile.ts.

Please update all occurrences of firstName and surname to use the new name field to ensure consistency and prevent potential bugs.

🔗 Analysis chain

Verify impact on existing data and functionality

The change from separate firstName and surname fields to a single name field might affect existing data structures and functionality throughout the application.

Please run the following script to check for any other occurrences of firstName or surname in the codebase that might need updating:

Ensure that all relevant parts of the application are updated to use the new name field instead of firstName and surname.


Apologies for the errors in the previous script. Let's run a corrected script to search for occurrences of firstName and surname in the codebase:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for occurrences of firstName and surname in the codebase

echo "Checking for 'firstName' occurrences:"
rg --type typescript --type javascript 'firstName'

echo "Checking for 'surname' occurrences:"
rg --type typescript --type javascript 'surname'

Length of output: 318


Script:

#!/bin/bash
# Description: Check for occurrences of firstName and surname in the codebase

echo "Checking for 'firstName' occurrences in .ts and .js files:"
rg 'firstName' --glob '*.ts' --glob '*.js'

echo "Checking for 'surname' occurrences in .ts and .js files:"
rg 'surname' --glob '*.ts' --glob '*.js'

Length of output: 445

Copy link
Member

@John-Paul-Larkin John-Paul-Larkin left a comment

Choose a reason for hiding this comment

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

Looks great @sahilpatel2712
One last thing. Could you please drop the firstName and surname columns from the database schema since we’re using fullname instead. You can modify the migration accordingly.
Thanks

@sahilpatel2712
Copy link
Contributor Author

sure...

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)
drizzle/0008_remove_firstName_and_surname.sql (1)

1-2: LGTM! Consider adding the new 'name' column in this migration.

The SQL statements to drop the "firstName" and "surname" columns are correct and align with the PR objectives. The use of "IF EXISTS" is a good practice to prevent errors if the columns don't exist.

However, I noticed that this migration doesn't add a new "name" or "fullName" column to replace the dropped columns. Consider adding this column in the same migration to ensure data consistency.

Here's a suggestion to add the new column:

ALTER TABLE "user" ADD COLUMN "fullName" TEXT;

You might want to add this line after the existing ALTER TABLE statements.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 15e935b and 0559773.

⛔ Files ignored due to path filters (2)
  • drizzle/meta/0008_snapshot.json is excluded by !**/*.json
  • drizzle/meta/_journal.json is excluded by !**/*.json
📒 Files selected for processing (1)
  • drizzle/0008_remove_firstName_and_surname.sql (1 hunks)
🧰 Additional context used

Copy link
Member

@John-Paul-Larkin John-Paul-Larkin left a comment

Choose a reason for hiding this comment

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

Great work, thanks @sahilpatel2712

@sahilpatel2712
Copy link
Contributor Author

Great work, thanks @sahilpatel2712

You're welcome!

Copy link

vercel bot commented Oct 8, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
codu ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 9, 2024 7:14am

@NiallJoeMaher
Copy link
Contributor

Just some prettier issues. Run npm run prettier:fix and it should solve it! Great work.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)
app/(app)/alpha/additional-details/_client.tsx (2)

65-65: LGTM: AdditionalSignUpDetails component updated to use 'name' field.

The changes in destructuring and slide determination logic are consistent with the updated UserDetails type. This ensures that the component works correctly with the new structure.

Consider using optional chaining for a more concise condition check:

- } else if (!name || !username || !location) {
+ } else if (!details?.name || !details?.username || !details?.location) {

This change would make the code more robust against potential undefined values in the details object.

Also applies to: 76-76


103-103: LGTM: SlideOne component updated to use single 'Full Name' field.

The changes in the SlideOne component are consistent with the updated UserDetails type and the PR objective. The form has been correctly updated to use a single 'Full Name' field, including appropriate error handling.

To improve accessibility, consider adding an aria-describedby attribute to the input field and an associated description:

 <Input
   id="full-name"
   placeholder="Enter full name"
   invalid={!!errors?.name}
+  aria-describedby="full-name-description"
   {...register("name")}
 />
+<span id="full-name-description" className="sr-only">
+  Enter your full name, including first name and surname
+</span>

This change would provide more context to screen reader users about the expected input format.

Also applies to: 111-111, 140-149

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 0559773 and 2229df0.

📒 Files selected for processing (1)
  • app/(app)/alpha/additional-details/_client.tsx (5 hunks)
🧰 Additional context used
🔇 Additional comments (2)
app/(app)/alpha/additional-details/_client.tsx (2)

Line range hint 1-577: Overall assessment: Changes successfully implement the 'Full Name' field consolidation.

The modifications in this file effectively replace the separate 'firstName' and 'surname' fields with a single 'name' field, aligning with the PR objective. The changes are consistently applied across the UserDetails type and the SlideOne component, with appropriate updates to form handling and error management.

Key points:

  1. UserDetails type has been updated to use a single 'name' field.
  2. AdditionalSignUpDetails component now correctly uses the 'name' field for slide determination.
  3. SlideOne component has been refactored to use a 'Full Name' input field.
  4. Other components (SlideTwo and SlideThree) remain unaffected, as they don't directly interact with the name fields.

The localized nature of these changes minimizes the potential for unintended side effects in other parts of the codebase. However, it's crucial to ensure that any other components or functions relying on the UserDetails type are updated accordingly.

To ensure comprehensive coverage of this change, please run the following verification script:

#!/bin/bash
# Description: Verify the impact of UserDetails type change across the codebase

# Search for any remaining usage of 'firstName' or 'surname' in relation to user details
echo "Searching for potential missed updates:"
rg -t ts -t jsx -i '(firstname|surname).*?(user|profile|details?)'

# Search for any components or functions that might still expect separate name fields
echo "Checking for components or functions that might need updating:"
rg -t ts -t jsx '\b(firstName|surname)\b.*?(props|interface|type|UserDetails)'

# Note: Manually review the results to identify any areas that might need further updates

45-45: LGTM: UserDetails type updated to use a single 'name' field.

The change aligns with the PR objective of consolidating 'firstName' and 'surname' into a single 'name' field. This simplification is a good approach for streamlining user input.

To ensure this change doesn't introduce any breaking changes in the codebase, please run the following verification script:

@sahilpatel2712
Copy link
Contributor Author

Just some prettier issues. Run npm run prettier:fix and it should solve it! Great work.

done..

Copy link
Contributor

@NiallJoeMaher NiallJoeMaher left a comment

Choose a reason for hiding this comment

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

🌮 🦖

@NiallJoeMaher NiallJoeMaher merged commit 751a74a into codu-code:develop Oct 9, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants