├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── api
    │   └── posts.js
    ├── Footer.js
    ├── Feed.js
    ├── About.js
    ├── Missing.js
    ├── index.js
    ├── Header.js
    ├── Home.js
    ├── Post.js
    ├── hooks
    │   ├── useWindowSize.js
    │   └── useAxiosFetch.js
    ├── Nav.js
    ├── NewPost.js
    ├── PostPage.js
    ├── EditPost.js
    ├── App.js
    └── index.css
├── .gitignore
├── README.md
├── package.json
└── data
    └── db.json


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitdagray/react_custom_hooks/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitdagray/react_custom_hooks/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitdagray/react_custom_hooks/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/api/posts.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | 
3 | export default axios.create({
4 |     baseURL: 'http://localhost:3500'
5 | });


--------------------------------------------------------------------------------
/src/Footer.js:
--------------------------------------------------------------------------------
 1 | const Footer = () => {
 2 |     const today = new Date();
 3 |     return (
 4 |         <footer className='Footer'>
 5 |             <p>Copyright &copy; {today.getFullYear()}</p>
 6 |         </footer>
 7 |     )
 8 | }
 9 | 
10 | export default Footer
11 | 


--------------------------------------------------------------------------------
/src/Feed.js:
--------------------------------------------------------------------------------
 1 | import Post from './Post';
 2 | 
 3 | const Feed = ({ posts }) => {
 4 |     return (
 5 |         <>
 6 |             {posts.map(post => (
 7 |                 <Post key={post.id} post={post} />
 8 |             ))}
 9 |         </>
10 |     )
11 | }
12 | 
13 | export default Feed
14 | 


--------------------------------------------------------------------------------
/src/About.js:
--------------------------------------------------------------------------------
 1 | const About = () => {
 2 |     return (
 3 |         <main className='About'>
 4 |             <h2>About</h2>
 5 |             <p style={{ marginTop: "1rem" }}>This blog app is a project in the Learn React tutorial series.</p>
 6 |         </main>
 7 |     )
 8 | }
 9 | 
10 | export default About
11 | 


--------------------------------------------------------------------------------
/src/Missing.js:
--------------------------------------------------------------------------------
 1 | import { Link } from 'react-router-dom';
 2 | 
 3 | const Missing = () => {
 4 |     return (
 5 |         <main className='Missing'>
 6 |             <h2>Page Not Found</h2>
 7 |             <p>Well, that's disappointing.</p>
 8 |             <p>
 9 |                 <Link to='/'>Visit Our Homepage</Link>
10 |             </p>
11 |         </main>
12 |     )
13 | }
14 | 
15 | export default Missing
16 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import { BrowserRouter as Router, Route } from 'react-router-dom';
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <Router>
10 |       <Route path="/" component={App} />
11 |     </Router>
12 |   </React.StrictMode>,
13 |   document.getElementById('root')
14 | );
15 | 
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/Header.js:
--------------------------------------------------------------------------------
 1 | import { FaLaptop, FaTabletAlt, FaMobileAlt } from 'react-icons/fa';
 2 | 
 3 | const Header = ({ title, width }) => {
 4 |     return (
 5 |         <header className="Header">
 6 |             <h1>{title}</h1>
 7 |             {width < 768 ? <FaMobileAlt />
 8 |                 : width < 992 ? <FaTabletAlt />
 9 |                     : <FaLaptop />}
10 |         </header>
11 |     )
12 | }
13 | 
14 | export default Header
15 | 


--------------------------------------------------------------------------------
/src/Home.js:
--------------------------------------------------------------------------------
 1 | import Feed from './Feed';
 2 | 
 3 | const Home = ({ posts, fetchError, isLoading }) => {
 4 |     return (
 5 |         <main className="Home">
 6 |             {isLoading && <p className="statusMsg">Loading posts...</p>}
 7 |             {!isLoading && fetchError && <p className="statusMsg" style={{ color: "red" }}>{fetchError}</p>}
 8 |             {!isLoading && !fetchError && (posts.length ? <Feed posts={posts} /> : <p className="statusMsg">No posts to display.</p>)}
 9 |         </main>
10 |     )
11 | }
12 | 
13 | export default Home
14 | 


--------------------------------------------------------------------------------
/src/Post.js:
--------------------------------------------------------------------------------
 1 | import { Link } from 'react-router-dom';
 2 | 
 3 | const Post = ({ post }) => {
 4 |     return (
 5 |         <article className="post">
 6 |             <Link to={`/post/${post.id}`}>
 7 |                 <h2>{post.title}</h2>
 8 |                 <p className="postDate">{post.datetime}</p>
 9 |             </Link>
10 |             <p className="postBody">{
11 |                 (post.body).length <= 25
12 |                     ? post.body
13 |                     : `${(post.body).slice(0, 25)}...`
14 |             }</p>
15 |         </article>
16 |     )
17 | }
18 | 
19 | export default Post
20 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/hooks/useWindowSize.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | 
 3 | const useWindowSize = () => {
 4 |     const [windowSize, setWindowSize] = useState({
 5 |         width: undefined,
 6 |         height: undefined
 7 |     });
 8 | 
 9 |     useEffect(() => {
10 | 
11 |         const handleResize = () => {
12 |             setWindowSize({
13 |                 width: window.innerWidth,
14 |                 height: window.innerHeight
15 |             });
16 |         }
17 | 
18 |         handleResize();
19 | 
20 |         window.addEventListener("resize", handleResize);
21 | 
22 |         return () => window.removeEventListener("resize", handleResize);
23 |     }, [])
24 | 
25 |     return windowSize;
26 | }
27 | 
28 | export default useWindowSize;
29 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # "React JS - Custom Hooks"
 2 | 
 3 | ✅ [Check out my YouTube Channel with all of my tutorials](https://www.youtube.com/DaveGrayTeachesCode).
 4 | 
 5 | **Description:**
 6 | 
 7 | This repository shares the code applied during the Youtube tutorial. The tutorial is part of a [Learn React Playlist](https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp) on my channel.  
 8 | 
 9 | [YouTube Tutorial](https://youtu.be/tBuceoEGFhI) for this repository.
10 | 
11 | I suggest completing my [8 hour JavaScript course tutorial video](https://youtu.be/EfAl9bwzVZk) if you are new to Javascript.
12 | 
13 | ### Academic Honesty
14 | 
15 | **DO NOT COPY FOR AN ASSIGNMENT** - Avoid plagiargism and adhere to the spirit of this [Academic Honesty Policy](https://www.freecodecamp.org/news/academic-honesty-policy/).
16 | 


--------------------------------------------------------------------------------
/src/Nav.js:
--------------------------------------------------------------------------------
 1 | import { Link } from 'react-router-dom';
 2 | 
 3 | const Nav = ({ search, setSearch }) => {
 4 |     return (
 5 |         <nav className="Nav">
 6 |             <form className="searchForm" onSubmit={(e) => e.preventDefault()}>
 7 |                 <label htmlFor="search">Search Posts</label>
 8 |                 <input
 9 |                     id="search"
10 |                     type="text"
11 |                     placeholder="Search Posts"
12 |                     value={search}
13 |                     onChange={(e) => setSearch(e.target.value)}
14 |                 />
15 |             </form>
16 |             <ul>
17 |                 <li><Link to="/">Home</Link></li>
18 |                 <li><Link to="/post">Post</Link></li>
19 |                 <li><Link to="/about">About</Link></li>
20 |             </ul>
21 |         </nav>
22 |     )
23 | }
24 | 
25 | export default Nav
26 | 


--------------------------------------------------------------------------------
/src/NewPost.js:
--------------------------------------------------------------------------------
 1 | const NewPost = ({
 2 |     handleSubmit, postTitle, setPostTitle, postBody, setPostBody
 3 | }) => {
 4 |     return (
 5 |         <main className="NewPost">
 6 |             <h2>New Post</h2>
 7 |             <form className="newPostForm" onSubmit={handleSubmit}>
 8 |                 <label htmlFor="postTitle">Title:</label>
 9 |                 <input
10 |                     id="postTitle"
11 |                     type="text"
12 |                     required
13 |                     value={postTitle}
14 |                     onChange={(e) => setPostTitle(e.target.value)}
15 |                 />
16 |                 <label htmlFor="postBody">Post:</label>
17 |                 <textarea
18 |                     id="postBody"
19 |                     required
20 |                     value={postBody}
21 |                     onChange={(e) => setPostBody(e.target.value)}
22 |                 />
23 |                 <button type="submit">Submit</button>
24 |             </form>
25 |         </main>
26 |     )
27 | }
28 | 
29 | export default NewPost
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "20tut",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.14.1",
 7 |     "@testing-library/react": "^11.2.7",
 8 |     "@testing-library/user-event": "^12.8.3",
 9 |     "axios": "^0.21.1",
10 |     "date-fns": "^2.22.1",
11 |     "react": "^17.0.2",
12 |     "react-dom": "^17.0.2",
13 |     "react-icons": "^4.2.0",
14 |     "react-router-dom": "^5.2.0",
15 |     "react-scripts": "4.0.3",
16 |     "web-vitals": "^1.1.2"
17 |   },
18 |   "scripts": {
19 |     "start": "react-scripts start",
20 |     "build": "react-scripts build",
21 |     "test": "react-scripts test",
22 |     "eject": "react-scripts eject"
23 |   },
24 |   "eslintConfig": {
25 |     "extends": [
26 |       "react-app",
27 |       "react-app/jest"
28 |     ]
29 |   },
30 |   "browserslist": {
31 |     "production": [
32 |       ">0.2%",
33 |       "not dead",
34 |       "not op_mini all"
35 |     ],
36 |     "development": [
37 |       "last 1 chrome version",
38 |       "last 1 firefox version",
39 |       "last 1 safari version"
40 |     ]
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/PostPage.js:
--------------------------------------------------------------------------------
 1 | import { useParams, Link } from "react-router-dom";
 2 | 
 3 | const PostPage = ({ posts, handleDelete }) => {
 4 |     const { id } = useParams();
 5 |     const post = posts.find(post => (post.id).toString() === id);
 6 |     return (
 7 |         <main className="PostPage">
 8 |             <article className="post">
 9 |                 {post &&
10 |                     <>
11 |                         <h2>{post.title}</h2>
12 |                         <p className="postDate">{post.datetime}</p>
13 |                         <p className="postBody">{post.body}</p>
14 |                         <Link to={`/edit/${post.id}`}><button className="editButton">Edit Post</button></Link>
15 |                         <button className="deleteButton" onClick={() => handleDelete(post.id)}>
16 |                             Delete Post
17 |                         </button>
18 |                     </>
19 |                 }
20 |                 {!post &&
21 |                     <>
22 |                         <h2>Post Not Found</h2>
23 |                         <p>Well, that's disappointing.</p>
24 |                         <p>
25 |                             <Link to='/'>Visit Our Homepage</Link>
26 |                         </p>
27 |                     </>
28 |                 }
29 |             </article>
30 |         </main>
31 |     )
32 | }
33 | 
34 | export default PostPage
35 | 


--------------------------------------------------------------------------------
/src/hooks/useAxiosFetch.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | import axios from 'axios';
 3 | 
 4 | const useAxiosFetch = (dataUrl) => {
 5 |     const [data, setData] = useState([]);
 6 |     const [fetchError, setFetchError] = useState(null);
 7 |     const [isLoading, setIsLoading] = useState(false);
 8 | 
 9 |     useEffect(() => {
10 |         let isMounted = true;
11 |         const source = axios.CancelToken.source();
12 | 
13 |         const fetchData = async (url) => {
14 |             setIsLoading(true);
15 |             try {
16 |                 const response = await axios.get(url, {
17 |                     cancelToken: source.token
18 |                 });
19 |                 if (isMounted) {
20 |                     setData(response.data);
21 |                     setFetchError(null);
22 |                 }
23 |             } catch (err) {
24 |                 if (isMounted) {
25 |                     setFetchError(err.message);
26 |                     setData([]);
27 |                 }
28 |             } finally {
29 |                 isMounted && setIsLoading(false);
30 |             }
31 |         }
32 | 
33 |         fetchData(dataUrl);
34 | 
35 |         const cleanUp = () => {
36 |             isMounted = false;
37 |             source.cancel();
38 |         }
39 | 
40 |         return cleanUp;
41 |     }, [dataUrl]);
42 | 
43 |     return { data, fetchError, isLoading };
44 | }
45 | 
46 | export default useAxiosFetch;


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/data/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "posts": [
 3 |     {
 4 |       "id": 1,
 5 |       "title": "1st post",
 6 |       "datetime": "July 16, 2021 11:47:39 AM",
 7 |       "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 8 |     },
 9 |     {
10 |       "id": 2,
11 |       "title": "Second post",
12 |       "datetime": "July 16, 2021 11:47:48 AM",
13 |       "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. two"
14 |     },
15 |     {
16 |       "id": 3,
17 |       "title": "Number Three",
18 |       "datetime": "July 16, 2021 11:48:01 AM",
19 |       "body": "Third post... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
20 |     },
21 |     {
22 |       "id": 4,
23 |       "title": "Testing a 4th post",
24 |       "datetime": "August 02, 2021 11:46:27 AM",
25 |       "body": "Some more testing paragraphs!"
26 |     }
27 |   ]
28 | }


--------------------------------------------------------------------------------
/src/EditPost.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import { useParams, Link } from "react-router-dom";
 3 | 
 4 | const EditPost = ({
 5 |     posts, handleEdit, editBody, setEditBody, editTitle, setEditTitle
 6 | }) => {
 7 |     const { id } = useParams();
 8 |     const post = posts.find(post => (post.id).toString() === id);
 9 | 
10 |     useEffect(() => {
11 |         if (post) {
12 |             setEditTitle(post.title);
13 |             setEditBody(post.body);
14 |         }
15 |     }, [post, setEditTitle, setEditBody])
16 | 
17 |     return (
18 |         <main className="NewPost">
19 |             {editTitle &&
20 |                 <>
21 |                     <h2>Edit Post</h2>
22 |                     <form className="newPostForm" onSubmit={(e) => e.preventDefault()}>
23 |                         <label htmlFor="postTitle">Title:</label>
24 |                         <input
25 |                             id="postTitle"
26 |                             type="text"
27 |                             required
28 |                             value={editTitle}
29 |                             onChange={(e) => setEditTitle(e.target.value)}
30 |                         />
31 |                         <label htmlFor="postBody">Post:</label>
32 |                         <textarea
33 |                             id="postBody"
34 |                             required
35 |                             value={editBody}
36 |                             onChange={(e) => setEditBody(e.target.value)}
37 |                         />
38 |                         <button type="submit" onClick={() => handleEdit(post.id)}>Submit</button>
39 |                     </form>
40 |                 </>
41 |             }
42 |             {!editTitle &&
43 |                 <>
44 |                     <h2>Post Not Found</h2>
45 |                     <p>Well, that's disappointing.</p>
46 |                     <p>
47 |                         <Link to='/'>Visit Our Homepage</Link>
48 |                     </p>
49 |                 </>
50 |             }
51 |         </main>
52 |     )
53 | }
54 | 
55 | export default EditPost
56 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import Header from './Header';
  2 | import Nav from './Nav';
  3 | import Footer from './Footer';
  4 | import Home from './Home';
  5 | import NewPost from './NewPost';
  6 | import PostPage from './PostPage';
  7 | import EditPost from './EditPost';
  8 | import About from './About';
  9 | import Missing from './Missing';
 10 | import { Route, Switch, useHistory } from 'react-router-dom';
 11 | import { useState, useEffect } from 'react';
 12 | import { format } from 'date-fns';
 13 | import api from './api/posts';
 14 | import useWindowSize from './hooks/useWindowSize';
 15 | import useAxiosFetch from './hooks/useAxiosFetch';
 16 | 
 17 | function App() {
 18 |   const [posts, setPosts] = useState([])
 19 |   const [search, setSearch] = useState('');
 20 |   const [searchResults, setSearchResults] = useState([]);
 21 |   const [postTitle, setPostTitle] = useState('');
 22 |   const [postBody, setPostBody] = useState('');
 23 |   const [editTitle, setEditTitle] = useState('');
 24 |   const [editBody, setEditBody] = useState('');
 25 |   const history = useHistory();
 26 |   const { width } = useWindowSize();
 27 | 
 28 |   const { data, fetchError, isLoading } = useAxiosFetch('http://localhost:3500/posts');
 29 | 
 30 |   useEffect(() => {
 31 |     setPosts(data);
 32 |   }, [data])
 33 | 
 34 |   useEffect(() => {
 35 |     const filteredResults = posts.filter((post) =>
 36 |       ((post.body).toLowerCase()).includes(search.toLowerCase())
 37 |       || ((post.title).toLowerCase()).includes(search.toLowerCase()));
 38 | 
 39 |     setSearchResults(filteredResults.reverse());
 40 |   }, [posts, search])
 41 | 
 42 |   const handleSubmit = async (e) => {
 43 |     e.preventDefault();
 44 |     const id = posts.length ? posts[posts.length - 1].id + 1 : 1;
 45 |     const datetime = format(new Date(), 'MMMM dd, yyyy pp');
 46 |     const newPost = { id, title: postTitle, datetime, body: postBody };
 47 |     try {
 48 |       const response = await api.post('/posts', newPost);
 49 |       const allPosts = [...posts, response.data];
 50 |       setPosts(allPosts);
 51 |       setPostTitle('');
 52 |       setPostBody('');
 53 |       history.push('/');
 54 |     } catch (err) {
 55 |       console.log(`Error: ${err.message}`);
 56 |     }
 57 |   }
 58 | 
 59 |   const handleEdit = async (id) => {
 60 |     const datetime = format(new Date(), 'MMMM dd, yyyy pp');
 61 |     const updatedPost = { id, title: editTitle, datetime, body: editBody };
 62 |     try {
 63 |       const response = await api.put(`/posts/${id}`, updatedPost);
 64 |       setPosts(posts.map(post => post.id === id ? { ...response.data } : post));
 65 |       setEditTitle('');
 66 |       setEditBody('');
 67 |       history.push('/');
 68 |     } catch (err) {
 69 |       console.log(`Error: ${err.message}`);
 70 |     }
 71 |   }
 72 | 
 73 |   const handleDelete = async (id) => {
 74 |     try {
 75 |       await api.delete(`/posts/${id}`);
 76 |       const postsList = posts.filter(post => post.id !== id);
 77 |       setPosts(postsList);
 78 |       history.push('/');
 79 |     } catch (err) {
 80 |       console.log(`Error: ${err.message}`);
 81 |     }
 82 |   }
 83 | 
 84 |   return (
 85 |     <div className="App">
 86 |       <Header title="React JS Blog" width={width} />
 87 |       <Nav search={search} setSearch={setSearch} />
 88 |       <Switch>
 89 |         <Route exact path="/">
 90 |           <Home
 91 |             posts={searchResults}
 92 |             fetchError={fetchError}
 93 |             isLoading={isLoading}
 94 |           />
 95 |         </Route>
 96 |         <Route exact path="/post">
 97 |           <NewPost
 98 |             handleSubmit={handleSubmit}
 99 |             postTitle={postTitle}
100 |             setPostTitle={setPostTitle}
101 |             postBody={postBody}
102 |             setPostBody={setPostBody}
103 |           />
104 |         </Route>
105 |         <Route path="/edit/:id">
106 |           <EditPost
107 |             posts={posts}
108 |             handleEdit={handleEdit}
109 |             editTitle={editTitle}
110 |             setEditTitle={setEditTitle}
111 |             editBody={editBody}
112 |             setEditBody={setEditBody}
113 |           />
114 |         </Route>
115 |         <Route path="/post/:id">
116 |           <PostPage posts={posts} handleDelete={handleDelete} />
117 |         </Route>
118 |         <Route path="/about" component={About} />
119 |         <Route path="*" component={Missing} />
120 |       </Switch>
121 |       <Footer />
122 |     </div>
123 |   );
124 | }
125 | 
126 | export default App;
127 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | html {
 10 |   font-size: 16px;
 11 | }
 12 | 
 13 | body {
 14 |   min-height: 100vh;
 15 |   font-family: 'Open Sans', sans-serif;
 16 |   -webkit-font-smoothing: antialiased;
 17 |   -moz-osx-font-smoothing: grayscale;
 18 |   display: flex;
 19 |   background-color: #efefef;
 20 | }
 21 | 
 22 | #root {
 23 |   flex-grow: 1;
 24 |   display: flex;
 25 |   justify-content: center;
 26 |   align-items: center;
 27 | } 
 28 | 
 29 | .App {
 30 |   width: 100%;
 31 |   max-width: 800px;
 32 |   height: 100vh;
 33 |   display: flex;
 34 |   flex-direction: column;
 35 |   justify-content: flex-start;
 36 |   align-items: center;
 37 |   border: 1px solid #333;
 38 |   box-shadow: 0px 0px 15px gray;
 39 | }
 40 | 
 41 | .Header, .Footer {
 42 |   width: 100%;
 43 |   background-color: #66d8f5;
 44 |   padding: 1rem;
 45 |   display: flex;
 46 |   justify-content: space-between;
 47 |   align-items: center;
 48 | }
 49 | 
 50 | .Header h1 {
 51 |   font-size: 1.5rem;
 52 | }
 53 | 
 54 | .Header svg {
 55 |   font-size: 2rem;
 56 | }
 57 | 
 58 | .Footer {
 59 |   padding: 0.75rem;
 60 |   display: grid;
 61 |   place-content: center;
 62 | }
 63 | 
 64 | .Nav {
 65 |   width: 100%;
 66 |   background-color: #333;
 67 |   display: flex;
 68 |   flex-direction: column;
 69 |   justify-content: flex-start;
 70 |   align-items: flex-start;
 71 | }
 72 | 
 73 | .searchForm {
 74 |   width: 80%;
 75 |   padding: 1rem 0 0 0.75rem;
 76 | }
 77 | 
 78 | .searchForm input[type="text"] {
 79 |   font-family: 'Open Sans', sans-serif;
 80 |   width: 100%;
 81 |   min-height: 48px;
 82 |   font-size: 1rem;
 83 |   padding: 0.25rem;
 84 |   border-radius: 0.25rem;
 85 |   outline: none;
 86 | }
 87 | 
 88 | .searchForm label {
 89 |   position: absolute;
 90 |   left: -99999px;
 91 | }
 92 | 
 93 | .Nav ul {
 94 |   color: #fff;
 95 |   list-style-type: none;
 96 |   display: flex;
 97 |   flex-wrap: nowrap;
 98 |   align-items: center;
 99 | }
100 | 
101 | .Nav li {
102 |   padding: 1rem;
103 | }
104 | 
105 | .Nav li:hover, 
106 | .Nav li:focus {
107 |   padding: 1rem;
108 | }
109 | 
110 | .Nav li a {
111 |   color: #fff;
112 |   text-decoration: none;
113 | }
114 | 
115 | .Nav li:hover, 
116 | .Nav li:focus, 
117 | .Nav li:hover a, 
118 | .Nav li:focus a  {
119 |   background-color: #eee;
120 |   color: #333;
121 | }
122 | 
123 | .Nav li:hover a, 
124 | .Nav li:focus a {
125 |   cursor: pointer;
126 | }
127 | 
128 | .Home, .NewPost, .PostPage, .About, .Missing {
129 |   width: 100%;
130 |   flex-grow: 1;
131 |   padding: 1rem;
132 |   overflow-y: auto;
133 |   background-color: #fff;
134 | }
135 | 
136 | .post {
137 |   margin-top: 1rem;
138 |   padding-bottom: 1rem;
139 |   border-bottom: 1px solid lightgray;
140 | }
141 | 
142 | .Home .post a {
143 |   text-decoration: none;
144 | }
145 | 
146 | .Home .post a, 
147 | .Home .post a:visited {
148 |   color: #000;
149 | }
150 | 
151 | .post:first-child {
152 |   margin-top: 0;
153 | }
154 | 
155 | .post:last-child {
156 |   border-bottom: none;
157 | }
158 | 
159 | .postDate {
160 |   font-size: 0.75rem;
161 |   margin-top: 0.25rem;
162 | }
163 | 
164 | .postBody {
165 |   margin: 1rem 0;
166 | }
167 | 
168 | .newPostForm {
169 |   display: flex;
170 |   flex-direction: column;
171 | }
172 | 
173 | .newPostForm label {
174 |   margin-top: 1rem;
175 | }
176 | 
177 | .newPostForm input[type='text'], 
178 | .newPostForm textarea {
179 |   font-family: 'Open Sans', sans-serif;
180 |   width: 100%;
181 |   min-height: 48px;
182 |   font-size: 1rem;
183 |   padding: 0.25rem;
184 |   border-radius: 0.25rem;
185 |   margin-right: 0.25rem;
186 |   outline: none;
187 | }
188 | 
189 | .newPostForm textarea {
190 |   height: 100px;
191 | }
192 | 
193 | .newPostForm button {
194 |   margin-top: 1rem;
195 |   height: 48px;
196 |   min-width: 48px;
197 |   border-radius: 10px;
198 |   padding: 0.5rem;
199 |   font-size: 1rem;
200 |   cursor: pointer;
201 | }
202 | 
203 | .Missing p, .PostPage p, .NewPost p {
204 |   margin-top: 1rem;
205 | }
206 | 
207 | .PostPage button {
208 |   height: 48px;
209 |   min-width: 48px;
210 |   border-radius: 0.25rem;
211 |   padding: 0.5rem;
212 |   margin-right: 0.5rem;
213 |   font-size: 1rem;
214 |   color: #fff;
215 |   cursor: pointer;
216 | }
217 | 
218 | .deleteButton {
219 |   background-color: red;
220 | }
221 | 
222 | .editButton {
223 |   background-color: #333;
224 | }
225 | 
226 | .statusMsg {
227 |   margin-top: 2rem;
228 | }
229 | 
230 | @media only screen and (min-width: 610px) {
231 |   html {
232 |     font-size: 22px;
233 |   }
234 | 
235 |   .Header h1 {
236 |     font-size: 2rem;
237 |   }
238 | 
239 |   .Nav {
240 |     flex-direction: row;
241 |     flex-wrap: nowrap;
242 |     justify-content: space-between;
243 |     align-items: center;
244 |   }
245 | 
246 |   .Nav ul {
247 |     text-align: right;
248 |   }
249 | 
250 |   .Nav li:hover, 
251 |   .Nav li:focus, 
252 |   .Nav li:hover a, 
253 |   .Nav li:focus a  {
254 |     background-color: #eee;
255 |     color: #333;
256 |   }
257 | 
258 |   .searchForm {
259 |     width: 50%;
260 |     padding: .5rem 0;
261 |   }
262 |  
263 |   .searchForm input[type="text"] {
264 |     margin-left: 0.5rem;
265 |   }
266 | 
267 |   .newPostForm textarea {
268 |     height: 300px;
269 |   }
270 | }
271 | 
272 | @media only screen and (min-width: 992px) {
273 | 
274 |   .Header svg {
275 |     font-size: 3rem;
276 |   }
277 | 
278 | }


--------------------------------------------------------------------------------