miracle-fox-2017 · tomybudiman · Dec 11, 2017 · Dec 11, 2017 · Dec 12, 2017 · Dec 12, 2017
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# reduxify-react-challenge
+# reduxify-react-challenge
diff --git a/tomy-app-react-middleware/.gitignore b/tomy-app-react-middleware/.gitignore
@@ -0,0 +1,21 @@
+# 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*
diff --git a/tomy-app-react-middleware/README.md b/tomy-app-react-middleware/README.md
diff --git a/tomy-app-react-middleware/package.json b/tomy-app-react-middleware/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "tomy-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "axios": "^0.17.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-redux": "^5.0.6",
+    "react-router-dom": "^4.2.2",
+    "react-scripts": "1.0.17",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/tomy-app-react-middleware/public/favicon.ico b/tomy-app-react-middleware/public/favicon.ico
diff --git a/tomy-app-react-middleware/public/index.html b/tomy-app-react-middleware/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/tomy-app-react-middleware/public/manifest.json b/tomy-app-react-middleware/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/tomy-app-react-middleware/src/App.js b/tomy-app-react-middleware/src/App.js
@@ -0,0 +1,69 @@
+import {BrowserRouter as Router,Route} from 'react-router-dom';
+import {connect} from 'react-redux';
+import React,{Component} from 'react';
+
+import {fetchApi} from './redux/actions/rocket';
+
+// Components
+import Rocket from './Rocket';
+import Detail from './Detail';
+
+const style={
+  container:{
+    marginTop:'50px',
+    marginBottom:'50px'
+  }
+}
+
+class App extends Component {
+  constructor(){
+    super();
+    this.state={
+      rockets:[]
+    }
+  }
+  componentWillMount(){
+    this.props.fetchApi();
+  }
+  componentWillReceiveProps(nextProps){
+    this.setState({
+      rockets:nextProps.rockets
+    });
+  }
+  render(){
+    return(
+      <Router>
+        <div>
+          <Route exact path="/" render={props => <Home rockets={this.state.rockets}/>}/>
+          <Route path="/:id" render={props => <Detail {...props} rockets={this.state.rockets}/>}/>
+        </div>
+      </Router>
+    )
+  }
+}
+
+class Home extends Component {
+  render(){
+    return(
+      <div className="container" style={style.container}>
+        {this.props.rockets.map((rocket,i) => {
+          return <Rocket rocket={rocket} key={i}/>
+        })}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return{
+    rockets:state.rocketReducer.rockets
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return{
+    fetchApi : () => dispatch(fetchApi())
+  }
+}
+
+export default connect(mapStateToProps,mapDispatchToProps)(App);
diff --git a/tomy-app-react-middleware/src/Detail.js b/tomy-app-react-middleware/src/Detail.js
@@ -0,0 +1,78 @@
+import React,{Component} from 'react';
+import {Link} from 'react-router-dom';
+import Loading from './media/loading.svg';
+import Cover from './media/spacex.jpg';
+
+const style={
+  loading:{
+    textAlign:'center',
+    backgroundColor:'#F1F1F1',
+  },
+  image:{
+    width:'60%',
+    margin:'auto',
+    display:'block'
+  },
+  label:{
+    fontSize:'18px',
+    display:'block',
+    marginTop:'15px',
+    fontWeight:'bold',
+    textAlign:'center'
+  },
+  content:{
+    fontSize:'18px',
+    display:'block',
+    textAlign:'center'
+  }
+}
+
+export default class Detail extends Component {
+  constructor(){
+    super();
+    this.state={
+      rocket:null
+    }
+  }
+  componentWillReceiveProps(nextProps){
+    const filtering=nextProps.rockets.filter(rocket => {
+      return rocket.id === this.props.match.params.id
+    })[0];
+    this.setState({
+      rocket:filtering
+    });
+  }
+  componentWillMount(){
+    const filtering=this.props.rockets.filter(rocket => {
+      return rocket.id === this.props.match.params.id
+    })[0];
+    this.setState({
+      rocket:filtering
+    });
+  }
+  render(){
+    return(
+      <div className="container" style={{paddingTop:'50px'}}>
+        <Link to="/">Back</Link>
+        {this.state.rocket != null ? (
+          <div className="panel panel-default">
+            <div className="panel-heading" style={{textAlign:'center'}}>
+              <span style={{fontSize:'20px'}}>{this.state.rocket.name}</span>
+            </div>
+            <div className="panel-body">
+              <img src={Cover} style={style.image} alt="SpaceX"/>
+              <span style={style.label}>Description</span>
+              <span style={style.content}>{this.state.rocket.description}</span>
+              <span style={style.label}>Cost Per Launch</span>
+              <span style={style.content}>$ {this.state.rocket.cost_per_launch}</span>
+            </div>
+          </div>
+        ) : (
+          <div style={style.loading}>
+            <img src={Loading} width="200px" alt="Loading"/>
+          </div>
+        )}
+      </div>
+    )
+  }
+}
diff --git a/tomy-app-react-middleware/src/Rocket.js b/tomy-app-react-middleware/src/Rocket.js
@@ -0,0 +1,37 @@
+import {Link} from 'react-router-dom';
+import React,{Component} from 'react';
+
+import Cover from './media/spacex.jpg';
+
+const style={
+  title:{
+    fontSize:'25px',
+    textDecoration:'none'
+  },
+  image:{
+    width:'60%',
+    margin:'auto',
+    display:'block'
+  }
+}
+
+export default class Rocket extends Component {
+  constructor(props){
+    super(props);
+    this.state={
+      rocket:this.props.rocket
+    }
+  }
+  render(){
+    return(
+      <div className="panel panel-default">
+        <div className="panel-heading" style={{textAlign:'center'}}>
+          <Link to={this.state.rocket.id} style={style.title}>{this.state.rocket.name}</Link>
+        </div>
+        <div className="panel-body">
+          <img src={Cover} style={style.image} alt="SpaceX"/>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/tomy-app-react-middleware/src/index.js b/tomy-app-react-middleware/src/index.js
@@ -0,0 +1,20 @@
+import {Provider} from 'react-redux';
+import React,{Component} from 'react';
+import {render} from 'react-dom';
+
+import store from './redux';
+
+// Components
+import App from './App';
+
+class Index extends Component {
+  render(){
+    return(
+      <Provider store={store}>
+        <App/>
+      </Provider>
+    )
+  }
+}
+
+render(<Index/>,document.getElementById('root'));
diff --git a/tomy-app-react-middleware/src/media/loading.svg b/tomy-app-react-middleware/src/media/loading.svg
diff --git a/tomy-app-react-middleware/src/media/spacex.jpg b/tomy-app-react-middleware/src/media/spacex.jpg
diff --git a/tomy-app-react-middleware/src/redux/actions/rocket.js b/tomy-app-react-middleware/src/redux/actions/rocket.js
@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+export const setRockets = (payload) => {
+  return{
+    type:'SET_ARTICLE',payload
+  }
+}
+
+export const fetchApi = () => {
+  return (dispatch,getState) => {
+    axios.get('https://api.spacexdata.com/v2/rockets').then(({data}) => {
+      dispatch(setRockets(data));
+    }).catch(err => {
+      console.log(err);
+    });
+  }
+}
diff --git a/tomy-app-react-middleware/src/redux/index.js b/tomy-app-react-middleware/src/redux/index.js
@@ -0,0 +1,11 @@
+import {createStore,applyMiddleware,compose} from 'redux';
+import reducer from './reducers';
+import thunk from 'redux-thunk';
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const middleware = applyMiddleware(thunk);
+
+// Store
+const store = createStore(reducer,composeEnhancers(middleware));
+
+export default store;
diff --git a/tomy-app-react-middleware/src/redux/reducers/index.js b/tomy-app-react-middleware/src/redux/reducers/index.js
@@ -0,0 +1,8 @@
+import {combineReducers} from 'redux';
+import rocketReducer from './rocket-reducer';
+
+const reducer = combineReducers({
+  rocketReducer
+});
+
+export default reducer;
diff --git a/tomy-app-react-middleware/src/redux/reducers/rocket-reducer.js b/tomy-app-react-middleware/src/redux/reducers/rocket-reducer.js
@@ -0,0 +1,14 @@
+const initialState = {
+  rockets:[]
+}
+
+const rocketReducer = (state=initialState,action) => {
+  switch(action.type){
+    case 'SET_ARTICLE':
+      return {...state,rockets:action.payload}
+    default:
+      return state;
+  }
+}
+
+export default rocketReducer
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		# reduxify-react-challenge
		# reduxify-react-challenge