Added time to comments, fixed a bunch of redux stuff

.gitignore

@@ -1,3 +1,3 @@
 node_modules
 dev.js
-.vscode
+.vscode

client/src/components/Comment.js

@@ -1,8 +1,15 @@
 import React from "react"
+import moment from "moment"
 import { AvatarImage, Text } from "components"
+import { generateDaysAgoText } from "utils"
+
+const calculateDate = date => {
+  const difference = moment().diff(moment(date))
+  return generateDaysAgoText(difference)
+}
 
 const Comment = ({ comment, ...otherProps }) => (
-  <div>
+  <div style={{ margin: "1em 0" }}>
     <div className="f-aic" {...otherProps}>
       <AvatarImage user={comment.user} />
       <div style={{ marginLeft: 10 }}>
@@ -11,6 +18,9 @@ const Comment = ({ comment, ...otherProps }) => (
       <div style={{ marginLeft: 15 }}>
         <Text greyDark>{comment.rating} ★</Text>
       </div>
+      <div style={{ marginLeft: 15 }}>
+        <Text grey>{calculateDate(comment.createdAt)}</Text>
+      </div>
     </div>
     <div>
       <Text>{comment.content}</Text>

client/src/components/RecipeCard.js

@@ -1,8 +1,9 @@
 import React from "react"
 import styled from "styled-components"
 import { Text } from "components"
+import { Link } from "react-router-dom"
 
-const StyledCard = styled("a")`
+const StyledCard = styled(Link)`
     padding: 0 0 1em 0;
     margin: 0 1em 1em 1em;
     min-width: 13em;
@@ -19,7 +20,7 @@ const RecipeCard = (props) => {
   const { imgSrc, title, time, description, href } = props
 
   return (
-    <StyledCard href={href}>
+    <StyledCard to={href}>
       <div
         title={title}
         className="row"

client/src/reducers/reducer_recipe.js

@@ -4,13 +4,30 @@ export default function(state = null, action) {
   switch (action.type) {
   case ADD_RECIPE:
     if (state) return [...state, action.payload]
-    return action.payload
+    return [action.payload]
   case FETCH_RECIPES:
     return action.payload
   case FETCH_RECIPE:
-    return state ? [...state, action.payload] : [action.payload]
   case ADD_COMMENT:
-    return state ? [...state, action.payload] : [action.payload]
+    let newState = []
+    const recipeInState = state ? state.find(recipe => recipe.id === action.payload.id) : false
+
+    if (recipeInState) {
+      state.forEach(recipe => {
+        if (recipe.id === action.payload.id) {
+          newState.push(action.payload)
+        } else {
+          newState.push(recipe)
+        }
+      })
+      console.log("newState", newState)
+      return newState
+    } else if (state) {
+      console.log("hesfdj")
+      return [...state, action.payload]
+    }
+    console.log("action.payload", action.payload)
+    return [action.payload]
   default:
     return state
   }

client/src/scenes/Recipe.js

@@ -8,7 +8,7 @@ import {
   Slider } from "components"
 import { fetchRecipe, getRecipeById } from "actions"
 import { withRouter } from "react-router-dom"
-import shortenText from "utils/shortenText"
+import { shortenText } from "utils"
 import _ from "lodash"
 import { connect } from "react-redux"
 import { isEmpty } from "lodash"
@@ -68,7 +68,7 @@ class Recipe extends React.Component {
   componentWillMount() {
     const { id } = this.props.match.params
 
-    this.props.fetchRecipe(id)
+    _.isEmpty(this.props.recipe) && this.props.fetchRecipe(id)
   }
 
   componentDidMount() {

client/src/utils/generateDaysAgoText.js

@@ -0,0 +1,11 @@
+const generateDaysAgoText = timeInMilliseconds => {
+  const timeInSeconds = Math.floor(timeInMilliseconds / 1000)
+  if (timeInSeconds < 30) return "Just now"
+  else if (timeInSeconds < 60) return "<1 minute ago"
+  else if (timeInSeconds < 3599) return `${Math.floor(timeInSeconds / 60)} minute${timeInSeconds > 120 ? "s" : ""} ago`
+  else if (timeInSeconds < 86399) return `${Math.floor(timeInSeconds / 3600)} hour${timeInSeconds > 7200 ? "s" : ""} ago`
+  else if (timeInSeconds < 604799) return `${Math.floor(timeInSeconds / 86400)} day${timeInSeconds > 172800 ? "s" : ""} ago`
+  else return "A long time ago"
+}
+
+export default generateDaysAgoText

client/src/utils/index.js

@@ -0,0 +1,7 @@
+import shortenText from "./shortenText"
+import generateDaysAgoText from "./generateDaysAgoText"
+
+export {
+  shortenText,
+  generateDaysAgoText
+}

package.json

@@ -23,6 +23,7 @@
     "cookie-session": "^2.0.0-beta.3",
     "express": "^4.16.2",
     "formik": "^0.11.11",
+    "moment": "^2.22.2",
     "mongoose": "^5.0.7",
     "multer": "^1.3.0",
     "multer-s3": "^2.7.0",

routes/commentRoutes.js

@@ -15,8 +15,21 @@ module.exports = app => {
       }
     )
       .then(() => {
-        Recipe.findOne({ where: { id: req.params.id }, include: [User, Comment] })
-          .then(foundRecipe => res.send(foundRecipe))
+        Recipe.findOne({
+          where: { id: req.params.recipeId },
+          include: [
+            {
+              model: User
+            },
+            {
+              model: Comment,
+              include: [User]
+            }
+          ]
+        })
+          .then(foundRecipe => {
+            res.send(foundRecipe)
+          })
           .catch(err => console.log(err))
       })
       .catch(err => console.log(err))