Modified Articles Components

Added list of articles on /articles
Added CSS for list of articles with new Listing Component
Added id to articles.json
Started creating component for individual article

public/api/articles.json

@@ -1,6 +1,7 @@
 {
     "articles": [
         {
+            "id": 0,
             "title": "Test Article",
             "desc":"This is a description",
             "contents": "Hello World"

src/actions/index.js

@@ -1,6 +1,7 @@
 import github from '../apis/github';
 import api from '../apis/api';
 
+
 export const getUser = (username) => async (dispatch, getState) => {
   const response = await github.get(`/users/${username}`);
 
@@ -20,17 +21,16 @@ export const getRepos = (username) => async (dispatch, getState) => {
   });
 };
 
-export const getArticles = async (dispatch, getState) => {
+export const getArticles = () => async (dispatch, getState) => {
-  const state = getState();
+  const { articles } = getState();
 
-  if (!state.articles || state.articles.length <= 0){
+  if (!articles.articles || articles.articles.length <= 0){
-    const response = await api.get(`/articles`); // axios request for articles json file
+    const response = await api.get(`/articles.json`); // axios request for articles json file
 
     dispatch({
       type: 'GET_ARTICLES',
-      payload: response.data,
+      payload: response.data.articles,
     });
-    return response;
   }
 };
 

src/components/Article.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import './css/Articles.css';
 
-const Article = ({match}) => {
+const Article = ({article}) => {
     return (
         <div>
-            "Article: " {match}
+            <div>{article.title}</div>
+            <div>{article.desc}</div>
+            <div>{article.contents}</div>
         </div>
         );
 }

src/components/Articles.js

@@ -3,7 +3,8 @@ import { connect } from 'react-redux';
 import './css/Articles.css';
 import Theater from './subcomponents/Theater';
 import Article from './Article';
-import { getArticles} from '../actions/index';
+import Listing from './subcomponents/Listing';
+import { getArticles } from '../actions';
 import { Route, Link } from 'react-router-dom';
 
 
@@ -15,24 +16,34 @@ class Articles extends React.Component {
   componentDidMount() {
 
     document.title = "Articles";
+    this.props.getArticles();
     
   }
 
   renderArticles() {
 
+
+    const render = this.props.articles.map((article) => {
+      console.log(article);
       return (
-          <div>
+        <Listing title={article.title} link={"/articles/"+article.id} key={article.id}>
-              {this.props.getArticles()}
+          <div className="description">
+            {article.desc}
           </div>
+        </Listing>
       );
+    });
+
+    return (
+        <div className="listings">
+            {render}
+        </div>
+    );
   }
 
   article(match) {
-      return (
+    console.log(this.props.articles)
-        <div>
+    return <Article article={this.props.articles[match.params.id]}/>;
-            {match.params.id}
-        </div>
-        );
   }
 
   render() {

src/components/css/Listing.css

@@ -0,0 +1,45 @@
+.listings {
+    display:flex;
+    flex-direction: column;
+    width: 75vw;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 5.5rem;
+
+}
+
+.listing {
+    border-top-style: solid;
+    border-top-color: #A4A4A1;
+    border-top-width:2px;
+    font-size: x-large;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    margin-top: 10px;
+    color: #AA9AA0;
+}
+
+.listing .title {
+    color: #BF8D8C !important;
+    font-size: 28px;
+    margin-top: 10px;
+    font-weight:bold;
+    width:fit-content;
+    width:-moz-fit-content;
+    text-align:start;
+    padding:5px;
+    border-radius: 3px;
+}
+
+.listing .content {
+    display:flex;
+    flex-direction: row;
+    align-items:center;
+    font-size: x-large;
+}
+
+.listing .description {
+    flex-grow: 1;
+    padding:10px;
+}

src/components/subcomponents/Listing.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import '../css/Listing.css';
+
+const Listing = (props) => {
+    /**
+     * Listing - A subcomponent for making lists of content, mostly to make a list of links.
+     * 
+     * 
+     * title - The title of the listing
+     * children - JSX that is necessary in the content of the component
+     */
+    return (
+        <div className="listing">
+            <a href={props.link}>
+                <div className="title">{props.title}</div>
+                <div className="content">
+                    {props.children}
+                </div>
+            </a>
+        </div>
+    );    
+};
+
+export default Listing;