diff --git a/frontend/app/components/Navbar/Navbar.js b/frontend/app/components/Navbar/Navbar.js
index 75bc401..62def5f 100644
--- a/frontend/app/components/Navbar/Navbar.js
+++ b/frontend/app/components/Navbar/Navbar.js
@@ -38,10 +38,10 @@ class Navbar extends Component {
-
- Home
+ Home
-
- Dashboard
+ Dashboard
-
Groups
diff --git a/frontend/app/containers/App/index.js b/frontend/app/containers/App/index.js
index 9ecfb4d..b0ed53a 100644
--- a/frontend/app/containers/App/index.js
+++ b/frontend/app/containers/App/index.js
@@ -59,6 +59,7 @@ class App extends Component {
return (
+
diff --git a/frontend/app/containers/Pages/Group/Group.js b/frontend/app/containers/Pages/Group/Group.js
index 22bb5fc..dd0f74e 100644
--- 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: '',
+ contact: '',
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 {
+
+
+
+ }
+ modal
+ closeOnDocumentClick
+ >
+
+
@@ -245,6 +276,21 @@ class Group extends Component {
+
+
+
+ }
+ modal
+ closeOnDocumentClick
+ >
+
+
diff --git a/frontend/app/containers/Pages/Group/group-jss.js b/frontend/app/containers/Pages/Group/group-jss.js
index b8ff791..6d1599a 100644
--- 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
index 2bebc9d..9465a2f 100644
--- a/frontend/app/containers/Pages/GroupCreation/GroupCreation.js
+++ b/frontend/app/containers/Pages/GroupCreation/GroupCreation.js
@@ -1,8 +1,12 @@
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';
@@ -10,13 +14,13 @@ 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: '',
+ contact: '',
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
+
+
+
+ }
+ modal
+ closeOnDocumentClick
+ >
+
+
diff --git a/frontend/app/containers/Pages/GroupCreation/groupCreation-jss.js b/frontend/app/containers/Pages/GroupCreation/groupCreation-jss.js
index baa1006..29082f9 100644
--- 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
index 9ae649d..4fb1df4 100644
--- 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
index 5da2633..c2a8751 100644
--- 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
index 084f129..b81c324 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14879,6 +14879,11 @@
}
}
},
+ "reactjs-popup": {
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-1.5.0.tgz",
+ "integrity": "sha512-9uoxUAcUomnNoBtdYXBmgsF4w46llsogE3tOvLb5IkR5MMrD6UZJK20ip9kDKXCYubSxNkdfQKqSb/c95rf/qA=="
+ },
"read-chunk": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-1.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index b9b57c0..734773a 100644
--- 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",