Add HT1

README.md

@@ -0,0 +1 @@
+# advreact_04_12

admin-panel/README.md

@@ -1,3 +1,3 @@
-##HT1.1 Завести собственный проект на firebase, работать с ним
-##HT1.2 Сделать форму для добавлегния людей(firstName, lastName, email)
-##HT1.3 Показывать лоадер и ошибки в форме аутентификации
+##HT1.1 Завести собственный проект на firebase, работать с ним +++
+##HT1.2 Сделать форму для добавлегния людей(firstName, lastName, email) +++
+##HT1.3 Показывать лоадер и ошибки в форме аутентификации +++

admin-panel/src/components/auth/SignInForm.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
 import {reduxForm, Field} from 'redux-form'
+import ErrorField from '../common/ErrorField'
+import {validate} from './utils'
 
 class SignInForm extends Component {
     static propTypes = {
@@ -12,10 +14,10 @@ class SignInForm extends Component {
                 <h3>Sign In</h3>
                 <form onSubmit={this.props.handleSubmit}>
                     <div>
-                        email: <Field name='email' component='input'/>
+                        email: <Field name='email' component={ErrorField}/>
                     </div>
                     <div>
-                        password: <Field name='password' component='input' type='password'/>
+                        password: <Field name='password' component={ErrorField} type='password'/>
                     </div>
                     <input type='submit' />
                 </form>
@@ -26,5 +28,6 @@ class SignInForm extends Component {
 }
 
 export default reduxForm({
-    form: 'auth'
+    form: 'auth',
+    validate
 })(SignInForm)

admin-panel/src/components/auth/SignUpForm.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import {reduxForm, Field} from 'redux-form'
-import validator from 'email-validator'
 import ErrorField from '../common/ErrorField'
+import {validate} from './utils'
 
 class SignUpForm extends Component {
     static propTypes = {
@@ -27,18 +27,6 @@ class SignUpForm extends Component {
     }
 }
 
-const validate = ({ email, password }) => {
-    const errors = {}
-
-    if (!email) errors.email = 'email is a required field'
-    if (email && !validator.validate(email)) errors.email = 'incorrect email format'
-
-    if (!password) errors.password = 'password is a required field'
-    if (password && password.length < 8) errors.password = 'password is to short'
-
-    return errors
-}
-
 export default reduxForm({
     form: 'auth',
     validate

admin-panel/src/components/auth/utils.js

@@ -0,0 +1,13 @@
+import validator from 'email-validator'
+
+export const validate = ({ email, password }) => {
+  const errors = {}
+
+  if (!email) errors.email = 'email is a required field'
+  if (email && !validator.validate(email)) errors.email = 'incorrect email format'
+
+  if (!password) errors.password = 'password is a required field'
+  if (password && password.length < 8) errors.password = 'password is to short'
+
+  return errors
+}

admin-panel/src/components/people/PeopleForm.js

@@ -0,0 +1,44 @@
+import React, {Component} from 'react'
+import {reduxForm, Field} from 'redux-form'
+import validator from 'email-validator'
+import ErrorField from '../common/ErrorField'
+
+class PeopleForm extends Component {
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.props.handleSubmit}>
+          <div>
+            First-name: <Field name='firstName' component={ErrorField}/>
+          </div>
+          <div>
+            Last-name: <Field name='lastName' component={ErrorField}/>
+          </div>
+          <div>
+            Email: <Field name='email' component={ErrorField}/>
+          </div>
+          <input type='submit' />
+        </form>
+
+      </div>
+    )
+  }
+}
+
+const validate = ({firstName, lastName, email}) => {
+  const errors = {}
+
+  if (!firstName) errors.firstName = 'First name is required'
+
+  if (!lastName) errors.lastName = 'Last name is required'
+
+  if (!email) errors.email = 'email is a required field'
+  if (email && !validator.validate(email)) errors.email = 'incorrect email format'
+
+  return errors
+}
+
+export default reduxForm({
+  form: 'people',
+  validate
+})(PeopleForm)

admin-panel/src/components/routes/Admin.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import People from './people'
 
 class Admin extends Component {
     static propTypes = {
@@ -9,6 +10,7 @@ class Admin extends Component {
         return (
             <div>
                 <h2>Admin Page</h2>
+                <People />
             </div>
         )
     }

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import {Route, NavLink} from 'react-router-dom'
 import {connect} from 'react-redux'
-import {signIn, signUp} from '../../../ducks/auth'
+import {signIn, signUp, loadingSelector} from '../../../ducks/auth'
 import SignInForm from '../../auth/SignInForm'
 import SignUpForm from '../../auth/SignUpForm'
 
@@ -11,13 +11,16 @@ class Auth extends Component {
     };
 
     render() {
+        const {loading} = this.props
+
         return (
             <div>
                 <h2>Auth page</h2>
                 <ul>
                     <li><NavLink to = '/auth/sign-in' activeStyle={{color: 'red'}}>Sign In</NavLink></li>
                     <li><NavLink to = '/auth/sign-up' activeStyle={{color: 'red'}}>Sign Up</NavLink></li>
                 </ul>
+                {loading && <h2>Loader...</h2>}
                 <Route path='/auth/sign-in' render={() => <SignInForm onSubmit={this.onSignIn}/>} />
                 <Route path='/auth/sign-up' render={() => <SignUpForm onSubmit={this.onSignUp}/>} />
             </div>
@@ -29,4 +32,4 @@ class Auth extends Component {
 
 }
 
-export default connect(null, { signIn, signUp })(Auth)
+export default connect(loadingSelector, { signIn, signUp })(Auth)

admin-panel/src/components/routes/people/index.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import {connect} from 'react-redux'
+import {addPerson} from '../../../ducks/people'
+import PeopleForm from '../../people/PeopleForm'
+
+class People extends Component {
+  static propTypes = {
+
+  };
+
+  render() {
+    return (
+      <div>
+        <h3>Add person for the upcoming event here:</h3>
+        <PeopleForm onSubmit={this.onAddPerson}/>
+      </div>
+    )
+  }
+
+  onAddPerson = ({ firstName, lastName, email }) => this.props.addPerson(firstName, lastName, email)
+
+}
+
+export default connect(null, { addPerson })(People)

admin-panel/src/config.js

@@ -1,14 +1,14 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-04-12'
+export const appName = 'advreact-04-12-66c36'
 
 const config = {
-    apiKey: "AIzaSyCmDWlgYIhtEr1pWjgKYds3iXKWBl9wbjE",
+    apiKey: "AIzaSyDo7dedi23qFyb0vCT_KgYjhgzlf9itVxI",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: "",
-    messagingSenderId: "95255462276"
+    messagingSenderId: "590592894041"
 }
 
 firebase.initializeApp(config)

admin-panel/src/ducks/auth.js

@@ -45,6 +45,7 @@ export default function reducer(state = new ReducerRecord(), action) {
  * */
 
 export const userSelector = state => state[moduleName].user
+export const loadingSelector = state => ({loading: state[moduleName].loading})
 
 /**
  * Action Creators

admin-panel/src/ducks/people.js

@@ -0,0 +1,66 @@
+//import {all} from 'redux-saga/effects'
+import {appName} from '../config'
+import {Record, List} from 'immutable'
+import {reset} from 'redux-form'
+
+/**
+ * Constants
+ * */
+export const moduleName = 'people'
+const prefix = `${appName}/${moduleName}`
+
+export const ADD_PERSON = `${prefix}/ADD_PERSON`
+
+
+/**
+ * Reducer
+ * */
+export const PersonRecord = Record({
+  firstName: null,
+  lastName: null,
+  email: null,
+})
+
+export default function reducer(state = new List(), action) {
+  const { type, payload } = action
+
+  switch (type) {
+  case ADD_PERSON: {
+    const { firstName, lastName, email } = payload
+    return state.push(new PersonRecord({firstName, lastName, email}))
+  }
+
+
+  default:
+    return state
+  }
+}
+
+/**
+ * Selectors
+ * */
+
+/**
+ * Action Creators
+ * */
+
+export function addPerson(firstName, lastName, email) {
+  return (dispatch) => {
+    dispatch({
+      type: ADD_PERSON,
+      payload: {firstName, lastName, email}
+    })
+
+    dispatch(reset('people'))
+  }
+}
+
+/**
+ * Sagas
+ * */
+
+//export function* saga() {
+//   yield all([
+//
+//   ])
+//}

admin-panel/src/redux/index.js

@@ -1,11 +1,14 @@
-import {createStore, applyMiddleware} from 'redux'
+import {createStore, applyMiddleware, compose} from 'redux'
 import logger from 'redux-logger'
 import {routerMiddleware} from 'react-router-redux'
 import thunk from 'redux-thunk'
 import reducer from './reducer'
 import history from '../history'
 
-const store = createStore(reducer, applyMiddleware(thunk, routerMiddleware(history), logger))
+const store = createStore(reducer, compose(
+  applyMiddleware(thunk, routerMiddleware(history), logger),
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+))
 
 //dev only
 window.store = store

admin-panel/src/redux/reducer.js

@@ -2,8 +2,10 @@ import {combineReducers} from 'redux'
 import {routerReducer as router} from 'react-router-redux'
 import {reducer as form} from 'redux-form'
 import authReducer, {moduleName as authModule} from '../ducks/auth'
+import peopleReducer, {moduleName as peopleModule} from '../ducks/people'
 
 export default combineReducers({
     router, form,
-    [authModule]: authReducer
+    [authModule]: authReducer,
+    [peopleModule]: peopleReducer
 })