feat: create blog page and display blog posts

Author: wu-ciesielska

src/app/component.js

@@ -14,6 +14,7 @@ import {
   Home,
   PlayWithModel,
   Prediction,
+  Blog,
 } from '../screens';
 
 import {
@@ -120,6 +121,7 @@ const App = (props) => {
           <Route exact path={ROUTES.HOME} component={Home} />
           <Route path={ROUTES.ABOUT} component={About} />
           <Route path={ROUTES.ADMIN} component={Admin} />
+          <Route path={ROUTES.BLOG} component={Blog} />
           <Route path={ROUTES.RESOURCES} component={Resources} />
           <Route path={ROUTES.TRAPPING_DATA} component={TrappingData} />
           <Route path={ROUTES.PLAY_WITH_MODEL} component={PlayWithModel} />

src/constants/index.js

@@ -71,6 +71,7 @@ const CHART_MODES = {
 const ROUTES = {
   ABOUT: '/about',
   ADMIN: '/admin',
+  BLOG: '/blog',
   HOME: '/',
   RESOURCES: '/resources',
   PLAY_WITH_MODEL: '/play-with-model',

src/screens/admin/components/blog-post-form/style.scss

@@ -87,7 +87,7 @@
         transform: translate(-50%, -50%);
         min-width: 100%;
         min-height: 100%;
-        width: auto;
+        width: inherit;
         height: auto;
     }
 }

src/screens/admin/components/blog-posts/component.js

@@ -2,12 +2,11 @@ import React, { useEffect, useState } from 'react';
 import Modal from 'react-modal';
 
 import EditBlogPost from '../edit-blog-post';
+import { getDateToDisplay, sortBlogPosts } from '../../../../utils';
+
 import './style.scss';
 
 const BlogPost = ({ post, onClickEdit, onDelete }) => {
-  const date = new Date(post.date_created);
-  const dateToDisplay = `${date.getMonth()}/${date.getDate()}/${date.getFullYear()}`;
-
   const onClickDelete = () => {
     onDelete(post.id);
   };
@@ -19,7 +18,7 @@ const BlogPost = ({ post, onClickEdit, onDelete }) => {
           {post.title}
         </div>
         <div className="blog-post-date">
-          {dateToDisplay}
+          {getDateToDisplay(post.date_created)}
         </div>
       </div>
       <div className="blog-post-action-buttons">
@@ -80,12 +79,7 @@ const BlogPosts = (props) => {
   }, [getAllBlogPostsByAuthor]);
 
   // Sort posts from the newest to the oldest
-  const sortedBlogPosts = blogPosts.sort((a, b) => {
-    const dateA = new Date(a.date_created);
-    const dateB = new Date(b.date_created);
-
-    return dateB - dateA;
-  });
+  const sortedBlogPosts = sortBlogPosts(blogPosts);
 
   const handleFormSubmit = async (formData) => {
     const closeModal = () => { setShowEditForm(false); };

src/screens/blog/component.js

@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+
+import BlogPost from './components';
+import { sortBlogPosts } from '../../utils';
+
+import './style.scss';
+
+const Blog = (props) => {
+  const {
+    blogPosts,
+    getAllBlogPosts,
+  } = props;
+
+  useEffect(() => {
+    getAllBlogPosts();
+  }, [getAllBlogPosts]);
+
+  const sortedBlogPosts = sortBlogPosts(blogPosts);
+
+  return (
+    <div className="blog-page-container">
+      <div id="overview-text">
+        <h1 id="title">Blog</h1>
+      </div>
+      {sortedBlogPosts.length > 0
+        ? sortedBlogPosts.map((post) => <BlogPost post={post} />)
+        : <div className="blog-page-no-posts">There are no blog posts yet</div>}
+    </div>
+  );
+};
+
+export default Blog;

src/screens/blog/components/blog-post/component.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { formatPostDates } from '../../../../utils';
+
+import './style.scss';
+
+const BlogPost = ({ post }) => {
+  const {
+    title,
+    body,
+    date_created: createdAt,
+    date_edited: editedAt,
+    image,
+    author,
+  } = post;
+
+  return (
+    <div className="blog-page-blog-post-container page-container">
+      <div className="blog-page-blog-post-title">{title}</div>
+      <div className="blog-page-blog-post-author">{`by ${author}`}</div>
+      {image && <img className="blog-page-blog-post-picture" src={`${global.API_URL}${image}`} alt="whatever" />}
+      <div className="blog-page-blog-post-body">{body}</div>
+      <div className="blog-page-blog-post-date">{formatPostDates(createdAt, editedAt)}</div>
+    </div>
+  );
+};
+
+export default BlogPost;

src/screens/blog/components/blog-post/index.js

@@ -0,0 +1,3 @@
+import BlogPost from './component';
+
+export default BlogPost;

src/screens/blog/components/blog-post/style.scss

@@ -0,0 +1,44 @@
+.blog-page {
+    &-blog-post {
+        &-container {
+            margin: 30px auto;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        &-title {
+            font-size: 24px;
+            font-weight: 600;
+        }
+
+        &-author {
+            margin-bottom: 20px;
+            margin-top: 6px;
+        }
+
+        &-picture {
+            max-width: 100%;
+            height: auto;
+            max-height: 500px;
+            margin: 30px auto 50px;
+        }
+
+        &-date {
+            font-style: italic;
+            font-size: 14px;
+            margin-top: 30px;
+            width: 100%;
+            text-align: right;
+        }
+
+        &-date,
+        &-author {
+            font-style: italic;
+            color: #73767e;
+        }
+
+        &-body {
+            white-space: pre-line;
+        }
+    }
+}

src/screens/blog/components/index.js

@@ -0,0 +1,3 @@
+import BlogPost from './blog-post';
+
+export default BlogPost;

src/screens/blog/index.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import { getAllBlogPosts } from '../../state/actions/blog';
+import Blog from './component';
+
+const mapStateToProps = (state) => {
+  const {
+    blog: {
+      blogPosts,
+    },
+  } = state;
+
+  return { blogPosts };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    getAllBlogPosts: () => dispatch(getAllBlogPosts()),
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Blog);

src/screens/blog/style.scss

@@ -0,0 +1,14 @@
+.blog-page-container {
+    max-width: 1000px;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.blog-page-no-posts {
+    font-size: 26px;
+    width: 100%;
+    text-align: center;
+    color: #73767e;
+}

src/screens/index.js

@@ -1,5 +1,6 @@
 import About from './about';
 import Admin from './admin';
+import Blog from './blog';
 import Resources from './resources';
 import TrappingData from './trapping-data';
 import Home from './home';
@@ -9,6 +10,7 @@ import Prediction from './prediction';
 export {
   About,
   Admin,
+  Blog,
   Resources,
   TrappingData,
   Home,

src/state/actions/blog.js

@@ -4,6 +4,7 @@ export const ActionTypes = {
   API_ERROR: 'API_ERROR',
   CLEAR_API_ERROR: 'CLEAR_API_ERROR',
   SET_BLOG_POSTS_BY_USER_DATA: 'SET_BLOG_POSTS_BY_USER_DATA',
+  GET_ALL_BLOG_POSTS: 'GET_ALL_BLOG_POSTS',
   EDIT_BLOG_POST: 'EDIT_BLOG_POST',
   DELETE_BLOG_POST: 'DELETE_BLOG_POST',
   CREATE_BLOG_POST: 'CREATE_BLOG_POST',
@@ -28,6 +29,21 @@ export const createBlogPost = (fields, onSuccess = () => {}) => {
   };
 };
 
+export const getAllBlogPosts = () => {
+  return async (dispatch) => {
+    try {
+      const blogPosts = await BlogService.getAllBlogPosts();
+      dispatch({ type: ActionTypes.GET_ALL_BLOG_POSTS, payload: blogPosts });
+    } catch (error) {
+      dispatch({
+        type: ActionTypes.API_ERROR,
+        payload: 'GET ALL BLOG POSTS',
+        error,
+      });
+    }
+  };
+};
+
 export const getAllBlogPostsByAuthor = (onSuccess = () => {}, onError = () => {}) => {
   return async (dispatch) => {
     try {
@@ -38,7 +54,7 @@ export const getAllBlogPostsByAuthor = (onSuccess = () => {}, onError = () => {}
       dispatch({
         type: ActionTypes.API_ERROR,
         payload: {
-          action: 'GET ALL BLOG POSTS',
+          action: 'GET ALL BLOG POSTS BY USER',
           error,
         },
       });

src/state/reducers/blog.js

@@ -1,6 +1,7 @@
 import { ActionTypes } from '../actions';
 
 const initialState = {
+  blogPosts: [],
   blogPostsByUser: [],
   error: null,
 };
@@ -15,6 +16,9 @@ const BlogReducer = (state = initialState, action) => {
     case ActionTypes.SET_BLOG_POSTS_BY_USER_DATA:
       return { ...state, blogPostsByUser: action.payload };
 
+    case ActionTypes.GET_ALL_BLOG_POSTS:
+      return { ...state, blogPosts: action.payload };
+
     case ActionTypes.EDIT_BLOG_POST: {
       const updatedBlogPosts = state.blogPostsByUser.map(
         (post) => (post._id === action.payload._id

src/utils/blog.js

@@ -0,0 +1,33 @@
+// Sort posts from the newest to the oldest
+const sortBlogPosts = (blogPosts) => blogPosts.sort((a, b) => {
+  const dateA = new Date(a.date_created);
+  const dateB = new Date(b.date_created);
+
+  return dateB - dateA;
+});
+
+// Return string with US date format
+const getDateToDisplay = (dateToParse) => {
+  const date = new Date(dateToParse);
+  return `${date.getMonth()}/${date.getDate()}/${date.getFullYear()}`;
+};
+
+// Return string with blog post creation and editing dates
+const formatPostDates = (created, updated) => {
+  const options = {
+    year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit',
+  };
+  const createdDate = new Date(created).toLocaleString('en-US', options);
+  const updatedDate = new Date(updated).toLocaleString('en-US', options);
+
+  let dateString = `Posted on ${createdDate}`;
+  if (updated && created !== updated) {
+    dateString += `, Last updated on ${updatedDate}`;
+  }
+
+  return dateString;
+};
+
+export {
+  sortBlogPosts, getDateToDisplay, formatPostDates,
+};

src/utils/index.js

@@ -22,20 +22,29 @@ import {
   toQueryParams,
 } from './network';
 
+import {
+  sortBlogPosts,
+  getDateToDisplay,
+  formatPostDates,
+} from './blog';
+
 export {
   downloadCsv,
   getAuthTokenFromStorage,
   getChartModeFromStorage,
   getDataModeFromStorage,
+  getDateToDisplay,
   getMapboxRDNameFormat,
   getStateAbbreviationFromStateName,
   getStateNameFromAbbreviation,
   getUserIdFromStorage,
+  formatPostDates,
   removeAuthTokenFromStorage,
   removeUserIdFromStorage,
   setAuthTokenInStorage,
   setChartModeInStorage,
   setDataModeInStorage,
   setUserIdInStorage,
+  sortBlogPosts,
   toQueryParams,
 };