icarus-sullivan

import React, { useState } from 'react';
import PageFetch from './PageFetch';

const Example = (props) => {
  const [url, setUrl] = useState('https://www.npmjs.com/package/@sullivan/use-async');

  return (
    <div>
      <div>Libraries</div>
      <select value={url} onChange={(e) => setUrl(e.target.value)}>

icarus-sullivan

import React, { useState } from 'react';
import { withAsync } from '@sullivan/use-async';

const PageFetch = ({ loading, data, error, dispatch }) => (
  <div>
    <button enabled={!loading} onClick={dispatch}>Request Page</button>
    <pre>{JSON.stringify({ loading, data, error })}</pre>
  </div>
);

icarus-sullivan

// ... useAysnc code above

export const withAsync = (fn, ...vargs]) => (Component) => ({ args, ...props }) => {
  // If users override args in props, use those instead of vargs
  const conditionalArgs = args || vargs;

  // merge useAsync props with given props
  const mergeProps = {
    ...props,
    ...useAsync(fn, ...conditionalArgs),

icarus-sullivan

import React, { useState } from 'react';
import { useAsync } from '@sullivan/use-async';

const Example = (props) => {
  const [url, setUrl] = useState('https://www.npmjs.com/package/@sullivan/use-async');
  const { loading, data, error, dispatch } = useAsync(fetch, url);

  return (
    <div>

icarus-sullivan

import React from 'react';
import { useAsync } from '@sullivan/use-async';

const Example = (props) => {
  const { loading, data, error, dispatch } = useAsync(fetch, 'https://www.npmjs.com/package/@sullivan/use-async');

  return (
    <button onClick={dispatch}>Request Page</button>  
  );
};

icarus-sullivan

import React, { useReducer } from 'react';

const config = [
  () => ({ loading: true }),
  (data) => ({ loading: false, data }),
  (error) => ({ loading: false, error }),
];

const asyncReducer = (_, { type, payload }) => config[type](payload);

icarus-sullivan

import React, { useContext } from 'react';
import { usePersistState } from 'hooks/usePersistState';

const Context = React.createContext('default');

const Theme = ({ theme, children }) => {
  const [_theme, setTheme] = usePersistState({ key: 'theme', defaultValue: theme });

  return (
    <Context.Provider value={{ theme: _theme, setTheme }}>

icarus-sullivan

import { useCallback, useState } from 'react';

export const usePersistState = ({ key, defaultValue }) => {
  const [value, setValue] = useState(JSON.parse(localStorage.getItem(key) || JSON.stringify(defaultValue)));

  const setter = useCallback((value) => {
    localStorage.setItem(key, JSON.stringify(value));
    setValue(value);
  });

icarus-sullivan

custom:
 domain:
  fn::ternary:
    - ${opt:stage}
    - prod
    - amazing.com
    - fn::lower: ${opt:stage}.amazing.com

icarus-sullivan

custom:
  stagedDomain: 
    prod: amazing.com

  domain: ${self:custom.stagedDomain.${opt:stage}, '${opt:stage}.amazing.com'}