Week 11 - Common UI Patterns

Common UI Patterns

Modal

A modal is a common UI pattern that is used to display content on top of the main content of a page. It is often used for forms, alerts, or other important information that requires user interaction.

https://mui.com/joy-ui/react-modal/

Cards

Cards are a common UI pattern that is used to display content in a compact and organized way. They are often used to display images, text, and other information in a visually appealing way.

https://mui.com/material-ui/react-card/

Loading Spinners

Many applications apply a loading spinner while async actions are taking place.

A loading spinner can be added to JoyUI buttons by using the loading prop.

<Button loading />

Final Project - Extra Fields

Dealing with the “extra” fields of our contact schema is more complex than the standard fields. Normally, only the value would change - but extra fields allow the key and value to change.

1. Rendering Extra Fields

We’ll need to use a map to iterate over the extra fields, since we don’t know what the fields are or how many there might be.

We can’t use map directly on the extraFields object, since map is an array method. Instead, we can use Object.entries() to convert the object into an array of key-value pairs.

Tip: Don’t forget to make a useState for the extra fields, or they won’t respond to changes

{Object.entries(extra).map(
  ([key, value]) =>
    <Box key={key}>
        {/* Display Code Here */}
    </Box>
)}

2. Adding Extra Fields

To add extra fields, we need to allow the user to set both the key and value in the contact.extra object.

Ex, Setting the key address equal to thew value New Hardford.

{
  "id": 1245,
  "firstName": "Jimmy",
  "lastName": "John",
  "email": "[email protected]",
  "phone": "784-456-7841",
  "extra": {
    "Address": "New Hartford"
  }
}

Tip: The recommended approach is to only allow adding and deleting of extra fields. Allowing the modification of existing fields is not recommended - dealing with keys changing in an object is difficult and error-prone.

2A. Add Extra Field UI

Create a UI to add a new extra field. This might be a form or modal, for example.

2B. Updating the State

We need to create a new object that contains the existing data, and the new key with an empty value. For this, we’ll need to use the special syntax [variable]. This tells javascript “use the value of variable as the key in the object”, rather than the string “variable”.

setExtra(existing => {
  return {
    // copy the existing extra fields from the extra object
    ...existing,
    // include the key with a blank value  
    [key]: ''
  }
})

You’ll know step 2 is working if you:

• Can type a new field name into an input and press save
• The new input field is displayed in a non-editable fashion

3. Updating Field Values

Updating field values will look very similar to step 2B, except we’ll use a real value instead of a blank string.

Create an input field for the value, and use the onChange event to update the state.

Tip: We’ll want to use a function to handle the update, as there won’t be a specific useState for each field.

Continuing with our example from step 1, we’ll add an input with an onChange listener

{Object.entries(extra).map(
  ([key, value]) =>
    <Box key={key}>
      {/* ...existing code... */}
      <Input  value={value} onChange={e => onExtraChange(key, e.target.value)} />
    </Box>
)}

The onChange listener should callback to something like this

function onExtraChange(key, value) {
  setExtra(existing => {
    return {
      // use existing values
      ...existing,
      // update the key: value pair for the specified key
      [key]: value
    }
  })
}

4. Save the changes

Finally, be sure to include the extra data in the REST call to the API to save the contact.

You’ll know this is working if you:

• Can save changes to an extra field’s value.
  • Ex, setting Address to New Hartford, saving the contact, then reloading the contact page shows the updated values.