feature: Home page data, Recent Posts, Community Activity

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

client/src/App.css

@@ -47,6 +47,36 @@ hr {
   padding-bottom: 0;
 }
 
+.ui.divider.section {
+  border-top: 1px solid var(--main-border);
+  color: var(--main-border);
+}
+
+.ui.segment .ui.divider.header {
+  margin: 0 -14px 5px -14px;
+}
+
+.ui.segment.box {
+  min-height: 100px !important;
+}
+
+.ui.segment.head {
+  /*margin: 0;*/
+  /*padding: 0;*/
+  border-bottom: none !important;
+}
+
+.ui.label.head {
+  border-bottom: 1px solid var(--main-border);
+  background-color: #fff;
+  color: var(--medium-blue)
+}
+
+.ui.top.attached.label:first-child + :not(.attached) {
+  margin-top: 2.5rem !important;
+}
+
+
 /*.ui.grid > .row.header-row > .column {
   vertical-align: bottom;
 }*/
@@ -65,7 +95,7 @@ hr {
 
 
 .ui.header, .ui.card .header {
-  color: var(--dark-blue) !important;
+  color: var(--medium-blue) !important;
 }
 
 .ui.header .label {
@@ -152,3 +182,9 @@ i.blue.icon {
 i.blue.icon:hover {
   color: var(--dark-blue) !important;
 }
+
+/*.ui.label.none {
+  background-color: #fff;
+  border-color: #fff;
+  color: var(--medium-blue)
+}*/

client/src/actions/recentPostsActions.js

@@ -48,7 +48,8 @@ export const requestPosts = section => ({
 export const receivePosts = (section, data) => ({
   type: RECEIVE_POSTS,
   section,
-  posts: data.posts.map(post => post),
+  posts: data.posts,
+  groups: data.groups,
   receivedAt: Date.now()
 });
 
@@ -60,7 +61,7 @@ export const receivePosts = (section, data) => ({
  *  @returns {function} Dispatches returned action object
  */
 const fetchPosts = section => dispatch => {
-  dispatch(requestPosts(section))
+  dispatch(requestPosts(section));
   return axios.get('/api/recentposts')
     .then(data => {
       dispatch(receivePosts(section, data.data));
@@ -74,7 +75,7 @@ const fetchPosts = section => dispatch => {
  *  @param {string} section Section selected
  *  @returns {bool} Determines if a fetch should be done
  */
-const shouldFetchPosts = (state, section) => {
+const shouldFetchRecent = (state, section) => {
   const posts = state.recentActivity[section];
   if (!posts) {
     return true;
@@ -92,8 +93,8 @@ const shouldFetchPosts = (state, section) => {
  *  @param {function} getState Redux funtion to get the store state
  *  @returns {function} Dispatches returned action object
  */
-export const fetchPostsIfNeeded = section => (dispatch, getState) => {
-  if (shouldFetchPosts(getState(), section)) {
+export const fetchRecentIfNeeded = section => (dispatch, getState) => {
+  if (shouldFetchRecent(getState(), section)) {
     return dispatch(fetchPosts(section));
   }
 }

client/src/components/pages/Home/Home.css

@@ -47,6 +47,12 @@
   padding: 0;
 }
 
+.home ul.group-posts {
+  padding: 0;
+  list-style-type: none;
+  margin-bottom: 0;
+}
+
 /*.ui.segment hr {
   display: block;
   height: 1px;

client/src/components/pages/Home/Home.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Loader, Grid, Header, Segment } from "semantic-ui-react";
+import { Loader, Grid, Header, Segment, Label } from "semantic-ui-react";
 import { connect } from 'react-redux';
 
-import { fetchPostsIfNeeded } from '../../../actions/recentPostsActions';
+import { fetchRecentIfNeeded } from '../../../actions/recentPostsActions';
 import RecentPosts from './RecentPosts'
 import './Home.css';
+import {BASE_STEEM_URL} from '../../../settings';
 
 /**
  *  Home page component.
@@ -33,7 +34,7 @@ class Home extends Component {
 
   componentDidMount() {
     const {selected, dispatch} = this.props;
-    dispatch(fetchPostsIfNeeded(selected));
+    dispatch(fetchRecentIfNeeded(selected));
   }
 
   componentDidUpdate(prevProps) {
@@ -46,90 +47,110 @@ class Home extends Component {
   render() {
 
     //const { selected, posts, isFetching, lastUpdated, isAuth } = this.props;
-    const { posts, isFetching, isAuth } = this.props;
+    const { posts, groups, isFetching, isAuth } = this.props;
     const isEmpty = posts.length === 0;
     const recentPostsComp =
         (isFetching)
           ? <Loader active inline='centered' />
         : (isEmpty)
               ? 'No Posts'
-              : (posts.map((post, i) => <RecentPosts key={post._id} post={post} isAuth={isAuth} />));
+              : <RecentPosts posts={posts} isAuth={isAuth} />;
 
     return (
       <div className="home">
         <Grid columns={1} stackable>
-          <Grid.Column width={16} className="main">
+          <Grid.Column width={12} className="main">
             <Grid>
               <Grid.Row className="reducePad">
                 <Grid.Column>
-                  <Header as="h3">Recently Added</Header>
+                  <Label size='big' color='blue'><Header as="h3">Recently Added</Header></Label>
                 </Grid.Column>
               </Grid.Row>
 
               <Grid.Row columns={1}>
                 <Grid.Column>
-                  <Segment className="nopad">
-                    {recentPostsComp}
-                  </Segment>
+                  {recentPostsComp}
                 </Grid.Column>
               </Grid.Row>
 
-              {/*<Grid.Row className="reducePad">
+              <Grid.Row className="reducePad">
                 <Grid.Column>
-                  <Header as="h3">Community Activity</Header>
+                  <Label size='big' color='blue'><Header as="h3">Community Activity</Header></Label>
                 </Grid.Column>
               </Grid.Row>
 
-                <Grid.Column width={8}>
-                  <Segment>
-                    <p>1</p>
-                    <p>Sample test to test the limits of the word wrap in a paragraph box.</p>
-                  </Segment>
-                </Grid.Column>
-                <Grid.Column width={8}>
-                  <Segment>
-                    <p>2</p>
-                    <p>Sample test to test the limits of the word wrap in a paragraph box.</p>
-                  </Segment>
-                </Grid.Column>
-                <Grid.Column width={8}>
-                  <Segment>
-                    <p>3</p>
-                    <p>Sample test to test the limits of the word wrap in a paragraph box.</p>
-                  </Segment>
-                </Grid.Column>
-                <Grid.Column width={8}>
-                  <Segment>
-                    <p>3</p>
-                    <p>Sample test to test the limits of the word wrap in a paragraph box.</p>
-                  </Segment>
-                </Grid.Column>*/}
+              {
+                groups.map((g, i) => {
+                  return (
+                    <Grid.Column key={g.name} width={8}>
+                      <Segment.Group className='box'>
+                        <Segment>
+                          <Label attached='top' className='head'>
+                            <Header as='h3'>
+                              {g.display}
+                            </Header>
+                          </Label>
+                          <ul className='group-posts'>
+                            {
+                              g.posts.map((p, i) => {
+                                return (
+                                  <li key={p._id}>
+                                    <a
+                                      href={BASE_STEEM_URL+'/'+p.st_category+'/@'+p.st_author+'/'+p.st_permlink}
+                                    >
+                                      {`\u2022\u00A0`}
+                                      {(p.st_title.length > 40)
+                                        ? p.st_title.substr(0,40) + " ..."
+                                        : p.st_title}
+                                    </a>
+                                  </li>
+                                )
+                              })
+                            }
+                          </ul>
+                        </Segment>
+                      </Segment.Group>
+                    </Grid.Column>
+                  )
+                })
+              }
+
 
             </Grid>
           </Grid.Column>
 
           {/*<Grid.Row><Header as="h1">Popular Groups:</Header></Grid.Row>*/}
           {/*<Grid.Row><Header as="h1">New Groups:</Header></Grid.Row>*/}
 
-          {/*<Grid.Column width={4} className="sidebar">
-            <Card>
-              <Card.Content>
-                <Card.Header as="h3">My Groups</Card.Header>
-              </Card.Content>
-              <Card.Content>
-                <Feed>
-                  <Feed.Event>
-                    <Feed.Content>
-                      <Feed.Date content='1 day ago' />
-                      <Feed.Summary>
-                        Thumb - Post Title - Likes?
-                      </Feed.Summary>
-                    </Feed.Content>
-                  </Feed.Event>
-                </Feed>
-              </Card.Content>
-            </Card>
-          </Grid.Column>*/}
+          <Grid.Column width={4} className="sidebar">
+            <Segment.Group className='box'>
+              <Segment>
+                <Label attached='top' className='head'>
+                  <Header as='h3'>
+                    My Groups
+                  </Header>
+                </Label>
+                <div>Post 1</div>
+                <div>Post 2</div>
+                <div>Post 3</div>
+              </Segment>
+            </Segment.Group>
+
+            <Segment.Group className='box'>
+              <Segment>
+                <Label attached='top' className='head'>
+                  <Header as='h3'>
+                    My Submissions
+                  </Header>
+                </Label>
+                <div>Post 1</div>
+                <div>Post 2</div>
+                <div>Post 3</div>
+              </Segment>
+            </Segment.Group>
+          </Grid.Column>
+
+
 
         </Grid>
       </div>
@@ -148,15 +169,19 @@ const mapStateToProps = state => {
   const {
     isFetching,
     lastUpdated,
-    items: posts
-  } = recentActivity[selected] || {
+    postItems: posts,
+    groupItems: groups
+  } = recentActivity[selected]
+  || {
     isFetching: true,
-    items: []
+    postItems: [],
+    groupItems: []
   }
 
   return {
     selected,
     posts,
+    groups,
     isFetching,
     lastUpdated,
     isAuth: auth.isAuth

client/src/components/pages/Home/RecentPosts.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types'
+import { Table } from "semantic-ui-react";
 
 import SteemConnect from '../../../utils/auth/scAPI';
+import {BASE_STEEM_URL} from '../../../settings';
 
 /**
  *  Component to display the post data sent.
@@ -12,10 +14,43 @@ import SteemConnect from '../../../utils/auth/scAPI';
  *  @param {function} props.isAuth Determines if user is authenticated
  *  @returns {element} Displays the post, or message if no posts are in the app
  */
-const RecentPosts = ({post, isAuth}) => {
+const RecentPosts = ({posts, isAuth}) => {
   const loginURL = SteemConnect.getLoginURL('/');
-  if (post.st_title) {
-    return <div className="recPost">{post.st_title}</div>;
+  if (posts) {
+    return (
+      <Table striped>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Title</Table.HeaderCell>
+            {/*<Table.HeaderCell textAlign='center'>Likes</Table.HeaderCell>
+            <Table.HeaderCell textAlign='center'>Views</Table.HeaderCell>
+            <Table.HeaderCell textAlign='center'>Rating</Table.HeaderCell>*/}
+            <Table.HeaderCell textAlign='center'>Group</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {
+          posts.map((p, i) => (
+            <Table.Row key={p._id}>
+              <Table.Cell>
+                <a
+                  href={BASE_STEEM_URL+'/'+p.st_category+'/@'+p.st_author+'/'+p.st_permlink}
+                >
+                  {(p.st_title.length > 70)
+                    ? p.st_title.substr(0,70) + " ..."
+                    : p.st_title}
+                </a>
+              </Table.Cell>
+              {/*<Table.Cell collapsing textAlign='center'>{p.likes}</Table.Cell>
+              <Table.Cell collapsing textAlign='center'>{p.views}</Table.Cell>
+              <Table.Cell collapsing textAlign='center'>{p.rating}</Table.Cell>*/}
+              <Table.Cell collapsing textAlign='center'>{p.display}</Table.Cell>
+            </Table.Row>
+          ))
+        }
+        </Table.Body>
+      </Table>
+    )//<div className="recPost">{post.st_title}</div>;
   }else {
     if (isAuth)
       return (
@@ -46,7 +81,7 @@ const RecentPosts = ({post, isAuth}) => {
 }
 
 RecentPosts.propTypes = {
-  post: PropTypes.shape(PropTypes.object.isRequired).isRequired,
+  post: PropTypes.shape(PropTypes.object),
   isAuth: PropTypes.bool.isRequired,
 };