Fix Redux setting

.gitignore

@@ -19,3 +19,24 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.17.1",
     "polished": "^1.9.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",

src/actions/index.js

@@ -0,0 +1,55 @@
+import axios from 'axios';
+import * as actionTypes from '../constants';
+
+const WP_API = `http://corony.jp/wp-json`;
+const WP_API_ENDPOINT = `${WP_API}/wp/v2`;
+
+export function fetchPosts(pageNum = 1) {
+  return {
+    type: actionTypes.FETCH_POSTS,
+    payload: axios.get(`${WP_API_ENDPOINT}/posts?_embed&page=${pageNum}&per_page=10`)
+  };
+}
+
+export function receivePosts(posts, totalPages, previous) {
+  return {
+    type: actionTypes.RECEIVE_POSTS,
+    payload: posts,
+    totalPages,
+    posts: previous
+  };
+}
+
+export function errorPosts(error) {
+  return {
+    type: actionTypes.ERROR_POSTS,
+    payload: error
+  };
+}
+
+export function fetchPost(id) {
+  return {
+    type: actionTypes.FETCH_POST,
+    payload: axios.get(`${WP_API_ENDPOINT}/posts/${id}?_embed`)
+  };
+}
+
+export function receivePost(currentPost) {
+  return {
+    type: actionTypes.RECEIVE_POST,
+    payload: currentPost
+  };
+}
+
+export function errorPost(error) {
+  return {
+    type: actionTypes.ERROR_POST,
+    payload: error
+  };
+}
+
+export function resetPost() {
+  return {
+    type: actionTypes.RESET_POST
+  };
+}

src/components/404.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+import styled from 'styled-components';
+import { setting } from '../styles/setting';
+
+const NotFoundContainer = styled.aside`
+  padding: 20vh 0;
+  font-family: ${setting.webFontFamily};
+  font-size: ${setting.fontSizeLarge};
+  text-align: center;
+  font-weight: 900;
+`;
+
+export default class NotFound extends Component {
+  render() {
+    return (
+      <NotFoundContainer>404 Not Found</NotFoundContainer>
+    );
+  }
+}

src/components/app.js

@@ -0,0 +1,114 @@
+import React, { Component } from 'react';
+import { injectGlobal } from 'styled-components';
+import { setting } from '../styles/setting';
+
+import Header from "./header"
+import Footer from "./footer"
+
+injectGlobal`
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+
+ul {
+  list-style: none;
+}
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+img,
+embed,
+object,
+audio,
+video {
+  height: auto;
+  max-width: 100%;
+}
+
+iframe {
+  border: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+  text-align: left;
+}
+
+small {
+  font-size: 100%;
+}
+
+body {
+  line-height: 1.74;
+  font-family: ${setting.fontFamily};
+  color: ${setting.blackColor};
+}
+
+a {
+  color: ${setting.blueColor};
+}
+`;
+
+export default class App extends Component {
+  render() {
+    return (
+      <div>
+        <Header />
+          {this.props.children}
+        <Footer />
+      </div>
+    );
+  }
+}

src/components/button.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom'
+
+import styled from 'styled-components'
+import { setting } from '../styles/setting';
+
+const ButtonContainer = styled.button`
+  display: block;
+  width: 100%;
+  padding: 1rem 0;
+  background-color: ${setting.blueColor};
+  color: ${setting.whiteColor};
+  font-weight: bold;
+  font-size: ${setting.fontSizeMedium};
+  border-width: 0;
+  border-radius: 100px;
+  cursor: pointer;
+  outline: none;
+`;
+
+export default class Button extends Component {
+  render() {
+    const clickHandler = this.props.clickHandler;
+
+    return (
+      <ButtonContainer onClick={clickHandler}>もっとみる</ButtonContainer>
+    );
+  }
+}

src/components/footer.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+
+import styled from 'styled-components';
+import { setting } from '../styles/setting';
+
+const FooterContainer = styled.footer`
+  border-top: 1px solid ${setting.grayColor};
+`;
+
+const FooterInner = styled.div`
+  width: ${setting.siteWidth};
+  margin: 0 auto;
+  padding: 2rem 0;
+`;
+
+const Copyright = styled.div`
+  text-align: center;
+`;
+
+const CopyrightLink = styled(Link)`
+  color: ${setting.blackColor};
+`;
+
+
+export default class Footer extends Component {
+  render() {
+    return (
+      <FooterContainer><FooterInner>
+        <Copyright>© 2017 <CopyrightLink to="https://reparade.com" title="Reparade" target="_blank" rel="noopener">Reparade</CopyrightLink>.</Copyright>
+      </FooterInner></FooterContainer>
+    );
+  }
+}