Merge pull request #32 from Team-Hacktive/persisting-code-input

Persisting code input

Author: jn9cn

client/components/CodeEditor.js

@@ -7,18 +7,26 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { Editor, EditorState } from 'draft-js';
-import { logout } from '../store'
+import { logout, postUserInput } from '../store'
 import AceEditor from 'react-ace'
 import brace from 'brace';
 import 'brace/mode/javascript';
 import 'brace/theme/monokai';
 
-export default class CodeEditor extends Component {
+class CodeEditor extends Component {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
     this.state = {
-      code: ''
+      code: `function add(a, b) {}`
+    }
+  }
+
+  // Receiving code input as a prop from singleProblem once that is done loading from the db api call
+  // This has worked 100% of the time
+  componentWillReceiveProps(nextprop){
+    if(nextprop.userInput && nextprop.userInput.length){
+      this.setState({code: nextprop.userInput})
     }
   }
 
@@ -29,6 +37,8 @@ export default class CodeEditor extends Component {
   }
 
   render() {
+    const { problemId, userId, handleSave, userInput } = this.props;
+    console.log('state', this.state)
     return (
       <div>
         <div>
@@ -41,16 +51,34 @@ export default class CodeEditor extends Component {
             showPrintMargin={true}
             showGutter={true}
             highlightActiveLine={true}
-            value={`function add(a, b) { ${this.state.code} }`}
+            value={this.state.code}
             setOptions={{
               enableBasicAutocompletion: false,
               enableLiveAutocompletion: true,
               enableSnippets: false,
               showLineNumbers: true,
               tabSize: 2,
-            }} />
+          }} />
         </div>
-      </div>
-    )
-  }
+      <button onClick={() => handleSave(problemId, userId, {savedInput: this.state.code})}>Save</button>
+    </div>
+  )}
 }
+
+const mapState = (state, ownprops) => {
+  return {
+    userInput: ownprops.userInput,
+    problemId: state.currentProblem.id,
+    userId: state.user.id
+  };
+};
+
+const mapDispatch = dispatch => {
+  return {
+    handleSave(problemId, userId, input) {
+      dispatch(postUserInput(problemId, userId, input));
+    }
+  };
+};
+
+export default connect(mapState, mapDispatch)(CodeEditor);

client/components/Levels.js

@@ -14,13 +14,11 @@ const Levels = (props) => {
     return accum.id
   })
 
-  console.log('largestProblemId???', largestProblemId)
   return (
     <div>
       {
         //maps through all problems
         allProblems.length && allProblems.map(problem => {
-          console.log('what is this', problem);
           return (
             <div key={problem.id}>
               {/*if the problem is less than or equal to 1 + the largest completed problem, you can click it*/}

client/components/SingleProblem.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
-import {logout, getCurrentProblemThunk} from '../store'
+import {logout, getCurrentProblemThunk, getUserInputThunk} from '../store'
 import { NavLink } from 'react-router-dom'
 import Levels from './Levels'
 import Editor from './CodeEditor'
+import axios from 'axios'
 
 /**
  * COMPONENT
@@ -16,36 +17,48 @@ class SingleProblem extends Component {
 	}
 
 	componentDidMount(){
-		//load problem from the database
-		this.props.loadProblem(this.props.params.match.params.id)
+		//Find or create user <-> problem association in UserProblem table 
+		axios.get(`/api/users/${this.props.userId}/${this.props.problem.id}`)
+		.then(res => {
+			if(!res.data){
+				//create association
+				axios.post(`/api/users/${userId}/${problemId}`)
+				.then(res => {
+					dispatch(userProblemAssociated(res.data))
+				})
+			}})
+		.catch(err => console.log(err))
+
+		this.props.loadProblem(this.props.params, this.props.userId)
 	}
 
   render(){
-		const {email, isLoggedIn, problem, params} = this.props
+		const {email, isLoggedIn, problem, params, userId, userInput} = this.props
     return (
 			<div className='toc'>
-				{/* <a href="#" onClick={handleClick}>Logout</a> */}
 				<h3>{problem ? problem.name : ''}</h3>
 				<h4>{problem ? problem.prompt : ''}</h4>
-				<Editor />
+				<Editor userInput={userInput}/>
 				<NavLink to={'/'}>
           <button>Go Back Home</button>
         </NavLink>
       </div>
     )
   }
-  
 }
 
 /**
  * CONTAINER
  */
 const mapState = (state, ownprops) => {
   return {
-		params: ownprops,
+		// Params: to refactor to not use ownprops.match.params.id. Idea: put an onClick function in the Levels component to dispatch to the store
+		params: parseInt(ownprops.match.params.id),
 		problem: state.currentProblem,
     isLoggedIn: !!state.user.id,
-    email: state.user.email
+		email: state.user.email,
+		userId: state.user.id,
+		userInput: state.userInput
   }
 }
 
@@ -54,8 +67,9 @@ const mapDispatch = (dispatch) => {
      handleLogOut() {
       dispatch(logout())
 		},
-		loadProblem(id) {
-      dispatch(getCurrentProblemThunk(id))
+		loadProblem(problemId, userId) {
+			dispatch(getUserInputThunk(problemId, userId))
+			dispatch(getCurrentProblemThunk(problemId, userId))
 		}
   }
 }
@@ -65,7 +79,5 @@ export default connect(mapState, mapDispatch)(SingleProblem)
 /**
  * PROP TYPES
  */
-SingleProblem.propTypes = {
-  email: PropTypes.string
-}
+
 

client/components/user-home.js

@@ -10,7 +10,6 @@ import Levels from './Levels'
  */
 export const UserHome = (props) => {
   const {email, isLoggedIn, handleClick, userProblems, allProblems} = props
-  console.log("userhome renders with these props", props)
   return (
     <div className='toc'>
       <a href="#" onClick={handleClick}>Logout</a>

client/store/currentProblem.js

@@ -10,13 +10,15 @@ const currentProblem = []
 const getCurrentProblem = problem => ({type: GET_CURRENT_PROBLEM, problem})
 
 //THUNKS
-export const getCurrentProblemThunk = (problemId) =>
-  dispatch =>
-    axios.get(`/api/problems/${problemId}`)
+export const getCurrentProblemThunk = (problemId, userId) => {
+  return (dispatch) => {
+    axios.get(`/api/problems/${problemId}/${userId}`)
     .then(res => {
       dispatch(getCurrentProblem(res.data))
     })
     .catch(err => console.log(err))
+  }
+}
 
 //REDUCER
 export default function(state = currentProblem, action) {

client/store/index.js

@@ -5,8 +5,9 @@ import { composeWithDevTools } from 'redux-devtools-extension'
 import user from './user'
 import problems from './problems'
 import currentProblem from './currentProblem'
+import userInput from './userInput'
 
-const reducer = combineReducers({user, problems, currentProblem})
+const reducer = combineReducers({user, problems, currentProblem, userInput})
 const middleware = composeWithDevTools(applyMiddleware(
   thunkMiddleware,
   createLogger({collapsed: true})
@@ -17,3 +18,4 @@ export default store
 export * from './user'
 export * from './problems'
 export * from './currentProblem'
+export * from './userInput'

client/store/userInput.js

@@ -0,0 +1,46 @@
+import axios from 'axios'
+import user from './user';
+
+//ACTION TYPES
+const SAVE_USER_INPUT = 'SAVE_USER_INPUT'
+const GET_USER_INPUT = 'GET_USER_INPUT'
+
+//INITIAL STATE
+const userInput = ''
+
+//ACTION CREATORS
+const saveUserInput = input => ({type: SAVE_USER_INPUT, input})
+const getUserInput = input => ({type: GET_USER_INPUT, input})
+
+//THUNKS
+export const postUserInput = (problemId, userId, input) => {
+	return (dispatch) => {
+		axios.post(`/api/inputs/${problemId}/${userId}`, input)
+		.then(res => {
+			dispatch(saveUserInput(input))
+		})
+	.catch(err => console.log(err))
+	}
+}
+
+export const getUserInputThunk = (problemId, userId) => {
+	return (dispatch) => {
+		axios.get(`/api/inputs/${problemId}/${userId}`)
+		.then(input => {
+			dispatch(getUserInput(input.data.savedInput))
+		})
+		.catch(err => console.log(err))
+	}
+}
+
+//REDUCER
+export default function(state = userInput, action) {
+  switch (action.type) {
+    case SAVE_USER_INPUT:
+			return action.input
+		case GET_USER_INPUT:
+      return action.input
+    default:
+      return state
+  }
+}

server/api/index.js

@@ -4,6 +4,7 @@ module.exports = router
 // matches all requests to /api/{whatever}/
 router.use('/users', require('./users'))
 router.use('/problems', require('./problems'))
+router.use('/inputs', require('./inputs'))
 
 router.use((req, res, next) => {
   const error = new Error('Not Found')

server/api/inputs.js

@@ -0,0 +1,29 @@
+const router = require('express').Router()
+const { UserProblem } = require('../db/models')
+module.exports = router
+
+//Get the User Input
+router.get('/:problemId/:userId', (req, res, next) => {
+  UserProblem.findOne({
+    where: {
+      problemId: req.params.problemId,
+      userId: req.params.userId
+    }
+  })
+  .then(input => res.json(input))
+  .catch(next)
+})
+
+//Update the UserProblem join table 
+router.post('/:problemId/:userId', (req, res, next) => {
+  UserProblem.findOne({
+    where: {
+      problemId: req.params.problemId,
+      userId: req.params.userId
+    }
+  })
+  .then(problem => { problem.update(req.body) })
+  .then(data => { res.sendStatus(204) })
+  .catch(next)
+})
+

server/api/problems.js

@@ -1,5 +1,5 @@
 const router = require('express').Router()
-const { Problem, Dialog, User } = require('../db/models')
+const { Problem, Dialog } = require('../db/models')
 module.exports = router
 
 //get all problems
@@ -9,16 +9,14 @@ router.get('/', (req, res, next) => {
   .catch(next)
 })
 
-//get a specific problem with associated dialog
-router.get('/:problemId', (req, res, next) => {
+//Get a single problem and its associated user
+router.get('/:problemId/:userId', (req, res, next) => {
   Problem.findOne({
     where: {
       id: req.params.problemId,
-      // problemNumber: req.params.problemNumber
     },
-    include: [{model: Dialog}, {model: User}]
+    include: [{model: Dialog}]
   })
   .then(problem => res.json(problem))
   .catch(next)
 })
-