allow console.log

src/pages/account/feeds/AccountFeeds.tsx

@@ -10,6 +10,7 @@ import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import { SwarmButton } from '../../../components/SwarmButton'
+import { SwarmTextInput } from '../../../components/SwarmTextInput'
 import { Context as IdentityContext, Identity } from '../../../providers/Feeds'
 import { ROUTES } from '../../../routes'
 import { formatEnum } from '../../../utils'
@@ -98,7 +99,11 @@ export function AccountFeeds(): ReactElement {
               <ExpandableListItem label="Identity type" value={formatEnum(x.type)} />
             </ExpandableList>
           </Box>
-          <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
+          {x.topic === '' ? (
+            <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
+          ) : (
+            <SwarmTextInput name="Topic" label="Specific Feed Topic" formik />
+          )}
           {x.feedHash && <ExpandableListItemKey label="Feed hash" value={x.feedHash} />}
           <Box mt={0.75}>
             <ExpandableListItemActions>

src/pages/feeds/CreateNewFeed.tsx

@@ -20,19 +20,24 @@ import { convertWalletToIdentity, generateWallet, persistIdentity } from '../../
 interface FormValues {
   identityName?: string
   type?: IdentityType
+  website: boolean
+  topic: string
   password?: string
 }
 
 const initialValues: FormValues = {
   identityName: '',
   type: 'PRIVATE_KEY',
   password: '',
+  website: true,
+  topic: '00',
 }
 
 export default function CreateNewFeed(): ReactElement {
   const { beeApi, beeDebugApi } = useContext(SettingsContext)
   const { identities, setIdentities } = useContext(FeedsContext)
   const [loading, setLoading] = useState(false)
+  const [website, setFeedType] = useState(true)
   const { enqueueSnackbar } = useSnackbar()
 
   const navigate = useNavigate()
@@ -108,7 +113,11 @@ export default function CreateNewFeed(): ReactElement {
             </Box>
             {values.type === 'V3' && <SwarmTextInput name="password" label="Password" password formik />}
             <Box mt={2}>
-              <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
+              {website ? (
+                <ExpandableListItemKey label="topic" value={'00'.repeat(32)} />
+              ) : (
+                <SwarmTextInput name="topic" label="Specific Feed Topic" formik />
+              )}
             </Box>
             <Box mt={2} sx={{ bgcolor: '#fcf2e8' }} p={2}>
               <Grid container justifyContent="space-between">

src/pages/feeds/FeedSubpage.tsx

@@ -5,18 +5,22 @@ import X from 'remixicon-react/CloseLineIcon'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItem from '../../components/ExpandableListItem'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { SwarmButton } from '../../components/SwarmButton'
 import { Context as BeeContext } from '../../providers/Bee'
-import { Context as IdentityContext } from '../../providers/Feeds'
+import { Identity, Context as IdentityContext } from '../../providers/Feeds'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
 import { UploadArea } from '../files/UploadArea'
+import { readFeed } from '../../utils/identity'
 
 export function FeedSubpage(): ReactElement {
   const { identities } = useContext(IdentityContext)
+  const { posts } = useContext(IdentityContext)
   const { uuid } = useParams()
-  const { beeApi } = useContext(SettingsContext)
+  const { beeApi, beeDebugApi } = useContext(SettingsContext)
   const { status } = useContext(BeeContext)
 
   const navigate = useNavigate()
@@ -25,6 +29,19 @@ export function FeedSubpage(): ReactElement {
 
   const identity = identities.find(x => x.uuid === uuid)
 
+  if (!beeApi || !beeDebugApi) {
+    return <></>
+  }
+
+  if (identity?.topic === '') {
+  } else {
+    try {
+      const readPostArray = readFeed(beeApi, beeDebugApi, identity as Identity)
+    } catch (error) {
+      return <></>
+    }
+  }
+
   useEffect(() => {
     if (!identity || !identity.feedHash) {
       return
@@ -50,7 +67,11 @@ export function FeedSubpage(): ReactElement {
   return (
     <div>
       <HistoryHeader>{`${identity.name} Website`}</HistoryHeader>
-      <UploadArea showHelp={false} uploadOrigin={{ origin: 'FEED', uuid }} />
+      {identity.topic === '' ? (
+        <UploadArea showHelp={false} uploadOrigin={{ origin: 'FEED', uuid }} />
+      ) : (
+        <UploadArea showHelp={false} uploadOrigin={{ origin: 'POST', uuid }} />
+      )}
       {available && identity.feedHash ? (
         <>
           <Box mb={4}>
@@ -72,6 +93,21 @@ export function FeedSubpage(): ReactElement {
           </DocumentationText>
         </Box>
       )}
+      // Posts form
+      {posts.map((x, i) => (
+        <ExpandableList key={i} label={`${x.Title} Website`} defaultOpen>
+          <Box mb={0.5}>
+            <ExpandableList label={x.Title} level={1}>
+              <ExpandableListItem label="Post Type" value={x.Type} />
+              <ExpandableListItem label="Post Date" value={x.Date} />
+              <ExpandableListItem label="Post Amount" value={x.Amount} />
+              <ExpandableListItem label="Post Provider" value={x.Provider} />
+              <ExpandableListItem label="Post Place" value={x.Place} />
+              /* Add a clickable bzz link to a bill scan here */
+            </ExpandableList>
+          </Box>
+        </ExpandableList>
+      ))}
       <ExpandableListItemActions>
         <SwarmButton iconType={X} onClick={onClose} cancel>
           Close

src/pages/files/Upload.tsx

@@ -1,4 +1,7 @@
 import { Box } from '@material-ui/core'
+import { Form, Formik } from 'formik'
+import { SwarmSelect } from '../../components/SwarmSelect'
+import { SwarmTextInput } from '../../components/SwarmTextInput'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -8,7 +11,7 @@ import { ProgressIndicator } from '../../components/ProgressIndicator'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants'
 import { Context as BeeContext, CheckState } from '../../providers/Bee'
-import { Identity, Context as IdentityContext } from '../../providers/Feeds'
+import { Identity, Post, Context as IdentityContext } from '../../providers/Feeds'
 import { Context as FileContext } from '../../providers/File'
 import { Context as SettingsContext } from '../../providers/Settings'
 import { EnrichedPostageBatch, Context as StampsContext } from '../../providers/Stamps'
@@ -23,6 +26,8 @@ import { PostageStampSelector } from '../stamps/PostageStampSelector'
 import { AssetPreview } from './AssetPreview'
 import { StampPreview } from './StampPreview'
 import { UploadActionBar } from './UploadActionBar'
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 
 export function Upload(): ReactElement {
   const [step, setStep] = useState(0)
@@ -41,6 +46,17 @@ export function Upload(): ReactElement {
   const navigate = useNavigate()
 
   const hasAnyStamps = stamps !== null && stamps.length > 0
+  const msg: Post = {
+    Title: 'PS5',
+    Type: 'Document',
+    Category: 'Loisir',
+    Date: '07/12/2023',
+    Amount: '750€',
+    Provider: 'Sony',
+    Place: 'La Defense',
+    reference: '',
+  }
+  const [PostData, setPostData] = useState(msg)
 
   useEffect(() => {
     refresh()
@@ -122,7 +138,6 @@ export function Upload(): ReactElement {
       })
       fls.push(packageFile(previewFile))
     }
-
     setUploading(true)
 
     if (beeDebugApi) {
@@ -133,17 +148,24 @@ export function Upload(): ReactElement {
       .uploadFiles(stamp.batchID, fls, { indexDocument, deferred: true })
       .then(hash => {
         putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(files))
-
+        // Load data in the Json/object
+        PostData.reference = hash.reference
         if (uploadOrigin.origin === 'UPLOAD') {
           navigate(ROUTES.HASH.replace(':hash', hash.reference), { replace: true })
         } else {
-          updateFeed(beeApi, beeDebugApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(
-            () => {
-              persistIdentity(identities, identity as Identity)
-              setIdentities([...identities])
-              navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uploadOrigin.uuid as string), { replace: true })
-            },
-          )
+          updateFeed(
+            beeApi,
+            beeDebugApi,
+            identity as Identity,
+            hash.reference,
+            stamp.batchID,
+            PostData as Post,
+            password as string,
+          ).then(() => {
+            persistIdentity(identities, identity as Identity)
+            setIdentities([...identities])
+            navigate(ROUTES.ACCOUNT_FEEDS_VIEW.replace(':uuid', uploadOrigin.uuid as string), { replace: true })
+          })
         }
       })
       .catch(e => {
@@ -164,6 +186,10 @@ export function Upload(): ReactElement {
     uploadFiles(password)
   }
 
+  async function onSubmit(values: Post) {
+    setPostData(values)
+  }
+
   return (
     <>
       {showPasswordPrompt && (
@@ -205,6 +231,55 @@ export function Upload(): ReactElement {
         </>
       )}
       {step === 2 && stamp && <StampPreview stamp={stamp} />}
+      // Posts form
+      {uploadOrigin.origin === 'POST' && (
+        <Formik initialValues={msg} onSubmit={onSubmit}>
+          {({ submitForm, values }) => (
+            <Form>
+              <Box mb={0.25}>
+                <SwarmTextInput name="Title" label="" formik />
+              </Box>
+              <Box mb={0.25}>
+                <SwarmSelect
+                  formik
+                  name="Type"
+                  options={[
+                    { label: 'Document', value: 'Document' },
+                    { label: 'Expenditure', value: 'Bill' },
+                  ]}
+                />
+              </Box>
+              <Box mb={0.25}>
+                <SwarmSelect
+                  formik
+                  name="Category"
+                  options={[
+                    { label: 'Groceries', value: 'Groceries' },
+                    { label: 'Petrol', value: 'CarPetrol' },
+                    { label: 'Non Petrol Car', value: 'CarFix' },
+                    { label: 'Travel', value: 'Travel' },
+                    { label: 'Medical', value: 'Medical' },
+                    { label: 'Investment', value: 'Investment' },
+                  ]}
+                />
+              </Box>
+              <Box mb={0.25}>
+                <SwarmTextInput name="Date" label="" formik />
+              </Box>
+              <Box mb={0.25}>
+                <SwarmTextInput name="Amount" label="" formik />
+              </Box>
+              <Box mb={0.25}>
+                <SwarmTextInput name="Provider" label="" formik />
+              </Box>
+              <Box mb={0.25}>
+                <SwarmTextInput name="Place" label="" formik />
+              </Box>
+            </Form>
+          )}
+        </Formik>
+      )}
+      // Post Form
       <UploadActionBar
         step={step}
         onCancel={reset}