02_lesson_starter/.prettierrc.json

@@ -1,7 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "tabWidth": 2,
-  "semi": true,
-  "printWidth": 80
-}

02_lesson_starter/package-lock.json

@@ -9,7 +9,6 @@
       "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",
@@ -5657,18 +5656,6 @@
         "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",
@@ -19918,11 +19905,6 @@
         "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",

02_lesson_starter/package.json

@@ -4,7 +4,6 @@
   "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",

02_lesson_starter/src/app/store.js

@@ -1,7 +1,6 @@
 import { configureStore } from "@reduxjs/toolkit";
 import postsReducer from "../features/posts/postsSlice";
-import usersReducer from "../features/users/usersSlice";
 
 export const store = configureStore({
-  reducer: { posts: postsReducer, users: usersReducer },
+  reducer: { posts: postsReducer },
 });

02_lesson_starter/src/features/posts/AddPostForm.js

@@ -1,38 +1,23 @@
 import { useState } from "react";
 import { postAdded } from "./postsSlice";
-import { useDispatch, useSelector } from "react-redux";
-
-import { selectAllUsers } from "../users/usersSlice";
+import { useDispatch } from "react-redux";
 
 const AddPostForm = () => {
-  const dispatch = useDispatch();
-
   const [title, setTitle] = useState(""); // Temporary state for adding information in form
   const [content, setContent] = useState("");
-  const [userId, setUserId] = useState("");
-
-  const users = useSelector(selectAllUsers); // get users from Redux store
+  const dispatch = useDispatch();
 
   const onTitleChanged = (e) => setTitle(e.target.value);
   const onContentChanged = (e) => setContent(e.target.value);
-  const onAuthorChanged = (e) => setUserId(e.target.value);
 
   const onSavePostClicked = () => {
     if (title && content) {
-      dispatch(postAdded(title, content, userId));
+      dispatch(postAdded(title, content));
       setTitle("");
       setContent("");
     }
   };
 
-  const canSave = Boolean(title) && Boolean(content) && Boolean(userId);
-
-  const usersOptions = users.map((user) => (
-    <option key={user.id} value={user.id}>
-      {user.name}
-    </option>
-  ));
-
   return (
     <section>
       <h2>Add a New Post</h2>
@@ -45,11 +30,6 @@ const AddPostForm = () => {
           value={title}
           onChange={onTitleChanged}
         />
-        <label htmlFor="postAuthor">Author:</label>
-        <select id="postAuthor" value={userId} onChange={onAuthorChanged}>
-          <option value=""></option>
-          {usersOptions}
-        </select>
         <label htmlFor="postContent">Content:</label>
         <textarea
           id="postContent"
@@ -57,7 +37,7 @@ const AddPostForm = () => {
           value={content}
           onChange={onContentChanged}
         />
-        <button type="button" onClick={onSavePostClicked} disabled={!canSave}>
+        <button type="button" onClick={onSavePostClicked}>
           Save Post
         </button>
       </form>

02_lesson_starter/src/features/posts/PostAuthor.js

@@ -1,10 +0,0 @@
-import { useSelector } from "react-redux";
-import { selectAllUsers } from "../users/usersSlice";
-
-const PostAuthor = ({ userId }) => {
-  const users = useSelector(selectAllUsers);
-  const author = users.find((user) => user.id === userId);
-  return <span>by {author ? author.name : "Unknown author"}</span>;
-};
-
-export default PostAuthor;

02_lesson_starter/src/features/posts/PostsList.js

@@ -1,25 +1,13 @@
-import { useSelector } from 'react-redux';
-import { selectAllPosts } from './postsSlice';
-import PostAuthor from './PostAuthor';
-import TimeAgo from './TimeAgo';
-import ReactionButtons from './ReactionButton';
+import { useSelector } from "react-redux";
+import { selectAllPosts } from "./postsSlice";
 
 const PostsList = () => {
   const posts = useSelector(selectAllPosts);
 
-  const orderedPosts = posts
-    .slice()
-    .sort((a, b) => b.date.localeCompare(a.date));
-
-  const renderedPosts = orderedPosts.map((post) => (
+  const renderedPosts = posts.map((post) => (
     <article key={post.id}>
       <h3>{post.title}</h3>
       <p>{post.content.substring(0, 100)}</p>
-      <p className="postCredit">
-        <PostAuthor userId={post.userId} />
-        <TimeAgo timestamp={post.date} />
-      </p>
-      <ReactionButtons post={post} />
     </article>
   ));
 

02_lesson_starter/src/features/posts/ReactionButton.js

@@ -1,32 +0,0 @@
-import { useDispatch } from 'react-redux';
-import { reactionAdded } from './postsSlice';
-
-const reactionEmoji = {
-  thumbsUp: '👍',
-  wow: '😮',
-  heart: '❤️',
-  rocket: '🚀',
-  coffee: '☕',
-};
-
-const ReactionButtons = ({ post }) => {
-  const dispatch = useDispatch();
-  const reactionButtons = Object.entries(reactionEmoji).map(([name, emoji]) => {
-    return (
-      <button
-        key={name}
-        type="button"
-        className="reactionButton"
-        onClick={() =>
-          dispatch(reactionAdded({ postId: post.id, reaction: name }))
-        }
-      >
-        {emoji} {post.reactions[name]}
-      </button>
-    );
-  });
-
-  return <div>{reactionButtons}</div>;
-};
-
-export default ReactionButtons;

02_lesson_starter/src/features/posts/TimeAgo.js

@@ -1,18 +0,0 @@
-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 (
-    <span title={timestamp}>
-      &nbsp; <i>{timeAgo}</i>
-    </span>
-  );
-};
-
-export default TimeAgo;

02_lesson_starter/src/features/posts/postsSlice.js

@@ -1,32 +1,15 @@
 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(),
-    reactions: {
-      thumbsUp: 0,
-      wow: 0,
-      heart: 0,
-      rocket: 0,
-      coffee: 0,
-    },
   },
   {
     id: "2",
     title: "Slice...",
     content: "The more I say slice, the more I want pizza.",
-    date: sub(new Date(), { minutes: 5 }).toISOString(),
-    reactions: {
-      thumbsUp: 0,
-      wow: 0,
-      heart: 0,
-      rocket: 0,
-      coffee: 0,
-    },
   },
 ];
 
@@ -38,38 +21,21 @@ const postsSlice = createSlice({
       reducer: (state, action) => {
         state.push(action.payload);
       },
-      prepare(title, content, userId) {
-        // adding new post also need userid (author)
+      prepare(title, content) {
         return {
           payload: {
             id: nanoid(),
             title,
             content,
-            userId,
-            date: new Date().toISOString(),
-            reactions: {
-              thumbsUp: 0,
-              wow: 0,
-              heart: 0,
-              rocket: 0,
-              coffee: 0,
-            },
           },
         };
       },
     },
-    reactionAdded(state, action) {
-      const { postId, reaction } = action.payload;
-      const existingPost = state.find((post) => post.id === postId);
-      if (existingPost) {
-        existingPost.reactions[reaction]++; // this kind of immer action can only happen in slice
-      }
-    },
   },
 });
 
 export const selectAllPosts = (state) => state.posts;
 
-export const { postAdded, reactionAdded } = postsSlice.actions;
+export const { postAdded } = postsSlice.actions;
 
 export default postsSlice.reducer;

02_lesson_starter/src/features/users/usersSlice.js

@@ -1,17 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit";
-const initialState = [
-  { id: "0", name: "Dude Lebowski" },
-  { id: "1", name: "Neil Young" },
-  { id: "2", name: "Dave Gray" },
-];
-
-const usersSlice = createSlice({
-  name: "users",
-  initialState,
-  reducers: {},
-});
-
-// Selectors
-export const selectAllUsers = (state) => state.users;
-
-export default usersSlice.reducer;