fix merge conflicts

AutarkLabs · Sep 5, 2019 · 9112572 · 9112572
2 parents 991670a + db807db
commit 9112572
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 85 deletions.
diff --git a/src/apps/Organization/Storage.js b/src/apps/Organization/Storage.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { Button, DropDown, TextInput, theme } from '@aragon/ui'
 import styled from 'styled-components'
 import { useIpfs } from '../../hooks'
+import noResultsSvg from '../../components/GlobalPreferences/CustomLabels/no-results.svg'
 
 export const ARAGON_ASSOCIATION = 'ARAGON_ASSOCIATION'
 export const INFURA = 'INFURA'
@@ -58,82 +59,78 @@ ProviderCredentialInputs.propTypes = {
 }
 
 const Storage = () => {
-  const { ipfsProviderName, updateIpfsProvider, getData, setData } = useIpfs()
+  const {
+    ipfsProviderName,
+    updateIpfsProvider,
+    isStorageAppInstalled,
+  } = useIpfs()
 
   const [activeProvider, setActiveProvider] = useState(
     items.indexOf(ipfsProviderName)
   )
   const [providerKey, setProviderKey] = useState('')
   const [providerSecret, setProviderSecret] = useState('')
   return (
-    <div>
-      <MarginBottom>
-        <MarginBottom>
-          <SettingsLabel>Provider</SettingsLabel>
-          <DropDown
-            css={{ width: '300px' }}
-            items={items.map(item => {
-              if (item === ARAGON_ASSOCIATION) return 'Aragon Association'
-              if (item === INFURA) return 'Infura'
-              if (item === PINATA) return 'Pinata'
-              if (item === TEMPORAL_CLOUD) return 'Temporal Cloud'
-            })}
-            selected={activeProvider}
-            onChange={setActiveProvider}
-          />
-        </MarginBottom>
-        <MarginBottom>
-          {activeProvider === 2 && (
-            <ProviderCredentialInputs
-              providerKeyInput="Key"
-              providerSecretInput="Secret"
-              providerKey={providerKey}
-              providerSecret={providerSecret}
-              setProviderKey={setProviderKey}
-              setProviderSecret={setProviderSecret}
-            />
-          )}
-          {activeProvider === 3 && (
-            <ProviderCredentialInputs
-              providerKeyInput="Username"
-              providerSecretInput="Password"
-              providerKey={providerKey}
-              providerSecret={providerSecret}
-              setProviderKey={setProviderKey}
-              setProviderSecret={setProviderSecret}
-            />
-          )}
-        </MarginBottom>
-      </MarginBottom>
-      <Button
-        disabled={ipfsProviderName === items[activeProvider]}
-        mode="strong"
-        onClick={() =>
-          updateIpfsProvider(
-            items[activeProvider],
-            apiEndpoints[activeProvider],
-            providerKey,
-            providerSecret
-          )
-        }
-      >
-        Save changes
-      </Button>
-      <Button
-        onClick={() => {
-          setData('key', { value: 'yo' })
-        }}
-      >
-        Set data
-      </Button>
-      <Button
-        onClick={() => {
-          getData('key')
-        }}
-      >
-        get data
-      </Button>
-    </div>
+    <StorageWrapper>
+      {!isStorageAppInstalled ? (
+        <NoStorageCard />
+      ) : (
+        <React.Fragment>
+          <MarginBottom>
+            <MarginBottom>
+              <SettingsLabel>Provider</SettingsLabel>
+              <DropDown
+                css={{ width: '300px' }}
+                items={items.map(item => {
+                  if (item === ARAGON_ASSOCIATION) return 'Aragon Association'
+                  if (item === INFURA) return 'Infura'
+                  if (item === PINATA) return 'Pinata'
+                  if (item === TEMPORAL_CLOUD) return 'Temporal Cloud'
+                })}
+                selected={activeProvider}
+                onChange={setActiveProvider}
+              />
+            </MarginBottom>
+            <MarginBottom>
+              {activeProvider === 2 && (
+                <ProviderCredentialInputs
+                  providerKeyInput="Key"
+                  providerSecretInput="Secret"
+                  providerKey={providerKey}
+                  providerSecret={providerSecret}
+                  setProviderKey={setProviderKey}
+                  setProviderSecret={setProviderSecret}
+                />
+              )}
+              {activeProvider === 3 && (
+                <ProviderCredentialInputs
+                  providerKeyInput="Username"
+                  providerSecretInput="Password"
+                  providerKey={providerKey}
+                  providerSecret={providerSecret}
+                  setProviderKey={setProviderKey}
+                  setProviderSecret={setProviderSecret}
+                />
+              )}
+            </MarginBottom>
+          </MarginBottom>
+          <Button
+            disabled={ipfsProviderName === items[activeProvider]}
+            mode="strong"
+            onClick={() =>
+              updateIpfsProvider(
+                items[activeProvider],
+                apiEndpoints[activeProvider],
+                providerKey,
+                providerSecret
+              )
+            }
+          >
+            Save changes
+          </Button>
+        </React.Fragment>
+      )}
+    </StorageWrapper>
   )
 }
 
@@ -153,5 +150,36 @@ const SettingsLabel = styled.div`
 const MarginBottom = styled.div`
   margin-bottom: 20px;
 `
+const NoStorageCard = () => (
+  <div
+    css={`
+      margin: 56px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    `}
+  >
+    <img
+      css={`
+        margin: 56px 0;
+      `}
+      src={noResultsSvg}
+      alt="No results"
+    />
+    <h3
+      css={`
+        font-size: 28px;
+        color: ${theme.content};
+        margin-bottom: 14px;
+      `}
+    >
+      No storage app yet.
+    </h3>
+  </div>
+)
 
+const StorageWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`
 export default Storage
diff --git a/src/contexts/IpfsStorageContext.js b/src/contexts/IpfsStorageContext.js
@@ -11,12 +11,14 @@ import { AppType, AragonType } from '../prop-types'
 
 export const IPFSStorageContext = createContext({})
 
+const NO_STORAGE_APP_INSTALLED = 'noStorageAppInstalled'
 const IPFS_PROVIDER_CONNECTION_SUCCESS = 'ipfsProviderConnectionSuccess'
 const IPFS_PROVIDER_CONNECTION_FAILURE = 'ipfsProviderConnectionFailure'
 const IPFS_PROVIDER_CONNECTING = 'ipfsProviderConnecting'
 const IPFS_PROVIDER_FOUND = 'ipfsProviderFound'
 
 const initialStorageContextValue = {
+  isStorageAppInstalled: null,
   ipfsEndpoints: null,
   [IPFS_PROVIDER_CONNECTING]: false,
   [IPFS_PROVIDER_CONNECTION_SUCCESS]: false,
@@ -34,7 +36,7 @@ const getFromCache = (wrapper, key) => {
 
 const createIpfsProvider = async (
   provider,
-  uri,
+  uri = '',
   providerKey = '',
   providerSecret = ''
 ) => {
@@ -105,11 +107,11 @@ const getInfuraNode = () => {
         return response.json()
       },
       put: async json => {
-        let data = new FormData()
-        data.append('v0', JSON.stringify(json))
+        const body = new FormData()
+        body.append('v0', JSON.stringify(json))
         const response = await fetch(putEndpoint, {
           method: 'POST',
-          body: data,
+          body,
         })
         const { Cid } = await response.json()
         return { cid: Cid['/'] }
@@ -145,21 +147,16 @@ const getTemporalNode = async (username, password) => {
         })
         return response.json()
       },
-      put: async () => {
-        let key = Math.random().toString()
-        let val = Math.random().toString()
-        let blob = new Blob([{ [key]: val }], {
-          type: 'application/json',
-        })
-        let formData = new FormData()
-        formData.append('hold_time', '1')
-        formData.append('file', blob)
+      put: async dag => {
+        const body = new FormData()
+        body.append('hold_time', '1')
+        body.append('file', dag)
         const response = await fetch(putEndpoint, {
           method: 'POST',
           headers: {
             Authorization: 'Bearer ' + token,
           },
-          body: formData,
+          body,
         })
         return response.json()
       },
@@ -169,6 +166,11 @@ const getTemporalNode = async (username, password) => {
 
 const reducer = (state, action) => {
   switch (action.type) {
+    case NO_STORAGE_APP_INSTALLED:
+      return {
+        ...initialStorageContextValue,
+        isStorageAppInstalled: false,
+      }
     case IPFS_PROVIDER_CONNECTION_SUCCESS:
       return {
         ...state,
@@ -227,12 +229,17 @@ export const providerFound = (provider, uri) => ({
   },
 })
 
+const noStorageApp = () => ({
+  type: NO_STORAGE_APP_INSTALLED,
+})
+
 export const IPFSStorageProvider = ({ children, apps, wrapper }) => {
   const [ipfsStore, dispatchToIpfsStore] = useReducer(
     reducer,
     initialStorageContextValue
   )
   const [storageContract, setStorageContract] = useState({})
+  const storageApp = apps.find(({ name }) => name === 'Storage')
 
   const setData = useCallback(
     (key, dag) => {
@@ -295,8 +302,6 @@ export const IPFSStorageProvider = ({ children, apps, wrapper }) => {
     [wrapper, storageContract]
   )
 
-  const storageApp = apps.find(({ name }) => name === 'Storage')
-
   useEffect(() => {
     const getStorageProvider = async storageApp => {
       try {
@@ -329,6 +334,8 @@ export const IPFSStorageProvider = ({ children, apps, wrapper }) => {
     if (storageApp) {
       dispatchToIpfsStore(connecting())
       getStorageProvider(storageApp)
+    } else {
+      dispatchToIpfsStore(noStorageApp())
     }
   }, [wrapper, storageApp])
 

diff --git a/src/hooks.js b/src/hooks.js
@@ -317,6 +317,7 @@ export const useIpfs = () => {
     updateIpfsProvider,
     getData,
     setData,
+    isStorageAppInstalled,
   } = useContext(IPFSStorageContext)
 
   return {
@@ -330,5 +331,6 @@ export const useIpfs = () => {
     updateIpfsProvider,
     getData,
     setData,
+    isStorageAppInstalled,
   }
 }