---
v3
---

# Front End Patterns

## Hooks
- **useList()**:
- We have a lot of lists in the app. We spend a lot of time rewriting the functionality of lists.
- All of these lists need to store an array of items in state. They store a single filter string and/or sort in state.
- They store a static collection (usually object) of filter and/or sort fns along with the names of these functions for display in the filter and sort select.
- Does search as well
- Displays backup UI when there's no results
- Easy to debug modifiers(filters, sorts, etc)
- In V3, it's likely that filter and sort may also be contstructing a query and returning results instead of actually filtering or sorting on the front end, so it will also need to handle synchronous and asynchonous operations.
- All sorts, fetches, filters follow a common model.
- Designs should reflect this commonality as well. Just as it does in V2 (Playlists, marketplace, explore, proposals, members, etc)
ex

    const filters = {
  IPFS: { fn: doc => isIPFS(doc) && !isRatified(doc), name: 'IPFS' },
  onchain: {
    fn: doc => isEncoded(doc?.contentType) && !isRatified(doc),
    name: 'On Chain',
  },
  ratified: { fn: doc => isRatified(doc), name: 'Ratified' },

- Same List Model helps us build lists for different styles, ex. Cards or ListItems
- This should work hand-in-hand with a list style component macro, ex.

    <List
       listItems={Array}
       fetchItems={AsyncFn}
       filters={ObjectOfFilterFns}
       sorts={ObjectOfSearchFns}
       search={Boolean}
       style={Enum('cards', listItems, etc)}
       
    />

## Fetching

## State Management

##

## Library