How to use actionsack - 10 common examples

function EditorContainer(props) {
  const [themes, updateThemes] = React.useState(THEMES)
  const api = useAPI()
  const user = useAuth()
  const [update, { loading }] = useAsyncCallback(api.snippet.update)

  React.useEffect(() => {
    const storedThemes = getThemes(localStorage) || []
    if (storedThemes) {
      updateThemes(currentThemes => [...storedThemes, ...currentThemes])
    }
  }, [])

  React.useEffect(() => {
    saveThemes(themes.filter(({ custom }) => custom))
  }, [themes])

  // XXX use context
  const [snippet, setSnippet] = React.useState(props.snippet || null)
  const [toasts, setToasts] = React.useReducer(toastsReducer, [])

function RandomImage(props) {
  const cacheRef = React.useRef([])
  const [cacheIndex, updateIndex] = React.useState(0)
  const api = useAPI()

  const [selectImage, { loading: selecting }] = useAsyncCallback(() => {
    const image = cacheRef.current[cacheIndex]

    return api.unsplash.download(image.id).then(data => props.onChange({ ...image, ...data }))
  })

  const [updateCache, { loading: updating, error, data: imgs }] = useAsyncCallback(
    api.unsplash.random
  )

  const needsFetch = !error && !updating && (!imgs || cacheIndex > cacheRef.current.length - 2)

  React.useEffect(() => {
    if (needsFetch) {
      updateCache()
    }
  }, [needsFetch, updateCache])

  React.useEffect(() => {
    if (imgs) {
      cacheRef.current.push(...imgs)
    }
  }, [imgs])

function Billing(props) {
  const user = useAuth()

  const [submit, { error, loading, data: success }] = useAsyncCallback(async e => {
    e.preventDefault()

    const name = e.target.name.value.trim()

    const res = await props.stripe.createToken({ name })

    if (res.error) {
      throw res.error.message
    }

    return {}
  })

  if (!user) {
    return (
      <div></div>

function DeleteButton(props) {
  const [onClick, { loading }] = useAsyncCallback(props.onClick)

  return (
    
      {loading ? 'Deleting...' : 'Delete'}
    
  )

function ExportMenu({
  backgroundImage,
  onChange,
  exportSize,
  isVisible,
  toggleVisibility,
  exportImage: exp
}) {
  const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage])
  const online = useOnline()
  const isSafari = useSafari()

  const [exportImage, { loading }] = useAsyncCallback(exp)
  useKeyboardListener('⌘-⇧-e', () => exportImage())

  const disablePNG = isSafari && (tooLarge || !online)

  const input = React.useRef()

  const handleExportSizeChange = selectedSize => () => onChange('exportSize', selectedSize)

  const handleExport = format => () =>
    exportImage(format, {
      filename: input.current.value
    })

  return (
    <div id="export-menu">
      <div></div></div>

function RandomImage(props) {
  const cacheRef = React.useRef([])
  const [cacheIndex, updateIndex] = React.useState(0)
  const api = useAPI()

  const [selectImage, { loading: selecting }] = useAsyncCallback(() => {
    const image = cacheRef.current[cacheIndex]

    return api.unsplash.download(image.id).then(data => props.onChange({ ...image, ...data }))
  })

  const [updateCache, { loading: updating, error, data: imgs }] = useAsyncCallback(
    api.unsplash.random
  )

  const needsFetch = !error && !updating && (!imgs || cacheIndex > cacheRef.current.length - 2)

  React.useEffect(() => {
    if (needsFetch) {
      updateCache()
    }
  }, [needsFetch, updateCache])

function SnippetsPage() {
  const user = useAuth()
  const api = useAPI()

  const [snippets, setSnippets] = React.useState([])
  const [page, setPage] = React.useState(0)

  const mounted = useOnMount()

  const [loadMore, { loading, data: previousRes }] = useAsyncCallback(api.snippet.list)

  React.useEffect(() => {
    if (user) {
      loadMore(page).then(newSnippets => setSnippets(curr => curr.concat(newSnippets)))
    }
  }, [loadMore, page, user])

  function deleteSnippet(id) {
    return api.snippet.delete(id).then(() => setSnippets(curr => curr.filter(s => s.id !== id)))
  }

  if (!user) {
    return 
  }

  return (

function TweetButton(props) {
  const api = useAPI()
  const online = useOnlineListener()
  const [onClick, { loading }] = useAsyncCallback(props.onClick)

  if (!api || !api.tweet) {
    return null
  }

  if (!online) {
    return null
  }

  return (

function DuplicateButton(props) {
  const [onClick, { loading }] = useAsyncCallback(props.onClick)

  return (
    <button color="#37b589" border="" display="block">
      {loading ? 'Duplicating...' : 'Duplicate'}
    </button>
  )

function KeyboardShortcut({ trigger, handle }) {
  useKeyboardListener(trigger, handle)
  return null
}