Squashed commit of the following:

commit 55ac804
Author: Nick Beattie <nick@nickbytes.com>
Date:   Sun Aug 5 17:48:45 2018 -0400

    refactor: refresh posts and stateless components (#12)

public/.datignore

@@ -0,0 +1,3 @@
+.DS*
+node_modules
+.DS_Store

public/dat.json

@@ -1,5 +1,6 @@
 {
-  "url": "dat://1d5ea95a4410e14668c353c0309ca589f4f61aa51c518ccd38e89165f36d27be/",
+  "url":
+    "dat://aeac0a57a7f65ea03693909d817e93d8340c243137ed483076d7b68b18d09c61/",
   "title": "Dead",
   "description": ""
-}
+}

src/components/ContentSelection/TextPost/index.js

@@ -65,14 +65,13 @@ class TextPost extends React.Component {
       fileContents(titleContent, textContent, newPostId, 'text')
     );
 
-    this.setState(
-      {
-        titleContent: '',
-        textContent: ''
-      },
-      () => this.props.getPosts(archive)
-    );
-    return this.props.toggleContentSelection();
+    this.setState({
+      titleContent: '',
+      textContent: ''
+    });
+
+    this.props.getPosts(archive);
+    this.props.toggleContentSelection();
   };
 
   // deleteLink = async postId => {

src/components/ContentView/ContentViewLoop/index.js

@@ -1,14 +1,8 @@
 import React from 'react';
 import ContentItem from '../ContentItem';
 
-const ContentViewLoop = ({ posts }) => {
-  if (posts.length > 0) {
-    return (
-      <div>{posts.map((item, i) => <ContentItem vals={item} key={i} />)}</div>
-    );
-  } else {
-    return <div>Sorry, no posts dipshit.</div>;
-  }
-};
+const ContentViewLoop = ({ posts }) => (
+  <div>{posts && posts.map((x, i) => <ContentItem vals={x} key={i} />)}</div>
+);
 
 export default ContentViewLoop;

src/components/ContentView/index.js

@@ -2,33 +2,11 @@ import React from 'react';
 
 import ContentViewLoop from './ContentViewLoop';
 
-class ContentView extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      myPosts: [],
-      theirPosts: []
-    };
-  }
-
-  componentDidMount() {
-    this.setState({
-      myPosts: this.props.posts
-    });
-  }
-
-  render() {
-    return (
-      <section className={'ContentView'}>
-        {this.props.postDisplay === 'mine' && (
-          <ContentViewLoop posts={this.state.myPosts} />
-        )}
-        {this.props.postDisplay === 'theirs' && (
-          <ContentViewLoop posts={this.state.theirPosts} />
-        )}
-      </section>
-    );
-  }
-}
+const ContentView = ({ posts, postDisplay }) => (
+  <section className={'ContentView'}>
+    {postDisplay === 'mine' && <ContentViewLoop posts={posts} />}
+    {postDisplay === 'theirs' && <ContentViewLoop posts={posts} />}
+  </section>
+);
 
 export default ContentView;

src/components/Header/index.js

@@ -1,71 +1,55 @@
 import React from 'react';
 import ContentSelection from '../ContentSelection';
 
-class Header extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      contentSelectionOpen: false
-    };
-  }
+const Header = ({
+  getPosts,
+  contentSelectionOpen,
+  postDisplay,
+  togglePostDisplay,
+  toggleContentSelection
+}) => (
+  <header className={`Header`}>
+    <div className={`Header__Nav`}>
+      <a
+        className={`${'ContentToggle'} ${
+          contentSelectionOpen ? 'ContentToggle_Open' : ''
+        }`}
+        onClick={() => toggleContentSelection()}
+      >
+        <img src="/images/icon-plus.svg" alt="plus icon" />
+      </a>
+      <div className={'ContentDisplayToggle'}>
+        <a
+          className={`
+          ${'ContentDisplayToggle__Item'} 
+          ${postDisplay === 'mine' ? 'ContentDisplayToggle__Item_Selected' : ''}
+        `}
+          onClick={() => togglePostDisplay('mine')}
+        >
+          <img src="/images/icon-smile.svg" alt="show my posts" />
+        </a>
+        <a
+          className={`
+          ${'ContentDisplayToggle__Item'} 
+          ${
+            postDisplay === 'theirs'
+              ? 'ContentDisplayToggle__Item_Selected'
+              : ''
+          }
+        `}
+          onClick={() => togglePostDisplay('theirs')}
+        >
+          <img src="/images/icon-group.svg" alt="show their posts" />
+        </a>
+      </div>
+    </div>
 
-  componentDidMount() {}
-
-  toggleContentSelection = () => {
-    this.setState({
-      contentSelectionOpen: !this.state.contentSelectionOpen
-    });
-  };
-
-  render() {
-    return (
-      <header className={`Header`}>
-        <div className={`Header__Nav`}>
-          <a
-            className={`${'ContentToggle'} ${
-              this.state.contentSelectionOpen ? 'ContentToggle_Open' : ''
-            }`}
-            onClick={() => this.toggleContentSelection()}
-          >
-            <img src="/images/icon-plus.svg" alt="plus icon" />
-          </a>
-          <div className={'ContentDisplayToggle'}>
-            <a
-              className={`
-								${'ContentDisplayToggle__Item'} 
-								${
-                  this.props.postDisplay === 'mine'
-                    ? 'ContentDisplayToggle__Item_Selected'
-                    : ''
-                }
-							`}
-              onClick={() => this.props.togglePostDisplay('mine')}
-            >
-              <img src="/images/icon-smile.svg" alt="show my posts" />
-            </a>
-            <a
-              className={`
-								${'ContentDisplayToggle__Item'} 
-								${
-                  this.props.postDisplay === 'theirs'
-                    ? 'ContentDisplayToggle__Item_Selected'
-                    : ''
-                }
-							`}
-              onClick={() => this.props.togglePostDisplay('theirs')}
-            >
-              <img src="/images/icon-group.svg" alt="show their posts" />
-            </a>
-          </div>
-        </div>
-        <ContentSelection
-          getPosts={this.props.getPosts}
-          open={this.state.contentSelectionOpen}
-          toggleContentSelection={this.toggleContentSelection}
-        />
-      </header>
-    );
-  }
-}
+    <ContentSelection
+      getPosts={getPosts}
+      open={contentSelectionOpen}
+      toggleContentSelection={toggleContentSelection}
+    />
+  </header>
+);
 
 export default Header;

src/config.js

@@ -1,2 +1,2 @@
 export const DAT_URL =
-  '1d5ea95a4410e14668c353c0309ca589f4f61aa51c518ccd38e89165f36d27be';
+  'aeac0a57a7f65ea03693909d817e93d8340c243137ed483076d7b68b18d09c61';

src/containers/App/App.js

@@ -1,24 +1,30 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
-import { DAT_URL } from './../../config';
 
 import ContentViewContainer from '../ContentViewContainer';
-import PostContainer from '../PostContainer';
+import urlEnv from '../../utils/urlEnv';
+import PostContainer from '../PostContainer/index';
 
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      posts: []
+      posts: [],
+      postDisplay: 'mine',
+      contentSelectionOpen: false
     };
   }
 
   async componentDidMount() {
-    const archive = await new global.DatArchive(DAT_URL);
-    const archiveInfo = await archive.getInfo();
-
-    this.setInfo(archiveInfo);
-    this.getPosts(archive);
+    try {
+      const archive = await new global.DatArchive(urlEnv());
+      const archiveInfo = await archive.getInfo();
+      this.refreshPosts(archive);
+      this.setInfo(archiveInfo);
+      console.log('success');
+    } catch (error) {
+      console.log(error);
+    }
   }
 
   setInfo = archiveInfo => {
@@ -29,29 +35,40 @@ class App extends Component {
     });
   };
 
-  getPosts = async archive => {
-    // read directory to get all file names
+  refreshPosts = async archive => {
     const posts = await archive.readdir('/posts');
-    // map over all file names, add each object to an array
-    posts.map(async post => {
-      // read the entire file
-      const postItem = await archive.readFile(`/posts/${post}`);
-      // get state for posts and push into state
-      let myPosts = this.state.posts;
-      myPosts.push(JSON.parse(postItem));
+    if (posts.length === 0) {
+      this.setState({
+        posts: []
+      });
+    } else {
+      const promises = posts.map(async post => {
+        const postResponse = await archive.readFile(`/posts/${post}`);
+        return JSON.parse(postResponse);
+      });
+      const results = await Promise.all(promises);
       this.setState({
-        posts: myPosts
+        posts: results
       });
+    }
+  };
+
+  toggleContentSelection = () => {
+    this.setState(prevState => {
+      return {
+        ...prevState,
+        contentSelectionOpen: !prevState.contentSelectionOpen
+      };
     });
   };
 
-  refreshPosts = async archive => {
-    await this.setState(
-      {
-        posts: []
-      },
-      () => this.getPosts(archive)
-    );
+  togglePostDisplay = val => {
+    this.setState(prevState => {
+      return {
+        ...prevState,
+        postDisplay: val
+      };
+    });
   };
 
   render() {
@@ -63,9 +80,12 @@ class App extends Component {
             path="/"
             render={() => (
               <ContentViewContainer
+                contentSelectionOpen={this.state.contentSelectionOpen}
+                toggleContentSelection={this.toggleContentSelection}
+                postDisplay={this.state.postDisplay}
                 posts={this.state.posts}
-                postDisplay={'mine'}
-                getPosts={this.getPosts}
+                getPosts={this.refreshPosts}
+                togglePostDisplayFn={this.togglePostDisplay}
               />
             )}
           />

src/containers/ContentViewContainer/index.js

@@ -3,35 +3,24 @@ import React from 'react';
 import Header from '../../components/Header';
 import ContentView from '../../components/ContentView';
 
-class ContentViewContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      postDisplay: 'mine'
-    };
-  }
-
-  togglePostDisplay = val => {
-    this.setState({
-      postDisplay: val
-    });
-  };
-
-  render() {
-    return (
-      <div className="App">
-        <Header
-          postDisplay={this.state.postDisplay}
-          togglePostDisplay={this.togglePostDisplay}
-          getPosts={this.props.getPosts}
-        />
-        <ContentView
-          postDisplay={this.state.postDisplay}
-          posts={this.props.posts}
-        />
-      </div>
-    );
-  }
-}
+const ContentViewContainer = ({
+  getPosts,
+  postDisplay,
+  togglePostDisplayFn,
+  toggleContentSelection,
+  posts,
+  contentSelectionOpen
+}) => (
+  <div className="App">
+    <Header
+      contentSelectionOpen={contentSelectionOpen}
+      postDisplay={postDisplay}
+      togglePostDisplay={togglePostDisplayFn}
+      getPosts={getPosts}
+      toggleContentSelection={toggleContentSelection}
+    />
+    <ContentView postDisplay={postDisplay} posts={posts} />
+  </div>
+);
 
 export default ContentViewContainer;

src/utils/urlEnv.js

@@ -0,0 +1,10 @@
+import { DAT_URL } from '../config';
+const urlEnv = () => {
+  if (process.env.NODE_ENV === 'development') {
+    return DAT_URL;
+  } else {
+    return window.location.toString();
+  }
+};
+
+export default urlEnv;