bee-dashboard/src/pages/feeds/index.tsx

import { Box, Typography } from '@material-ui/core'
import { ReactElement, useContext, useState } from 'react'
import { Download, Info, PlusSquare, Trash } from 'react-feather'
import { useNavigate } from 'react-router'
import ExpandableList from '../../components/ExpandableList'
import ExpandableListItem from '../../components/ExpandableListItem'
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
import { SwarmButton } from '../../components/SwarmButton'
import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
import { CheckState, Context as BeeContext } from '../../providers/Bee'
import { Context as IdentityContext, Identity } from '../../providers/Feeds'
import { ROUTES } from '../../routes'
import { formatEnum } from '../../utils'
import { persistIdentitiesWithoutUpdate } from '../../utils/identity'
import { DeleteFeedDialog } from './DeleteFeedDialog'
import { ExportFeedDialog } from './ExportFeedDialog'
import { ImportFeedDialog } from './ImportFeedDialog'

export default function Feeds(): ReactElement {
  const { identities, setIdentities } = useContext(IdentityContext)
  const { status } = useContext(BeeContext)

  const navigate = useNavigate()

  const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
  const [showImport, setShowImport] = useState(false)
  const [showExport, setShowExport] = useState(false)
  const [showDelete, setShowDelete] = useState(false)

  function createNewFeed() {
    return navigate(ROUTES.FEEDS_NEW)
  }

  function viewFeed(uuid: string) {
    navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uuid))
  }

  function onDialogClose() {
    setShowDelete(false)
    setShowExport(false)
    setShowImport(false)
    setSelectedIdentity(null)
  }

  function onDelete(identity: Identity) {
    onDialogClose()
    const updatedFeeds = identities.filter(x => x.uuid !== identity.uuid)
    setIdentities(updatedFeeds)
    persistIdentitiesWithoutUpdate(updatedFeeds)
  }

  function onShowExport(identity: Identity) {
    setSelectedIdentity(identity)
    setShowExport(true)
  }

  function onShowDelete(identity: Identity) {
    setSelectedIdentity(identity)
    setShowDelete(true)
  }

  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />

  return (
    <div>
      {showImport && <ImportFeedDialog onClose={() => setShowImport(false)} />}
      {showExport && selectedIdentity && <ExportFeedDialog identity={selectedIdentity} onClose={onDialogClose} />}
      {showDelete && selectedIdentity && (
        <DeleteFeedDialog
          identity={selectedIdentity}
          onClose={onDialogClose}
          onConfirm={(identity: Identity) => onDelete(identity)}
        />
      )}
      <Box mb={4}>
        <Typography variant="h1">Feeds</Typography>
      </Box>
      <Box mb={4}>
        <ExpandableListItemActions>
          <SwarmButton iconType={PlusSquare} onClick={createNewFeed}>
            Create New Feed
          </SwarmButton>
          <SwarmButton iconType={PlusSquare} onClick={() => setShowImport(true)}>
            Import Feed
          </SwarmButton>
        </ExpandableListItemActions>
      </Box>
      {identities.map((x, i) => (
        <ExpandableList key={i} label={`${x.name} Website`} defaultOpen>
          <Box mb={0.5}>
            <ExpandableList label={x.name} level={1}>
              <ExpandableListItemKey label="Identity address" value={x.address} />
              <ExpandableListItem label="Identity type" value={formatEnum(x.type)} />
            </ExpandableList>
          </Box>
          <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
          {x.feedHash && <ExpandableListItemKey label="Feed hash" value={x.feedHash} />}
          <Box mt={0.75}>
            <ExpandableListItemActions>
              <SwarmButton onClick={() => viewFeed(x.uuid)} iconType={Info}>
                View Feed Page
              </SwarmButton>
              <SwarmButton onClick={() => onShowExport(x)} iconType={Download}>
                Export...
              </SwarmButton>
              <SwarmButton onClick={() => onShowDelete(x)} iconType={Trash}>
                Delete...
              </SwarmButton>
            </ExpandableListItemActions>
          </Box>
        </ExpandableList>
      ))}
    </div>
  )
}