beginnings of blog page

apps/publish/src/js/components/blog.js

@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { PostPreview } from '/components/post-preview';
+
+
+export class Blog extends Component {
+  constructor(props){
+    super(props)
+  }
+
+
+  buildPosts(){
+    let blogId = this.props.blogId;
+    let ship = this.props.ship;
+    let blog = this.retrieveColl(blogId, ship);
+
+    console.log("buildposts", blog);
+
+    let pinProps = blog.order.pin.map((post) => {
+      return this.buildPostPreviewProps(post, blogId, ship, true);
+    });
+
+    let unpinProps = blog.order.unpin.map((post) => {
+      return this.buildPostPreviewProps(post, blogId, ship, false);
+    });
+
+    return pinProps.concat(unpinProps);
+  }
+
+  buildPostPreviewProps(post, coll, who, pinned){
+    let pos = this.retrievePost(post, coll, who);
+    let col = this.retrieveColl(coll, who);
+    let com = this.retrieveComments(post, coll, who);
+
+    return {
+      postTitle: pos.info.title,
+      postName:  post,
+      postSnippet: "body snippet",
+      numComments: com.length,
+      collectionTitle: col.title,
+      collectionName:  coll,
+      author: who,
+      date: pos.info["date-created"],
+      pinned: pinned,
+    }
+
+  }
+
+  retrievePost(post, coll, who) {
+    if (who === window.ship) {
+      return this.props.pubs[coll].posts[post].post;
+    } else {
+      return this.props.subs[who][coll].posts[post].post;
+    }
+  }
+
+  retrieveComments(post, coll, who) {
+    if (who === window.ship) {
+      return this.props.pubs[coll].posts[post].comments;
+    } else {
+      return this.props.subs[who][coll].posts[post].comments;
+    }
+  }
+
+  retrieveColl(coll, who) {
+    if (who === window.ship) {
+      return this.props.pubs[coll];
+    } else {
+      return this.props.subs[who][coll];
+    }
+  }
+
+  render() {
+    let postProps = this.buildPosts();
+
+    let posts = postProps.map((post) => {
+      return (
+        <PostPreview
+          post={post}
+        />
+      );
+    });
+
+    return (
+      <div className="flex flex-wrap">
+        {posts}
+      </div>
+    );
+  }
+}
+

apps/publish/src/js/components/header.js

@@ -6,8 +6,6 @@ import { Link } from 'react-router-dom';
 export class Header extends Component {
   constructor(props) {
     super(props);
-
-    console.log("header.props", props);
   }
 
   retrievePost(post, coll, who) {

apps/publish/src/js/components/post-preview.js

@@ -33,8 +33,6 @@ export class PostPreview extends Component {
   }
 
   render() {
-
-    console.log(this.props)
     let comments = this.props.post.numComments == 1
       ? '1 comment'
       : `${this.props.post.numComments} comments`
@@ -45,6 +43,8 @@ export class PostPreview extends Component {
       this.props.post.collectionName;
     let postLink = collLink + "/" + this.props.post.postName;
 
+//    let postTitle = 
+
     return (
       <div className="w-336 ma2">
         <Link to={postLink}>
@@ -55,14 +55,6 @@ export class PostPreview extends Component {
             {this.props.post.postSnippet}
           </p>
         </Link>
-        <p className="label-small gray-50">
-          {comments}
-        </p>
-        <Link to={collLink}>
-          <p className="body-regular gray-50">
-            {this.props.post.collectionTitle}
-          </p>
-        </Link>
         <p className="label-small gray-50">
           {authorDate}
         </p>

apps/publish/src/js/components/recent-preview.js

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { dateToDa } from '/lib/util';
+import moment from 'moment';
+import { Link } from 'react-router-dom';
+
+
+export class RecentPreview extends Component {
+  constructor(props) {
+    super(props);
+
+    moment.updateLocale('en', {
+      relativeTime: {
+        past: function(input) {
+          return input === 'just now'
+            ? input
+            : input + ' ago'
+        },
+        s : 'just now',
+        future : 'in %s',
+        m  : '1m',
+        mm : '%dm',
+        h  : '1h',
+        hh : '%dh',
+        d  : '1d',
+        dd : '%dd',
+        M  : '1 month',
+        MM : '%d months',
+        y  : '1 year',
+        yy : '%d years',
+      }
+    });
+  }
+
+  render() {
+    let comments = this.props.post.numComments == 1
+      ? '1 comment'
+      : `${this.props.post.numComments} comments`
+    let date = moment(this.props.post.date).fromNow();
+    let authorDate = `~${this.props.post.author} • ${date}`
+    let collLink = "/~publish/~" + 
+      this.props.post.author + "/" +
+      this.props.post.collectionName;
+    let postLink = collLink + "/" + this.props.post.postName;
+
+    return (
+      <div className="w-336 ma2">
+        <Link to={postLink}>
+          <p className="body-large b">
+            {this.props.post.postTitle}
+          </p>
+          <p className="body-regular-400">
+            {this.props.post.postSnippet}
+          </p>
+        </Link>
+        <p className="label-small gray-50">
+          {comments}
+        </p>
+        <Link to={collLink}>
+          <p className="body-regular gray-50">
+            {this.props.post.collectionTitle}
+          </p>
+        </Link>
+        <p className="label-small gray-50">
+          {authorDate}
+        </p>
+      </div>
+    );
+  }
+}
+

apps/publish/src/js/components/recent.js

@@ -1,12 +1,11 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
-import { PostPreview } from '/components/post-preview';
+import { RecentPreview } from '/components/recent-preview';
 
 
 export class Recent extends Component {
   constructor(props){
     super(props)
-    console.log("recent props", props);
   }
 
   buildRecent() {
@@ -114,8 +113,6 @@ export class Recent extends Component {
   dateLabel(d) {
     let today = new Date();
 
-    console.log("today", today);
-
     let yesterday = new Date(today.getTime() - (1000*60*60*24));
     if (this.sameDay(d, today)) {
       return "Today";
@@ -137,13 +134,10 @@ export class Recent extends Component {
   render() {
     let recent = this.buildRecent();
 
-    console.log("recent", recent);
-
-
     let body = recent.map((group) => {
       let posts = group.posts.map((post) => {
         return (
-          <PostPreview
+          <RecentPreview
             post={post}
           />
         );

apps/publish/src/js/components/root.js

@@ -6,11 +6,9 @@ import _ from 'lodash';
 
 import { api } from '/api';
 import { store } from '/store';
-import { Skeleton } from '/components/skeleton';
-import { Sidebar } from '/components/sidebar';
-import { CollectionList } from '/components/collection-list';
 import { Recent } from '/components/recent';
 import { Header } from '/components/header';
+import { Blog } from '/components/blog';
 
 export class Root extends Component {
   constructor(props) {
@@ -30,39 +28,43 @@ export class Root extends Component {
           <Route exact path="/~publish/recent"
             render={ (props) => {
               return (
-                  <div className="fl w-100">
+                <div className="fl w-100">
-                    <Recent
+                  <Recent
-                      {...this.state}
+                    {...this.state}
-                    />
+                  />
-                  </div>
+                </div>
               );
            }} />
           <Route exact path="/~publish/subs"
             render={ (props) => {
               return (
-                  <div className="fl w-100">
+                <div className="fl w-100">
-                    <Recent
+                  <Recent
-                      {...this.state}
+                    {...this.state}
-                    />
+                  />
-                  </div>
+                </div>
               );
            }} />
           <Route exact path="/~publish/pubs"
             render={ (props) => {
               return (
-                  <div className="fl w-100">
+                <div className="fl w-100">
-                    <Recent
+                  <Recent
-                      {...this.state}
+                    {...this.state}
-                    />
+                  />
-                  </div>
+                </div>
               );
            }} />
 
           <Route exact path="/~publish/:ship/:blog"
             render={ (props) => {
               return (
-                <div>
+                <div className="fl w-100">
-                  blog page
+                  <Blog
+                    blogId = {props.match.params.blog}
+                    ship = {props.match.params.ship.slice(1)}
+                    {...this.state}
+                  />
                 </div>
               );
            }} />