Skip to content

refactor(profile): migrate edit profile modal to SolidJS (@AzureNightlock)#7880

Open
AzureNightlock wants to merge 1 commit intomonkeytypegame:masterfrom
AzureNightlock:refactor/edit-profile-modal
Open

refactor(profile): migrate edit profile modal to SolidJS (@AzureNightlock)#7880
AzureNightlock wants to merge 1 commit intomonkeytypegame:masterfrom
AzureNightlock:refactor/edit-profile-modal

Conversation

@AzureNightlock
Copy link
Copy Markdown
Contributor

@AzureNightlock AzureNightlock commented Apr 28, 2026

Description

This PR: Migrates the Edit Profile modal to a SolidJS component

The Overall Flow:

  1. Get original values
  2. Create a function that checks if the original value is the same as the current value
  3. Validate the input (non empty)
  4. The save button enables when there is a change and when the values are valid and not null
  5. The indicator(initial, current, validity) checks if the initial and current are matching and current is not null
  6. If they are matching or the current value is null, the indicator should not render
  7. The indicator renders and shows a tick or a cross based on whether the validity is true or not
  8. After the Save button is pressed the profile is updated and the page is updated to show the new updated values

The Simple Logic:

  • Save button disables when there is no change or one field is invalid
  • Indicator pops up based on validity (when there is no default value)

Changes Made:

  • Added the new SolidJS EditProfile popup component
  • Sends the updated profile details to the backend when the form is saved
  • Immediately updates the page to show the new updated values
  • Added an Indicator component to show validation feedback for only social profile fields
  • Added an isNotDefault helper to render the indicator and increase the width of the textbox only when the value has changed and is not empty
  • Integrated the new EditProfile popup into UserDetails
  • Deleted the edit-profile.ts and the popup dialog from popups.html
  • Removed the event-handler from account.ts

Additional Changes Made:

  • Changed twitter schema maxlength to 15 instead of 20

Checks

  • Check if any open issues are related to this PR; if so, be sure to tag them below.
  • Make sure the PR title follows the Conventional Commits standard. (https://www.conventionalcommits.org for more info)
  • Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.

Closes #7683

@monkeytypegeorge monkeytypegeorge added frontend User interface or web stuff packages Changes in local packages labels Apr 28, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 28, 2026

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

@github-actions github-actions Bot added the waiting for update Pull requests or issues that require changes/comments before continuing label Apr 28, 2026
fehmer
fehmer requested changes Apr 28, 2026
View reviewed changes
Comment thread frontend/src/ts/components/popups/EditProfile.tsx
value !== initial && value !== "";

return (
<dialog
Copy link
Copy Markdown
Member

@fehmer fehmer Apr 28, 2026

Choose a reason for hiding this comment

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

use AnimatedModal

Comment thread frontend/src/ts/components/popups/EditProfile.tsx
if (e.target === e.currentTarget) props.onClose();
}}
>
<form class="modal" onSubmit={handleSubmit}>
Copy link
Copy Markdown
Member

@fehmer fehmer Apr 28, 2026

Choose a reason for hiding this comment

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

use tanstack form with validation

Comment thread frontend/src/ts/components/popups/EditProfile.tsx
value: string;
}) => (
<Show when={isNotDefault(props.value, props.initial)}>
<div class="statusIndicator">
Copy link
Copy Markdown
Member

@fehmer fehmer Apr 28, 2026

Choose a reason for hiding this comment

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

use ts/form and validations, check other usages

Comment thread frontend/src/ts/components/popups/EditProfile.tsx
if (!snapshot) return;

const badges = snapshot.inventory?.badges ?? [];
const originalState = {
Copy link
Copy Markdown
Member

@fehmer fehmer Apr 28, 2026

Choose a reason for hiding this comment

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

ts/form should handle this

Comment thread packages/schemas/src/users.ts
}

export const TwitterProfileSchema = profileDetailsBase(slug().max(20)).or(
export const TwitterProfileSchema = profileDetailsBase(slug().max(15)).or(
Copy link
Copy Markdown
Member

@fehmer fehmer Apr 28, 2026

Choose a reason for hiding this comment

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

why?

Copy link
Copy Markdown
Contributor Author

@AzureNightlock AzureNightlock Apr 28, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

Twitter's max handle/username length is 15 not 20 so I changed it if that's okay?

Comment thread frontend/src/ts/components/pages/profile/UserDetails.tsx
props.profile.uid !== undefined &&
props.profile.uid === (getUserId() ?? "");

const [showEditProfile, setShowEditProfile] = createSignal(false);
Copy link
Copy Markdown
Member

@fehmer fehmer Apr 28, 2026

Choose a reason for hiding this comment

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

remove, state is handled by AnimatedModal

@AzureNightlock
Copy link
Copy Markdown
Contributor Author

AzureNightlock commented Apr 28, 2026

Hey! @fehmer Thanks for the review! Can I address the feedback tomorrow if that's okay? I spent quite a bit of time on this and I have an exam tomorrow that I need to prepare for (prolly failing icl😭).

I mainly did this with whatever knowledge I had with react and I haven't really used tan stack and stuff so I apologize if some parts aren't as good as expected. I will work on this and make it better.

@github-actions github-actions Bot removed the waiting for update Pull requests or issues that require changes/comments before continuing label Apr 28, 2026
@fehmer
Copy link
Copy Markdown
Member

fehmer commented Apr 28, 2026

hi @AzureNightlock , sure, no hurry.

I thought we talked about ts/form before but I am not sure anymore. Best is to always check existing code before starting the implementation to not re-invent the wheel.

Good luck with your exam.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@fehmer fehmer fehmer requested changes

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

frontend User interface or web stuff packages Changes in local packages

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Profile saves even when no changes are made

3 participants

@AzureNightlock @fehmer @monkeytypegeorge