fix: improve file creating and jaen plugin register

examples/my-gatsby-site/jaen-config.js

@@ -2,7 +2,7 @@ module.exports = {
   remote: 'snek-at/jaen-template',
   plugins: {
     pages: {
-      resolve: require('@snek-at/jaen-pages'),
+      resolve: require('@snek-at/jaen-pages/jaen-register'),
       templates: [require('./src/templates/SamplePage.tsx')]
     }
   }

examples/my-gatsby-site/jaen-pages.json

@@ -46,26 +46,38 @@
     },
     "SitePage /": {
       "context": {
-        "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmQMpYLFmfMonKZm1diNkd9ZhncfoVupxD25HimRWGHf8w",
-        "createdAt": "2021-09-10T14:22:04.577Z"
+        "createdAt": "2021-09-11T12:24:43.945Z",
+        "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmX8gnESkV4vwU91eLQbKTGUEgYUvb4SyHAxffAUG2U9hg"
       },
       "migrations": [
         {
           "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmQMpYLFmfMonKZm1diNkd9ZhncfoVupxD25HimRWGHf8w",
           "createdAt": "2021-09-10T14:22:04.577Z"
+        },
+        {
+          "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmPa6hqj9ZmCksKZzFsjUK4Jq9vdgF4o2nyG14MKgKu4hv",
+          "createdAt": "2021-09-11T12:17:40.524Z"
+        },
+        {
+          "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmV4temnVQ86fmhQZrw8wd5zVdDGcsquQyrM8Z1neVh6R7",
+          "createdAt": "2021-09-11T12:24:43.945Z"
         }
       ]
     }
   },
   "snekFinder": {
     "context": {
-      "createdAt": "2021-09-07T00:35:59.310Z",
-      "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmbJ8eYqfz82agTJeBsmNRuF9K18AqtXzz2nE4C6udPXYv"
+      "createdAt": "2021-09-11T12:24:43.945Z",
+      "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmcLMkFdHcUynuA4Qzd6nj6x1K7rumCTqwhut8KG1MCsW2"
     },
     "migrations": [
       {
         "createdAt": "2021-09-07T00:35:59.310Z",
         "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmbJ8eYqfz82agTJeBsmNRuF9K18AqtXzz2nE4C6udPXYv"
+      },
+      {
+        "createdAt": "2021-09-11T12:24:43.945Z",
+        "fileUrl": "https://cloudflare-ipfs.com/ipfs/QmcLMkFdHcUynuA4Qzd6nj6x1K7rumCTqwhut8KG1MCsW2"
       }
     ]
   }

examples/my-gatsby-site/src/pages/index.js

@@ -145,7 +145,7 @@ const IndexPage = () => {
           alt: 'ta',
           title: 'daa'
         }}
-        style={{width: '5000px'}}
+        style={{width: '100%'}}
       />
       <BlockContainer
         name="blockcontainer1"

packages/jaen-pages/gatsby-node.js

@@ -25,8 +25,13 @@ exports.createSchemaCustomization = ({actions}) => {
       images: [JaenPagesFile]
       parent: JaenPageId
       children: [JaenPageId]
+      fields: FieldType
     }
 
+    type FieldType {
+      _type: String
+    }  
+
     type JaenPageId {
       id: String!
     }
@@ -97,7 +102,8 @@ exports.createPages = async ({actions, graphql, cache}, pluginOptions) => {
         pageMetadata: {
           datePublished: createdAt,
           ...page.pageMetadata
-        }
+        },
+        fields: page.fields
       })
     }
   }
@@ -112,11 +118,9 @@ exports.onCreatePage = async ({cache, page, actions, store}) => {
   const cachedJaenPage = await cache.get(`jaen-static-page-${id}`)
 
   if (!jaenPageContext?.template) {
-    console.log('page', cachedJaenPage)
-
     deletePage(page)
 
-    createPage({
+    const newPage = {
       ...page,
       context: {
         ...page.context,
@@ -130,7 +134,9 @@ exports.onCreatePage = async ({cache, page, actions, store}) => {
           }
         }
       }
-    })
+    }
+
+    createPage(newPage)
   }
 
   // console.log('[onCreatePage] ', jaenPageContext)
@@ -162,12 +168,13 @@ exports.onCreatePage = async ({cache, page, actions, store}) => {
 
 exports.onCreateNode = async ({
   node,
-  actions: {createNode},
+  actions: {createNode, deleteNode, createPage},
   store,
   cache,
   createNodeId
 }) => {
   const createFile = async (url, parentNodeId) => {
+    console.log('should create', url, parentNodeId)
     return await createRemoteFileNode({
       url,
       parentNodeId,
@@ -190,7 +197,7 @@ exports.onCreateNode = async ({
 
         if (field._type === 'PlainField') {
           if (content._type === 'ImageBlock') {
-            let fileNode = createFile(content.src, node.id)
+            let fileNode = await createFile(content.src, node.id)
 
             if (fileNode) {
               images.push({
@@ -205,7 +212,7 @@ exports.onCreateNode = async ({
         } else if (field._type === 'BlocksField') {
           for (const [position, block] of Object.entries(field.blocks)) {
             if (block._type === 'ImageBlock') {
-              let fileNode = createFile(content.src, node.id)
+              let fileNode = await createFile(content.src, node.id)
 
               if (fileNode) {
                 images.push({

packages/jaen-pages/jaen-register.tsx

@@ -0,0 +1,86 @@
+import DiscardButton from './src/containers/ui/hotbar/DiscardButton'
+import EditButton from './src/containers/ui/hotbar/EditButton'
+import PublishButton from './src/containers/ui/hotbar/PublishButton'
+import FilesTab from './src/containers/ui/tabs/FilesTab'
+import PagesTab from './src/containers/ui/tabs/PagesTab'
+import SettingsTab from './src/containers/ui/tabs/SettingsTab'
+import {upload} from './src/ipfs'
+import {store} from './src/store'
+import {JaenPagesEntity, JaenPagesPublish} from './src/types'
+
+export default {
+  name: 'jaen-pages',
+  registerUI: {
+    hotbar: {
+      start: [<EditButton />, <DiscardButton />],
+      end: [<PublishButton />]
+    },
+    tabs: {
+      start: [
+        {
+          label: 'Pages',
+          content: <PagesTab />
+        },
+        {
+          label: 'Files',
+          content: <FilesTab />
+        }
+      ],
+      end: [
+        {
+          label: 'Settings',
+          content: <SettingsTab />
+        }
+      ]
+    }
+  },
+  registerCallbacks: {
+    onPublish: async () => {
+      const state = store.getState()
+
+      const createdAt = new Date().toISOString()
+
+      const newPages: {[id: string]: JaenPagesEntity} = {}
+
+      // upload nodes to ipfs
+      const nodes = state.site.allSitePage?.nodes
+
+      if (nodes) {
+        for (const [id, node] of Object.entries(nodes)) {
+          const paylaod = JSON.stringify(node)
+
+          const url = await upload(paylaod)
+          newPages[id] = {context: {fileUrl: url, createdAt}}
+        }
+      }
+
+      const siteMetadataPayload = JSON.stringify(state.site.siteMetadata)
+
+      const siteMetadata = siteMetadataPayload
+        ? await upload(siteMetadataPayload)
+        : undefined
+
+      const publishData: JaenPagesPublish = {
+        site: siteMetadata
+          ? {
+              context: {
+                createdAt,
+                fileUrl: siteMetadata
+              }
+            }
+          : undefined,
+        snekFinder: state.sf.initBackendLink
+          ? {
+              context: {
+                createdAt,
+                fileUrl: state.sf.initBackendLink
+              }
+            }
+          : undefined,
+        pages: newPages
+      }
+
+      return publishData
+    }
+  }
+}

packages/jaen-pages/src/containers/fields/TextField/index.tsx

@@ -39,8 +39,6 @@ const TextField: React.FC<TextFieldProps> = ({
   const {block, updatedFieldName} = useBlock(fieldName)
   fieldName = updatedFieldName
 
-  console.log('[TextField]', fieldName, block)
-
   const register = () => dispatch(registerPageField({pageId, field}))
   const unregister = () => dispatch(unregisterPageField({pageId, field}))
 

packages/jaen-pages/src/contexts/cms.tsx

@@ -124,6 +124,12 @@ export const CMSProvider: React.FC<CMSProviderType> = ({
           sitePageRootIds: allSitePage(filter: {parent: {id: {eq: null}}}) {
             distinct(field: id)
           }
+          allFile {
+            nodes {
+              name
+              id
+            }
+          }
           allSitePage {
             nodes {
               id
@@ -147,6 +153,9 @@ export const CMSProvider: React.FC<CMSProviderType> = ({
                     datePublished
                     isBlogPost
                   }
+                  fields {
+                    _type
+                  }
                   images {
                     id {
                       fieldName
@@ -164,12 +173,19 @@ export const CMSProvider: React.FC<CMSProviderType> = ({
           }
         }
       `}
-      render={({site: {siteMetadata}, sitePageRootIds, allSitePage}) => {
+      render={({
+        site: {siteMetadata},
+        sitePageRootIds,
+        allSitePage,
+        allFile
+      }) => {
         const site: SiteType = {
           allSitePage: {rootNodeIds: sitePageRootIds.distinct, nodes: {}},
           siteMetadata
         }
 
+        console.log('allfile', allFile)
+
         for (const node of allSitePage.nodes) {
           const jaenPageContext = node.context?.jaenPageContext
           const id = jaenPageContext?.id || node.id

packages/jaen-pages/src/index.tsx

@@ -1,12 +1,3 @@
-import loadable from '@loadable/component'
-
-import DiscardButton from './containers/ui/hotbar/DiscardButton'
-import EditButton from './containers/ui/hotbar/EditButton'
-import PublishButton from './containers/ui/hotbar/PublishButton'
-import {upload} from './ipfs'
-import {store} from './store'
-import {JaenPagesEntity, JaenPagesPublish} from './types'
-
 export type {JaenTemplate, JaenBlock} from './types'
 
 export {withRedux} from './store/withRedux'
@@ -15,84 +6,3 @@ export {useOptions} from './store/hooks'
 export {default as BlockContainer} from './containers/blocks/Container'
 
 export * as fields from './containers/fields'
-
-const PagesTab = loadable(() => import('./containers/ui/tabs/PagesTab'))
-const FilesTab = loadable(() => import('./containers/ui/tabs/FilesTab'))
-const SettingsTab = loadable(() => import('./containers/ui/tabs/SettingsTab'))
-
-export default {
-  name: 'jaen-pages',
-  registerUI: {
-    hotbar: {
-      start: [<EditButton />, <DiscardButton />],
-      end: [<PublishButton />]
-    },
-    tabs: {
-      start: [
-        {
-          label: 'Pages',
-          content: <PagesTab />
-        },
-        {
-          label: 'Files',
-          content: <FilesTab />
-        }
-      ],
-      end: [
-        {
-          label: 'Settings',
-          content: <SettingsTab />
-        }
-      ]
-    }
-  },
-  registerCallbacks: {
-    onPublish: async () => {
-      const state = store.getState()
-
-      const createdAt = new Date().toISOString()
-
-      const newPages: {[id: string]: JaenPagesEntity} = {}
-
-      // upload nodes to ipfs
-      const nodes = state.site.allSitePage?.nodes
-
-      if (nodes) {
-        for (const [id, node] of Object.entries(nodes)) {
-          const paylaod = JSON.stringify(node)
-
-          const url = await upload(paylaod)
-          newPages[id] = {context: {fileUrl: url, createdAt}}
-        }
-      }
-
-      const siteMetadataPayload = JSON.stringify(state.site.siteMetadata)
-
-      const siteMetadata = siteMetadataPayload
-        ? await upload(siteMetadataPayload)
-        : undefined
-
-      const publishData: JaenPagesPublish = {
-        site: siteMetadata
-          ? {
-              context: {
-                createdAt,
-                fileUrl: siteMetadata
-              }
-            }
-          : undefined,
-        snekFinder: state.sf.initBackendLink
-          ? {
-              context: {
-                createdAt,
-                fileUrl: state.sf.initBackendLink
-              }
-            }
-          : undefined,
-        pages: newPages
-      }
-
-      return publishData
-    }
-  }
-}

packages/jaen-pages/tsconfig.json

@@ -14,7 +14,7 @@
       "@common/*": ["common/*"]
     }
   },
-  "include": ["src", "gatsby-browser.js"],
+  "include": ["src", "gatsby-browser.js", "register.tsx"],
   "typeRoots": ["./@types"],
   "references": [{"path": "../jaen"}]
 }