import { createCache } from "react-cache";
import { createResource } from "react-cache";

export let cache = createCache();

export let InvoiceResource = createResource((id) => {
  return fetch(`/invoices/${id}`).then((response) => {
    return response.json();
  });
});

import cache from "./cache";
import InvoiceResource from "./InvoiceResource";

let Invoice = ({ invoiceId }) => {
  let invoice = InvoiceResource.read(cache, invoiceId);
  return <h1>{invoice.number}</h1>;
};

// the store and reducer
import { createStore } from "redux";
import { connect } from "react-redux";

let reducer = (state, action) => {
  if (action.type === "LOADED_INVOICE") {
    return {
      ...state,
      invoice: action.data,
    };
  }
  return state;
};

let store = createStore(reducer);

/////////////////////////////////////////////
// the action
function fetchInvoice(dispatch, id) {
  fetch(`/invoices/${id}`).then((response) => {
    dispatch({
      type: "LOADED_INVOICE",
      data: response.json(),
    });
  });
}

/////////////////////////////////////////////
// the component, all connected up
class Invoice extends React.Component {
  componentDidMount() {
    fetchInvoice(this.props.dispatch, this.props.invoiceId);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.invoiceId !== this.props.invoiceId) {
      fetchInvoice(this.props.dispatch, this.props.invoiceId);
    }
  }

  render() {
    if (!this.props.invoice) {
      return null;
    }
    return <h1>{invoice.number}</h1>;
  }
}

export default connect((state) => {
  return { invoices: state.invoices };
})(Invoices);

import React, { Suspense, Fragment, memo } from "react";
import { unstable_createResource } from "react-cache";

const Fetcher = unstable_createResource(() =>
  fetch("https://jsonplaceholder.typicode.com/todos").then((r) => r.json())
);

const List = () => {
  const data = Fetcher.read();
  return (
    <ul>
      {data.map((item) => (
        <li style={{ listStyle: "none" }} key={item.id}>
          {item.title}
        </li>
      ))}
    </ul>
  );
};

const App = () => (
  <Fragment>
    <h2 style={{ textAlign: "center" }}>{`React: ${React.version} Demo`}</h2>
    <Suspense fallback={<div>Loading...</div>}>
      <List />
    </Suspense>
  </Fragment>
);

const MemoApp = memo(App);

export default MemoApp;