Ht2

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.idea

admin-panel/README.md

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

admin-panel/package.json

@@ -8,6 +8,7 @@
     "history": "^4.7.2",
     "immutable": "^3.8.2",
     "logger": "^0.0.1",
+    "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",
@@ -17,6 +18,7 @@
     "redux": "^3.7.2",
     "redux-form": "^7.2.0",
     "redux-logger": "^3.0.6",
+    "redux-saga": "^0.16.0",
     "redux-thunk": "^2.2.0",
     "reselect": "^3.0.1"
   },

admin-panel/src/Root.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import {ConnectedRouter as Router} from 'react-router-redux'
 import {Provider} from 'react-redux'
-import App from './App'
+import App from './components/App'
 import store from './redux'
 import history from './history'
 

admin-panel/src/components/App.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import {Route, NavLink} from 'react-router-dom'
+import AuthPage from './routes/auth'
+import AdminPage from './routes/Admin'
+import ProtectedRoute from './common/ProtectedRoute'
+import PersonPage from './routes/PersonPage'
+import EventPage from './routes/EventPage'
+
+class App extends Component {
+    static propTypes = {
+
+    };
+
+    render() {
+        return (
+            <div>
+                <h1>Hello world</h1>
+                <ul>
+                    <li><NavLink to='/admin' activeStyle = {{color: 'red'}}>admin</NavLink></li>
+                    <li><NavLink to='/people' activeStyle = {{color: 'red'}}>people</NavLink></li>
+                    <li><NavLink to='/events' activeStyle = {{color: 'red'}}>events</NavLink></li>
+                </ul>
+                <ProtectedRoute path = '/admin' component = {AdminPage}/>
+                <ProtectedRoute path="/people" component={PersonPage}/>
+                <ProtectedRoute path="/events" component={EventPage}/>
+                <Route path = '/auth' component = {AuthPage}/>
+            </div>
+        )
+    }
+}
+
+export default App

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

@@ -1,30 +1,35 @@
 import React, { Component } from 'react'
+import {connect} from 'react-redux'
 import {reduxForm, Field} from 'redux-form'
+import ErrorField from '../common/ErrorField'
+import Loader from '../common/Loader'
+import {loadingSelector, errorSelector} from '../../ducks/auth'
 
 class SignInForm extends Component {
     static propTypes = {
 
     };
 
     render() {
+        const {loading, authError} = this.props
         return (
             <div>
                 <h3>Sign In</h3>
                 <form onSubmit={this.props.handleSubmit}>
-                    <div>
-                        email: <Field name='email' component='input'/>
-                    </div>
-                    <div>
-                        password: <Field name='password' component='input' type='password'/>
-                    </div>
+                    <Field name='email' component={ErrorField}/>
+                    <Field name='password' component={ErrorField} type='password'/>
+                    {authError && <h2 style={{color: 'red'}}>{authError}</h2>}
+                    {loading && <Loader />}
                     <input type='submit' />
                 </form>
-
             </div>
         )
     }
 }
 
-export default reduxForm({
+export default connect(state => ({
+        loading: loadingSelector(state),
+        authError: errorSelector(state)
+}))(reduxForm({
     form: 'auth'
-})(SignInForm)
+})(SignInForm))

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

@@ -1,24 +1,26 @@
 import React, { Component } from 'react'
+import {connect} from 'react-redux'
 import {reduxForm, Field} from 'redux-form'
 import validator from 'email-validator'
 import ErrorField from '../common/ErrorField'
+import Loader from '../common/Loader'
+import {loadingSelector, errorSelector} from '../../ducks/auth'
 
 class SignUpForm extends Component {
     static propTypes = {
 
     };
 
     render() {
+        const {loading, authError} = this.props
         return (
             <div>
                 <h3>Sign In</h3>
                 <form onSubmit={this.props.handleSubmit}>
-                    <div>
-                        email: <Field name='email' component={ErrorField}/>
-                    </div>
-                    <div>
-                        password: <Field name='password' component={ErrorField} type='password'/>
-                    </div>
+                    <Field name='email' component={ErrorField}/>
+                    <Field name='password' component={ErrorField} type='password'/>
+                    {authError && <h2 style={{color: 'red'}}>{authError}</h2>}
+                    {loading && <Loader />}
                     <input type='submit' />
                 </form>
 
@@ -39,7 +41,10 @@ const validate = ({ email, password }) => {
     return errors
 }
 
-export default reduxForm({
+export default connect(state => ({
+    loading: loadingSelector(state),
+    authError: errorSelector(state)
+}))(reduxForm({
     form: 'auth',
     validate
-})(SignUpForm)
+})(SignUpForm))

admin-panel/src/components/common/ErrorField.js

@@ -1,20 +1,15 @@
-import React, { Component } from 'react'
-
-class ErrorField extends Component {
-    static propTypes = {
-
-    };
-
-    render() {
-        const {input, meta: { error, touched }, type} = this.props
-        const errorMessage = error && touched && <h4 style={{color: 'red'}}>{error}</h4>
-        return (
-            <div>
-                <input {...input} type={type} />
-                {errorMessage}
-            </div>
-        )
-    }
+import React from 'react'
+
+function ErrorField(props) {
+    const {label, input, type, meta: {error, touched}} = props
+    const errorText = touched && error && <div style={{color: 'red'}}>{error}</div>
+    return (
+        <div>
+            <label>{label || input.name}</label>
+            <input {...input} type={type}/>
+            {errorText}
+        </div>
+    )
 }
 
 export default ErrorField

admin-panel/src/components/common/Loader.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+function Loader() {
+    return (
+        <h2>Loading...</h2>
+    )
+}
+
+Loader.propTypes = {
+}
+
+export default Loader

admin-panel/src/components/events/EventList.js

@@ -0,0 +1,42 @@
+import React, {Component} from 'react'
+
+class EventList extends Component {
+    static propTypes = {
+
+    };
+
+    render() {
+        const {events} = this.props
+
+        return (
+            <table>
+                <thead>
+                <tr>
+                    <th>Month</th>
+                    <th>Deadline</th>
+                    <th>Title</th>
+                    <th>URL</th>
+                    <th>When</th>
+                    <th>Where</th>
+                </tr>
+                </thead>
+                <tbody>
+                {
+                    events.map(event =>
+                        <tr key={event.id}>
+                            <td>{event.month}</td>
+                            <td>{event.submissionDeadline}</td>
+                            <td>{event.title}</td>
+                            <td>{event.url}</td>
+                            <td>{event.when}</td>
+                            <td>{event.where}</td>
+                        </tr>
+                    )
+                }
+                </tbody>
+            </table>
+        )
+    }
+}
+
+export default EventList

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

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import {reduxForm, Field} from 'redux-form'
+import validateEmail from 'email-validator'
+import ErrorField from '../common/ErrorField'
+
+class NewPersonForm extends Component {
+    static propTypes = {
+
+    };
+
+    componentWillReceiveProps = (nextProps) => {
+        const {submitSucceeded, reset} = this.props;
+
+        if (nextProps.submitSucceeded === true && nextProps.submitSucceeded !== submitSucceeded) {
+            reset('person');
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <form onSubmit={this.props.handleSubmit}>
+                    <Field name="firstName" label="first name" component={ErrorField}/>
+                    <Field name="lastName" label="last name" component={ErrorField}/>
+                    <Field name="email" label="email" component={ErrorField}/>
+                    <div>
+                        <input type="submit" />
+                    </div>
+                </form>
+            </div>
+        )
+    }
+}
+
+function validate({firstName, email}) {
+    const errors = {}
+    if (!firstName) errors.firstName = 'first name is required'
+
+    if (!email) errors.email = 'email is required'
+    else if (!validateEmail.validate(email)) errors.email = 'email is invalid'
+
+    return errors
+}
+
+export default reduxForm({
+    form: 'person',
+    validate
+})(NewPersonForm)

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

@@ -0,0 +1,22 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+class PersonItem extends Component {
+    static propTypes = {
+        person: PropTypes.object.isRequired
+    };
+
+    render() {
+        const {person} = this.props
+
+        return (
+            <div>
+                <div>Email: {person.email}</div>
+                <div>First name: {person.firstName}</div>
+                <div>Last name: {person.lastName}</div>
+            </div>
+        )
+    }
+}
+
+export default PersonItem