Ht2

admin-panel/package.json

@@ -19,7 +19,8 @@
     "redux-logger": "^3.0.6",
     "redux-saga": "^0.16.0",
     "redux-thunk": "^2.2.0",
-    "reselect": "^3.0.1"
+    "reselect": "^3.0.1",
+    "styled-components": "^2.2.4"
   },
   "scripts": {
     "start": "react-scripts start",

admin-panel/src/App.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import {Route} from 'react-router-dom'
+import Auth from './components/routes/auth'
+import Admin from './components/routes/Admin'
+import ProtectedRoute from './components/common/ProtectedRoute'
+
+class App extends Component {
+    static propTypes = {
+
+    };
+
+    render() {
+        return (
+            <div>
+                <h1>Hello world</h1>
+                <Route path='/auth' component={Auth}/>
+                <ProtectedRoute path='/admin' component={Admin}/>
+            </div>
+        )
+    }
+}
+
+export default App

admin-panel/src/components/App.js

@@ -1,29 +1,23 @@
-import React, { Component } from 'react'
+import React 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 = {
+const App = () =>
+  <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={EventsPage}/>
+      <Route path = '/auth' component = {AuthPage}/>
+  </div>
 
-    };
-
-    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}/>
-                <Route path = '/auth' component = {AuthPage}/>
-            </div>
-        )
-    }
-}
-
-export default App
+export default  App;

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

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default ({list}) =>
+      <div>
+        <h2>People</h2>
+        <div>
+          <div>Id. Email Имя Фамилия</div>
+          {list.map((p, idx) => (
+            <div key={p.id}>
+              {idx}. {p.email} {p.firstName} {p.lastName}
+            </div>
+          ))}
+        </div>
+      </div>

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

@@ -1,17 +1,6 @@
-import React, { Component } from 'react'
+import React from 'react'
 
-class Admin extends Component {
-    static propTypes = {
-
-    };
-
-    render() {
-        return (
-            <div>
-                <h2>Admin Page</h2>
-            </div>
-        )
-    }
-}
-
-export default Admin
+export default () =>
+  <div>
+    <h2>Admin Page</h2>
+  </div>

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

@@ -0,0 +1,44 @@
+import React from 'react'
+import {connect} from 'react-redux'
+import {saveEventsToDb, eventsSelector, loaderSelector} from '../../ducks/event'
+
+const EventsPage = ({saveEventsToDb,eventList, loading }) =>
+  <div>
+    <h2>Events Page</h2>
+    <button onClick={saveEventsToDb}>Upload Events</button>
+
+    <h2>Events List</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>month</th>
+          <th>submissionDeadline</th>
+          <th>title</th>
+          <th>url</th>
+          <th>when</th>
+          <th>where</th>
+        </tr>
+      </thead>
+      <tbody>
+
+          {!loading && eventList.map(value =>
+            value.map((prop,key) =>
+                <tr key={key}>
+                  <td>{prop.month}</td>
+                  <td>{prop.submissionDeadline}</td>
+                  <td>{prop.title}</td>
+                  <td>{prop.url}</td>
+                  <td>{prop.when}</td>
+                  <td>{prop.where}</td>
+                </tr>
+            )
+          )}
+          {loading && <tr><td><h1>Loading...</h1></td></tr>}
+          </tbody>
+        </table>
+      </div>
+
+export default connect(state => ({
+  eventList: eventsSelector(state),
+  loading:loaderSelector(state)
+}), {saveEventsToDb})(EventsPage)

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

@@ -1,21 +1,18 @@
-import React, { Component } from 'react'
+import React from 'react'
 import {connect} from 'react-redux'
-import {addPerson} from '../../ducks/people'
+import {addPerson, peopleSelector} from '../../ducks/people'
 import NewPersonForm from '../people/NewPersonForm'
+import PeopleList from '../people/PeopleList';
 
-class PersonPage extends Component {
-    static propTypes = {
+const PersonPage =
+  ({addPerson, peopleList}) =>
+    <div>
+        <h2>Add new person</h2>
+        <NewPersonForm onSubmit={addPerson}/>
+        <PeopleList list={peopleList}/>
+    </div>
 
-    };
 
-    render() {
-        return (
-            <div>
-                <h2>Add new person</h2>
-                <NewPersonForm onSubmit={this.props.addPerson}/>
-            </div>
-        )
-    }
-}
-
-export default connect(null, {addPerson})(PersonPage)
+export default connect(state => ({
+    peopleList: peopleSelector(state)
+}), {addPerson})(PersonPage)

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

@@ -1,7 +1,8 @@
 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, errorSelector, loadingSelector} from '../../../ducks/auth'
 import SignInForm from '../../auth/SignInForm'
 import SignUpForm from '../../auth/SignUpForm'
 
@@ -11,6 +12,7 @@ class Auth extends Component {
     };
 
     render() {
+        const {loading, error} = this.props;
         return (
             <div>
                 <h2>Auth page</h2>
@@ -20,6 +22,12 @@ class Auth extends Component {
                 </ul>
                 <Route path='/auth/sign-in' render={() => <SignInForm onSubmit={this.onSignIn}/>} />
                 <Route path='/auth/sign-up' render={() => <SignUpForm onSubmit={this.onSignUp}/>} />
+                {error !== null &&
+                    <h4 style={{color: 'red'}}>{error}</h4>
+                }
+                {loading &&
+                <div>Loading...</div>
+                }
             </div>
         )
     }
@@ -29,4 +37,7 @@ class Auth extends Component {
 
 }
 
-export default connect(null, { signIn, signUp })(Auth)
+export default connect(state => ({
+    error: errorSelector(state),
+    loading: loadingSelector(state)
+}), { signIn, signUp })(Auth)

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

@@ -0,0 +1,46 @@
+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 {
+  static propTypes = {
+
+  };
+
+  render() {
+    const {mode} =  this.props;
+    return (
+      <div>
+        <h3>{mode === 'add' ? 'Add user' : 'Edit User' }</h3>
+        <form onSubmit={this.props.handleSubmit}>
+          <div>
+            First name: <Field name='firstName' component='input'/>
+          </div>
+          <div>
+           Last name: <Field name='lastName' component='input'/>
+          </div>
+          <div>
+            email: <Field component={ErrorField} name='email'/>
+          </div>
+          <input type='submit' />
+        </form>
+
+      </div>
+    )
+  }
+}
+const validate = ({ email }) => {
+  const errors = {}
+
+  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: 'user',
+  validate
+})(UserForm)

admin-panel/src/config.js

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