Group Contact Information Frontend #85

cse442-fall-2019-offering · Nov 7, 2019 · c940238 · c940238
1 parent 80ae512
commit c940238
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 4 deletions.
diff --git a/frontend/app/components/Navbar/Navbar.js b/frontend/app/components/Navbar/Navbar.js
@@ -38,10 +38,10 @@ class Navbar extends Component {
           <div className={classes.navbar_buttons}>
             <ul>
               <li>
-                <a href="/groups">Home</a>
+                <a href="/">Home</a>
               </li>
               <li>
-                <a href="/groups">Dashboard</a>
+                <a href="/">Dashboard</a>
               </li>
               <li>
                 <a href="/groups">Groups</a>

diff --git a/frontend/app/containers/App/index.js b/frontend/app/containers/App/index.js
@@ -59,6 +59,7 @@ class App extends Component {
     return (
       <div>
         <Switch>
+          <Route exact path="/" component={withRouter(Dashboard)} />
           <Route exact path="/groups" component={withRouter(Dashboard)} />
           <Route exact path="/groups/new" component={GroupCreation} />
           <Route exact path="/groups/:groupId" component={withRouter(Group)} />

diff --git a/frontend/app/containers/Pages/Group/Group.js b/frontend/app/containers/Pages/Group/Group.js
@@ -2,9 +2,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
+import Popup from 'reactjs-popup';
 
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
+import ChatIcon from '@material-ui/icons/Chat';
 import CloseIcon from '@material-ui/icons/Close';
 import EditIcon from '@material-ui/icons/Edit';
 import Grid from '@material-ui/core/Grid';
@@ -37,7 +39,8 @@ function containsObject(obj, list) {
 class Group extends Component {
   state = {
     name: '',
-    description: '',
+    description: '<p></p>',
+    contact: '<p></p>',
     languages: [],
     members: [],
     changed: [],
@@ -63,6 +66,7 @@ class Group extends Component {
       return {
         name: props.group.name,
         description: props.group.description,
+        contact: props.group.contact,
         languages: props.group.languages,
         members: props.group.members,
         member: props.group.member,
@@ -96,6 +100,7 @@ class Group extends Component {
       groupId: this.props.match.params.groupId,
       name: this.state.name,
       description: this.state.description,
+      contact: this.state.contact,
       languages: this.state.languages,
     };
     onUpdateGroup(payload);
@@ -124,6 +129,16 @@ class Group extends Component {
       }));
   };
 
+  handleContactChange = contact => {
+    this.setState({
+      contact,
+    });
+    if (!containsObject('contact', this.state.changed))
+      this.setState(previousState => ({
+        changed: [...previousState.changed, 'contact'],
+      }));
+  };
+
   handleLanguagesChange = languages => {
     this.setState({
       languages,
@@ -200,6 +215,22 @@ class Group extends Component {
                 <IconButton className={classes.close} onClick={this.editGroup}>
                   <CloseIcon />
                 </IconButton>
+                <Popup
+                  trigger={
+                    <IconButton className={classes.contactEdit}>
+                      <ChatIcon />
+                    </IconButton>
+                  }
+                  modal
+                  closeOnDocumentClick
+                >
+                  <ReactMediumEditor
+                    className={classes.contactPopup}
+                    text={this.state.contact}
+                    onChange={this.handleContactChange}
+                    placeholder="Group Contact"
+                  />
+                </Popup>
               </Grid>
             </Grid>
           </div>
@@ -245,6 +276,21 @@ class Group extends Component {
               <IconButton className={classes.edit} onClick={this.editGroup}>
                 <EditIcon />
               </IconButton>
+              <Popup
+                trigger={
+                  <IconButton className={classes.contact}>
+                    <ChatIcon />
+                  </IconButton>
+                }
+                modal
+                closeOnDocumentClick
+              >
+                <div
+                  className={classes.contactPopup}
+                  // eslint-disable-next-line react/no-danger
+                  dangerouslySetInnerHTML={{ __html: this.state.contact }}
+                />
+              </Popup>
             </Grid>
           </Grid>
         </div>

diff --git a/frontend/app/containers/Pages/Group/group-jss.js b/frontend/app/containers/Pages/Group/group-jss.js
@@ -72,6 +72,32 @@ const styles = theme => ({
     fontSize: '20px',
   },
 
+  contact: {
+    position: 'relative',
+    bottom: 1320,
+    left: 740,
+    width: 50,
+    height: 50,
+    zIndex: 5,
+  },
+
+  contactEdit: {
+    position: 'relative',
+    bottom: 1350,
+    left: 740,
+    width: 50,
+    height: 50,
+    zIndex: 5,
+  },
+
+  contactPopup: {
+    width: 780,
+    height: 400,
+    paddingTop: 20,
+    paddingLeft: 40,
+    overflow: 'auto',
+  },
+
   submitButton: {
     position: 'relative',
     bottom: 1430,

diff --git a/frontend/app/containers/Pages/GroupCreation/GroupCreation.js b/frontend/app/containers/Pages/GroupCreation/GroupCreation.js
@@ -1,22 +1,26 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import Popup from 'reactjs-popup';
 
 import Button from '@material-ui/core/Button';
+import { TextField } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import ChatIcon from '@material-ui/icons/Chat';
 import Grid from '@material-ui/core/Grid';
 import { withStyles } from '@material-ui/core/styles';
 
 import { createGroup } from 'my-actions/groupActions';
 import ReactMediumEditor from 'my-components/Editor/ReactMediumEditor';
 import LangMenu from 'my-components/LangMenu/LangMenu';
 import Navbar from 'my-components/Navbar/Navbar';
-import { TextField } from '@material-ui/core';
 import styles from './groupCreation-jss';
 
 class GroupCreation extends Component {
   state = {
     name: '',
     description: '<p></p>',
+    contact: '<p></p>',
     languages: [],
     created: false,
   };
@@ -33,6 +37,12 @@ class GroupCreation extends Component {
     });
   };
 
+  handleContactChange = contact => {
+    this.setState({
+      contact,
+    });
+  };
+
   handleLanguagesChange = languages => {
     this.setState({
       languages,
@@ -44,6 +54,7 @@ class GroupCreation extends Component {
     const payload = {
       name: this.state.name,
       description: this.state.description,
+      contact: this.state.contact,
       languages: this.state.languages,
     };
     onCreateGroup(payload);
@@ -90,6 +101,22 @@ class GroupCreation extends Component {
                 Submit
               </Button>
             </div>
+            <Popup
+              trigger={
+                <IconButton className={classes.contactEdit}>
+                  <ChatIcon />
+                </IconButton>
+              }
+              modal
+              closeOnDocumentClick
+            >
+              <ReactMediumEditor
+                className={classes.contactPopup}
+                text={this.state.contact}
+                onChange={this.handleContactChange}
+                placeholder="Group Contact"
+              />
+            </Popup>
           </Grid>
         </Grid>
       </div>

diff --git a/frontend/app/containers/Pages/GroupCreation/groupCreation-jss.js b/frontend/app/containers/Pages/GroupCreation/groupCreation-jss.js
@@ -33,6 +33,23 @@ const styles = theme => ({
     boxShadow: '0px 4px 10px rgba(51, 50, 50, 0.15)',
   },
 
+  contactEdit: {
+    position: 'relative',
+    bottom: 830,
+    left: 790,
+    width: 50,
+    height: 50,
+    zIndex: 5,
+  },
+
+  contactPopup: {
+    width: 780,
+    height: 400,
+    paddingTop: 20,
+    paddingLeft: 40,
+    overflow: 'auto',
+  },
+
   languages: {
     position: 'relative',
     bottom: 180,

diff --git a/frontend/app/store/reducers/groupReducer.js b/frontend/app/store/reducers/groupReducer.js
@@ -15,6 +15,7 @@ export const initialState = {
     name: '',
     description: '',
     languages: [],
+    contact: '',
     members: [],
     member: false,
     error: false,

diff --git a/frontend/app/store/sagas/groupSaga.js b/frontend/app/store/sagas/groupSaga.js
@@ -34,6 +34,7 @@ export function* createGroupSaga(action) {
     name: payload.name,
     description: payload.description,
     languages: payload.languages,
+    contact: payload.contact,
   });
   if (groupResponse.status === 200) {
     yield put(push(`${groupResponse.data.identity}`));
@@ -55,6 +56,7 @@ export function* updateGroupSaga(action) {
     name: payload.name,
     description: payload.description,
     languages: payload.languages,
+    contact: payload.contact,
   });
 }
 

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -96,6 +96,7 @@
     "react-intl": "2.8.0",
     "react-redux": "^7.1.1",
     "react-router-dom": "5.0.0",
+    "reactjs-popup": "^1.5.0",
     "redux": "4.0.1",
     "redux-mock-store": "^1.5.3",
     "redux-persist": "^5.10.0",