react-feather#Bookmark TypeScript Examples

The following examples show how to use react-feather#Bookmark. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: DownloadActionBar.tsx    From bee-dashboard with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
export function DownloadActionBar({
  onOpen,
  onCancel,
  onDownload,
  onUpdateFeed,
  hasIndexDocument,
  loading,
}: Props): ReactElement {
  return (
    <Grid container justifyContent="space-between">
      <ExpandableListItemActions>
        {hasIndexDocument && (
          <SwarmButton onClick={onOpen} iconType={Link} disabled={loading}>
            View Website
          </SwarmButton>
        )}
        <SwarmButton onClick={onDownload} iconType={Download} disabled={loading} loading={loading}>
          Download
        </SwarmButton>
        <SwarmButton onClick={onCancel} iconType={X} disabled={loading} cancel>
          Close
        </SwarmButton>
      </ExpandableListItemActions>
      <Box mb={1} mr={1}>
        <SwarmButton onClick={onUpdateFeed} iconType={Bookmark} disabled={loading}>
          Update Feed
        </SwarmButton>
      </Box>
    </Grid>
  )
}
Example #2
Source File: SideBar.tsx    From bee-dashboard with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
navBarItems = [
  {
    label: 'Info',
    path: ROUTES.INFO,
    icon: Home,
  },
  {
    label: 'Files',
    path: ROUTES.UPLOAD,
    icon: FileText,
  },
  {
    label: 'Feeds',
    path: ROUTES.FEEDS,
    icon: Bookmark,
  },
  {
    label: 'Stamps',
    path: ROUTES.STAMPS,
    icon: Layers,
  },
  {
    label: 'Accounting',
    path: ROUTES.ACCOUNTING,
    icon: DollarSign,
  },
  {
    label: 'Settings',
    path: ROUTES.SETTINGS,
    icon: Settings,
  },
  {
    label: 'Account',
    path: ROUTES.WALLET,
    icon: Briefcase,
  },
  {
    label: 'Gift Wallets',
    path: ROUTES.GIFT_CODES,
    icon: Gift,
  },
]
Example #3
Source File: UpdateFeed.tsx    From bee-dashboard with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up 
export default function UpdateFeed(): ReactElement {
  const { identities, setIdentities } = useContext(IdentityContext)
  const { beeApi, beeDebugApi } = useContext(SettingsContext)
  const { stamps, refresh } = useContext(StampContext)
  const { status } = useContext(BeeContext)
  const { hash } = useParams()

  const [selectedStamp, setSelectedStamp] = useState<string | null>(null)
  const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
  const [loading, setLoading] = useState(false)
  const { enqueueSnackbar } = useSnackbar()
  const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)

  const navigate = useNavigate()

  useEffect(() => {
    refresh()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  function onFeedChange(event: SelectEvent) {
    const uuid = event.target.value
    setSelectedIdentity(identities.find(x => x.uuid === uuid) || null)
  }

  function onStampChange(event: SelectEvent) {
    const batchId = event.target.value as string
    setSelectedStamp(batchId)
  }

  function onCancel() {
    navigate(-1)
  }

  function onBeginUpdatingFeed() {
    if (!selectedIdentity) {
      return
    }

    if (selectedIdentity.type === 'V3') {
      setShowPasswordPrompt(true)
    } else {
      onFeedUpdate(selectedIdentity)
    }
  }

  async function onFeedUpdate(identity: Identity, password?: string) {
    setLoading(true)

    if (!beeApi || !beeDebugApi || !selectedStamp) {
      enqueueSnackbar(<span>Bee API unavailabe</span>, { variant: 'error' })
      setLoading(false)

      return
    }

    try {
      await updateFeed(beeApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line
      persistIdentity(identities, identity)
      setIdentities([...identities])
      navigate(ROUTES.FEEDS_PAGE.replace(':uuid', identity.uuid))
    } catch (error: unknown) {
      setLoading(false)

      const message = (typeof error === 'object' && error !== null && Reflect.get(error, 'message')) || ''

      if (message.includes('possibly wrong passphrase')) {
        enqueueSnackbar('Wrong password, please try again', { variant: 'error' })
      } else {
        enqueueSnackbar('Could not update feed at this time, please try again later', { variant: 'error' })
      }
    }
  }

  if (!status.all) return <TroubleshootConnectionCard />

  return (
    <div>
      {showPasswordPrompt && selectedIdentity && (
        <FeedPasswordDialog
          feedName={selectedIdentity.name + ' Website'}
          onCancel={() => {
            setShowPasswordPrompt(false)
          }}
          onProceed={(password: string) => {
            onFeedUpdate(selectedIdentity, password)
          }}
          loading={loading}
        />
      )}
      <HistoryHeader>Update feed</HistoryHeader>
      <Box mb={2}>
        <Grid container>
          <SwarmSelect
            options={identities.map(x => ({ value: x.uuid, label: `${x.name} Website` }))}
            onChange={onFeedChange}
            label="Feed"
          />
        </Grid>
      </Box>

      <Box mb={4}>
        <Grid container>
          {stamps ? (
            <SwarmSelect
              options={stamps.map(x => ({ value: x.batchID, label: x.batchID.slice(0, 8) }))}
              onChange={onStampChange}
              label="Stamp"
            />
          ) : (
            <Typography>You need to buy a stamp first to be able to update a feed.</Typography>
          )}
        </Grid>
      </Box>
      <ExpandableListItemActions>
        <SwarmButton
          onClick={onBeginUpdatingFeed}
          iconType={Bookmark}
          loading={!showPasswordPrompt && loading}
          disabled={loading || !selectedStamp || !selectedIdentity}
        >
          Update Selected Feed
        </SwarmButton>
        <SwarmButton onClick={onCancel} iconType={X} disabled={loading} cancel>
          Close
        </SwarmButton>
      </ExpandableListItemActions>
    </div>
  )
}