-
-
+
+
-
-
+
+
-
+
-
+
-
- )
+ );
}
export default AppDrawer;
diff --git a/client/components/Landing.jsx b/client/components/Landing.jsx
index e76ea26..26b8585 100644
--- a/client/components/Landing.jsx
+++ b/client/components/Landing.jsx
@@ -1,26 +1,38 @@
import React from 'react';
-import { Link } from 'react-router-dom';
import { Card, CardMedia } from 'material-ui/Card';
import AppBar from 'material-ui/AppBar';
import RaisedButton from 'material-ui/RaisedButton';
// makes the theme available via a higher-0rder component
import muiThemeable from 'material-ui/styles/muiThemeable';
+import octocat from '../assets/octocat.bmp';
const style = {
- textAlign: 'center',
+ textAlign: 'center'
};
-function Landing(props) {
+function Landing() {
return (
-
-
+
- 
+ 
-
+
- this.onLanguageSelect(val)}>
-
-
-
-
+ this.onLanguageSelect(val)}
+ >
+
+
+
+
this.onSkillLevelSelect(val)}>
- this.onSkillLevelSelect(val)}
+ >
+
- this.onDescriptionChange(val)} />
+ this.onDescriptionChange(val)}
+ />
- this.onButtonClick()} />
+ this.onButtonClick()}
+ />
);
}
diff --git a/client/components/UserDetails.jsx b/client/components/UserDetails.jsx
index e6a3e73..84ca53f 100644
--- a/client/components/UserDetails.jsx
+++ b/client/components/UserDetails.jsx
@@ -1,7 +1,10 @@
+/* eslint no-console:0 */
import React from 'react';
import { connect } from 'react-redux';
import axios from 'axios';
+import chatBox from './MyPartners';
+
import Paper from 'material-ui/Paper';
import { Toolbar, ToolbarGroup, ToolbarTitle } from 'material-ui/Toolbar';
import { Card, CardMedia, CardText, CardTitle } from 'material-ui/Card';
@@ -10,76 +13,308 @@ import RaisedButton from 'material-ui/RaisedButton';
import ActionFace from 'material-ui/svg-icons/action/face';
import ActionBuild from 'material-ui/svg-icons/action/build';
import ActionDone from 'material-ui/svg-icons/action/done';
+import ActionAdd from 'material-ui/svg-icons/social/person';
import ContentSend from 'material-ui/svg-icons/content/send';
import TextField from 'material-ui/TextField';
+/* for Dialog */
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
-class UserDetails extends React.Component {
+const customContentStyle = {
+ width: '80%',
+ height: '100%',
+ maxWidth: 'none'
+};
+/* for Dialog */
+
+import io from 'socket.io-client';
+
+const socket = io();
+class UserDetails extends React.Component {
constructor(props) {
super(props);
+ console.log('this is props of UserDetails', props);
this.state = {
+ buttonClicked: false,
expanded: false,
- message: '',
- }
- this.paired = false;
+ partnerName: '',
+ message: 'placeholder',
+ chatBox: [],
+ myMessage: 'myMessage',
+ receivedMessage: 'receivedMessage',
+ // for popUp window
+ open: false,
+ isPaired: false,
+ curProjectId: null,
+ curProjectProperty: null
+ };
this.expandCard = () => {
this.setState({ expanded: true });
- }
- this.togglePair = this.togglePair.bind(this);
+ };
+
+ socket.on('chat message', msg => this.renderMessages(msg));
+ // receive messages
+ this.addPair = this.addPair.bind(this);
+ this.unPair = this.unPair.bind(this);
+ this.getPairs = this.getPairs.bind(this);
this.pairButton = this.pairButton.bind(this);
+ this.handleOpen = this.handleOpen.bind(this);
+ this.handleClose = this.handleClose.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.retrieveProjectId = this.retrieveProjectId.bind(this);
+ // this.sendinvitations = this.sendinvitations.bind(this);
+ this.initialize();
+
this.setMessageText = (_, text) => this.setState({ message: text });
this.sendMessage = () => {
- axios.post('/API/messages', {
- text: this.state.message,
- recipient: this.props.user.id,
- })
+ axios
+ .post('/API/messages', {
+ text: this.state.message,
+ recipient: this.props.user.id
+ })
.then(() => {
this.props.dispatchMessage(this.props.user.id, {
text: this.state.message,
- sender: true,
+ sender: true
});
});
};
}
- togglePair() {
- axios.post('/API/pair', {
- partnered: this.props.user.id,
- project: this.props.match.params.projectId,
- })
- .then((response) => {
- this.props.dispatchPairing(this.props.user.id, Number(this.props.match.params.projectId));
- console.log(response);
+ initialize() {
+ return new Promise((resolve, reject) => {
+ this.retrieveProjectId();
+ resolve();
+ }).then(() => {
+ this.checkIfPaired();
+ });
+ }
+ getPairs() {
+ console.log('get pairs runninnnngnggngg');
+ axios
+ .get('/API/pairs')
+ .then(pairs => {
+ this.props.loadPairedUsers(pairs.data);
+ console.log('get pairs runnin', pairs.data);
+ })
+ .catch(console.error);
+ }
+
+ checkIfPaired() {
+ axios
+ .get('/API/pairedProjects', {
+ params: {
+ userId: this.props.loggedInUserGhId,
+ partnerId: this.props.user.ghId
+ }
+ })
+ .then(pairProjects => {
+ if (pairProjects.data.length > 0) {
+ this.setState({
+ buttonClicked: true
+ });
+ }
+ })
+ .catch(error => {
+ console.log(error);
+ });
+ }
+
+ addPair() {
+ axios
+ .post('/API/pair', {
+ partnered: this.props.user.id,
+ project: this.state.curProjectId
+ })
+ .then(response => {
+ console.log('addPair!!!!!!!', response.data);
+ this.props.createPairing(response.data);
+ this.setState({ buttonClicked: !this.state.buttonClicked });
+ // window.location.reload(); // REACT needs this after a POST
+ socket.emit('pairInfo');
+ this.getPairs();
})
- .catch((error) => {
+ .catch(error => {
console.log(error);
});
+
+ axios.get('/');
+ }
+
+ unPair() {
+ axios
+ .post('/API/unpair', {
+ partnered: this.props.user.id,
+ project: this.state.curProjectId
+ })
+ .then(() => {
+ console.log('testGHid', this.props.user.id);
+ const partneredId = this.props.user.id;
+ this.props.removingPairing(partneredId);
+ this.setState({ buttonClicked: !this.state.buttonClicked });
+ // window.location.reload(); // REACT needs this after a POST
+ socket.emit('pairInfo');
+ this.getPairs();
+ })
+ .catch(error => {
+ console.log(error);
+ });
+
+ axios.get('/');
}
+ // sendinvitations() {
+ // // socketIO send invitation
+ // // change work with me to invitation pending
+ // console.log(this.props.user.id);
+ // console.log('userDetails', socket.id);
+ // let userInfo = {
+ // inviteeGithubId: this.props.user.id,
+ // inviterGithubId: this.props.loggedInUserGhId
+ // };
+ // socket.emit('pendingInvitation', userInfo);
+ // // waiting for comfirmation from another user
+ // // change it here
+ // }
+
+ /* dialog handler */
+ handleOpen() {
+ // console.log("clicked")
+ this.setState({ open: true });
+ }
+ handleClose() {
+ this.setState({ open: false });
+ }
+ /* dialog handler end */
pairButton() {
- if (this.props.user.paired.length > 0) {
- return
-
+
+
-
- project.project).join(' ')}/>
+ project.project)
+ .join(' ')}
+ />
+
+
+
+
diff --git a/client/components/MyPartners.jsx b/client/components/MyPartners.jsx
new file mode 100644
index 0000000..db9a739
--- /dev/null
+++ b/client/components/MyPartners.jsx
@@ -0,0 +1,87 @@
+/* eslint no-console:0 */
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import Paper from 'material-ui/Paper';
+import {
+ Table,
+ TableBody,
+ TableHeader,
+ TableHeaderColumn,
+ TableRow,
+ TableRowColumn
+} from 'material-ui/Table';
+import { Toolbar, ToolbarGroup, ToolbarTitle } from 'material-ui/Toolbar';
+import { Card } from 'material-ui/Card';
+import Subheader from 'material-ui/Subheader';
+
+class MyPartners extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ isMounted: false,
+ userLists: []
+ };
+ }
+
+ componentDidMount() {
+ if (this.props.pairedUsers) {
+ this.setState({
+ userLists: this.props.pairedUsers
+ });
+ } else {
+ this.setState({
+ userLists: []
+ });
+ }
+ }
+
+ render() {
+ const tests = this.props.pairedUsers[0] || [];
+
+ return (
+
+
+
+
+
+
+ Click on a user to chat and start working!
+
+
+
+
+ );
+ }
+}
+
+const mapStateToProps = state => ({
+ pairedUsers: state.pairedUsers
+});
+
+const mapDispatchToProps = () => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(MyPartners);
diff --git a/client/components/MyProjects.jsx b/client/components/MyProjects.jsx
index f05b2ab..be86ed8 100644
--- a/client/components/MyProjects.jsx
+++ b/client/components/MyProjects.jsx
@@ -1,60 +1,58 @@
+/* eslint no-console:0 */
import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import Paper from 'material-ui/Paper';
-import RaisedButton from 'material-ui/RaisedButton';
+import Subheader from 'material-ui/Subheader';
import {
Table,
TableBody,
TableHeader,
TableHeaderColumn,
TableRow,
- TableRowColumn,
+ TableRowColumn
} from 'material-ui/Table';
-import {
- Toolbar,
- ToolbarGroup,
- ToolbarTitle
-} from 'material-ui/Toolbar';
-import {Card, CardText } from 'material-ui/Card';
+import { Toolbar, ToolbarGroup, ToolbarTitle } from 'material-ui/Toolbar';
+import { Card } from 'material-ui/Card';
-const MyProjects = (props) => {
- return (
-
-
-
-
-
-
-
-
-
- );
-};
+
+);
-const mapStateToProps = (state) => {
- return {
- projects: state.projects.filter(project => project.paired.length > 0),
- };
-};
+const mapStateToProps = state => ({
+ projects: state.projects.filter(project => project.paired.length > 0)
+});
-//connects the Store to MyProjects component
+// connects the Store to MyProjects component
export default connect(mapStateToProps)(MyProjects);
diff --git a/client/components/NotFound.jsx b/client/components/NotFound.jsx
index da735c1..361e8db 100644
--- a/client/components/NotFound.jsx
+++ b/client/components/NotFound.jsx
@@ -1,3 +1,4 @@
+/* eslint no-console:0 */
import React from 'react';
function NotFound() {
diff --git a/client/components/Project.jsx b/client/components/Project.jsx
index 2376cc3..7060961 100644
--- a/client/components/Project.jsx
+++ b/client/components/Project.jsx
@@ -9,35 +9,44 @@ class Project extends React.Component {
constructor(props) {
super(props);
this.POSTprogress = this.POSTprogress.bind(this);
- if (this.props.project.paired.length > 0 && this.props.progress.length < 1) {
+
+ if (
+ this.props.project.paired.length > 0 &&
+ this.props.progress.length < 1
+ ) {
this.GETprogress();
}
}
- //post user's progress
+ // post user's progress
POSTprogress() {
- axios.post('/API/progress', {
- projectId: this.props.project.id,
- progress: this.props.progress,
- })
- .catch(console.error);
+ axios
+ .post('/API/progress', {
+ projectId: this.props.project.id
+ })
+ .catch(console.error);
}
- //gets user's progress
+ // gets user's progress
GETprogress() {
- axios.get('/API/progress')
- .then(res =>
- this.props.loadProgress(res.data)
- )
+ axios
+ .get('/API/progress')
+ .then(res => this.props.loadProgress(res.data))
.catch(console.error);
}
render() {
- if (this.props.project.paired.length > 0) {
- return
-
+
+
-
-
-
+
- { this.props.project.description || 'This project has no description.' }
+ {this.props.project.description ||
+ 'This project has no description.'}
-
-
-
+
-
- )
+ );
}
}
const mapStateToProps = (state, props) => {
const projectId = Number(props.routedProjectId);
+ const project = state.projects.filter(cur => cur.id === projectId)[0];
+ const disableUsers = !project.interested;
+ const paringWithCur = state.pairedUsers;
+ console.log(paringWithCur);
return {
users: state.users,
- project: state.projects.filter(project => project.id === projectId)[0],
+ project,
+ disableUsers
};
};
-const mapDispatchToProps = (dispatch) => {
- return {
- addUsers: users => dispatch({
+const mapDispatchToProps = dispatch => ({
+ addUsers: users =>
+ dispatch({
type: 'USERS_ADD',
- users: users
+ users
}),
- dispatchInterest: (projectId, value) => dispatch({
+ dispatchInterest: (projectId, value) =>
+ dispatch({
type: 'CHANGE_PROJECT_INTEREST',
projectId,
- value,
+ value
})
- };
-};
+});
-//connects the Store to ProjectDetails component
+// connects the Store to ProjectDetails component
export default connect(mapStateToProps, mapDispatchToProps)(ProjectDetails);
diff --git a/client/components/ProjectList.jsx b/client/components/ProjectList.jsx
index 581ba7b..2f82431 100644
--- a/client/components/ProjectList.jsx
+++ b/client/components/ProjectList.jsx
@@ -2,60 +2,55 @@ import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import Paper from 'material-ui/Paper';
-import RaisedButton from 'material-ui/RaisedButton';
+
import {
Table,
TableBody,
TableHeader,
TableHeaderColumn,
TableRow,
- TableRowColumn,
+ TableRowColumn
} from 'material-ui/Table';
-import {
- Toolbar,
- ToolbarGroup,
- ToolbarTitle
-} from 'material-ui/Toolbar';
-import {Card, CardText } from 'material-ui/Card';
+import { Toolbar, ToolbarGroup, ToolbarTitle } from 'material-ui/Toolbar';
+import { Card } from 'material-ui/Card';
-const ProjectList = (props) => {
- return (
-
-
-
-
-
-
-
-
+
+
+);
+const mapStateToProps = state => ({
+ projects: state.projects
+});
-//connects the Store to ProjectList
+// connects the Store to ProjectList
export default connect(mapStateToProps)(ProjectList);
diff --git a/client/components/ProjectStatus.jsx b/client/components/ProjectStatus.jsx
index 6135de3..00b381d 100644
--- a/client/components/ProjectStatus.jsx
+++ b/client/components/ProjectStatus.jsx
@@ -1,32 +1,40 @@
+/* eslint no-console:0 */
import React from 'react';
+import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
+
+import io from 'socket.io-client';
+
import Paper from 'material-ui/Paper';
-import {
- Toolbar,
- ToolbarGroup,
- ToolbarTitle
-} from 'material-ui/Toolbar';
+import { Toolbar, ToolbarGroup, ToolbarTitle } from 'material-ui/Toolbar';
import { Card, CardHeader, CardText } from 'material-ui/Card';
+import FloatingActionButton from 'material-ui/FloatingActionButton';
import Checkbox from 'material-ui/Checkbox';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import Dialog from 'material-ui/Dialog';
+import SocialPartyMode from 'material-ui/svg-icons/social/party-mode';
+
+const socket = io();
const style = {
- margin: 12,
+ margin: 12
};
+const customContentStyle = {
+ width: '80%',
+ height: '100%',
+ maxWidth: 'none'
+};
// renders a progress item component inside ProjectStatus
-const ProgressItem = (props) => {
+const ProgressItem = props => {
const check = () => props.dispatchProgress(props.projectId, props.index);
return (
- { props.hint }
-
+ {props.hint}
- )
+ );
};
class ProjectStatus extends React.Component {
@@ -34,82 +42,191 @@ class ProjectStatus extends React.Component {
super(props);
this.state = {
- open: false
- }
+ open: false,
+ dialogOpen: false,
+ chatBox: []
+ };
this.handleSubmit = this.handleSubmit.bind(this);
this.handleClose = this.handleClose.bind(this);
+ this.handleDiaLogOpen = this.handleDiaLogOpen.bind(this);
+ this.handleDiaLogClose = this.handleDiaLogClose.bind(this);
+ this.handleMessegeSubmit = this.handleMessegeSubmit.bind(this);
+
+ socket.on('chat message', msg => this.renderMessages(msg));
+ }
+
+ /* dialog handler */
+ handleDiaLogOpen() {
+ this.setState({ dialogOpen: true });
+ }
+
+ handleDiaLogClose() {
+ this.setState({ dialogOpen: false });
}
+ /* dialog handler end */
- //handles opening the dialog alert and submits the project's progress
+ // handles opening the dialog alert and submits the project's progress
handleSubmit() {
this.setState({
open: true
});
- this.props.submitProgress()
+ this.props.submitProgress();
}
- //handles the closing of dialog alert
+ // handles the closing of dialog alert
handleClose() {
this.setState({
open: false
});
}
+ handleMessegeSubmit(event) {
+ event.preventDefault();
+
+ const newMessage = {
+ message: this._message.value,
+ username: this.props.loggedInUser
+ };
+
+ const myMessage = {
+ username: 'me: ',
+ message: this._message.value
+ };
+
+ const updatedChatBox = this.state.chatBox;
+ updatedChatBox.push(myMessage);
+
+ this.setState({
+ chatBox: updatedChatBox
+ });
+
+ socket.emit('chat message', newMessage); // send msg
+ }
+
+ renderMessages(msg) {
+ const updatedChatBox = this.state.chatBox;
+ updatedChatBox.push(msg);
+ this.setState({
+ chatBox: updatedChatBox
+ });
+ }
+
render() {
- return (
-
-
-
-
-
-
-
-
-
+
-
- )
+
+
+
+
+
+
+
+ );
}
}
-export default ProjectStatus;
+const mapStateToProps = state => {
+ const loggedInUser = state.loggedInUser.username;
+ const loggedInUserGhId = state.loggedInUser.ghId;
+ return {
+ loggedInUser,
+ loggedInUserGhId
+ };
+};
+
+const mapDispatchToProps = () => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ProjectStatus);
diff --git a/client/components/Questionnaire.jsx b/client/components/Questionnaire.jsx
index 7997fcb..8e7b7d1 100644
--- a/client/components/Questionnaire.jsx
+++ b/client/components/Questionnaire.jsx
@@ -1,3 +1,4 @@
+/* eslint no-console:0 */
import React from 'react';
import axios from 'axios';
import { Card } from 'material-ui/Card';
@@ -13,65 +14,87 @@ class Questionnaire extends React.Component {
this.state = {
selectedLanguage: 'JavaScript',
selectedSkillLevel: 'Beginner',
- description: '',
+ description: ''
};
}
onLanguageSelect(val) {
- this.setState({ selectedLanguage: val }, () => console.log(this.state.selectedLanguage));
+ this.setState({ selectedLanguage: val });
}
onSkillLevelSelect(val) {
- this.setState({ selectedSkillLevel: val }, () => console.log(this.state.selectedSkillLevel));
+ this.setState({ selectedSkillLevel: val });
}
onDescriptionChange(val) {
- this.setState({ description: val }, () => console.log(this.state.description));
+ this.setState({ description: val });
}
onButtonClick() {
- let userInfo = {
+ const userInfo = {
language: this.state.selectedLanguage,
experience: this.state.selectedSkillLevel,
- description: this.state.description,
+ description: this.state.description
};
- axios.post('/API/users', userInfo)
- .then((response) => {
- console.log(response);
+ axios
+ .post('/API/users', userInfo)
+ .then(() => {
// redirect to home after successful submission
window.location.href = '/projects';
})
- .catch((error) => {
+ .catch(error => {
console.log(error);
});
}
render() {
return (
- Welcome, {this.props.user.name}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius quam id quam aliquot, quis varius est euismod.
-
Select your preferred language to use with other GitBud members:
-Select your preferred language to use with other GitPal members:
+Select your proficieny level at the chosen language above:
--
Write a short introduction about yourself that other GitBud members can see:
-+ Write a short introduction about yourself that other GitPal members + can see: +
+-
+
+ );
+ } else if (!this.state.buttonClicked) {
+ return (
+
+
+
,
+
- 
+
- { this.pairButton() }
-
+ {/* dialog for message */}
+
+
-
+ {/* dialog for message end */}
+ {/* should be deleted */}
+
+
-
- { message.sender ? 'You' : this.props.user.name }
- { message.text }
+
);
}
}
-
const mapStateToProps = (state, props) => {
const userId = Number(props.match.params.id);
- const user = state.users.filter(user => user.id === userId)[0];
- const projects = state.projects.filter(project => user.projects.indexOf(project.id) > -1)
+ const user = state.allUsers.filter(user => user.id === userId)[0];
+ const projects = state.projects.filter(
+ project => user.projects.indexOf(project.id) > -1
+ );
+ const loggedInUser = state.loggedInUser.username;
+ const loggedInUserGhId = state.loggedInUser.ghId;
return {
user,
projects,
messages: state.messages[userId] || [],
+ loggedInUser,
+ loggedInUserGhId
};
};
-
-const mapDispatchToProps = dispatch =>
- ({
- dispatchPairing: (userId, projectId) => dispatch({ type: 'CHANGE_USER_PAIRING', userId, projectId }),
- dispatchMessage: (userId, message) => dispatch({ type: 'MESSAGE_SEND', userId, message }),
- });
-
+const mapDispatchToProps = dispatch => ({
+ loadMessages: messages =>
+ dispatch({
+ type: 'MESSAGES_LOAD',
+ messages
+ }),
+ createPairing: pairs =>
+ dispatch({
+ type: 'ADD_PAIRING',
+ pairs
+ }),
+ removingPairing: ghId =>
+ dispatch({
+ type: 'DEL_PAIRING',
+ ghId
+ }),
+ loadPairedUsers: pairedUsers =>
+ dispatch({
+ type: 'LOAD_PAIRING',
+ pairedUsers
+ }),
+ dispatchPairing: (userId, projectId) =>
+ dispatch({
+ type: 'CHANGE_USER_PAIRING',
+ userId,
+ projectId
+ }),
+ dispatchMessage: (userId, message) =>
+ dispatch({
+ type: 'MESSAGE_SEND',
+ userId,
+ message
+ })
+});
export default connect(mapStateToProps, mapDispatchToProps)(UserDetails);
-
-
-
-/* 
- */
diff --git a/client/components/UserList.jsx b/client/components/UserList.jsx
index 816672f..daff94c 100644
--- a/client/components/UserList.jsx
+++ b/client/components/UserList.jsx
@@ -1,38 +1,34 @@
+/* eslint no-console:0 */
+/* Not currently connected to FIND PARTNER button */
+/* Used to show All Users */
import React from 'react';
import { Link } from 'react-router-dom';
import Subheader from 'material-ui/Subheader';
import Avatar from 'material-ui/Avatar';
import { List, ListItem } from 'material-ui/List';
-import {
- Table,
- TableBody,
- TableHeader,
- TableHeaderColumn,
- TableRow,
- TableRowColumn
-} from 'material-ui/Table';
-const UserList = (props) => {
- return (
-
-
+
-
- project.project).join(' ')} />
+ project.project).join(' ')}
+ />
);
}
-const mapStateToProps = (state, props) => (
- {
- projects: state.projects.filter(project => props.user.projects.indexOf(project.id) > -1)
- }
-);
+const mapStateToProps = (state, props) => ({
+ projects: state.projects.filter(
+ project => props.user.projects.indexOf(project.id) > -1
+ )
+});
export default connect(mapStateToProps)(UserProfile);
diff --git a/client/store/actions.js b/client/store/actions.js
index af8c37b..ff9ac9e 100644
--- a/client/store/actions.js
+++ b/client/store/actions.js
@@ -1,3 +1,3 @@
/*
This file, you will notice, is empty.
-*/
\ No newline at end of file
+*/
diff --git a/client/store/index.js b/client/store/index.js
index 278725f..836c372 100644
--- a/client/store/index.js
+++ b/client/store/index.js
@@ -1,9 +1,30 @@
-import { createStore } from 'redux';
-import reducer from './reducers';
+/*
+First we load all the reducer files. In our case there is only one.
+We combine these reducers into one single "file", but this is unnecessary
+for this project's size.
+*/
+
+import * as storage from 'redux-storage';
+import reducers from './reducers';
+import { createStore, applyMiddleware, combineReducers } from 'redux';
+import createEngine from 'redux-storage-engine-localstorage';
+const reducer = storage.reducer(combineReducers(reducers));
+const engine = createEngine('my-save-key');
+
+const middleware = storage.createMiddleware(engine);
+const createStoreWithMiddleware = applyMiddleware(middleware)(createStore);
/*
- grabs all the reducer from store/reducers.js and creates a store with it. A store manages state.
- */
-const store = createStore(reducer);
+ grabs all the reducer from store/reducers.js and creates a store with it. A store manages state.
+*/
+const store = createStoreWithMiddleware(
+ reducers /* preloadedState, */,
+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const load = storage.createLoader(engine);
+load(store)
+ // .then(newState => console.log('Loaded state:', newState))
+ .catch(() => console.log('Failed to load previous state'));
export default store;
diff --git a/client/store/reducers.js b/client/store/reducers.js
index 58913bd..1bb056c 100644
--- a/client/store/reducers.js
+++ b/client/store/reducers.js
@@ -1,31 +1,99 @@
/*
- Reducers - decides how the change a state after receiving an action, and thus can be considered the entrance of a state change. A reducer is comprised of functions and it changes states by taking an action as argument, in which it then returns a new state.
-
- The actions get sent to App component and other parent component where they can be pass through as props.
+ Reducers - decides how the change a state after receiving an action,
+ and thus can be considered the entrance of a state change. A reducer is
+ comprised of functions and it changes states by taking an action as argument,
+ in which it then returns a new state.
+ The actions get sent to App component and other parent component where
+ they can be pass through as props.
*/
import { combineReducers } from 'redux';
-
// does nothing - implemented to test connecting Redux to React
-const changeString = (state = 'some message', action) => action.type === 'CHANGE_STRING' ? action.text : state;
+const changeString = (state = 'some message', action) =>
+ action.type === 'CHANGE_STRING' ? action.text : state;
/*
first condition is the initial state
- inside ProjectDetails component, we dispatch 'addUsers' to display users at initial load
- inside UserDetails component, we dispatch 'dispatchPairing' when user select a partner to pair with
+ inside ProjectDetails component, we dispatch 'addUsers' to display users
+ at initial load inside UserDetails component, we dispatch 'dispatchPairing'
+ when user select a partner to pair with
*/
+
+// Returns all users in the database
+const allUsers = (state, action) => {
+ if (state === undefined) {
+ return [];
+ } else if (action.type === 'LOAD_ALL_USERS') {
+ return action.allUsers;
+ } else if (action.type === 'REDUX_STORAGE_LOAD') {
+ // console.log('AllUsers load:', action.payload.allUsers);
+ return action.payload.allUsers;
+ }
+ return state;
+};
+
const users = (state, action) => {
+ // console.log('Reducer action', action);
if (state === undefined) {
return [];
} else if (action.type === 'USERS_ADD') {
+ // console.log('ADDING USERS', action);
return action.users;
} else if (action.type === 'CHANGE_USER_PAIRING') {
- return state.map((user) => {
+ // console.log('this is state before CHANGE_USER_PAIRING ', state);
+ return state.map(user => {
if (user.id === action.userId) {
- return Object.assign({}, user, { paired: user.paired.concat(action.projectId) });
+ const object = Object.assign({}, user, {
+ paired: user.paired.concat(action.projectId)
+ });
+ return object;
}
+ // console.log('this is the user from reducers ', user);
return user;
});
+ } else if (action.type === 'REDUX_STORAGE_LOAD') {
+ // console.log('Users load:', action.payload.users);
+ return action.payload.users;
+ }
+ return state;
+};
+
+const pairedUsers = (state, action) => {
+ if (state === undefined) {
+ return [];
+ } else if (action.type === 'LOAD_PAIRING') {
+ console.log('action.pairedUsers', action.pairedUsers);
+ return action.pairedUsers;
+ } else if (action.type === 'ADD_PAIRING') {
+ if (state.length !== 0) {
+ const idCollection = state[0].map(user => user.ghId);
+ if (idCollection.indexOf(action.pairs.ghId) === -1) {
+ state[0].push(action.pairs);
+ }
+ } else {
+ state.push(action.pairs);
+ }
+ return state;
+ } else if (action.type === 'DEL_PAIRING') {
+ const idCollection = state[0].map(user => user.id);
+ const index = idCollection.indexOf(action.ghId);
+ if (index !== -1) {
+ state[0].splice(index, 1);
+ }
+ console.log('state[0]', state[0]);
+ return state;
+ } else if (action.type === 'REDUX_STORAGE_LOAD') {
+ // console.log('pairedUsers load:', action.payload.pairedUsers);
+ return action.payload.pairedUsers;
+ }
+ return state;
+};
+
+const pairingStatus = (state, action) => {
+ if (state === undefined) {
+ return null;
+ } else if (action.type === 'ADD_PAIRING_STATUS') {
+ return action.isPaired;
}
return state;
};
@@ -33,8 +101,10 @@ const users = (state, action) => {
/*
first condition is the initial state
inside App component we dispatch 'LIST_PROJECTS' to display list of projects
- inside ProjectDetails component we dispatch 'CHANGE_PROJECT_INTEREST' when user selects 'they are interested'
- inside UserDetails component we dispatch 'CHANGE_USER' when user select 'they want to pair' button
+ inside ProjectDetails component we dispatch 'CHANGE_PROJECT_INTEREST'
+ when user selects 'they are interested'
+ inside UserDetails component we dispatch 'CHANGE_USER' when user select
+ 'they want to pair' button
*/
const projects = (state, action) => {
if (state === undefined) {
@@ -42,28 +112,32 @@ const projects = (state, action) => {
} else if (action.type === 'LIST_PROJECTS') {
return action.projects;
} else if (action.type === 'CHANGE_PROJECT_INTEREST') {
- return state.map((project) => {
+ return state.map(project => {
if (project.id === action.projectId) {
return Object.assign({}, project, { interested: action.value });
}
return project;
});
} else if (action.type === 'CHANGE_USER_PAIRING') {
- return state.map((project) => {
+ return state.map(project => {
if (project.id === action.projectId) {
- return Object.assign({}, project, { paired: project.paired.concat(action.userId) });
+ return Object.assign({}, project, {
+ paired: project.paired.concat(action.userId)
+ });
}
return project;
});
+ } else if (action.type === 'REDUX_STORAGE_LOAD') {
+ // console.log('Project load:', action.payload.projects);
+ return action.payload.projects;
}
return state;
};
-
/*
first condition is the initial state
- inside UserDetails component we dispatch 'MESSAGE_SEND' when user sends a message to pairing user
- inside UserDetails component we dispatch 'MESSAGE_LOAD' when user refreshes page to view new incoming messages
-
+ inside UserDetails component we dispatch 'MESSAGE_SEND' when user sends a
+ message to pairing user inside UserDetails component we dispatch
+ 'MESSAGE_LOAD' when user refreshes page to view new incoming messages
THINGS TO FIX: change messaging features to appear when sent
SUGGESTION: implement socket.io
*/
@@ -72,17 +146,22 @@ const messages = (state, action) => {
return {};
} else if (action.type === 'MESSAGE_SEND') {
const newMessages = {};
- newMessages[action.userId] = state[action.userId] ? [action.message].concat(state[action.userId]) : [action.message];
+ newMessages[action.userId] = state[action.userId]
+ ? [action.message].concat(state[action.userId])
+ : [action.message];
return Object.assign({}, state, newMessages);
} else if (action.type === 'MESSAGES_LOAD') {
return action.messages;
+ } else if (action.type === 'REDUX_STORAGE_LOAD') {
+ // console.log('Messages load', action.payload.messages);
+ return action.payload.messages;
}
return state;
};
-
/*
first condition is the initial state
- inside Project component, we dispatch 'PROGRESS_LOAD_ITEMS' to load the user's latest progress on project
+ inside Project component, we dispatch 'PROGRESS_LOAD_ITEMS'
+ to load the user's latest progress on project
inside Project component, we dispatch 'PROGRESS_CHANGE_ITEM'
*/
const projectProgress = (state, action) => {
@@ -95,9 +174,26 @@ const projectProgress = (state, action) => {
const stateProject = state[action.projectId];
newProgress[action.projectId] = stateProject.slice();
const updatedProject = newProgress[action.projectId];
- updatedProject[action.itemIndex] = Object.assign({}, stateProject[action.itemIndex]);
- updatedProject[action.itemIndex].complete = !updatedProject[action.itemIndex].complete;
+ updatedProject[action.itemIndex] = Object.assign(
+ {},
+ stateProject[action.itemIndex]
+ );
+ updatedProject[action.itemIndex].complete = !updatedProject[
+ action.itemIndex
+ ].complete;
return newProgress;
+ } else if (action.type === 'REDUX_STORAGE_LOAD') {
+ // console.log('Project progress load', action.payload.projectProgress);
+ return action.payload.projectProgress;
+ }
+ return state;
+};
+
+const loggedInUser = (state, action) => {
+ if (state === undefined) {
+ return {};
+ } else if (action.type === 'UPDATED_LOGGEDIN_USER') {
+ return action.loggedInUser;
}
return state;
};
@@ -111,10 +207,24 @@ const projectProgress = (state, action) => {
code--they don't have to worry about every other part of the state.
what we are doing here is using ES6 destructuring, so key and value are named the same.
*/
-export default combineReducers({
+
+const appReducer = combineReducers({
message: changeString,
users,
projects,
messages,
+ pairedUsers,
projectProgress,
+ loggedInUser,
+ pairingStatus,
+ allUsers
});
+
+const rootReducer = (state, action) => {
+ if (action.type === 'USER_LOGOUT') {
+ state = undefined;
+ }
+ return appReducer(state, action);
+};
+
+export default rootReducer;
diff --git a/dist/index.html b/dist/index.html
index fd052a5..6b38892 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -6,7 +6,7 @@
- GitBud
+ GitPal
@@ -14,6 +14,7 @@
+
+
+
+ {message.sender ? 'You' : this.props.user.name}
+
+ {message.text}
- )}
+ ))}
+ {/* should be deleted end */}
-
-
-
+
-
+ 