feat: add identity and feed management (#272)

* feat(wip): add basic feed operations * ci: bump checks * ci: bump checks * feat: rework stamps and add feed functionalities * refactor: polish and fixes * feat(wip): add formulas * feat: show bzz.link for websites * feat: add stamp empty states and formatBzz * feat: add feed download * chore: update manifest-js version * feat: dev mode support with bee-js 3.1.0 (#273) * feat: dev mode support with bee-js 3.1.0 * fix: added missing package-lock.json file * build: remove PR preview * style: work on design * feat: add TroubleshootConnectionCard * build: remove depcheck Co-authored-by: Attila Gazso <agazso@gmail.com>
2021-12-21 10:58:54 +01:00
parent d7c59a1495
commit 25b65c3fb7
46 changed files with 4354 additions and 6378 deletions
@@ -0,0 +1,113 @@
+import { Box, createStyles, makeStyles, TextareaAutosize, Theme } from '@material-ui/core'
+import { useSnackbar } from 'notistack'
+import React, { ReactElement, useContext, useRef, useState } from 'react'
+import { Check, Upload } from 'react-feather'
+import ExpandableListItemActions from '../../components/ExpandableListItemActions'
+import { SwarmButton } from '../../components/SwarmButton'
+import { SwarmDialog } from '../../components/SwarmDialog'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
+import { TitleWithClose } from '../../components/TitleWithClose'
+import { Context, Identity } from '../../providers/Feeds'
+import { importIdentity, persistIdentity } from '../../utils/identity'
+
+interface Props {
+  onClose: () => void
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    textarea: {
+      width: '100%',
+      border: 0,
+      padding: theme.spacing(1),
+    },
+    displayNone: {
+      display: 'none',
+    },
+  }),
+)
+
+export function ImportFeedDialog({ onClose }: Props): ReactElement {
+  const [textareaValue, setTextareaValue] = useState('')
+  const [name, setName] = useState('')
+  const fileInputRef = useRef(null)
+
+  const { identities, setIdentities } = useContext(Context)
+
+  const { enqueueSnackbar } = useSnackbar()
+
+  const classes = useStyles()
+
+  async function onImport() {
+    const feed = await importIdentity(name, textareaValue)
+
+    if (feed) {
+      onFeedReady(feed)
+    } else {
+      enqueueSnackbar('Feed is not valid', { variant: 'error' })
+    }
+  }
+
+  function onUploadIdentityFile() {
+    if (fileInputRef.current) {
+      const input = fileInputRef.current as HTMLInputElement
+      input.click()
+    }
+  }
+
+  function onIdentityFileSelected(event: React.ChangeEvent<HTMLInputElement>) {
+    const fileReader = new FileReader()
+    const file = event.target?.files?.[0]
+    fileReader.onload = async event => {
+      const string = event.target?.result
+
+      if (string) {
+        const feed = await importIdentity(name, string as string)
+
+        if (feed) {
+          onFeedReady(feed)
+        } else {
+          enqueueSnackbar('Feed is not valid', { variant: 'error' })
+        }
+      }
+    }
+
+    if (file) {
+      fileReader.readAsText(file)
+    }
+  }
+
+  function onFeedReady(identity: Identity) {
+    persistIdentity(identities, identity)
+    setIdentities(identities)
+    enqueueSnackbar('Feed imported successfully', { variant: 'success' })
+    onClose()
+  }
+
+  return (
+    <SwarmDialog>
+      <input onChange={onIdentityFileSelected} ref={fileInputRef} className={classes.displayNone} type="file" />
+      <Box mb={4}>
+        <TitleWithClose onClose={onClose}>Import</TitleWithClose>
+      </Box>
+      <Box mb={2}>
+        <SwarmTextInput label="Identity Name" name="name" onChange={event => setName(event.target.value)} />
+      </Box>
+      <Box mb={4}>
+        <TextareaAutosize
+          className={classes.textarea}
+          minRows={5}
+          onChange={event => setTextareaValue(event.target.value)}
+        />
+      </Box>
+      <ExpandableListItemActions>
+        <SwarmButton iconType={Upload} onClick={onUploadIdentityFile}>
+          Upload Json File
+        </SwarmButton>
+        <SwarmButton iconType={Check} onClick={onImport}>
+          Use Pasted Text
+        </SwarmButton>
+      </ExpandableListItemActions>
+    </SwarmDialog>
+  )
+}