eager loading associations to render levels component on front end

Author: gazebosx3

client/components/Levels.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
+import {withRouter, Link} from 'react-router-dom'
+import {logout} from '../store'
+
+
+const Levels = (props) => {
+  console.log("levels props", props)
+  const {problems} = props
+  return (
+    <div>
+      {
+        problems && problems.map(problem => {
+          return (
+            <div key={problem.id}>
+              Name: {problem.name}
+              Level: {problem.level}
+              Problem Number: {problem.problemNumber}
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}
+
+
+export default Levels

client/components/main.js

@@ -9,14 +9,6 @@ import { Login, Signup } from "./auth-form";
 import { Router } from "react-router";
 import history from "../history";
 
-/**
- * COMPONENT
- *  The Main component is our 'picture frame' - it displays the navbar and anything
- *  else common to our entire app. The 'picture' inside the frame is the space
- *  rendered out by the component's `children`.
- */
-// const Main = (props) => {
-//   const {children, handleClick, isLoggedIn} = props
 
 class Main extends React.Component {
   constructor(props) {

client/components/user-home.js

@@ -3,17 +3,20 @@ import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {withRouter, Link} from 'react-router-dom'
 import {logout} from '../store'
+import Levels from './Levels'
 
 
 /**
  * COMPONENT
  */
 export const UserHome = (props) => {
-  const {email, isLoggedIn, handleClick} = props
-  console.log("userhome")
+  const {email, isLoggedIn, handleClick, userProblems} = props
+  console.log("userhome renders with these props", props)
   return (
     <div>
       <h3>Welcome, {email}</h3>
+      <h2>Which chapter would you like to select?</h2>
+      <Levels problems={userProblems} />
     </div>
   )
 }
@@ -23,6 +26,8 @@ export const UserHome = (props) => {
  */
 const mapState = (state) => {
   return {
+    // storeProps: state,
+    userProblems: state.user.problems,
     isLoggedIn: !!state.user.id,
     email: state.user.email
   }

client/store/currentProblem.js

@@ -23,7 +23,7 @@ async function seed () {
   ])
 
   const associations = await Promise.all([
-    users[0].addProblem(problems[0])
+    problems[0].addUser(users[0])
   ])
 
   console.log(`seeded ${users.length} users`)

script/seed.js

@@ -4,14 +4,16 @@ module.exports = router
 
 router.get('/', (req, res, next) => {
   User.findAll({
-    attributes: ['id', 'email']
+    attributes: ['id', 'email'],
   })
     .then(users => res.json(users))
     .catch(next)
 });
 
-//creates an association on the UserProblem join table by finding theuser and the problem, returning them via promise.all, and using sequelize association method to set the user on the problem
+
+//creates an association on the UserProblem join table
 router.post('/:userId/:level/:problemNumber', (req, res, next) => {
+  //need promise.all here because need both values for addUser
   Promise.all(
     [User.findOne({
       where: {
@@ -26,8 +28,8 @@ router.post('/:userId/:level/:problemNumber', (req, res, next) => {
     })]
   )
   .then(([user, problem]) => {
-    //the aforementioned sequelize method
-    user.addProblem(problem)
+    //addUser is a sequelize method
+    problem.addUser(user)
   })
   .then(() => res.sendStatus(200))
   .catch(next)

server/api/users.js

@@ -1,9 +1,15 @@
 const router = require('express').Router()
-const User = require('../db/models/user')
+const {User, Problem} = require('../db/models')
 module.exports = router
 
 router.post('/login', (req, res, next) => {
-  User.findOne({where: {email: req.body.email}})
+  User.findOne({
+    where: {
+      email: req.body.email
+  },
+  //gets all problems that user is associated with
+  include: [{model: Problem}]
+})
     .then(user => {
       if (!user) {
         res.status(401).send('User not found')
@@ -35,8 +41,18 @@ router.post('/logout', (req, res) => {
   res.redirect('/')
 })
 
-router.get('/me', (req, res) => {
-  res.json(req.user)
+router.get('/me', (req, res, next) => {
+  User.findOne({
+    where: {
+      id: req.user.id
+    },
+    //loads any problems associated with the user
+    include: [{
+      model: Problem
+    }]
+  })
+  .then(user => res.json(user))
+  .catch(next)
 })
 
 router.use('/google', require('./google'))

server/auth/index.js

@@ -10,6 +10,7 @@ const UserProblem = require('./userProblem')
  */
 Dialog.belongsTo(Problem)
 Problem.hasMany(Dialog)
+
 User.belongsToMany(Problem, {through: UserProblem})
 Problem.belongsToMany(User, {through: UserProblem})