Firebase events

package.json

@@ -4,9 +4,11 @@
   "private": true,
   "dependencies": {
     "firebase": "^4.8.2",
+    "lodash": "^4.17.4",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-helmet": "^5.2.0",
+    "react-modal": "^3.1.10",
     "react-redux": "^5.0.6",
     "react-redux-firebase": "^2.0.0",
     "react-router-dom": "^4.2.2",

src/ActionsTYPES/TYPES.js

@@ -3,3 +3,5 @@ export const RUN_THE_APP = 'RUN_THE_APP';
 export const GET_ALL_GROUPS_PENDING = 'GET_ALL_GROUPS_PENDING';
 export const GET_ALL_GROUPS_SUCCESS = 'GET_ALL_GROUPS_SUCCESS';
 export const GET_ALL_GROUPS_REJECTED = 'GET_ALL_GROUPS_REJECTED';
+export const SAVE_POST = 'SAVE_POST';
+export const FETCH_POSTS = 'FETCH_POSTS';

src/App.js

@@ -13,7 +13,7 @@ class App extends Component {
                 <meta charSet="utf-8" />
                 <title>MASA REVIEW APPLICATION</title>
                 <link rel="canonical" href="https://stark-atoll-57647.herokuapp.com/" />
-            </Helmet>
+          </Helmet>
         <nav>
           <ul>
             <li><NavLink to="/" activeClassName="selected">Home</NavLink></li>

src/actions/events.js

@@ -0,0 +1,25 @@
+import { SAVE_POST, FETCH_POSTS } from '../ActionsTYPES/TYPES'
+
+
+export const savePost = (post) =>
+    (dispatch, getState, getFirebase) => {
+        const firebase = getFirebase()
+        firebase.database().ref(`groups/${post.groupTitle}/posts/${post.postIndex}`)
+            .set(post)
+            .then(() => {
+                dispatch({ type: SAVE_POST, payload: 'Success' })
+            })
+            .catch((err) => {
+                dispatch({ type: SAVE_POST, payload: err })
+            })
+    }
+
+export const fetchPosts = () => (dispatch, getState, getFirebase) => {
+    const firebase = getFirebase()
+    const posts = firebase.database().ref('groups/')
+
+    posts.on('value', function (snapshot) {
+        console.log(snapshot.val())
+        dispatch({ type: FETCH_POSTS, payload: snapshot.val() || [] })
+    });
+};

src/actions/globalActions.js

@@ -7,6 +7,7 @@ export function runTheApp() {
 	}
 }
 
+
 export default {
 	runTheApp
 }

src/components/GroupPage/GroupPage.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import CreatePostModal from './components/CreatePostModal';
+
+class GroupPage extends Component {
+
+
+    render() {
+        return (
+            <CreatePostModal />
+        );
+    }
+}
+
+export default GroupPage;

src/components/GroupPage/components/CreatePostModal.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { withRouter } from 'react-router'
+import { savePost } from '../../../actions/events';
+import ReactModal from 'react-modal';
+
+ReactModal.setAppElement('#root');
+
+class CreatePostModal extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            showModal: false,
+            postContext: ''
+        };
+
+        this.handleOpenModal = this.handleOpenModal.bind(this);
+        this.handleCloseModal = this.handleCloseModal.bind(this);
+    }
+
+    handleOpenModal() {
+        this.setState({ showModal: true });
+    }
+
+    handleCloseModal() {
+        const { postContext } = this.state;
+        const { groups } = this.props;
+        const { groupTitle } = this.props.match.params;
+
+        this.setState({ showModal: false });
+        this.props.savePost({text: postContext, groupTitle, postIndex: groups[groupTitle].posts.length} )
+    }
+
+
+    render() {
+        return (
+            <div>
+                <button onClick={this.handleOpenModal}>Создать пост</button>
+                <ReactModal
+                    isOpen={this.state.showModal}
+                    contentLabel="Create Post Modal"
+                    style={{
+                        content: {
+                                background: 'rgba(255, 255, 255, 0.3)'
+                            }
+                        }}>   
+                        <textarea style={{width:'80%', height: '80%'}} 
+                                  type="text"
+                                  //value={this.state.postContext}
+                                  onChange={(elem)=>this.setState({postContext: elem.target.value})}>
+                        </textarea>
+                        <div>
+                            <button onClick={this.handleCloseModal}>Опубликовать</button>
+                        </div>
+                </ReactModal>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    return {
+        groups: state.postsReducer
+    }
+}
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        savePost: bindActionCreators(savePost, dispatch),
+    }
+}
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(CreatePostModal));

src/components/Home/Home.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { getAllGroups } from '../../actions/senders';
 import Group from './components/group';
-import group from './components/group';
+import _ from 'lodash'
 
 class Home extends Component {
   constructor(){
@@ -15,18 +15,24 @@ class Home extends Component {
   }
 
   render(){
-    console.log('[Home Component][render]');
-    const groups = this.props.groupStatus && this.props.groupStatus.groups  ? this.props.groupStatus.groups.map(item => (
-      <Group 
-        key={item.nameUS}
-        title={item.nameUS}
-      />
-    )
-  ) : [];
+    console.log(this.props.groupStatus);
+    var groups = [];
+    if(this.props.groupStatus && this.props.groupStatus.groups) {   
+      _.mapValues(this.props.groupStatus.groups, (item) => {
+
+        groups.push(
+          <Group 
+            key={item.index}
+            title={item.nameUS}
+            index={item.index}
+          />
+        )
+       })
+    }
     return(
-      <div>
+      <div style={{padding: '20px'}}>
         <div>
-            {this.props.groupStatus.pending ? 'Loading' : groups }
+            {this.props.groupStatus.pending && !groups ? 'Loading' : groups }
         </div>
       </div>
     );

src/reducers/postsReducer.js

@@ -0,0 +1,23 @@
+import {
+    FETCH_POSTS
+} from '../ActionsTYPES/TYPES';
+
+const initialState = {}
+
+
+function postsReducer(state = initialState, action) {
+    switch (action.type) {
+        case FETCH_POSTS: {
+            return action.payload
+        }
+
+        default: {
+            return state;
+        }
+
+    }
+
+
+}
+
+export default postsReducer;

src/reducers/rootReducer.js

@@ -4,10 +4,12 @@ import { firebaseReducer } from 'react-redux-firebase'
 // @REDUCERS
 import testReducer from './testReducer';
 import groupReducer from './groupReducer';
+import postsReducer from './postsReducer';
 // @ROOT REDUCER
 const rootRecuer =  combineReducers({
   testReducer: testReducer,
   groupReducer: groupReducer,
+  postsReducer: postsReducer,
   firebase: firebaseReducer
 });
 

src/routs.js

@@ -1,15 +1,16 @@
 import React from 'react';
 
-import { Route, Switch,} from 'react-router-dom';
+import { Route, Switch, } from 'react-router-dom';
 
 import Chat from './components/Chat/Chat';
 import Programs from './components/Programs/Programs';
 import Home from './components/Home/Home';
+import GroupPage from './components/GroupPage/GroupPage';
 
 const Routs = () => (
     <Switch>
       <Route exact path='/' component={Home} />
-      <Route exact path='/:groupName' component={Programs} />
+      <Route exact path='/:groupTitle' component={GroupPage} />
       <Route path='/programs' component={Programs} />
       <Route path='/chat' component={Chat} />
     </Switch>

src/store/store.js

@@ -1,21 +1,21 @@
 import { createStore, applyMiddleware, compose } from 'redux';
 import rootReducer from '../reducers/rootReducer';
-import firebase from 'firebase';
+import firebase, { storage } from 'firebase';
 import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
 
 // REMOTE REDUCERS
 import { createLogger } from 'redux-logger'
 import thunk from 'redux-thunk';
 import  { runTheApp } from '../actions/globalActions';
- 
+import  { fetchPosts } from '../actions/events' ;
 const fbConfig = {
-	apiKey: "AIzaSyBxeJ64H8GH4NXT_fy5S0ATdG9w4fAKfmk",
-	authDomain: "masa-wall.firebaseapp.com",
-	databaseURL: "https://masa-wall.firebaseio.com",
-	projectId: "masa-wall",
-	storageBucket: "masa-wall.appspot.com",
-	messagingSenderId: "1008969413809"
-	}
+	apiKey: "AIzaSyC29RdE1-GOOrw_db5EhI0bn4hrWhR3Z1s",
+	authDomain: "masa-projects-posts.firebaseapp.com",
+	databaseURL: "https://masa-projects-posts.firebaseio.com",
+	projectId: "masa-projects-posts",
+	storageBucket: "masa-projects-posts.appspot.com",
+	messagingSenderId: "457533567638"
+}
 
 const config = {
 	userProfile: 'users', // firebase root where user profiles are stored
@@ -45,5 +45,6 @@ const store = createStore(
 
 
 store.dispatch(runTheApp())
+store.dispatch(fetchPosts())
 
 export default store;