src/App.js

@@ -15,6 +15,7 @@ import themeObject from './util/theme';
 import AuthRoute from './util/AuthRoute';
 // Pages
 import home from './pages/home';
+import publicHome from './pages/publicHome';
 import login from './pages/login';
 import signup from './pages/signup';
 import user from './pages/user';
@@ -81,7 +82,7 @@ class App extends Component {
                   <div className="w3-col m2">
                     <div className="w3-card w3-round">
                       <div className="w3-white">
-                        <Link to="/" className="w3-button w3-block w3-theme-l1 w3-left-align"><i className="fa fa-circle-o-notch fa-fw w3-margin-right" /> Public</Link>
+                        <Link to={`/public`} className="w3-button w3-block w3-theme-l1 w3-left-align"><i className="fa fa-circle-o-notch fa-fw w3-margin-right" /> Public</Link>
                         <ProfileLink profile={this.state.profile} />
                         <Link to="/favorites" className="w3-button w3-block w3-theme-l1 w3-left-align"><i className="fa fa-thumbs-up fa-fw w3-margin-right" /> Favorites</Link>
                         <Link to="/messages" className="w3-button w3-block w3-theme-l1 w3-left-align"><i className="fa fa-envelope fa-fw w3-margin-right" /> Messages</Link>
@@ -99,6 +100,7 @@ class App extends Component {
                     <div className="w3-container">
                       <Switch>
                         <Route exact path="/" component={home} />
+                        <Route exact path="/public" component={publicHome} />
                         <Route exact path="/favorites" component={favorites} />
                         <Route exact path="/messages" component={messages} />
                         <AuthRoute exact path="/login" component={login} />

src/pages/home.js

@@ -65,8 +65,8 @@ class home extends Component {
             )}
             <div className="w3-container w3-padding w3-card w3-white w3-round w3-margin-top w3-margin-bottom">
               <h5 className="w3-opacity">
-                {this.props.user.authenticated
-                  ? "Personal Timeline of " + this.props.user.credentials.handle
+                {isLoggedIn
+                  ? "Personal Timeline of " + localStorage.getItem("username")
                   : "Public Timeline"}
               </h5>
             </div>

src/pages/messages.js

@@ -4,18 +4,18 @@ import Scream from "../components/scream/Scream";
 import ScreamSkeleton from "../util/ScreamSkeleton";
 import PostStatus from "../components/scream/PostStatus";
 import { connect } from "react-redux";
-import { getPosts } from "../redux/actions/dataActions";
+import { getDirectMessagesPosts } from "../redux/actions/dataActions";
 import ProfileTile from "../components/layout/ProfileTile";
 
 
 class messages extends Component {
 
   componentDidMount() {
-    this.props.getPosts();
+    this.props.getDirectMessagesPosts();
   }
 
   loadMessages = async () => {
-    await this.props.getPosts();
+    await this.props.getDirectMessagesPosts();
     this.render();
   };
 
@@ -76,7 +76,7 @@ class messages extends Component {
 }
 
 messages.propTypes = {
-  getPosts: PropTypes.func.isRequired,
+  getDirectMessagesPosts: PropTypes.func.isRequired,
   data: PropTypes.object.isRequired,
 };
 
@@ -85,4 +85,4 @@ const mapStateToProps = (state) => ({
   user: state.user,
 });
 
-export default connect(mapStateToProps, { getPosts })(messages);
+export default connect(mapStateToProps, { getDirectMessagesPosts })(messages);

src/pages/publicHome.js

@@ -0,0 +1,95 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Scream from "../components/scream/Scream";
+import ScreamSkeleton from "../util/ScreamSkeleton";
+import PostStatus from "../components/scream/PostStatus";
+import { connect } from "react-redux";
+import { getPublicPosts } from "../redux/actions/dataActions";
+import ProfileTile from "../components/layout/ProfileTile";
+import Profile from "../components/profile/Profile";
+
+
+class publicHome extends Component {
+  constructor() {
+    super();
+  }
+
+  componentDidMount() {
+    this.props.getPublicPosts();
+    // this.getUserProfile(localStorage.getItem("userId"));
+  }
+
+  loadHome = async () => {
+    await this.props.getPublicPosts();
+    this.render();
+  };
+
+  render() {
+    console.log("Public component being rendered", this.props.data);
+    const { posts, loading } = this.props.data;
+    const isLoggedIn = localStorage.getItem("tokenStr") != null;
+    const profId = localStorage.getItem("userId");
+
+    let showProfile = '';
+    isLoggedIn ? 
+     showProfile = ( <ProfileTile isLoggedIn={true} profileId={profId} /> ) : showProfile = ( <Profile isLoggedIn={false} /> )
+    let recentPostsMarkup = !loading ? (
+      posts?.map((post) =>
+        post.reblogged && post.reblog != null ? (
+          <Scream
+            key={post.reblog.id}
+            userNameRepeated={post.account.display_name}
+            onUserAction={() => this.loadHome()}
+            scream={post.reblog}
+          />
+        ) : (
+          <Scream
+            key={post.id}
+            onUserAction={() => this.loadHome()}
+            scream={post}
+          />
+        )
+      )
+    ) : (
+      <ScreamSkeleton />
+    );
+    return (
+      <div className="container">
+        <div className="w3-row">
+          <div className="w3-col m8">
+            {isLoggedIn ? (
+              <div className="w3-card w3-round w3-white">
+                <div className="w3-container w3-padding-24">
+                  <PostStatus />
+                </div>
+              </div>
+            ) : (
+              <div></div>
+            )}
+            <div className="w3-container w3-padding w3-card w3-white w3-round w3-margin-top w3-margin-bottom">
+              <h5 className="w3-opacity">
+                Public Timeline
+              </h5>
+            </div>
+            {recentPostsMarkup}
+          </div>
+          <div style={{ paddingLeft: "20px" }} className="w3-col m4">
+             {showProfile}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+publicHome.propTypes = {
+    getPublicPosts: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  data: state.data,
+  user: state.user,
+});
+
+export default connect(mapStateToProps, { getPublicPosts })(publicHome);

src/redux/actions/dataActions.js

@@ -13,7 +13,8 @@ import {
   SET_SCREAM,
   STOP_LOADING_UI,
   SUBMIT_COMMENT,
-  SET_FAVOURITES
+  SET_FAVOURITES,
+  SET_MESSAGES
 } from '../types';
 import axios from 'axios';
 
@@ -55,6 +56,25 @@ export const getPosts = () => (dispatch) => {
     }
 };
 
+export const getPublicPosts = () => (dispatch) => {
+
+  dispatch({ type: LOADING_DATA });
+      axios
+          .get('https://pleroma.site/api/v1/timelines/public?local=true&only_media=false&count=20&with_muted=true', )
+          .then((res) => {
+              dispatch({
+                  type: SET_POSTS,
+                  payload: res.data
+              });
+          })
+          .catch((err) => {
+              dispatch({
+                  type: SET_POSTS,
+                  payload: []
+              });
+          });
+};
+
 export const getFavouritesPosts = () => (dispatch) => {
 
   dispatch({ type: LOADING_DATA });
@@ -74,6 +94,25 @@ export const getFavouritesPosts = () => (dispatch) => {
           });
 };
 
+export const getDirectMessagesPosts = () => (dispatch) => {
+
+  dispatch({ type: LOADING_DATA });
+      axios
+          .get('https://pleroma.site/api/v1/timelines/public?local=true&only_media=false&count=20&with_muted=true&visibility=direct', { headers: {"Authorization" : `Bearer ${localStorage.getItem('tokenStr')}`} } )
+          .then((res) => {
+              dispatch({
+                  type: SET_MESSAGES,
+                  payload: res.data
+              });
+          })
+          .catch((err) => {
+              dispatch({
+                  type: SET_MESSAGES,
+                  payload: []
+              });
+          });
+};
+
 // Get all screams
 export const getScreams = () => (dispatch) => {
   dispatch({ type: LOADING_DATA });

src/redux/reducers/dataReducer.js

@@ -9,7 +9,8 @@ import {
   SET_SCREAM,
   SUBMIT_COMMENT,
   SET_CURRENT_USER,
-  SET_FAVOURITES
+  SET_FAVOURITES,
+  SET_MESSAGES
 } from '../types';
 
 const initialState = {
@@ -45,6 +46,13 @@ export default function(state = initialState, action) {
         loading: false,
         currentUser: null
       };
+    case SET_MESSAGES:
+      return {
+        ...state,
+        posts: action.payload,
+        loading: false,
+        currentUser: null
+      };
     case SET_SCREAMS:
       return {
         ...state,

src/redux/types.js

@@ -21,4 +21,5 @@ export const LIKE_SCREAM = 'LIKE_SCREAM';
 export const UNLIKE_SCREAM = 'UNLIKE_SCREAM';
 export const DELETE_SCREAM = 'DELETE_SCREAM';
 export const POST_SCREAM = 'POST_SCREAM';
-export const SUBMIT_COMMENT = 'SUBMIT_COMMENT';
+export const SUBMIT_COMMENT = 'SUBMIT_COMMENT';
+export const SET_MESSAGES = 'SET_MESSAGES';