Ht3

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",

admin-panel/src/components/App.js

@@ -18,6 +18,7 @@ class App extends Component {
                 <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}/>

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

@@ -0,0 +1,72 @@
+import React, {Component} from 'react'
+import firebase from 'firebase/index'
+
+class EventList extends Component {
+    static propTypes = {
+
+    };
+
+    state = {
+        events: null
+    }
+
+    componentDidMount = () => {
+        const eventsRef = firebase.database().ref('events/');
+
+        eventsRef.on('value', (snapshot) => {
+            let events = []
+
+            snapshot.forEach((childSnapshot) => {
+                events.push({
+                    id: childSnapshot.key,
+                    ...childSnapshot.val()
+                })
+            });
+
+            this.setState({events: events});
+        });
+    }
+
+    getEventList = (events) => {
+        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>
+        )
+    }
+
+    render() {
+        const {events} = this.state
+
+        return (
+            <div>
+                {!events ? <p>List is empty</p> : this.getEventList(events)}
+            </div>
+        )
+    }
+}
+
+export default EventList

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

@@ -0,0 +1,78 @@
+import React, {Component} from 'react'
+import {connect} from 'react-redux'
+import {
+    fetchLimitEvents,
+    selectEvent,
+    fetchAllEvents,
+    eventLimitListSelector,
+    eventListSelector
+} from '../../ducks/events'
+import {InfiniteLoader, List} from 'react-virtualized'
+import 'react-virtualized/styles.css'
+
+export class EventsInfiniteLoaderVirtualized extends Component {
+    static propTypes = {};
+
+    componentDidMount() {
+        this.props.fetchAllEvents()
+        this.loadMoreRows({startIndex: 0, stopIndex: 10})
+    }
+
+    loadMoreRows = ({startIndex, stopIndex}) => {
+        this.props.fetchLimitEvents(startIndex, stopIndex)
+    }
+
+    isRowLoaded = ({index}) => {
+        return !!this.props.events[index];
+    }
+
+    rowRenderer = ({key, index, style}) => {
+        const {events} = this.props
+
+        return (
+            <div
+                key={key}
+                style={style}
+            >
+                {events[index] && this.getRow(events[index])}
+            </div>
+        )
+    }
+
+    getRow = (event) => (
+        <div key={event.uid} className="test__event_div_row">
+            <span>{event.title}</span>
+            <span>{event.when}</span>
+            <span>{event.where}</span>
+        </div>
+    )
+
+    render() {
+        const {eventsTotal, loading} = this.props
+
+        return (
+            <InfiniteLoader
+                isRowLoaded={this.isRowLoaded}
+                loadMoreRows={this.loadMoreRows}
+                rowCount={eventsTotal}
+            >
+                {({onRowsRendered, registerChild}) => (
+                    <List
+                        height={200}
+                        onRowsRendered={onRowsRendered}
+                        ref={registerChild}
+                        rowCount={eventsTotal}
+                        rowHeight={20}
+                        rowRenderer={this.rowRenderer}
+                        width={600}
+                    />
+                )}
+            </InfiniteLoader>
+        )
+    }
+}
+
+export default connect((state) => ({
+    events: eventLimitListSelector(state),
+    eventsTotal: eventListSelector(state).length,
+}), {fetchLimitEvents, selectEvent, fetchAllEvents})(EventsInfiniteLoaderVirtualized)

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

@@ -16,6 +16,7 @@ export class EventsTableVirtualized extends Component {
 
     render() {
         if (this.props.loading) return <Loader />
+
         return (
             <Table
                 height={500}

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

@@ -2,21 +2,27 @@ import React, { Component } from 'react'
 import {reduxForm, Field} from 'redux-form'
 import validateEmail from 'email-validator'
 import ErrorField from '../common/ErrorField'
+import Loader from '../common/Loader'
 
 class NewPersonForm extends Component {
     static propTypes = {
 
     };
 
     render() {
+        const {submitting, submitSuccess, submitError, handleSubmit} = this.props
+
         return (
             <div>
-                <form onSubmit={this.props.handleSubmit}>
+                <form onSubmit={handleSubmit}>
                     <Field name="firstName" label="first name" component={ErrorField}/>
                     <Field name="lastName" label="last name" component={ErrorField}/>
                     <Field name="email" label="email" component={ErrorField}/>
+                    {submitting && <Loader/>}
+                    {submitSuccess && <p style={{color: 'green'}}>Person was added successfully</p>}
+                    {submitError && <p style={{color: 'red'}}>{submitError}</p>}
                     <div>
-                        <input type="submit" />
+                        <input type="submit" disabled={submitting} />
                     </div>
                 </form>
             </div>

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

@@ -1,18 +1,27 @@
 import React, { Component } from 'react'
 import {connect} from 'react-redux'
-import {peopleListSelector} from '../../ducks/people'
+import {peopleListSelector, fetchAllPeople, loadingSelector} from '../../ducks/people'
 import {List} from 'react-virtualized'
+import Loader from '../common/Loader'
 import 'react-virtualized/styles.css'
 
 class PeopleList extends Component {
     static propTypes = {
 
     };
 
+    componentDidMount() {
+        this.props.fetchAllPeople()
+    }
+
     render() {
+        const {people, loading} = this.props
+
+        if (loading) return <Loader />
+
         return <List
             rowRenderer={this.rowRenderer}
-            rowCount={this.props.people.length}
+            rowCount={people.length}
             rowHeight={100}
             height={400}
             width={400}
@@ -40,5 +49,6 @@ class PeopleList extends Component {
 }
 
 export default connect((state) => ({
-    people: peopleListSelector(state)
-}))(PeopleList)
+    people: peopleListSelector(state),
+    loading: loadingSelector(state),
+}), {fetchAllPeople})(PeopleList)

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

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import EventsTableVirtualized from '../events/EventsTableVirtualized'
+import EventsInfiniteLoaderVirtualized from '../events/EventsInfiniteLoaderVirtualized'
 
 class EventsPage extends Component {
     static propTypes = {
@@ -9,7 +10,7 @@ class EventsPage extends Component {
     render() {
         return (
             <div>
-                <EventsTableVirtualized />
+                <EventsInfiniteLoaderVirtualized />
             </div>
         )
     }

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

@@ -1,24 +1,30 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {Route, NavLink} from 'react-router-dom'
 import {connect} from 'react-redux'
+
 import {signIn, signUp} from '../../../ducks/auth'
+import {errorSelector, loadingSelector} from '../../../ducks/auth'
 import SignInForm from '../../auth/SignInForm'
 import SignUpForm from '../../auth/SignUpForm'
 
 class Auth extends Component {
     static propTypes = {
-
+        authError: PropTypes.object,
+        authLoading: PropTypes.bool.isRequired
     };
 
     render() {
+        const {authLoading, authError} = 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>
-                <Route path='/auth/sign-in' render={() => <SignInForm onSubmit={this.onSignIn}/>} />
+                <Route path='/auth/sign-in' render={() => <SignInForm onSubmit={this.onSignIn} authError={authError} authLoading={authLoading} />} />
                 <Route path='/auth/sign-up' render={() => <SignUpForm onSubmit={this.onSignUp}/>} />
             </div>
         )
@@ -29,4 +35,7 @@ class Auth extends Component {
 
 }
 
-export default connect(null, { signIn, signUp })(Auth)
+export default connect(state => ({
+    authError: errorSelector(state),
+    authLoading: loadingSelector(state)
+}), { signIn, signUp })(Auth)

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

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {reduxForm, Field} from 'redux-form';
+import validator from 'email-validator';
+
+import ErrorField from '../common/ErrorField';
+
+class NewUserForm extends Component {
+    static propTypes = {
+        handleSubmit: PropTypes.func.isRequired
+    };
+
+    render() {
+        return (
+            <div>
+                <h3>Add user</h3>
+                <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} type='email' />
+                    </div>
+                    <input type='submit' />
+                </form>
+
+            </div>
+        )
+    }
+}
+
+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: 'new-user',
+    validate
+})(NewUserForm)

admin-panel/src/config.js

@@ -1,14 +1,14 @@
-import firebase from 'firebase'
+import firebase from 'firebase';
 
-export const appName = 'advreact-04-12'
+export const appName = 'adv-react-8c4fb';
 
 const config = {
-    apiKey: "AIzaSyCmDWlgYIhtEr1pWjgKYds3iXKWBl9wbjE",
+    apiKey: "AIzaSyCPlodrXJgpCXqDWklsFc_V5vHGiD6G2Uc",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
-    projectId: appName,
-    storageBucket: "",
-    messagingSenderId: "95255462276"
-}
+    projectId: {appName},
+    storageBucket: "adv-react-8c4fb.appspot.com",
+    messagingSenderId: "47356959167"
+};
 
-firebase.initializeApp(config)
+firebase.initializeApp(config);