diff --git a/02_lesson_starter/package-lock.json b/02_lesson_starter/package-lock.json index d52929d..47a5ccb 100644 --- a/02_lesson_starter/package-lock.json +++ b/02_lesson_starter/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@reduxjs/toolkit": "^1.8.0", + "date-fns": "^2.29.3", "prettier": "^2.8.4", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -5656,6 +5657,18 @@ "node": ">=10" } }, + "node_modules/date-fns": { + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==", + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -19905,6 +19918,11 @@ "whatwg-url": "^8.0.0" } }, + "date-fns": { + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==" + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/02_lesson_starter/package.json b/02_lesson_starter/package.json index 5d20c4a..4992dc7 100644 --- a/02_lesson_starter/package.json +++ b/02_lesson_starter/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@reduxjs/toolkit": "^1.8.0", + "date-fns": "^2.29.3", "prettier": "^2.8.4", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/02_lesson_starter/src/features/posts/PostsList.js b/02_lesson_starter/src/features/posts/PostsList.js index 67964d9..c897da5 100644 --- a/02_lesson_starter/src/features/posts/PostsList.js +++ b/02_lesson_starter/src/features/posts/PostsList.js @@ -1,6 +1,7 @@ import { useSelector } from "react-redux"; import { selectAllPosts } from "./postsSlice"; import PostAuthor from "./PostAuthor"; +import TimeAgo from "./TimeAgo"; const PostsList = () => { const posts = useSelector(selectAllPosts); @@ -11,6 +12,7 @@ const PostsList = () => {

{post.content.substring(0, 100)}

+

)); diff --git a/02_lesson_starter/src/features/posts/TimeAgo.js b/02_lesson_starter/src/features/posts/TimeAgo.js new file mode 100644 index 0000000..4cfd507 --- /dev/null +++ b/02_lesson_starter/src/features/posts/TimeAgo.js @@ -0,0 +1,18 @@ +import { parseISO, formatDistanceToNow } from "date-fns"; + +const TimeAgo = ({ timestamp }) => { + let timeAgo = ""; + if (timestamp) { + const date = parseISO(timestamp); + const timePeriod = formatDistanceToNow(date); + timeAgo = `${timePeriod} ago`; + } + + return ( + +   {timeAgo} + + ); +}; + +export default TimeAgo; diff --git a/02_lesson_starter/src/features/posts/postsSlice.js b/02_lesson_starter/src/features/posts/postsSlice.js index f93799f..406d984 100644 --- a/02_lesson_starter/src/features/posts/postsSlice.js +++ b/02_lesson_starter/src/features/posts/postsSlice.js @@ -1,15 +1,18 @@ import { createSlice, nanoid } from "@reduxjs/toolkit"; +import { sub } from "date-fns"; const initialState = [ { id: "1", title: "Learning Redux Toolkit", content: "I've heard good things.", + date: sub(new Date(), { minutes: 10 }).toISOString(), }, { id: "2", title: "Slice...", content: "The more I say slice, the more I want pizza.", + date: sub(new Date(), { minutes: 5 }).toISOString(), }, ]; @@ -29,6 +32,7 @@ const postsSlice = createSlice({ title, content, userId, + date: new Date().toISOString(), }, }; },