support window.ipfs from IPFS Companion

package-lock.json

@@ -5657,11 +5657,6 @@
         "entities": "^1.1.1"
       }
     },
-    "dom-walk": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
-      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
-    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -9123,15 +9118,6 @@
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
       "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs="
     },
-    "global": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
-      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
-      "requires": {
-        "min-document": "^2.19.0",
-        "process": "~0.5.1"
-      }
-    },
     "global-dirs": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
@@ -14541,14 +14527,6 @@
         }
       }
     },
-    "min-document": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
-      "requires": {
-        "dom-walk": "^0.1.0"
-      }
-    },
     "mini-css-extract-plugin": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz",
@@ -18581,11 +18559,6 @@
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
       "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg=="
     },
-    "process": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
-      "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
-    },
     "process-nextick-args": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
@@ -19305,22 +19278,6 @@
         "warning": "^4.0.1"
       }
     },
-    "react-hot-loader": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.8.0.tgz",
-      "integrity": "sha512-HY9F0vITYSVmXhAR6tPkMk240nxmoH8+0rca9iO2B82KVguiCiBJkieS0Wb4CeSIzLWecYx3iOcq8dcbnp0bxA==",
-      "requires": {
-        "fast-levenshtein": "^2.0.6",
-        "global": "^4.3.0",
-        "hoist-non-react-statics": "^3.3.0",
-        "loader-utils": "^1.1.0",
-        "lodash": "^4.17.11",
-        "prop-types": "^15.6.1",
-        "react-lifecycles-compat": "^3.0.4",
-        "shallowequal": "^1.0.2",
-        "source-map": "^0.7.3"
-      }
-    },
     "react-is": {
       "version": "16.8.4",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz",
@@ -21173,11 +21130,6 @@
         }
       }
     },
-    "shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
-    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -21629,11 +21581,6 @@
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
       "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
     },
-    "source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
-    },
     "source-map-resolve": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",

package.json

@@ -13,7 +13,6 @@
     "orbit-db-discussion-board": "https://github.com/fazo96/orbit-db-discussion-board.git",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
-    "react-hot-loader": "^4.8.0",
     "react-redux": "^6.0.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.8",

src/components/Board.js

@@ -48,7 +48,7 @@ export default function Board({
   }
   return (
     <Grid container>
-      <Grid item xs="12" md="6">
+      <Grid item xs={12} md={6}>
         <Card>
           <CardHeader
             title={title || 'Unnamed Board'}
@@ -120,24 +120,24 @@ export default function Board({
           </List>
         </CardContent>
         <CardActions>
-          <Button as={Link} to="/">
+          <Button component={Link} to="/">
             <ArrowLeft />
             {' '}
 Boards
           </Button>
-          <Button disabled={!writeable} as={Link} to={`${shortenAddress(address)}/edit`}>
+          <Button disabled={!writeable} component={Link} to={`${shortenAddress(address)}/edit`}>
             <Edit />
             {' '}
 Edit
           </Button>
-          <Button disabled={!writeable} as={Link} to={`${shortenAddress(address)}/p/new`}>
+          <Button disabled={!writeable} component={Link} to={`${shortenAddress(address)}/p/new`}>
             <Add />
             {' '}
 New Post
           </Button>
         </CardActions>
       </Grid>
-      <Grid xs="12" md="6">
+      <Grid xs={12} md={6}>
         {Object.keys(posts || {}).map(i => <Post key={posts[i].multihash} {...posts[i]} />)}
       </Grid>
     </Grid>

src/components/BoardEditorForm.js

@@ -64,7 +64,7 @@ export default class BoardEditorForm extends Component {
           />
         </CardContent>
         <CardActions>
-          <Button as={Link} to={shortenAddress(address)}>
+          <Button component={Link} to={shortenAddress(address)}>
             <ArrowLeft />
             {' '}
 Back

src/components/Boards.js

@@ -31,7 +31,7 @@ export default function Boards({
 }) {
   return (
     <Grid>
-      <Grid item xs="12" md="8">
+      <Grid item xs={12} md={8}>
         <Card>
           <CardHeader
             avatar={<Avatar><AccountBox /></Avatar>}
@@ -83,7 +83,7 @@ export default function Boards({
               {' '}
 GitHub
             </Button>
-            <Button as={Link} to="/b/new">
+            <Button component={Link} to="/b/new">
               <Add />
               {' '}
 Add Board

src/components/BoardsItem.js

@@ -50,7 +50,7 @@ export default function BoardsItem({
           {' '}
 Close
         </Button>
-        <Button as={Link} to={shortenAddress(address)}>
+        <Button component={Link} to={shortenAddress(address)}>
           <Assignment />
           {' '}
 View

src/components/OpenBoardForm.js

@@ -53,7 +53,7 @@ export default class OpenBoardForm extends Component {
             />
           </CardContent>
           <CardActions>
-            <Button as={Link} to="/">
+            <Button component={Link} to="/">
               <ArrowLeft />
               {' '}
 Back

src/components/PostForm.js

@@ -71,7 +71,7 @@ export default class PostForm extends Component {
             />
           </CardContent>
           <CardActions>
-            <Button as={Link} to={shortenAddress(address)}>
+            <Button component={Link} to={shortenAddress(address)}>
               <ArrowLeft />
               {' '}
 Board

src/index.js

@@ -1,7 +1,5 @@
-import 'react-hot-loader/patch';
 import React from 'react';
 import { render } from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
 import configureStore, { history } from './store/configureStore';
@@ -12,31 +10,13 @@ import { start } from './orbitdb';
 const store = configureStore();
 
 render(
-  <AppContainer>
+  <Provider store={store}>
-    <Provider store={store}>
+    <ConnectedRouter history={history}>
-      <ConnectedRouter history={history}>
+      <App />
-        <App />
+    </ConnectedRouter>
-      </ConnectedRouter>
+  </Provider>,
-    </Provider>
-  </AppContainer>,
   document.getElementById('root'),
 );
 
-if (module.hot) {
-  module.hot.accept('./components/App', () => {
-    const NewApp = require('./components/App').default;
-    render(
-      <AppContainer>
-        <Provider store={store}>
-          <ConnectedRouter history={history}>
-            <NewApp />
-          </ConnectedRouter>
-        </Provider>
-      </AppContainer>,
-      document.getElementById('root'),
-    );
-  });
-}
-
 registerServiceWorker();
 start(store.dispatch);

src/orbitdb/index.js

@@ -1,7 +1,7 @@
-import IPFS from 'ipfs';
 import OrbitDB from 'orbit-db';
 import BoardStore from 'orbit-db-discussion-board';
 import multihashes from 'multihashes';
+import { getIPFS } from '../utils/ipfs';
 
 export function isValidID(id) {
   try {
@@ -13,20 +13,10 @@ export function isValidID(id) {
 }
 
 export async function start() {
-  if (!window.ipfs) {
+  const ipfs = await getIPFS();
-    window.ipfs = new IPFS({
-      repo: 'ipfs-v6-boards-v0',
-      EXPERIMENTAL: {
-        pubsub: true,
-      },
-    });
-    await new Promise((resolve) => {
-      window.ipfs.on('ready', () => resolve());
-    });
-  }
   if (!window.orbitDb) {
     OrbitDB.addDatabaseType(BoardStore.type, BoardStore);
-    window.orbitDb = new OrbitDB(window.ipfs);
+    window.orbitDb = new OrbitDB(ipfs);
   }
 }
 

src/utils/ipfs.js

@@ -1,19 +1,50 @@
+export async function createIPFS() {
+  const IPFS = (await import('ipfs')).default;
+  const node = new IPFS({
+    EXPERIMENTAL: {
+      pubsub: true,
+    },
+  });
+  return new Promise(resolve => node.on('ready', () => resolve(node)));
+}
+
+export async function getIPFS() {
+  let ipfs = window.ipfs_enabled || window.ipfs;
+  if (!ipfs) {
+    ipfs = await createIPFS();
+  } else if (typeof ipfs.enable === 'function') {
+    // support window.ipfs from IPFS companion
+    // https://github.com/ipfs-shipyard/ipfs-companion/blob/master/docs/window.ipfs.md
+    try {
+      ipfs = await window.ipfs.enable({
+        commands: ['object', 'files', 'pubsub'],
+      });
+    } catch (error) {
+      ipfs = await createIPFS();
+    }
+  }
+  window.ipfs_enabled = ipfs;
+  return ipfs;
+}
+
 export async function ipfsPut(content) {
+  const ipfs = await getIPFS();
   const obj = {
     content: Buffer.from(content),
     path: '/',
   };
-  const response = await window.ipfs.files.add(obj);
+  const response = await ipfs.files.add(obj);
   return response[0].hash;
 }
 
 export async function readText(multihash) {
-  const buffer = await window.ipfs.object.get(multihash);
+  const ipfs = await getIPFS();
+  const buffer = await ipfs.object.get(multihash);
   return buffer.toString('utf-8');
 }
 
 export async function getStats() {
-  const ipfs = window.ipfs;
+  const ipfs = await getIPFS();
   const orbitDb = window.orbitDb;
   const dbs = {};
   const stats = {};