HomeTask1

admin/package.json

@@ -16,7 +16,8 @@
     "redux": "^4.0.1",
     "redux-form": "^8.1.0",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "uuid": "^3.3.2"
   },
   "scripts": {
     "start": "react-scripts start",

admin/src/App.js

@@ -1,33 +1,20 @@
-import React, { Component } from 'react'
-import { Route, NavLink } from 'react-router-dom'
-import AuthPage from './components/routes/auth'
-import AdminPage from './components/routes/admin'
+import React, { Component } from "react";
+import { Route, Switch } from "react-router-dom";
+import AuthPage from "./components/routes/auth";
+import AdminPage from "./components/routes/admin";
 
 class App extends Component {
-    static propTypes = {
+  static propTypes = {};
 
-    }
-
-    render() {
-        return (
-            <div>
-                <nav>
-                    <ul>
-                        <li>
-                            <NavLink to="/auth" activeStyle={{ color: 'red'}}>auth</NavLink>
-                        </li>
-                        <li>
-                            <NavLink to="/admin" activeStyle={{ color: 'red'}}>admin</NavLink>
-                        </li>
-                    </ul>
-                </nav>
-                <section>
-                    <Route path="/auth" component={AuthPage}/>
-                    <Route path="/admin" component={AdminPage}/>
-                </section>
-            </div>
-        )
-    }
+  render() {
+    return (
+        <Switch>
+          <Route exact path="/" component={AuthPage} />
+          <Route path="/auth" component={AuthPage} />
+          <Route path="/admin" component={AdminPage} />
+        </Switch>
+    );
+  }
 }
 
-export default App
+export default (App);

admin/src/components/auth/sign-up-form.js

@@ -26,7 +26,7 @@ const validate = ({email, password}) => {
     else if (!validator.validate(email)) errors.email = 'invalid email'
 
     if (!password) errors.password = 'password is a required field'
-    else if (password.length < 8) errors.password = 'password is too short'
+    else if (password.length < 3) errors.password = 'password is too short'
 
     return errors
 }

admin/src/components/participants/add-participant-form.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import { reduxForm, Field } from 'redux-form'
+import validator from 'email-validator'
+import ErrorField from '../common/error-field'
+
+class AddParticipantForm extends Component {
+    render() {
+        return (
+            <div>
+                <h3>Add Participant</h3>
+                <form onSubmit={this.props.handleSubmit}>
+                    <Field name="firstName" component={ErrorField} label="First Name"/>
+                    <Field name="lastName" component={ErrorField} label="Last Name"/>
+                    <Field name="email" component={ErrorField} label="Email"/>
+                    <button type="submit">Add</button>
+                </form>
+            </div>
+        )
+    }
+}
+
+const validate = ({firstName, lastName, email}) => {
+    const errors = {}
+
+    if (!firstName) errors.firstName = 'First Name is a required field'
+    if (!lastName) errors.lastName = 'Last Name is a required field'
+
+    if (!email) errors.email = 'email is a required field'
+    else if (!validator.validate(email)) errors.email = 'invalid email'
+
+    return errors
+}
+
+export default reduxForm({ form: 'add-participant', validate })(AddParticipantForm)

admin/src/components/participants/participant-list.js

@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { getParticipantList } from '../../ducks/participants';
+
+class ParticipantList extends Component {
+  render() {
+    const { participantList } = this.props;
+    return (
+      <div>
+        <h3>Participant List</h3>
+        <div>
+          {participantList.map(participant => (
+            <div
+              key={participant.id}
+              style={{ borderTop: "1px solid rgb(128, 128, 128)" }}
+            >
+              <div>
+                <span>First Name:</span>
+                <span>{participant.firstName}</span>
+              </div>
+              <div>
+                <span>Last Name:</span>
+                <span>{participant.lastName}</span>
+              </div>
+              <div>
+                <span>Email:</span>
+                <span>{participant.email}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  participantList: getParticipantList(state)
+});
+
+export default connect(mapStateToProps)(ParticipantList);

admin/src/components/routes/admin/index.js

@@ -1,17 +1,34 @@
 import React, { Component } from 'react'
+import {Route, NavLink, Redirect} from 'react-router-dom'
+import ParticipantsPage from '../participants'
+import {connect} from 'react-redux'
+import {getUser, signOut} from '../../../ducks/auth'
 
 class AdminPage extends Component {
-    static propTypes = {
-
-    }
-
     render() {
+        if (!this.props.user)
+            return <Redirect to="/auth"/>
         return (
             <div>
                 <h1>Admin</h1>
+                <div>
+                    <NavLink to="/admin/participants">Participants</NavLink>
+                    <div>
+                        <span onClick={this.handleSignOut} style={{cursor: 'pointer'}}>Sign Out</span>
+                    </div>
+                </div>
+                <Route path="/admin/participants" component={ParticipantsPage}/>
             </div>
         )
     }
+
+    handleSignOut = e => {
+        this.props.dispatch(signOut())
+    }
 }
 
-export default AdminPage
+const mapStateToProps = state => ({
+    user: getUser(state)
+})
+
+export default connect(mapStateToProps)(AdminPage)

admin/src/components/routes/auth/index.js

@@ -1,16 +1,19 @@
 import React, { Component } from 'react'
-import {Route, NavLink} from 'react-router-dom'
+import {Route, NavLink, Redirect} from 'react-router-dom'
 import {connect} from 'react-redux'
 import SignInForm from '../../auth/sign-in-form'
 import SignUpForm from '../../auth/sign-up-form'
 import { signIn, signUp } from '../../../ducks/auth'
+import {getUser} from '../../../ducks/auth'
 
 class AuthPage extends Component {
     static propTypes = {
 
     }
 
     render() {
+        if (this.props.user)
+            return <Redirect to="/admin"/>
         return (
             <div>
                 <h1>Auth Page</h1>
@@ -33,5 +36,8 @@ class AuthPage extends Component {
     handleSignIn = ({ email, password }) => this.props.signIn(email, password)
     handleSignUp = ({ email, password }) => this.props.signUp(email, password)
 }
+const mapStateToProps = state => ({
+    user: getUser(state)
+})
 
-export default connect(null, { signIn, signUp })(AuthPage)
+export default connect(mapStateToProps, { signIn, signUp })(AuthPage)

admin/src/components/routes/participants/index.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import ParticipantList from '../../../components/participants/participant-list'
+import AddParticipantForm from '../../../components/participants/add-participant-form'
+import { addParticipant } from '../../../ducks/participants'
+import { connect } from 'react-redux'
+
+class ParticipantsPage extends Component {
+    render() {
+        return (
+            <div>
+                <h1>Participants</h1>
+                <AddParticipantForm onSubmit={this.props.addParticipant}/>
+                <ParticipantList/>
+            </div>
+        )
+    }
+}
+
+export default connect(null, { addParticipant })(ParticipantsPage)

admin/src/config.js

@@ -1,15 +1,15 @@
 import firebase from 'firebase/app'
 import 'firebase/auth'
 
-export const appName = 'adv-react-29-01'
+export const appName = 'adv-react-29-01-9211b'
 
 const config = {
-    apiKey: "AIzaSyD3RIBQ59em4ZGOdRLQpS1velxhcgImTeI",
+    apiKey: "AIzaSyBM1x37CJgFd5i1z9RZWtHNwZdlhN_YXjo",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: `${appName}.appspot.com`,
-    messagingSenderId: "832921987414"
+    messagingSenderId: "476036167607"
 }
 
 firebase.initializeApp(config)

admin/src/ducks/auth.js

@@ -14,6 +14,8 @@ export const SIGN_IN_SUCCESS = `${prefix}/SIGN_IN_SUCCESS`
 export const SIGN_UP_START = `${prefix}/SIGN_UP_START`
 export const SIGN_UP_SUCCESS = `${prefix}/SIGN_UP_SUCCESS`
 
+export const SIGN_OUT = `${prefix}/SIGN_OUT`
+
 /**
  * Reducer
  * */
@@ -28,6 +30,8 @@ export default function reducer(state = new ReducerRecord(), action) {
         case SIGN_IN_SUCCESS:
         case SIGN_UP_SUCCESS:
             return state.set('user', payload.user)
+        case SIGN_OUT:
+            return state.set('user', null)
         default:
             return state
     }
@@ -36,6 +40,7 @@ export default function reducer(state = new ReducerRecord(), action) {
 /**
  * Selectors
  * */
+export const getUser = state => state.auth.user
 
 /**
  * Action Creators
@@ -71,6 +76,34 @@ export function signUp(email, password) {
     }
 }
 
+export function checkAuth() {
+    return function (dispatch) {
+        firebase.auth().onAuthStateChanged(user => {
+            if (user) {
+                dispatch({
+                    type: SIGN_IN_SUCCESS,
+                    payload: { user }
+                })
+            } else {
+                dispatch({
+                    type: SIGN_OUT
+                })
+            }
+        });
+    }
+}
+
+export function signOut() {
+    return function (dispatch) {
+        firebase.auth().signOut()
+            .then(() =>{
+                dispatch({
+                    type: SIGN_OUT
+                })
+            });
+    }
+}
+
 /**
  * Init
  **/

admin/src/ducks/participants.js

@@ -0,0 +1,63 @@
+import { Record, List } from "immutable";
+import { appName } from "../config";
+import uuid from "uuid/v4";
+import {reset} from 'redux-form';
+
+/**
+ * Constants
+ * */
+export const moduleName = "participants";
+const prefix = `${appName}/${moduleName}`;
+
+export const ADD_PARTICIPANT_START = `${prefix}/ADD_PARTICIPANT_START`;
+export const ADD_PARTICIPANT_SUCCESS = `${prefix}/ADD_PARTICIPANT_SUCCESS`;
+
+/**
+ * Reducer
+ * */
+export const ReducerRecord = Record({
+  list: List()
+});
+
+export default function reducer(state = new ReducerRecord(), action) {
+  const { type, payload } = action;
+
+  switch (type) {
+    case ADD_PARTICIPANT_SUCCESS:
+      return state.set("list", state.list.push(payload));
+    default:
+      return state;
+  }
+}
+
+/**
+ * Selectors
+ * */
+
+export const getParticipantList = state => state.participants.list;
+
+/**
+ * Action Creators
+ * */
+
+export function addParticipant({ firstName, lastName, email }) {
+  return dispatch => {
+    dispatch({
+        type: ADD_PARTICIPANT_START
+    });
+
+    // async in future with id from db
+    var user = {
+        id: uuid(),
+        firstName,
+        lastName,
+        email
+    };
+
+    dispatch({
+      type: ADD_PARTICIPANT_SUCCESS,
+      payload: user
+    });
+    dispatch(reset('add-participant'));
+  };
+}

admin/src/redux/index.js

@@ -4,7 +4,12 @@ import logger from 'redux-logger'
 import thunk from 'redux-thunk'
 import reducer from './reducer'
 import history from '../history'
+import {checkAuth} from '../ducks/auth'
 
 const enhancer = applyMiddleware(thunk, routerMiddleware(history), logger)
 
-export default createStore(reducer, enhancer)
+const store = createStore(reducer, enhancer)
+
+store.dispatch(checkAuth())
+
+export default store