두가지 수정사항

src/actions/index.js

@@ -23,6 +23,7 @@ export const FETCH_GIST_ALL = 'FETCH_GIST_ALL';
 export const POST_NEW_GIST = 'POST_NEW_GIST';
 export const POST_NEW_GIST_SUCCESS = 'POST_NEW_GIST_SUCCESS';
 export const POST_NEW_GIST_ERROR = 'POST_NEW_GIST_ERROR';
+export const CLEAR_ERROR = 'CLEAR_ERROR';
 
 const createNewGistPayload = (values) => {
   return {
@@ -121,4 +122,9 @@ export const postNewGistError = (error) => {
     type: POST_NEW_GIST_ERROR,
     paylaod: error,
   }
-}
+}
+export const clearError = () => {
+  return {
+    type: CLEAR_ERROR,
+  };
+};

src/components/Alert.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { Alert } from 'reactstrap';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom'
+
+import { clearError } from '../actions';
+
+ class AlertComponent extends Component {
+  constructor(props){
+    super(props);
+  }
+
+  componentWillReceiveProps(newProps) {
+    if(this.props.location.pathname != newProps.location.pathname) {
+      this.props.clearError();
+    }
+  }
+
+  render() {
+    const errors = this.props.errors;
+    if(!errors.length) {
+      return null;
+    }
+    return (
+      <div className='container'>      
+        <Alert color='danger'>
+          <ul style={{marginBottom: '0px'}}>
+            {errors.map((error) => {
+              const message = `${error.status} ${error.response.message || error.message}`;
+              return <li>{message}</li>
+            })}
+          </ul>
+        </Alert>
+      </div>
+    )
+  }
+
+}
+
+const mapStateToProps = (state, props) => {
+  const errors = [];
+  Object.keys(state).forEach((key) => {
+    const reducerError = state[key].error;
+    if(reducerError !== undefined && reducerError !== null && Object.keys(reducerError).length !== 0) {
+      errors.push(reducerError);
+    }
+  })
+  return {
+    errors
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    clearError: () => dispatch(clearError()),
+  };
+};
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AlertComponent));

src/components/Nav.js

@@ -49,7 +49,8 @@ export default class NavbarComponent extends Component {
               className='nav-link'
               to='https://github.com/cannalee90/flash-card'
               text='Github'
-              />
+              target={'_flashcard'}
+            />
           </Nav>
         </Collapse>
       </Navbar>

src/components/NavLinkItem.js

@@ -7,7 +7,15 @@ export default (props) => {
     to,
     text,
     className,
-   } = props;
+    target,
+  } = props;
+  if(to.indexOf('http') !== -1 || to.indexOf('https') !== -1 || to.indexOf('www') !== -1 ) {
+    return (
+      <NavItem>
+        <a className={className} href={to} target={target}>{text}</a>
+      </NavItem>
+    )
+  }
   return (
     <NavItem>
       <Link className={className} to={to}>{text}</Link>

src/containers/List.js

@@ -12,15 +12,16 @@ class List extends Component {
   render() {
     const { cards } = this.props;
     return(
-      <div className='album py-5 bg-light'>
-        <div className='container'>
+      <div> 
+        <div className='container' style={{minHeight: 'calc(100vh - 56px)', paddingTop: '20px'}}>
           <div className='row'>
-            {cards.map((card) => {
-              const fileName = Object.keys(card.files)[0];
+            {Object.keys(cards).map((key) => {
+              const obj = cards[key];
               return (
                 <Card
-                  key=''
-                  title={fileName}
+                  key={key}
+                  title={key.split('.')[0]}
+                  rawURL={obj.raw_url}
                   wrapperClassName='col-md-4'
                 />
               );
@@ -32,7 +33,7 @@ class List extends Component {
   }
 }
 
-const mapStateToProps = ({card}, props) => {
+const mapStateToProps = ({ card }, props) => {
   return {
     cards: card.cards,
   }

src/containers/Root.dev.js

@@ -8,7 +8,9 @@ import App from './App';
 import NewCard from './NewCard';
 import List from './List';
 import Signin from './Signin';
+
 import Nav from './../components/Nav';
+import Alert from '../components/Alert';
 
 import 'bootstrap/dist/css/bootstrap.css';
 import '../style/app.css';
@@ -17,11 +19,12 @@ const Root = ({ store }) => {
   return (
     <Provider store={store}>
       <div>
-        <Nav />
-        <Route path='/' exact component={App} />
-        <Route path='/new' component={NewCard} />
-        <Route path='/list' component={List} />
-        <Route path='/signin' component={Signin} />
+        <Nav/>
+          <Alert />
+          <Route path='/' exact component={App} />
+          <Route path='/new' component={NewCard} />
+          <Route path='/list' component={List} />
+          <Route path='/signin' component={Signin} />
         <DevTools />
       </div>
     </Provider>

src/epic/index.js

@@ -24,21 +24,59 @@ const makeHeader = () => {
   return headers;
 }
 
+const getNextPage = (xhr) => {
+  try {
+    xhr.getRequestHeader('link');
+  } catch(e) {
+
+  }
+}
+
 function fetchGists(action$) {
   return action$
     .ofType(FETCH_GIST_ALL)
     .switchMap(({payload}) => {
       return Observable.ajax({
-        url: baseURL + '/gists',
+        url: baseURL + '/gists/ea178d763c72b03dcee8ee4fa0dc03ae',
         method: 'GET',
         headers: makeHeader(),
       })
-      .map(({response}) => response.filter((gist) => gist.public))
+      .map((res) => {
+        return res.response;
+      })
       .map((filtered) => fetchGistSuccess(filtered))
       .catch((error) => Observable.of(fetchGistError(error)));
     })
 }
 
+// function fetchGists(action$) {
+//   return action$
+//     .ofType(FETCH_GIST_ALL)
+//     .switchMap(({payload}) => {
+//       return Observable.ajax({
+//         url: baseURL + '/gists',
+//         method: 'GET',
+//         headers: makeHeader(),
+//       })
+//       .map(({response}) => {
+//         return Observable.from(response);
+//       })
+//       .concatMap((arr) => {
+//         return arr;
+//       })
+//       .filter((res) => {
+//         return res.public;
+//       })
+//       .toArray()
+//       .map((filtered) => {
+//         console.log('filstered', filtered);
+//         return fetchGistSuccess(filtered);
+//       })
+//       .catch((error) => Observable.of(fetchGistError(error)));
+//     })
+// }
+
+
 function fetchUserInfo(action$) {
   return action$
     .ofType(FETCH_USER_INFO)
@@ -58,8 +96,8 @@ function postNewGist(action$) {
     .ofType(POST_NEW_GIST)
     .switchMap(({payload}) => {
       return Observable.ajax({
-        method: 'POST',
-        url: baseURL + '/gists',
+        method: 'PATCH',
+        url: baseURL + '/gists/ea178d763c72b03dcee8ee4fa0dc03ae',
         headers: makeHeader(),
         body: payload,
       })

src/reducers/cardReducer.js

@@ -5,11 +5,13 @@ import {
   POST_NEW_GIST,
   POST_NEW_GIST_ERROR,
   POST_NEW_GIST_SUCCESS,
+  CLEAR_ERROR,
 } from './../actions';
 
 const initialState = {
-  cards: [],
+  cards: {},
   error: {},
+  gist: {},
   isLoading: false,
 };
 
@@ -24,7 +26,8 @@ const CardReducer = (state = initialState, actions) => {
       return {
         ...state,
         isLoading: false,
-        cards: actions.payload,
+        cards: actions.payload.files,
+        gist: actions.payload,
       };
     case POST_NEW_GIST:
       return {
@@ -48,6 +51,11 @@ const CardReducer = (state = initialState, actions) => {
         isLoading: false,
         error: actions.paylaod,
       };
+    case CLEAR_ERROR:
+      return {
+        ...state,
+        error: {},
+      }
     default:
       return state;
   }

src/reducers/userReducer.js

@@ -3,12 +3,13 @@ import {
   FETCH_USER_INFO,
   FETCH_USER_INFO_SUCCESS,
   FETCH_USER_INFO_ERROR,
-  FETCH_ACCESS_TOKEN_ERROR } from './../actions';
+  CLEAR_ERROR,
+} from './../actions';
 
 const initialState = {
   currentUser: {},
   isLoading: false,
-  accessToken: null,
+  accessToken: localStorage.getItem('githubAuthToken') ? localStorage.getItem('githubAuthToken') : null,
   error: null,
 };
 
@@ -43,6 +44,11 @@ const CardReducer = (state = initialState, actions) => {
         isLoading: false,
         error: actions.payload.error,
       }
+    case CLEAR_ERROR:
+      return {
+        ...state,
+        error: {},
+      }
     default:
       return state;
   }

src/store/configureStore.dev.js

@@ -20,7 +20,7 @@ const getTokenFromLocalStorate = (preloadedState = {}) => {
 const configureStore = preloadedState => {
   const store = createStore(
     rootReducer,
-    getTokenFromLocalStorate(preloadedState),
+    // getTokenFromLocalStorate(preloadedState),
     compose(
       applyMiddleware(epicMiddlewre),
       DevTools.instrument(),