Merge pull request #1 from jennl97/update_1

fixed api display issue
jennl97 · Sep 12, 2020 · fab42b1 · fab42b1
2 parents 166ab61 + 8eeb097
commit fab42b1
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 54 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -9,28 +9,25 @@ export const LAUNCH_DATA_FAILURE = "LAUNCH_DATA_FAILURE";
 
 //set action creator with Thunk middleware
 //going to house axios API call
-export const fetchLaunchData = () => {
-    return function(dispatch){
-        dispatch({type: LAUNCH_DATA_START});
-
+export const fetchLaunchData = () => dispatch => {    
+        dispatch({type: LAUNCH_DATA_START});        
             axios
             .get('https://api.spacexdata.com/v3/launches')
             .then(res => {
-                console.log(res);
-                // const flightData = res.data.map(item => {
-                //     const flightDataArray = {};
-                //     flightDataArray.flightNumber = item.flight_number;
-                // });
-                // flightData.flightNumber = res.data.map(flightData => {
-                //     return flightData.flight_number})
-                const flightData = {};
-                flightData.flightNumber = res.data[0].flight_number;
-                flightData.missionName = res.data[0].mission_name;
-                flightData.rocket = res.data[0].rocket.rocket_name;
-                flightData.launchSite = res.data[0].launch_site.site_name_long;
-                flightData.launchSuccess = res.data[0].launch_success;
-                flightData.details = res.data[0].details;
-
+                // console.log(res);
+                let flightData = res.data.map(item => {
+                    const flightDataArray = {};
+                    flightDataArray.flightNumber = item.flight_number;
+                    flightDataArray.missionName = item.mission_name;
+                    flightDataArray.rocket = item.rocket.rocket_name;
+                    flightDataArray.launchSite = item.launch_site.site_name_long;
+                    flightDataArray.launchSuccess = item.launch_success;
+                    flightDataArray.details = item.details;
+                    // console.log(flightDataArray);
+                    return (flightDataArray)
+                });
+
+                // console.log(flightData);
                 dispatch({
                     type: LAUNCH_DATA_SUCCESS, 
                     payload: flightData});
@@ -39,9 +36,8 @@ export const fetchLaunchData = () => {
                 console.log(err);
                 dispatch({
                     type: LAUNCH_DATA_FAILURE,
-                    payload: err.message + 'Fetching launch data...'
+                    payload: err.message
                 })
             })
 
     };
-};
diff --git a/src/components/Launches.js b/src/components/Launches.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
 //import connect
 import { connect } from 'react-redux';
@@ -8,15 +8,13 @@ import { fetchLaunchData } from '../actions/index';
 
 
 
-const Launches = ({fetchLaunchData, flightNumber,missionName, rocket, launchSite, launchSuccess,    details, error, isFetching}) => {
-    useEffect(() => {
-        fetchLaunchData();
-    },[fetchLaunchData]);
+const Launches = props => {
 
     const fetchLaunch = e => {
         e.preventDefault();
-        fetchLaunchData();
-    };
+        props.fetchLaunchData()
+    }
+    console.log(fetchLaunchData());
 
     return(
         <div>
@@ -25,12 +23,16 @@ const Launches = ({fetchLaunchData, flightNumber,missionName, rocket, launchSite
             </div>
             <section className='launchContainer'>
             <div className='launchData'>
-                <h3>Flight Number: {flightNumber}</h3>
-                <p>Mission Name: {missionName}</p>
-                <p>Rocket: {rocket}</p>
-                <p>Launch Site: {launchSite}</p>
-                <p>Launch Success: {launchSuccess}</p>
-                <p>Launch Details: {details}</p>
+                {props.flightData.map(flightData => (
+                    <div>
+                    <h3>Flight Number: {flightData.flightNumber}</h3>
+                    <p>Mission Name: {flightData.missionName}</p>
+                    <p>Rocket: {flightData.rocket}</p>
+                    <p>Launch Site: {flightData.launchSite}</p>
+                    <p>Launch Success: {flightData.launchSuccess}</p>
+                    <p>Launch Details: {flightData.details}</p>
+                    </div>
+                ))}
             </div>
             </section>
         </div>
@@ -39,16 +41,11 @@ const Launches = ({fetchLaunchData, flightNumber,missionName, rocket, launchSite
 
 const mapStateToProps = state => {
     return {
-        flightNumber: state.flightNumber,
-        missionName: state.missionName,
-        rocket: state.rocket,
-        launchSite: state.launchSite,
-        launchSuccess: state.launchSuccess,
-        details: state.details,
-        error: state.error,
-        isFetching: state.isFetching
+        flightData: state.flightData
 
     };
 };
 
-export default connect(mapStateToProps, {fetchLaunchData: fetchLaunchData})(Launches);
+export default connect(
+    mapStateToProps,
+    {fetchLaunchData: fetchLaunchData})(Launches);
diff --git a/src/index.js b/src/index.js
@@ -6,16 +6,21 @@ import * as serviceWorker from './serviceWorker';
 
 //setup Redux in app
 import { Provider } from 'react-redux';
-import { applyMiddleware, createStore } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 
 //import reducer
-import {reducer} from './reducers/index';
+import { reducer } from './reducers';
 
 //create store
 const store = createStore(reducer, applyMiddleware(thunk));
 
-ReactDOM.render(<Provider store = {store}><App /></Provider>, document.getElementById('root'));
+ReactDOM.render(
+    <Provider store = {store}>
+        <App />
+        </Provider>, 
+        document.getElementById('root')
+        );
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -4,18 +4,20 @@ import{
     LAUNCH_DATA_FAILURE
 } from '../actions/index';
 
-export const initialState = {
-    flightNumber: '',
-    missionName: '',
-    rocket: '',
-    launchSite: '',
-    launchSuccess: '',
-    details: '',
+ const initialState = {
+    // flightNumber: '',
+    // missionName: '',
+    // rocketName: '',
+    // launchSite: '',
+    // launchSuccess: '',
+    // details: '',
+    flightData: [],
     error: '',
     isFetching: false
     };
 
 export const reducer = (state = initialState, action) => {
+    console.log('reducer', action);
     switch(action.type){
         case LAUNCH_DATA_START:
             return{
@@ -25,7 +27,7 @@ export const reducer = (state = initialState, action) => {
         case LAUNCH_DATA_SUCCESS:
             return{
                 ...state,
-               ...action.payload,
+                flightData: action.payload,
                 error: '',
                 isFetching: false                
             };