34 |
35 | {
39 | return (
40 | {
54 | return (
55 | {
69 | return (
70 | {
84 | return (
85 |
97 |
98 |
18 |
42 | ) : (
43 |
19 | 
24 |
25 |
26 |
27 |
40 |
41 |
28 | Title:
29 | {blog.title}
30 |
31 |
32 | Title:
33 | {blog.author}
34 |
35 |
36 | Content:
37 |
39 | {blog.content}
38 |
70 | {blogs &&
71 | blogs.map(blog => {
72 | return (
73 |
119 |
120 | );
121 | };
122 |
123 | export default Blogs;
124 |
--------------------------------------------------------------------------------
/app/javascript/components/Home.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Blogs from "./Blogs";
3 |
4 | const Home = props => {
5 | return
77 |
78 | ![Blog image]({"https://bit.ly/2Z4KKcF"})
}
83 | />
84 |
85 |
116 | );
117 | })}
118 |
86 |
90 |
92 |
93 |
87 | {blog.title}
88 |
89 | {blog.content}
91 |
94 |
98 | {blog.author}
99 |
100 |
101 |
115 |
102 |
103 |
104 | Edit
105 |
106 |
107 | deleteBlog(blog.id)}
109 | className="inline-block bg-red-200 rounded-full px-3 py-1 ml-2 text-sm font-semibold text-gray-700 cursor-pointer"
110 | >
111 | Delete
112 |
113 |
114 |
13 |
14 | {
20 | return {
27 | return
32 |
33 |
16 |
17 |
29 | ) : null}
30 |
31 | );
32 | };
33 |
34 | export default Alert;
35 |
--------------------------------------------------------------------------------
/app/javascript/shared/BlogForm.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import Alert from "./Alert";
3 |
4 | const BlogForm = props => {
5 | const { match, history, editMode, handleData } = props;
6 | const [alert, setAlert] = useState(false);
7 | const [color, setColor] = useState("");
8 | const [message, setMessage] = useState("");
9 | const [title, setTitle] = useState("");
10 | const [author, setAuthor] = useState("");
11 | const [content, setContent] = useState("");
12 |
13 | useEffect(() => {
14 | if (editMode) {
15 | fetch(`/api/v1/blogs/edit/${match.params.id}`)
16 | .then(response => response.json())
17 | .then(response => {
18 | setTitle(response.title);
19 | setAuthor(response.author);
20 | setContent(response.content);
21 | });
22 | } else {
23 | setTitle("");
24 | setAuthor("");
25 | setContent("");
26 | }
27 | }, [editMode]);
28 |
29 | const sendRequest = url => {
30 | const body = {
31 | title,
32 | author,
33 | content: content.replace(/\n/g, "") 34 | }; 35 | 36 | const token = document.querySelector('meta[name="csrf-token"]').content; 37 | fetch(url, { 38 | method: editMode ? "PUT" : "POST", 39 | headers: { 40 | "X-CSRF-Token": token, 41 | "Content-Type": "application/json" 42 | }, 43 | body: JSON.stringify(body) 44 | }) 45 | .then(response => { 46 | if (response.ok) { 47 | return response.json(); 48 | } 49 | throw new Error("Network response was not ok."); 50 | }) 51 | .then(response => { 52 | if (editMode) { 53 | props.handleEditAlert(true); 54 | props.handleCreateAlert(false); 55 | } else { 56 | props.handleCreateAlert(true); 57 | props.handleEditAlert(false); 58 | } 59 | return history.push("/"); 60 | }) 61 | .catch(error => console.log(error.message)); 62 | }; 63 | 64 | const handleSubmit = event => { 65 | if (title.length == 0 || author.length == 0) { 66 | setAlert(true); 67 | setColor("red"); 68 | setMessage("Please fill the required fields"); 69 | } else { 70 | const url = editMode 71 | ? `/api/v1/blogs/update/${match.params.id}` 72 | : "/api/v1/blogs/create"; 73 | sendRequest(url); 74 | handleData(true); 75 | } 76 | event.preventDefault(); 77 | }; 78 | 79 | return ( 80 | <> 81 | {alert ?
83 |
84 |