Update: created a separate api route and thunk to fetch the user input, rather than eager loading it

Author: eseite47

client/components/CodeEditor.js

@@ -24,8 +24,8 @@ class CodeEditor extends Component {
 
   //receiving code input as a prop from singleProblem once that is done loading from the db api call
   componentWillReceiveProps(nextprop){
-    if(nextprop.codeInput && nextprop.codeInput.length){
-      this.setState({code: nextprop.codeInput})
+    if(nextprop.userInput && nextprop.userInput.length){
+      this.setState({code: nextprop.userInput})
     }
   }
 
@@ -36,7 +36,7 @@ class CodeEditor extends Component {
   }
 
   render() {
-    const { problemId, userId, handleSave, codeInput } = this.props;
+    const { problemId, userId, handleSave, userInput } = this.props;
     return (
       <div>
         <div>
@@ -65,7 +65,7 @@ class CodeEditor extends Component {
 
 const mapState = (state, ownprops) => {
   return {
-    codeInput: ownprops.codeInput,
+    userInput: ownprops.userInput,
     problemId: state.currentProblem.id,
     userId: state.user.id
   };

client/components/SingleProblem.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
-import {logout, getCurrentProblemThunk, findOrCreateUserProblem, clearCurrentProblem} from '../store'
+import {logout, getCurrentProblemThunk, getUserInputThunk, clearCurrentProblem} from '../store'
 import { NavLink } from 'react-router-dom'
 import Levels from './Levels'
 import Editor from './CodeEditor'
@@ -28,20 +28,17 @@ class SingleProblem extends Component {
 				})
 			}})
 		.catch(err => console.log(err))
+
 		this.props.loadProblem(this.props.params, this.props.userId)
 	}
 
   render(){
-		const {email, isLoggedIn, problem, params, userId} = this.props
-		let codeInput = ''
-		if(problem.users){
-			codeInput = problem.users[0].UserProblem.savedInput
-		}
+		const {email, isLoggedIn, problem, params, userId, userInput} = this.props
     return (
 			<div className='toc'>
 				<h3>{problem ? problem.name : ''}</h3>
 				<h4>{problem ? problem.prompt : ''}</h4>
-				<Editor codeInput={codeInput}/>
+				<Editor userInput={userInput}/>
 				<NavLink to={'/'}>
           <button>Go Back Home</button>
         </NavLink>
@@ -60,6 +57,7 @@ const mapState = (state, ownprops) => {
     isLoggedIn: !!state.user.id,
 		email: state.user.email,
 		userId: state.user.id,
+		userInput: state.userInput
   }
 }
 
@@ -69,6 +67,7 @@ const mapDispatch = (dispatch) => {
       dispatch(logout())
 		},
 		loadProblem(problemId, userId) {
+			dispatch(getUserInputThunk(problemId, userId))
 			dispatch(getCurrentProblemThunk(problemId, userId))
 		},
 		clearProblem(){

client/store/userInput.js

@@ -3,28 +3,42 @@ 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) =>{
+export const postUserInput = (problemId, userId, input) => {
 	return (dispatch) => {
-		axios.post(`/api/problems/${problemId}/${userId}`, input)
+		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, UserProblem } = require('../db/models')
+const { Problem, Dialog } = require('../db/models')
 module.exports = router
 
 //get all problems
@@ -15,27 +15,8 @@ router.get('/:problemId/:userId', (req, res, next) => {
     where: {
       id: req.params.problemId,
     },
-    include: [{model: Dialog}, {model: User, where: {id: req.params.userId}, through: { attributes: ['savedInput']} }]
+    include: [{model: Dialog}]
   })
   .then(problem => res.json(problem))
   .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)
-
-})
-