├── .gitignore ├── README.md ├── data └── db.json ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── About.js ├── App.js ├── EditPost.js ├── Feed.js ├── Footer.js ├── Header.js ├── Home.js ├── Missing.js ├── Nav.js ├── NewPost.js ├── Post.js ├── PostPage.js ├── api └── posts.js ├── index.css └── index.js /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # "React JS - Axios API Requests" 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/ZEKBDXGnD4s) 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 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "16tut", 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-router-dom": "^5.2.0", 14 | "react-scripts": "4.0.3", 15 | "web-vitals": "^1.1.2" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/react_axios_requests/6ddffe85d43def83251995c08fe4138418ccaf7a/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/react_axios_requests/6ddffe85d43def83251995c08fe4138418ccaf7a/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitdagray/react_axios_requests/6ddffe85d43def83251995c08fe4138418ccaf7a/public/logo512.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/About.js: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return ( 3 |
4 |

About

5 |

This blog app is a project in the Learn React tutorial series.

6 |
7 | ) 8 | } 9 | 10 | export default About 11 | -------------------------------------------------------------------------------- /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 | 15 | function App() { 16 | const [posts, setPosts] = useState([]) 17 | const [search, setSearch] = useState(''); 18 | const [searchResults, setSearchResults] = useState([]); 19 | const [postTitle, setPostTitle] = useState(''); 20 | const [postBody, setPostBody] = useState(''); 21 | const [editTitle, setEditTitle] = useState(''); 22 | const [editBody, setEditBody] = useState(''); 23 | const history = useHistory(); 24 | 25 | useEffect(() => { 26 | const fetchPosts = async () => { 27 | try { 28 | const response = await api.get('/posts'); 29 | setPosts(response.data); 30 | } catch (err) { 31 | if (err.response) { 32 | // Not in the 200 response range 33 | console.log(err.response.data); 34 | console.log(err.response.status); 35 | console.log(err.response.headers); 36 | } else { 37 | console.log(`Error: ${err.message}`); 38 | } 39 | } 40 | } 41 | 42 | fetchPosts(); 43 | }, []) 44 | 45 | useEffect(() => { 46 | const filteredResults = posts.filter((post) => 47 | ((post.body).toLowerCase()).includes(search.toLowerCase()) 48 | || ((post.title).toLowerCase()).includes(search.toLowerCase())); 49 | 50 | setSearchResults(filteredResults.reverse()); 51 | }, [posts, search]) 52 | 53 | const handleSubmit = async (e) => { 54 | e.preventDefault(); 55 | const id = posts.length ? posts[posts.length - 1].id + 1 : 1; 56 | const datetime = format(new Date(), 'MMMM dd, yyyy pp'); 57 | const newPost = { id, title: postTitle, datetime, body: postBody }; 58 | try { 59 | const response = await api.post('/posts', newPost); 60 | const allPosts = [...posts, response.data]; 61 | setPosts(allPosts); 62 | setPostTitle(''); 63 | setPostBody(''); 64 | history.push('/'); 65 | } catch (err) { 66 | console.log(`Error: ${err.message}`); 67 | } 68 | } 69 | 70 | const handleEdit = async (id) => { 71 | const datetime = format(new Date(), 'MMMM dd, yyyy pp'); 72 | const updatedPost = { id, title: editTitle, datetime, body: editBody }; 73 | try { 74 | const response = await api.put(`/posts/${id}`, updatedPost); 75 | setPosts(posts.map(post => post.id === id ? { ...response.data } : post)); 76 | setEditTitle(''); 77 | setEditBody(''); 78 | history.push('/'); 79 | } catch (err) { 80 | console.log(`Error: ${err.message}`); 81 | } 82 | } 83 | 84 | const handleDelete = async (id) => { 85 | try { 86 | await api.delete(`/posts/${id}`); 87 | const postsList = posts.filter(post => post.id !== id); 88 | setPosts(postsList); 89 | history.push('/'); 90 | } catch (err) { 91 | console.log(`Error: ${err.message}`); 92 | } 93 | } 94 | 95 | return ( 96 |
97 |
98 |
130 | ); 131 | } 132 | 133 | export default App; 134 | -------------------------------------------------------------------------------- /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 |
19 | {editTitle && 20 | <> 21 |

Edit Post

22 |
e.preventDefault()}> 23 | 24 | setEditTitle(e.target.value)} 30 | /> 31 | 32 |