HW 1

.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/.gitignore

@@ -20,4 +20,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.idea
+.idea
+./src/config.js

admin-panel/README.md

@@ -1,3 +1,12 @@
 ##HT1.1 Завести собственный проект на firebase, работать с ним
 ##HT1.2 Сделать форму для добавлегния людей(firstName, lastName, email)
-##HT1.3 Показывать лоадер и ошибки в форме аутентификации
+##HT1.3 Показывать лоадер и ошибки в форме аутентификации
+
+##HT2.1 Написать тесты на auth
+##HT2.2 Чистить форму people после успешного добавления в стор
+##HT2.3 Отображать список людей
+##HT2.4 Загружать и отображать список ивентов
+
+##HT3.1 Добавлять людей в firebase
+##HT3.2 Реализовать lazy-loading ивентов(InfiniteLoader), ref.orderByKey().startAt(...).limitToFirst(10)
+##HT3.3 Тесты на Virtualized Events

admin-panel/package.json

@@ -14,9 +14,11 @@
     "react-router-dom": "^4.2.2",
     "react-router-redux": "^5.0.0-alpha.8",
     "react-scripts": "1.0.17",
+    "react-virtualized": "^9.13.0",
     "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"
   },
@@ -25,5 +27,9 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "enzyme": "^3.2.0",
+    "enzyme-adapter-react-16": "^1.1.0"
   }
 }

admin-panel/src/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import {Route} from 'react-router-dom'
 import Auth from './components/routes/auth'
 import Admin from './components/routes/Admin'
+import Users from './components/routes/Users'
 import ProtectedRoute from './components/common/ProtectedRoute'
 
 class App extends Component {
@@ -15,6 +16,7 @@ class App extends Component {
                 <h1>Hello world</h1>
                 <Route path='/auth' component={Auth}/>
                 <ProtectedRoute path='/admin' component={Admin}/>
+                <ProtectedRoute path='/users' component={Users}/>
             </div>
         )
     }

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,31 @@
+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 EventsPage from './routes/EventsPage'
+
+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>
+                </ul>
+                <ProtectedRoute path = '/admin' component = {AdminPage}/>
+                <ProtectedRoute path = '/people' component={PersonPage}/>
+                <ProtectedRoute path = '/events' component={EventsPage}/>
+                <Route path = '/auth' component = {AuthPage}/>
+            </div>
+        )
+    }
+}
+
+export default App

admin-panel/src/components/Users/UserForm.js

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

admin-panel/src/components/Users/index.js

@@ -0,0 +1,44 @@
+import React, {Component} from 'react'
+import UserForm from './UserForm'
+import {connect} from 'react-redux'
+import {usersSelector, usersLoadingSelector} from '../../ducks/users'
+
+class Users extends Component {
+    render() {
+        return (
+            <div>
+                <h2>Users page</h2>
+                {
+                    this.renderUserList()
+                }
+                <UserForm onSubmit = {this.props.onSubmit} />
+            </div>
+        )
+    }
+    renderUserList = () => {
+        let {users, isLoading} = this.props;
+        if (isLoading) return <div>Uploading new user...</div>
+        return (
+            users.length ?
+            <ul>
+                {
+                    users.map(u=>(
+                        <li key = {u.id}>
+                            <p>First Name: {u.firstName}</p>
+                            <p>Last Name: {u.lastName}</p>
+                            <p>email: {u.email}</p>
+                        </li>
+                    ))
+                }
+            </ul> :
+            <h3>no user</h3>
+        )
+    }
+}
+
+export default connect(
+    state => ({
+        users : usersSelector(state),
+        isLoading : usersLoadingSelector(state),
+    })
+)(Users)

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