Zac Collier #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

zacacollier wants to merge 4 commits into AustinCodingAcademy:master from zacacollier:master

.eslintrc.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -5,6 +5,7 @@ module.exports = {
  
            "es6": true

        },

        "extends": "eslint:recommended",

        "parser": "babel-eslint",

        "parserOptions": {

            "ecmaFeatures": {

                "experimentalObjectRestSpread": true,

    @@ -31,8 +32,8 @@ module.exports = {
  
                "single"

            ],

            "semi": [

                "error",

                "always"

                "warn",

                "never"

            ]

        }

    };

.flowconfig

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    [ignore]
+    [include]
+    [libs]
+    [options]

README.md

-Original file line number
+Diff line change
@@ Expand Up @@
       - `import` the data into `index.js` and **set** it as a prop on your `App` component (in the `render` method)
       - Work in small pieces, one step at a time - and **commit** your work every time you finish a feature.
+    ### Homework 6/15
+    - create a new *functional* component called `UserProfile.js`. For now, just have it return an empty `<div></div>` or something.
+    (fix errors, commit your work)
+    - `import` the `sampleUser` into `App.js` and place it in your `constructor(props)` as an initial `state` value.
+    (fix errors, commit your work)
+    - *set* the user data you're holding in `state` as a `prop` on the `<UserProfile />` component (don't forget to `export` & `import` the UserProfile)
+    (fix errors, commit your work)
+    - fix any errors and verify that the `<UserProfile />` is receiving `props` from `<App />` by using the React DevTools
+    (fix errors, commit your work)
+    - Now add JSX to `UserProfile.js` that will allow you to render the `user` data from `props`
+    (fix errors, commit your work)
     ### Hints
     - Start with the `UserProfile`.
       - Don't try to do it all at once. Just write the component with statically defined data, and get it rendering:
@@ Expand All / @@ -50,3 +63,4 @@ function UserProfile (props) { @@
     ```
       - Now, `import` the data from `sampleUser.json` to `index.js` and pass it down as `props` to your `UserProfile` component.
       - Once you have data rendering via `props`, you'll want to use [`.map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map?v=control) to iterate over the Array of user data. If you access user data from `props`, you'll find that there's a way to easily swap out the single user in `sampleUser.json` with multiple users in `users.json`.
+    # flow-starter

package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,13 +3,21 @@ @@
       "version": "0.1.0",
       "private": true,
       "dependencies": {
+        "axios": "^0.16.2",
         "eslint": "^3.19.0",
         "react": "^15.5.4",
-        "react-dom": "^15.5.4"
+        "react-dom": "^15.5.4",
+        "react-redux": "^5.0.6",
+        "redux": "^3.7.2",
+        "redux-devtools-extension": "^2.13.2",
+        "redux-thunk": "^2.2.0"
       },
       "devDependencies": {
+        "babel-cli": "^6.26.0",
+        "babel-preset-flow": "^6.23.0",
         "eslint": "^3.19.0",
         "eslint-plugin-react": "^7.0.1",
+        "flow-bin": "^0.54.1",
         "react-scripts": "1.0.6"
       },
       "scripts": {
@@ Expand Down @@

src/components/App.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,12 +1,33 @@
  
    import React from 'react';

    import './App.css';

    import React from 'react'

    import { connect } from 'react-redux'

    import { bindActionCreators } from 'redux'

    import ListOfUsers from './ListOfUsers'

    import { fetchUsersAction } from '../redux/api'

    import User from '../sampleUser.json'

    import Users from '../randomUsers.json'

    import './App.css'

    function App(props) {

    const App = (props) => {

      return (

        <div>

          <h1 className="app-header">Hello React</h1>

          <h1 className="app-header">Hello Zac</h1>

          <ListOfUsers

            users={Users}

          />

          <button

            onClick={props.fetchUsers}

          >Click</button>

        </div>

      );

      )

    }

    export default App;

    const mapStateToProps = (state) => ({

      api: state.users,

    })

    const mapDispatchToProps = (dispatch) => ({

      fetchUsers: bindActionCreators(fetchUsersAction, dispatch),

    })

    export default connect(

      mapStateToProps,

      mapDispatchToProps

    )(App)

src/components/Button.js

Empty file.

src/components/Header.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,7 +1,7 @@
  
    import React from 'react';

    import React from 'react'

    function Header(props) {

        // Make it so

      // Make it so

    }

    export default Header;

    export default Header

src/components/ListOfUsers.js

-Original file line number
+Diff line change
@@ -0,0 +1,30 @@
+    import React from 'react'
+    import User from './User'
+    const renderUsers = (users) => {
+      const { results } = users
+      return results.map(
+        ({ name, picture }, index) =>
+          <User
+            key={index}
+            name={name}
+            picture={picture}
+            index={index}
+          />
+      )
+    }
+    const ListOfUsers = ({ users }) => {
+      return (
+        <ul>
+          {renderUsers(users)}
+        </ul>
+      )
+    }
+    export default ListOfUsers

src/components/User.js

-Original file line number
+Diff line change
@@ -0,0 +1,21 @@
+    // @flow
+    import React from 'react'
+    type Props = {
+      name: Object,
+      picture: Object,
+      index: number,
+    }
+    export default ({
+      name,
+      picture,
+      index,
+      }: Props) =>
+      <div key={index}>
+        <li>{name.first} {name.last}</li>
+        <img
+          src={picture.thumbnail}
+          alt={name.first}
+        />
+      </div>

src/index.js

-Original file line number
+Diff line change
@@ -1,8 +1,29 @@
-    import React from 'react';
-    import ReactDOM from 'react-dom';
-    import App from './components/App';
-    import registerServiceWorker from './registerServiceWorker';
-    import './index.css';
+    import React from 'react'
+    import ReactDOM from 'react-dom'
+    import { createStore, applyMiddleware } from 'redux'
+    import { Provider } from 'react-redux'
+    import { composeWithDevTools } from 'redux-devtools-extension'
+    import thunk from 'redux-thunk'
+    import App from './components/App'
+    import registerServiceWorker from './registerServiceWorker'
+    import Users from './sampleUser.json'
+    import reducer from './redux'
+    import './index.css'
-    ReactDOM.render(<App />, document.getElementById('root'));
-    registerServiceWorker();
+    const store = createStore(
+      reducer,
+      composeWithDevTools(
+        applyMiddleware(
+          thunk
+        )
+      )
+    )
+    ReactDOM.render(
+      <Provider store={store}>
+        <App />
+      </Provider>,
+      document.getElementById('root')
+    )
+    registerServiceWorker()

src/randomUsers.json

-Original file line number
+Diff line change
@@ -1,5 +1,5 @@
     {
-      "users": [{
+      "results": [{
         "name": {
           "title": "mr",
           "first": "fred",
@@ Expand Down @@

src/redux/api.js

-Original file line number
+Diff line change
@@ -0,0 +1,84 @@
+    // @flow
+    import axios from 'axios'
+    const initialState = {
+      isFetching: false,
+      error: {
+        status: '',
+        message: '',
+      },
+      results: {},
+    }
+    const FETCH_USERS_BEGIN: string = 'FETCH_USERS_BEGIN'
+    const FETCH_USERS_SUCCESS: string  = 'FETCH_USERS_SUCCESS'
+    const FETCH_USERS_ERROR: string  = 'FETCH_USERS_ERROR'
+    type State = {|
+      +isFetching: boolean,
+      +error: {
+        +status: string,
+        +message: string,
+      },
+      +results: Object,
+    |}
+    type Action = {
+      type: string,
+      payload: Object,
+    }
+    const api = (state: State = initialState, action: Object) => {
+      switch (action.type) {
+      case FETCH_USERS_BEGIN:
+        return {
+          ...state,
+          isFetching: true,
+        }
+      case FETCH_USERS_SUCCESS:
+        return {
+          ...state,
+          isFetching: false,
+          users: {...action.payload[0]},
+        }
+      case FETCH_USERS_ERROR:
+        return {
+          ...state,
+          isFetching: false,
+          error: {
+            ...state.error,
+            message: 'error',
+          },
+        }
+      default:
+        return state
+      }
+    }
+    export const fetchUsersBegin = () =>
+      ({ type: FETCH_USERS_BEGIN })
+    export const fetchUsersSuccess = (payload: Array<*>) =>
+      ({ type: FETCH_USERS_SUCCESS, payload })
+    export const fetchUsersError = (error: Object) =>
+      ({ type: FETCH_USERS_ERROR, error })
+    export const fetchUsersAction = (amount: number = 10) => {
+      return (dispatch: any) => {
+        dispatch(fetchUsersBegin())
+        return axios.get(`https://randomuser.me/api?results=${amount}`)
+          .then(res =>
+            dispatch(
+              fetchUsersSuccess(res.data.results)
+            )
+          )
+          .catch(err =>
+            dispatch(
+              fetchUsersError(err)
+            )
+          )
+      }
+    }
+    export default api

src/redux/index.js

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+    import { combineReducers } from 'redux'
+    import api from './api'
+    export default combineReducers({
+      api,
+    })

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Zac Collier #2

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Zac Collier #2

Are you sure you want to change the base?

Uh oh!

Zac Collier #2

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!