Created
July 23, 2021 07:22
-
-
Save patwadeepak/01c21ac5af4c1657aaff08ecd79cb0bb to your computer and use it in GitHub Desktop.
The Context Way - All Files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Posts from "./Components/Posts"; | |
import PostForm from "./Components/PostForm"; | |
import { useEffect, createContext, useReducer } from "react"; | |
const appReducer = (state, action) => { | |
switch (action.type) { | |
case "FETCH_POSTS": | |
return [...state, ...action.payload]; | |
case "NEW_POST": | |
return [action.payload, ...state]; | |
default: | |
return state; | |
} | |
}; | |
export const AppContext = createContext(); | |
const App = () => { | |
const [state, dispatch] = useReducer(appReducer, []); | |
return ( | |
<AppContext.Provider value={[state, dispatch]}> | |
<div className="app-container"> | |
<h1>Blog Post App using Old ways of Redux</h1> | |
<PostForm /> | |
<Posts /> | |
</div> | |
</AppContext.Provider> | |
); | |
}; | |
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import "../CSS/Post.css"; | |
import { useEffect, useContext } from "react"; | |
import { AppContext } from "../App"; | |
const Posts = () => { | |
const [state, dispatch] = useContext(AppContext); | |
useEffect(() => { | |
fetch("http://jsonplaceholder.typicode.com/posts") | |
.then((res) => res.json()) | |
.then((posts) => { | |
dispatch({ type: "FETCH_POSTS", payload: posts }); | |
}); | |
}, []); | |
return ( | |
<div className="posts-container"> | |
<div> | |
<h1>{"Recent Posts"}</h1> | |
</div> | |
{state.map((post, index) => ( | |
<div key={index}> | |
<div className="post-title">{post.title}</div> | |
<div className="post-body">{post.body}</div> | |
</div> | |
))} | |
</div> | |
); | |
}; | |
export default Posts; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import "../CSS/PostForm.css"; | |
import { useState, useContext } from "react"; | |
import { AppContext } from "../App"; | |
const PostForm = () => { | |
const [state, dispatch] = useContext(AppContext); | |
const [formData, setFormData] = useState({ | |
title: "", | |
body: "", | |
}); | |
const handleChange = (ev) => { | |
setFormData({ | |
...formData, | |
[ev.target.name]: ev.target.value, | |
}); | |
}; | |
const handlePostIt = (ev) => { | |
ev.preventDefault(); | |
dispatch({ type: "NEW_POST", payload: formData }); | |
setFormData({ title: "", body: "" }); | |
}; | |
return ( | |
<div className="postform-container"> | |
<label htmlFor="title">Title</label> | |
<input | |
type="text" | |
name="title" | |
onChange={handleChange} | |
value={formData.title} | |
/> | |
<br /> | |
<label htmlFor="body">Post</label> | |
<textarea name="body" onChange={handleChange} value={formData.body} /> | |
<br /> | |
<button type="submit" onClick={handlePostIt}> | |
Post it | |
</button> | |
</div> | |
); | |
}; | |
export default PostForm; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment