ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-19 04:41:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

beginnings of blog page

Browse Source
This commit is contained in:
Isaac Visintainer 2019-05-31 15:33:13 -07:00
parent 949fbfba0d
commit 9e3793c352
6 changed files with 188 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
apps/publish/src/js/components/blog.js Normal file
View File

@ -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>
);
}
}

2
apps/publish/src/js/components/header.js
View File

@ -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) {

12
apps/publish/src/js/components/post-preview.js
View File

@ -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>

71
apps/publish/src/js/components/recent-preview.js Normal file
View File

@ -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>
);
}
}

10
apps/publish/src/js/components/recent.js
View File

@ -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}
/>
);

42
apps/publish/src/js/components/root.js
View File

@ -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">
<Recent
{...this.state}
/>
</div>
<div className="fl w-100">
<Recent
{...this.state}
/>
</div>
);
}} />
<Route exact path="/~publish/subs"
render={ (props) => {
return (
<div className="fl w-100">
<Recent
{...this.state}
/>
</div>
<div className="fl w-100">
<Recent
{...this.state}
/>
</div>
);
}} />
<Route exact path="/~publish/pubs"
render={ (props) => {
return (
<div className="fl w-100">
<Recent
{...this.state}
/>
</div>
<div className="fl w-100">
<Recent
{...this.state}
/>
</div>
);
}} />
<Route exact path="/~publish/:ship/:blog"
render={ (props) => {
return (
<div>
blog page
<div className="fl w-100">
<Blog
blogId = {props.match.params.blog}
ship = {props.match.params.ship.slice(1)}
{...this.state}
/>
</div>
);
}} />