resto-react

COMPONENTS

1. useModal

• The concept of this component is to render a modal-like components both in Native, Web and other React platforms and prevents unnecessary re-renders accross the app.

USAGE

import { ModalProvider, useModal } from "@resto-react";

function EntryPoint() {
  return (
    <ModalProvider>
      <App/>
    </ModalProvider>
  )
}

function ProductLists() {
  const toastMessage = useModal(MyOwnCustomToastMessage);
  const [products, setProducts] = React.useState(null);

  React.useEffect(() => {
    (async function fetchApi() {
      try {
        const data = await getProducts();
        setProducts(data)
      } catch (err) {
        /**
         * here by the showing the toastMessage,
         * we render the *MyOwnCustomToastMessage* only in the React tree.
         * This prevents re-renders in this component because conceptually
         * only the MyCustomToastMessage should be rendered.
        */
        toastMessage.show({ message: "Problem fetching Products" })
      }
    })()
  }, []);

  if (!products) return <Loading />

  return ...
}

function MyOwnCustomToastMessage(props) {
  /* here the modal itself pass hide prop implicitly to hide the component.*/
  const { hide } = props;

  React.useEffect(() => {
    // perform animation so that it feels like a toast
  }, []);

  function onClose() {
    // perform closing animation
    closingAnimationFn();
    hide(); // hide provided by the modal removes the component from the React tree.
  }
}

PLEASE NOTE

useModal doesn't care much about how one might render the component style-wise. It only cares about mounting and unmounting the component from the React tree.

2. useToggle

• A hook used to toggle a boolean, useful for state that require toggle like switch, accordian, dropdown etc

Usuage

const [on, toggle, setTrue, setFalse] = useToggle();

3. useSorter

• A hook used to sort the items

Usuage

import {
  useSorter,
  descendingStringComparator,
  ascendingStringComparator,
  ascendingNumberComparator,
  descendingNumberComparator,
} from '@resto/react';

const items = [
  { id: 4, name: "Z", price: 90 },
  { id: 1, name: "A", price: 120 },
  { id: 2, name: "B", price: 20 },
]


// let's define the sortStates outside the scope of component
// you could create your own custom comparator
const defaultSortStates = [
  {
    sortKey: 'price',
    ascComparator: ascendingNumberComparator,
    descComparator: descendingNumberComparator,
    sortOrder: null, // null, if the items are not supposed to be sorted at the initial mount
  },
  {
    sortKey: 'name',
    ascComparator: ascendingStringComparator,
    descComparator: descendingStringComparator,
    sortOrder: 'asc',
  },
];

function MyComponent() {
  const [getSortByKey, updateSortByKey, sortedItems] = useSorter(items, defaultSortStates);

  return (
    <section>
      <button onClick={() => updateSortByKey("name", "asc")}>
        Sort By Name (asc)
      </button>
      <button onClick={() => updateSortByKey("name", "desc")}>
        Sort By Name (desc)
      </button>

       <button onClick={() => updateSortByKey("price", "asc")}>
        Sort By Price (asc)
      </button>
      <button onClick={() => updateSortByKey("price", "desc")}>
        Sort By Price (desc)
      </button>

      <ul>
        {sortedItems.map(item => <li key={item.id}>{item.name}</li>)}
      <ul>
    </section>
  )
}

PLEASE NOTE: You could create your own comparators and pass it on as the defaultSortStates

CONSIDERATIONS

1. Formatting

Formatting in 2021, is a least thing one should worry about. To make it easy and consistent across project. Please install

prettier

in your IDE ( be it Vscode, Webstorm or Atom).

Enable prettier so that it formats automatically in default.