
Compound Components are where two or more components work together to accomplish a single task.

The components share some implicit state between them which resides in the parent component and passed down to the children.

**Examples of this pattern:**

```jsx
<select>
  <option value="value1">Value One</option>
</select>

<AudioPlayer>
  <Play>Play song</Play>
  <Stop>Stop song</Stop>
</AudioPlayer>

<ol>
  <li>list item</li>
</ol>
```

## Compound Components

Here's the Day&Night Compound Component I'll be using:

- **on** renders Day
- **off** renders Night

<CompoundComponent />

This Compound Component consists of several individual components:

```jsx
<Toggle>
  <OnMessage>Good morning</OnMessage>
  <OffMessage>Good night</OffMessage>
  <Animation />
  <ToggleButton />
</Toggle>
```

- The parent `Toggle` component holds the state for whether the toggle is **on** or **off**
- This state is then shared to all the child components
- The Child components then render the different UI's based on the shared state of the parent

The implementation of the child components:

```jsx
// Accepts on prop from parent.  If on, render message, else render nothing
const OnMessage = ({ on, children }) => (on ? children : null);

// Accepts on prop from parent.  If on, render nothing else render message
const OffMessage = ({ on, children }) => (on ? null : children);

// Accepts on prop from parent.  If on, render day, else render night
const Animation = ({ on }) => <DayNightAnimation on={on} />;

// Accepts on and toggle props from parent.
// The toggle function prop allows us to toggle the state in the Parent Component
const ToggleButton = ({ on, toggle }) => <Switch on={on} onClick={toggle} />;
```

We need a way to pass the **on** and **toggle** props from the `Toggle` parent component to the child components.

Here's one approach to share state implicitly between a parent component and all its children:

```jsx{4,5,6}
const Toggle = ({ children }) => {
  const [on, setOn] = React.useState(false);
  const toggle = () => setOn(!on);
  return React.Children.map(children, (child) =>
    React.cloneElement(child, { on, toggle })
  );
};
```

`React.Children.map` iterates over all the children, and maps them into new children, forwarding the props from the parent to the child components.

## Flexible Compound Components

`React.Children.map` passes the props to all **direct** children of the parent component only.

If we add a wrapper div around the `Animation` component, it's now nested and no longer a direct child to the parent component.

The shared state is no longer available to the nested `Animation` component, instead the props are being passed to the `div`, causing the animation to no longer work.

```jsx{4,5,6}
<Toggle>
  <OnMessage>Good morning</OnMessage>
  <OffMessage>Good night</OffMessage>
  <div className="wrapper">
    <Animation />
  </div>
  <ToggleButton />
</Toggle>
```

To get the implicit shared state down from the parent `<Toggle />` component to all child and grandchild components, we can use React.createContext.

### Sharing state using React Context

Here's the updated parent `<Toggle />` component, sharing state through context:

```jsx
const ToggleContext = React.createContext();
ToggleContext.displayName = "ToggleContext";

function Toggle({ children }) {
  const [on, setOn] = React.useState(false);
  const toggle = () => setOn(!on);

  return (
    <ToggleContext.Provider value={{ on, toggle }}>
      {children}
    </ToggleContext.Provider>
  );
}
```

We can consume the context value in our child components using a custom hook:

```jsx
const useToggle = () => {
  const context = React.useContext(ToggleContext);
  if (context === undefined) {
    throw new Error("useToggle must be used within a <Toggle />");
  }
  return context;
};
```

Each child component can access state through the hook:

```jsx{2}
const Animation = () => {
  const { on } = useToggle();
  return (
    <DayNightAnimation on={on} >
  );
}
```

The state is still implicitly shared between the `<Toggle />` component and all its children. Only now, the state is accessible to all nested components too, no matter the depth.

<Box>
<h3>Further Reading</h3>
<ul>
<li>
The blog by{" "}
  <LinkBlankTarget href="https://kentcdodds.com/blog/compound-components-with-react-hooks">
    Kent C. Dodds
  </LinkBlankTarget>{" "}
   for this and other React patterns.
</li>
</ul>

</Box>


A React pattern where two or more components work together to accomplish a single task

Compound Components


Take this simple context example to increment and decrement a count value.

```js
const CountContext = React.createContext();

const countReducer = (state, action) => {
  switch (action.type) {
    case "increment": {
      return { ...state, count: state.count + 1 };
    }
    case "decrement": {
      return { ...state, count: state.count - 1 };
    }
    default: {
      return state;
    }
  }
};

const CountProvider = () => {
  const [state, dispatch] = React.useReducer(countReducer, { count: 0 });
  const value = [state, dispatch];
  return <CountContext.Provider value={value} />;
};

const useCount = () => {
  return React.useContext(CountContext);
};

export { CountProvider, useCount };
```

We can use the context and create custom **incrementCount** and **decrementCount** functions which call `dispatch`.

```js
import {  useCount } from 'context/count'

const Count = () => {
  const [state, dispatch] = useCount()
  const incrementCount = () => dispatch({type: 'increment'})
  const decrementCount = () => dispatch({type: 'decrement'})

return (....)
}
```

The drawback of this approach is the messy API of dispatching actions directly, as well as it being open to typos on the action type.

We can mitigate the typos using Enums or Action Creators, or make the reducer throw an error on an unknown action type:

```js
const countReducer = (state, action) {
  switch (action.type) {
    ...
    default: {
      throw new Error(`Unhandled action type: ${action.type}`)
    }
  }
}
```

## Helper Functions

One approach can be creating helper functions and include them in the context:

```js
const incrementCount = React.useCallback(
  () => dispatch({ type: "increment" }),
  [dispatch]
);
const decrementCount = React.useCallback(
  () => dispatch({ type: "decrement" }),
  [dispatch]
);
const value = { state, incrementCount, decrementCount };
return <CountContext.Provider value={value} />;
```

This can then be consumed in the component:

```js
const { state, incrementCount, decrementCount } = useCount();
```

But we now have to wrap the functions in `React.useCallback` to enable us to add them to dependency arrays.

## Context Module Functions Pattern

The Context Module Functions pattern is where we export helper functions that accept `dispatch`.

```js{32,33,36}
const CountContext = React.createContext();

const countReducer = (state, action) => {
  switch (action.type) {
    case "increment": {
      return { ...state, count: state.count + 1 };
    }
    case "decrement": {
      return { ...state, count: state.count - 1 };
    }
    default: {
      throw new Error(`Unhandled action type: ${action.type}`);
    }
  }
};

const CountProvider = () => {
  const [state, dispatch] = React.useReducer(countReducer, { count: 0 });
  const value = [state, dispatch];
  return <CountContext.Provider value={value} />;
};

const useCount = () => {
  const context = React.useContext(CountContext)
  if (context === undefined) {
    throw new Error(`useCount must be used within a CountProvider`)
  }
  return context
}


const incrementCount = (dispatch) => dispatch({ type: "increment" });
const decrementCount = (dispatch) => dispatch({ type: "decrement" });

// Note how the functions are exported as a module and not part of the context value
export { CountProvider, useCount, incrementCount, decrementCount };
```

This is how we would use it:

```jsx{6,7}
import { useCount, incrementCounter, decrementCounter } from "context/count";
const Count = () => {
  const [state, dispatch] = useCount();
  return (
    <>
      <button onClick={() => decrementCount(dispatch)}>Decrement</button>
      <button onClick={() => incrementCount(dispatch)}>Increment</button>
    </>
  );
};
```

**This pattern helps with:**

- Avoiding mistakes in dependency lists
- Improves performance
- Helps reduce duplication
- Makes code splitting easier


A React pattern to optimize context functions

Context Module Functions


When building a custom component, you might encounter a scenario where certain elements have identicle attributes or props applied to them.

Here's the Day&Night component we'll use as an example:

<PropCollectionsAndGetters />

We want this component to have the following props and attributes:

- `aria-pressed`
- `onClick`
- `on`

```jsx{16,18}
function useToggle() {
  const [on, setOn] = React.useState(false);
  const toggle = () => setOn(!on);

  return {
    on,
    toggle,
  };
}

const PropCollectionsAndGetters = () => {
  const { toggle, on } = useToggle();
  return (
    <>
      <Animation on={on}>
        <Button on={on} onClick={toggle} aria-pressed={on} aria-label="toggle-button" />
      </Animation>
      <Switch on={on} onClick={toggle} aria-pressed={on} />
    </>
  );
};
```

We have common props for both the Button and Switch components. Both components require these props by default either for functionality or accessibility.

We can create a collection of props to share with both components, ensuring none of the required props are accidentally omitted.

## Prop Collections

For common use cases, we can create **prop collections** containing all the required or default props for a component:

```js{8,9,10,11,12}
function useToggle() {
  const [on, setOn] = React.useState(false);
  const toggle = () => setOn(!on);

  return {
    on,
    toggle,
    toggleProps: {
      on,
      onClick: toggle,
      "aria-pressed": on,
    },
  };
}
```

This enables us to add all default props to components more easily:

```jsx{2,6,8}
const PropCollectionsAndGetters = () => {
  const { on, toggleProps } = useToggle();
  return (
    <Wrapper>
      <Animation on={on}>
        <Button {...toggleProps} aria-label="toggle-button" />
      </Animation>
      <Switch {...toggleProps} />
    </Wrapper>
  );
};
```

## Prop Getters

Prop collections work well for a specific requirement, but they aren't very flexible.

We may want to pass in our own click handler for custom scenarios where an event is emitted onClick.

But the example below breaks the toggle functionality, because our own click handler is overriding the `toggleProps` click handler we are also passing in.

```jsx{8}
const PropCollectionsAndGetters = () => {
  const { on, toggleProps } = useToggle();
  return (
    <Wrapper>
      <Animation on={on}>
        <Button {...toggleProps} aria-label="toggle-button" />
      </Animation>
      <Switch
      {...toggleProps}
      onClick={() => console.log('hello')}
      />
    </Wrapper>
  );
};
```

The solution is to compose the default props we want to apply to the Button and Switch components with any custom props we also want to add.

`getToggleProps` is a utility function that accepts any custom props or attributes we want to apply to an element or component and composes them with the default props.

```js{7,8,9,10,11,12,13,14}
function useToggle() {
  const [on, setOn] = React.useState(false);
  const toggle = () => setOn(!on);

const callAll = (...fns) => (...args) => fns.forEach(fn => fn?.(...args))

  function getToggleProps({ onClick, ...props } = {}) {
    return {
      "aria-pressed": on,
      onClick: callAll(onClick, toggle),
      on,
      ...props,
    };
  }
  return {
    on,
    toggle,
    getToggleProps,
  };
}
```

`getToggleProps` returns an object of the composed custom and default props which we can spread to our components.

```jsx{7,8,9,10,13}
const PropCollectionsAndGetters = () => {
  const { on, getToggleProps } = useToggle();
  return (
    <Wrapper>
      <Animation on={on}>
        <Button
          {...getToggleProps({
            "aria-label": "toggle-button",
            onClick: () => console.log("hello"),
          })}
        />
      </Animation>
      <Switch {...getToggleProps()} />
    </Wrapper>
  );
};
```

<Box>
  <h3>Further Reading</h3>
  <ul>
    <li>
      The blog by{" "}
      <LinkBlankTarget href="https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters">
        Kent C. Dodds
      </LinkBlankTarget>{" "}
      for this and other React patterns.
    </li>
  </ul>
</Box>


A React pattern where common attributes or props across elements are collected in an object

Prop Collections and Getters


**Other React patterns:**

1.  <LinkBlankTarget href="https://nullisnotanobject.co.uk/posts/react-patterns-compound-components">
      Compound Components
    </LinkBlankTarget>
2.  <LinkBlankTarget href="https://nullisnotanobject.co.uk/posts/react-patterns-prop-collections-and-getters">
      Prop Collections and Getters
    </LinkBlankTarget>

We sometimes start off with a simple component for a specific scenario, but end up reusing it elsewhere.

As an example, we have this simple component that toggles back and forth.

<CompoundComponent />

```javascript
const actionTypes = {
  toggle: "toggle",
};

function toggleReducer(state, { type }) {
  switch (type) {
    case actionTypes.toggle: {
      return { on: !state.on };
    }
    default: {
      throw new Error(`Unsupported type: ${type}`);
    }
  }
}

function useToggle() {
  const initialState = { on: true };
  const [state, dispatch] = React.useReducer(toggleReducer, initialState);
  const { on } = state;
  const toggle = () => dispatch({ type: actionTypes.toggle });

  return {
    on,
    toggle,
  };
}

const Toggle = () => {
  const { toggle, on } = useToggle();
  return (
    <>
      <Animation on={on} />
      <Switch on={on} onClick={toggle} />
    </>
  );
};
```

During the lifetime of a component, requirements may come up not originally accounted for.

We can keep customising the component for each new change, which would require adding extra props and logic to the original reducer.

But this can get tedious after a few changes. We can instead use a design pattern known as **Inversion of Control** to handle any new use cases.

## Inversion of Control

Inversion of Control gives users complete control to update the internal state of a component from the outside.

For this example, we want to re-use the existing component, but limit the number of times it can be toggled as per the example below:

<StateReducer />

## Custom Reducer

The original component implements a simple reducer for the toggle functionality.

We can give users the ability to update the internal state of the component by allowing them to provide their own custom reducer.

Users can also avoid repeating all the logic of the original reducer, by combining custom logic with the original reducer, as per the example below:

```jsx{4,5,6,7,8,9}
const [timesClicked, setTimesClicked] = React.useState(0);
const clickedTooMuch = timesClicked >= 5;

function customReducer(state, action) {
  if (action.type === actionTypes.toggle && clickedTooMuch) {
    return { on: state.on };
  }
  return toggleReducer(state, action);
}
```

We update the `useToggle` hook which defaults to the original reducer, or uses a custom reducer if its passed in.

```jsx{27,28,29,30,31,32,35}
function toggleReducer(state, { type, initialState }) {
  switch (type) {
    case actionTypes.toggle: {
      return { on: !state.on };
    }
    case actionTypes.reset: {
      return initialState;
    }
    default: {
      throw new Error(`Unsupported type: ${type}`);
    }
  }
}

function useToggle({ reducer = toggleReducer } = {}) {
  const initialState = {on: false}
  const [state, dispatch] = React.useReducer(reducer, initialState);
  const { on } = state;
  const toggle = () => dispatch({ type: actionTypes.toggle });

  return {
    on,
    toggle,
  };
}

function customReducer(state, action) {
  if (action.type === actionTypes.toggle && clickedTooMuch) {
    return { on: state.on };
  }
  return toggleReducer(state, action);
}

const { on, getToggleProps, getResetterProps } = useToggle({
  reducer: customReducer,
});
```

## Bringing it all together

Here's the full code implementing the State Reducer and Prop Collections and Getters pattern:

```jsx
const callAll =
  (...fns) =>
  (...args) =>
    fns.forEach((fn) => fn?.(...args));

const actionTypes = {
  toggle: "toggle",
  reset: "reset",
};

function toggleReducer(state, { type, initialState }) {
  switch (type) {
    case actionTypes.toggle: {
      return { on: !state.on };
    }
    case actionTypes.reset: {
      return initialState;
    }
    default: {
      throw new Error(`Unsupported type: ${type}`);
    }
  }
}

function useToggle({ reducer = toggleReducer } = {}) {
  const initialState = { on: false };
  const [state, dispatch] = React.useReducer(reducer, initialState);
  const { on } = state;

  const toggle = () => dispatch({ type: actionTypes.toggle });
  const reset = () => dispatch({ type: actionTypes.reset, initialState });

  function getToggleProps({ onClick, ...props } = {}) {
    return {
      "aria-pressed": on,
      onClick: callAll(onClick, toggle),
      ...props,
    };
  }

  function getResetterProps({ onClick, ...props } = {}) {
    return {
      onClick: callAll(onClick, reset),
      ...props,
    };
  }

  return {
    on,
    reset,
    toggle,
    getToggleProps,
    getResetterProps,
  };
}

const Toggle = () => {
  const [timesClicked, setTimesClicked] = React.useState(0);
  const clickedTooMuch = timesClicked >= 4;

  function customReducer(state, action) {
    if (action.type === actionTypes.toggle && clickedTooMuch) {
      return { on: state.on };
    }
    return toggleReducer(state, action);
  }

  const { on, getToggleProps, getResetterProps } = useToggle({
    reducer: customReducer,
  });

  return (
    <Wrapper>
      <Text checked={on} limit={clickedTooMuch} />
      <Animation on={on} />
      <Switch
        {...getToggleProps({
          disabled: clickedTooMuch,
          on: on,
          onClick: () => setTimesClicked((count) => count + 1),
        })}
      />
      <ResetBtn {...getResetterProps({ onClick: () => setTimesClicked(0) })}>
        Reset
      </ResetBtn>
    </Wrapper>
  );
};
```

<Box>
  <h3>Further Reading</h3>
  <ul>
    <li>
      The blog by{" "}
      <LinkBlankTarget href="https://kentcdodds.com/blog/the-state-reducer-pattern-with-react-hooks">
        Kent C. Dodds
      </LinkBlankTarget>{" "}
      for this and other React patterns.
    </li>
  </ul>
</Box>


A React pattern where users are given control to manage the internal state of a component for their own custom use cases

State Reducer Pattern


The documentation for working with the Firestore Rest API isn't very detailed. So here is a quick breakdown for performing the most common tasks.

## Contents

1.  [Create a Firestore Document](/posts/using-the-firestore-rest-api#create-a-firestore-document)
2.  [Edit an existing Firestore Document](/posts/using-the-firestore-rest-api#edit-an-existing-firestore-document)
3.  [Get an existing Firestore Document](/posts/using-the-firestore-rest-api#get-an-existing-firestore-document)
4.  [Data Types](/posts/using-the-firestore-rest-api#data-types)
5.  [Firestore Rules](/posts/using-the-firestore-rest-api#firestore-rules)
6.  [Authentication](/posts/using-the-firestore-rest-api#authentication)

## Create a Firestore Document

- The **Base Url** for working with the Rest API is: `/firestore.googleapis.com/v1/`
- **Project Id**: Firebase Project Id
- **(default)**: The documentation refers to this as the Database ID, including the brackets
- **Collection Name**: The name of a Firestore collection

```bash
POST
{baseUrl}/projects/{projectId}/databases/(default)/documents/collectionName
```

### Payload and format

```json
{
  "fields": {
    "name": {
      "stringValue": "Peter Parker"
    },
    "age": {
      "integerValue": 17
    },
    "created": {
      "timestampValue": "2021-06-21T18:17:39.795Z"
    }
  }
}
```

This will create a document with an auto-generated **Document Id**

## Edit an existing Firestore Document

Make a `PATCH` request to Edit an existing Document, be sure to include the **documentId**

```bash
PATCH
{baseUrl}/projects/{projectId}/databases/(default)/documents/collectionName/documentId
```

### Payload and format

```json{2,5,8}
{
  "name": "projects/{projectId}/databases/(default)/documents/collectionName/documentId"
  "fields": {
    "name": {
      "stringValue": "Clark Kent"
    },
    "age": {
      "integerValue": 22
    },
    "created": {
      "timestampValue": "2021-06-21T18:17:39.795Z"
    }
  }
}
```

Ensure the path to the document name is also included under the `name` field.

If the Document ID exists, it will **edit** the document with the new values.
If the Document ID doesn't exist, it will **create** a new Document.

## Get an existing Firestore Document

Make a `GET` request

```bash
GET
{baseUrl}/projects/{projectId}/databases/(default)/documents/collectionName/documentId
```

## Data Types

The most common Data Types are:

- stringValue - example usage shown above
- integerValue - example usage shown above
- timestampValue - example usage shown above
- arrayValue
- mapValue

### Using arrayValue

Editing the current document to add an array of string values.

```json{13,14,15,16,17,18,19,20,21,22,23,24}
{
  "name": "projects/{projectId}/databases/(default)/documents/collectionName/documentId"
  "fields": {
    "name": {
      "stringValue": "Peter Parker"
    },
    "age": {
      "integerValue": 17
    },
    "created": {
      "timestampValue": "2021-06-21T18:17:39.795Z"
    },
    "hobbies": {
        "arrayValue": {
            "values": [
                {
                    "stringValue": "hanging around"
                },
                {
                    "stringValue": "surfing the web"
                }
            ]
        }
    },
  }
}
```

### Using arrayValue with mapValue

Editing the current document to add an array of objects

```json{13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42}
{
  "name": "projects/{projectId}/databases/(default)/documents/collectionName/documentId"
  "fields": {
    "name": {
      "stringValue": "Peter Parker"
    },
    "age": {
      "integerValue": 17
    },
    "created": {
      "timestampValue": "2021-06-21T18:17:39.795Z"
    },
    "thingsToBuy": {
      "arrayValue": {
          "values": [
              {
                  "mapValue": {
                      "fields": {
                          "quantity": {
                              "integerValue": 1
                          },
                          "item": {
                              "stringValue": "spider suit"
                          }
                      }
                  }
              },
              {
                  "mapValue": {
                      "fields": {
                          "quantity": {
                              "integerValue": 2
                          },
                          "item": {
                              "stringValue": "web shooter"
                          }
                      }
                  }
              }
          ]
      }
    }
  }
}
```

## Firestore Rules

We can make unauthenticated requests to Get, Edit and Create Firestore documents just by passing the API key as a parameter, as long as the **Firestore Rules** allow it.

Insecure Firestore Rules as shown below are bad practice and open to malicious activity, any user can access or change the data.

```json
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
     match /collectionName/{document=**} {
      allow read,write: if true;
    }
  }
}
```

To only allow authenticated requests, we need to make the following change.

```json{5}
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
     match /collectionName/{document=**} {
      allow read,write: if request.auth.uid != null
    }
  }
}
```

If we now try making any **unauthenticated** CRUD requests, we should see an error.

```json
{
  "error": {
    "code": 403,
    "message": "Missing or insufficient permissions.",
    "status": "PERMISSION_DENIED"
  }
}
```

## Authentication

Firebase allows several methods of <LinkBlankTarget href="https://firebase.google.com/docs/firestore/use-rest-api">Authentication and Authorization</LinkBlankTarget>

The quickest and easiest way is to:

- Sign in anonymously
- Obtain an **idToken** fron the response
- Send the **idToken** in the CRUD request headers.

### Signing in Anonymously

```bash
POST
https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=YOURAPIKEY
```

### Id Token in Response

```json{3}
{
  "kind": "identitytoolkit#SignupNewUserResponse",
  "idToken": "aVeryLongString",
  "refreshToken": "anotherLongString",
  "expiresIn": "3600",
  "localId": "S0x3435ETWTWEr"
}
```

### Request Headers

```js
Authorization: Bearer {idToken}
```

We can now use the `idToken` from the response and attach it to the headers of the CRUD requests.


Cloud Firestore has SDK's for various platforms.  For a custom use case, you may need to use the Rest Api

Learning through Blogging

State Reducer Pattern

Prop Collections and Getters

Compound Components

Using the Firestore Rest API

Context Module Functions