freesewing/packages/react/components/Account/Export.mjs

// Context
import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
// Hooks
import React, { useState, useContext } from 'react'
import { useBackend } from '@freesewing/react/hooks/useBackend'
// Components
import { Link as WebLink } from '@freesewing/react/components/Link'
import { DownloadIcon } from '@freesewing/react/components/Icon'
import { Popout } from '@freesewing/react/components/Popout'
import { IconButton } from '@freesewing/react/components/Button'

/**
 * A component to manage the user's export account data action
 *
 * @component
 * @returns {JSX.Element}
 */
export const Export = () => {
  // Hooks
  const backend = useBackend()
  const { setLoadingStatus } = useContext(LoadingStatusContext)

  // State
  const [link, setLink] = useState()

  // Helper method to export account
  const exportData = async () => {
    setLoadingStatus([true, 'Contacting backend'])
    const [status, body] = await backend.exportAccount()
    if (status === 200) {
      setLink(body.data)
      setLoadingStatus([true, 'All done', true, true])
    } else setLoadingStatus([true, 'Something went wrong, please report this', true, false])
  }

  return (
    <div className="tw:max-w-xl">
      {link ? (
        <Popout type="link">
          <h5>Your data was exported and is available for download at the following location:</h5>
          <p className="tw:text-lg">
            <WebLink href={link}>{link}</WebLink>
          </p>
        </Popout>
      ) : null}
      <p>Click below to export your personal FreeSewing data</p>
      <IconButton onClick={exportData} title="Export your data">
        <DownloadIcon />
        Export Your Data
      </IconButton>
    </div>
  )
}