Frontend: Update client information

[dhanashri-dotcom]

Task: Create a form to update the client’s profile. Description: Provide an editable form populated with the client's existing information. Acceptance Criteria:

• The form pre-fills with existing client information.
• Changes to the information are saved and sent to the backend API for updates.

[xq443]

Front-end User Information Update Workflow

1. Retrieve the Specific User Info

• Step Description:

  • The user starts on a listing page displaying all registered users and their details.
  • The user selects an individual from the list to view or update.
  • Upon selection, a request is made to the db.json file or the backend to retrieve the specific user’s data.

• Backend Interaction:

  • API Call: Fetch specific user details from db.json.
  • Example Endpoint: /api/users/:id (GET request to fetch user details).

• Front-end Action:

  • Display the user’s information in an editable format (e.g., age, gender, education).

2. Update Banner

• Step Description:

  • An "UPDATE" banner is visible on the user detail page.
  • Clicking the banner takes the user to the editable form for updating user information.

• Backend Interaction:

  • No backend interaction yet; this is a front-end navigation to the "Update User" page.

• Front-end Action:

  • Navigate to the user form page and display the editable form with existing user data.

3. Updating User Page

• Step Description:

  • The user updates information like age, gender, and work experience.
  • Upon clicking the "Save" button, the data is validated and updated.
  • 

• Backend Interaction:

  • API Call: Send updated data to the backend to update the user’s info in the db.json file.
  • Example Endpoint: /api/users/:id (PUT request to update user details).

• Front-end Action:

  • Trigger an onClick event for the "Save" button to send the updated data back to the backend.

4. Show Success Alert

• Step Description:

  • After the user's information is successfully updated, an alert message appears confirming success.

• Backend Interaction:

  • None; backend already processed the update.

• Front-end Action:

  • Display an alert message:

    alert('User updated successfully!');

5. Update Listing Page

• Step Description:

  • After updating the user, the listing page should reflect the latest changes.

• Backend Interaction:

  • API Call: Fetch the updated list of users from the db.json file.
  • Example Endpoint: /api/users (GET request to fetch all users).

• Front-end Action:

  • Re-render the user list with the updated data from the backend.

Example db.json File Structure

{
      "id": "10a2",
      "age": "26",
      "gender": "female",
      "work_experience": "12",
      "canada_workex": "10",
      "dep_num": 0,
      "canada_born": "false",
      "citizen_status": "",
      "level_of_schooling": "",
      "fluent_english": "false",
      "reading_english_scale": 0,
      "speaking_english_scale": 0,
      "writing_english_scale": 0,
      "numeracy_scale": 0,
      "computer_scale": 0,
      "transportation_bool": "false",
      "caregiver_bool": "false",
      "housing": "",
      "income_source": "",
      "felony_bool": "true",
      "attending_school": "false",
      "currently_employed": "true",
      "substance_use": "true",
      "time_unemployed": "1",
      "need_mental_health_support_bool": "false"
    },