From 712199583ac363ffd6ad89b139e29fe5b94e65bf Mon Sep 17 00:00:00 2001 From: rocky1638 Date: Fri, 28 Sep 2018 19:39:27 -0400 Subject: [PATCH] Added time to comments, fixed a bunch of redux stuff --- .gitignore | 2 +- .vscode/settings.json | 8 -------- client/src/components/Comment.js | 12 +++++++++++- client/src/components/RecipeCard.js | 5 +++-- client/src/reducers/reducer_recipe.js | 23 ++++++++++++++++++++--- client/src/scenes/Recipe.js | 4 ++-- client/src/utils/generateDaysAgoText.js | 11 +++++++++++ client/src/utils/index.js | 7 +++++++ package.json | 1 + routes/commentRoutes.js | 17 +++++++++++++++-- 10 files changed, 71 insertions(+), 19 deletions(-) delete mode 100644 .vscode/settings.json create mode 100644 client/src/utils/generateDaysAgoText.js create mode 100644 client/src/utils/index.js diff --git a/.gitignore b/.gitignore index 3d419c0..412b664 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,3 @@ node_modules dev.js -.vscode \ No newline at end of file +.vscode diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 140e7eb..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "window.zoomLevel": 0, - "eslint.autoFixOnSave": true, - "emmet.includeLanguages": { - "javascript": "javascriptreact" - }, - "workbench.colorTheme": "One Dark Pro" -} diff --git a/client/src/components/Comment.js b/client/src/components/Comment.js index 886a5f9..f9c5a63 100644 --- a/client/src/components/Comment.js +++ b/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 }) => ( -
+
@@ -11,6 +18,9 @@ const Comment = ({ comment, ...otherProps }) => (
{comment.rating} ★
+
+ {calculateDate(comment.createdAt)} +
{comment.content} diff --git a/client/src/components/RecipeCard.js b/client/src/components/RecipeCard.js index c61b79f..12d8b61 100644 --- a/client/src/components/RecipeCard.js +++ b/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 ( - +
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 } diff --git a/client/src/scenes/Recipe.js b/client/src/scenes/Recipe.js index 6ff3087..8e9b52b 100644 --- a/client/src/scenes/Recipe.js +++ b/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() { diff --git a/client/src/utils/generateDaysAgoText.js b/client/src/utils/generateDaysAgoText.js new file mode 100644 index 0000000..d052c7f --- /dev/null +++ b/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 \ No newline at end of file diff --git a/client/src/utils/index.js b/client/src/utils/index.js new file mode 100644 index 0000000..ebf6cbd --- /dev/null +++ b/client/src/utils/index.js @@ -0,0 +1,7 @@ +import shortenText from "./shortenText" +import generateDaysAgoText from "./generateDaysAgoText" + +export { + shortenText, + generateDaysAgoText +} \ No newline at end of file diff --git a/package.json b/package.json index 7d81174..0615b4f 100644 --- a/package.json +++ b/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", diff --git a/routes/commentRoutes.js b/routes/commentRoutes.js index 1297319..e81c7ca 100644 --- a/routes/commentRoutes.js +++ b/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))