Jason
/
react_redux_toolkit
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: Jason:9261ffe06388d5664de93b461fbba39d491f0d2c
Branches Tags
Jason:03_lesson
Jason:02_lesson
..
compare: Jason:024b2b589dcd520c82b3263c4968d42bd076e992
Branches Tags
Jason:03_lesson
Jason:02_lesson

No commits in common. "9261ffe06388d5664de93b461fbba39d491f0d2c" and "024b2b589dcd520c82b3263c4968d42bd076e992" have entirely different histories.
9261ffe063 ... 024b2b589d

9 changed files with 68 additions and 206 deletions
Show Stats Expand all files Collapse all files

3
02_lesson_starter/.prettierrc.json
View File

@ -3,6 +3,5 @@
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"printWidth": 80,
"arrowParens": "always"
"printWidth": 80
}

68
02_lesson_starter/package-lock.json generated
View File

@ -9,7 +9,6 @@
"version": "0.1.0",
"dependencies": {
"@reduxjs/toolkit": "^1.8.0",
"axios": "^1.3.4",
"date-fns": "^2.29.3",
"prettier": "^2.8.4",
"react": "^17.0.2",
@ -4240,29 +4239,6 @@
"node": ">=4"
}
},
"node_modules/axios": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
"dependencies": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/axios/node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/axobject-query": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@ -7267,9 +7243,9 @@
"integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
},
"node_modules/follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
"version": "1.14.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
"funding": [
{
"type": "individual",
@ -12773,11 +12749,6 @@
"node": ">= 0.10"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/psl": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@ -18906,28 +18877,6 @@
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
"integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw=="
},
"axios": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
"requires": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
},
"dependencies": {
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
}
}
},
"axobject-query": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@ -21144,9 +21093,9 @@
"integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
},
"follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
"version": "1.14.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
},
"fork-ts-checker-webpack-plugin": {
"version": "6.5.0",
@ -24961,11 +24910,6 @@
}
}
},
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"psl": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",

1
02_lesson_starter/package.json
View File

@ -4,7 +4,6 @@
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.8.0",
"axios": "^1.3.4",
"date-fns": "^2.29.3",
"prettier": "^2.8.4",
"react": "^17.0.2",

19
02_lesson_starter/src/features/posts/PostsExcerpt.js
View File

@ -1,19 +0,0 @@
import ReactionButtons from './ReactionButtons';
import PostAuthor from './PostAuthor';
import TimeAgo from './TimeAgo';
const PostsExcerpt = ({ post }) => {
return (
<article>
<h3>{post.title}</h3>
<p>{post.body.substring(0, 100)}</p>
<p className="postCredit">
<PostAuthor userId={post.userId} />
<TimeAgo timestamp={post.date} />
</p>
<ReactionButtons post={post} />
</article>
);
};
export default PostsExcerpt;

46
02_lesson_starter/src/features/posts/PostsList.js
View File

@ -1,44 +1,32 @@
import { useDispatch, useSelector } from 'react-redux';
import {
fetchPosts,
getPostsError,
getPostsStatus,
selectAllPosts,
} from './postsSlice';
import PostsExcerpt from './PostsExcerpt';
import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { selectAllPosts } from './postsSlice';
import PostAuthor from './PostAuthor';
import TimeAgo from './TimeAgo';
import ReactionButtons from './ReactionButton';
const PostsList = () => {
const dispatch = useDispatch();
const posts = useSelector(selectAllPosts);
const postStatus = useSelector(getPostsStatus);
const error = useSelector(getPostsError);
useEffect(() => {
if (postStatus === 'idle') {
dispatch(fetchPosts());
}
}, [postStatus, dispatch]);
let content;
if (postStatus === 'loading') {
content = <p>"Loading...</p>;
} else if (postStatus === 'succeeded') {
const orderedPosts = posts
.slice()
.sort((a, b) => b.date.localeCompare(a.date));
content = orderedPosts.map((post) => (
<PostsExcerpt key={post.id} post={post} />
const renderedPosts = orderedPosts.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>
));
} else if (postStatus === 'failed') {
content = <p>{error}</p>;
}
return (
<section>
<h2>Posts</h2>
{content}
{renderedPosts}
</section>
);
};

0
02_lesson_starter/src/features/posts/ReactionButtons.js → 02_lesson_starter/src/features/posts/ReactionButton.js
View File

100
02_lesson_starter/src/features/posts/postsSlice.js
View File

@ -1,43 +1,42 @@
import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit';
import { sub } from 'date-fns';
import axios from 'axios';
import { createSlice, nanoid } from "@reduxjs/toolkit";
import { sub } from "date-fns";
const POSTS_URL = 'https://jsonplaceholder.typicode.com/posts';
const initialState = {
posts: [],
status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed'
error: null,
};
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
try {
const response = await axios.get(POSTS_URL);
return [...response.data];
} catch (err) {
return err.message;
}
});
export const addNewPost = createAsyncThunk(
'posts/addNewPost',
async (initialPost) => {
try {
const response = await axios.post(POSTS_URL, initialPost);
return response.data;
} catch (err) {
return err.message;
}
}
);
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,
},
},
];
const postsSlice = createSlice({
name: 'posts',
name: "posts",
initialState,
reducers: {
postAdded: {
reducer: (state, action) => {
state.posts.push(action.payload);
state.push(action.payload);
},
prepare(title, content, userId) {
// adding new post also need userid (author)
@ -61,46 +60,15 @@ const postsSlice = createSlice({
},
reactionAdded(state, action) {
const { postId, reaction } = action.payload;
const existingPost = state.posts.find((post) => post.id === postId);
const existingPost = state.find((post) => post.id === postId);
if (existingPost) {
existingPost.reactions[reaction]++; // this kind of immer action can only happen in slice
}
},
},
extraReducers(builder) {
// use traditional redux way of defining reducers
builder
.addCase(fetchPosts.pending, (state, action) => {
state.status = 'loading';
})
.addCase(fetchPosts.fulfilled, (state, action) => {
state.status = 'succeeded';
// Adding date and reactions
let min = 1;
const loadedPosts = action.payload.map((post) => {
post.date = sub(new Date(), { minutes: min++ }).toISOString();
post.reactions = {
thumbsUp: 0,
horray: 0,
heart: 0,
rocket: 0,
eyes: 0,
};
return post;
});
// Add an fetched posts to the array
state.posts = state.posts.concat(loadedPosts);
})
.addCase(fetchPosts.rejected, (state, action) => {
state.status = 'failed';
state.error = action.error.message;
});
},
});
export const selectAllPosts = (state) => state.posts.posts; // first posts is meaning name of the slice
export const getPostsStatus = (state) => state.posts.status;
export const getPostsError = (state) => state.posts.error;
export const selectAllPosts = (state) => state.posts;
export const { postAdded, reactionAdded } = postsSlice.actions;

28
02_lesson_starter/src/features/users/usersSlice.js
View File

@ -1,28 +1,14 @@
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';
const USERS_URL = 'https://jsonplaceholder.typicode.com/users';
const initialState = [];
export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
try {
const response = await axios.get(USERS_URL);
return [...response.data];
} catch (err) {
return err.message;
}
});
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',
name: "users",
initialState,
reducers: {},
extraReducers(builder) {
builder.addCase(fetchUsers.fulfilled, (state, action) => {
return action.payload;
});
},
});
// Selectors

3
02_lesson_starter/src/index.js
View File

@ -4,9 +4,6 @@ import './index.css';
import App from './App';
import { store } from './app/store';
import { Provider } from 'react-redux';
import { fetchUsers } from './features/users/usersSlice';
store.dispatch(fetchUsers()); // Fetch users before rendering page
ReactDOM.render(
<React.StrictMode>