├── index.html
├── README.md
├── package.json
├── index.js
├── App.css
└── App.js


/index.html:
--------------------------------------------------------------------------------
1 | <div id="root"></div>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Simple-Blog-App (Edit-Delete)
2 | 
3 | [Edit on StackBlitz ⚡️](https://stackblitz.com/edit/react-lgbkuj)
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "axios": "^0.19.2",
 7 |     "react": "16.12.0",
 8 |     "react-dom": "16.12.0"
 9 |   },
10 |   "scripts": {
11 |     "start": "react-scripts start",
12 |     "build": "react-scripts build",
13 |     "test": "react-scripts test --env=jsdom",
14 |     "eject": "react-scripts eject"
15 |   },
16 |   "devDependencies": {
17 |     "react-scripts": "latest"
18 |   }
19 | }


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | //import './index.css';
 4 | import App from './App';
 5 | //import * as serviceWorker from './serviceWorker';
 6 | 
 7 | ReactDOM.render(<App />, document.getElementById('root'));
 8 | 
 9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: https://bit.ly/CRA-PWA
12 | //serviceWorker.unregister();
13 | 


--------------------------------------------------------------------------------
/App.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | .ArticleContainer {
 6 |   width: 800px;
 7 |   margin: 0 auto;
 8 |   margin-top: 20px;
 9 | }
10 | 
11 | .AddArticle {
12 |   display: flex;
13 |   flex-direction: column;
14 |   width: 100%;
15 | }
16 | 
17 | .AddArticle input,
18 | .AddArticle textarea {
19 |   width: 100%;
20 |   border-radius: 5px;
21 |   border: 1px solid #ddd;
22 |   margin: 5px 0;
23 |   padding: 5px;
24 | }
25 | 
26 | .AddArticle input[type='submit'] {
27 |   padding: 5px;
28 |   background-color: greenyellow;
29 |   border: none;
30 |   cursor: pointer;
31 | }
32 | 
33 | h1 {
34 |   text-align: center;
35 | }
36 | 
37 | article {
38 |   padding: 10px;
39 |   border: 1px solid #ddd;
40 |   margin: 10px auto 20px;
41 |   width: 100%;
42 | }
43 | 
44 | article h2 {
45 |   color: orange;
46 |   font-size: 30px;
47 |   margin: 5px 0;
48 | }
49 | 
50 | article button {
51 |   width: 50px;
52 |   margin: 0 5px;
53 |   border: none;
54 |   padding: 5px;
55 |   cursor: pointer;
56 | }
57 | 
58 | article .delete {
59 |   color: red;
60 | }
61 | article .edit {
62 |   color: green;
63 | }
64 | article .cancel {
65 |   color: orange;
66 | }
67 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import './App.css';
  3 | import axios from 'axios';
  4 | 
  5 | class App extends React.Component {
  6 |   state = {
  7 |     id: '',
  8 |     title: '',
  9 |     body: '',
 10 |     data: []
 11 |   };
 12 | 
 13 |   changeId = e => {
 14 |     let id = e.target.value;
 15 |     this.setState({
 16 |       id: id
 17 |     });
 18 |   };
 19 | 
 20 |   changeTitle = e => {
 21 |     let title = e.target.value;
 22 |     this.setState({
 23 |       title: title
 24 |     });
 25 |   };
 26 | 
 27 |   changeBody = e => {
 28 |     let body = e.target.value;
 29 |     this.setState({
 30 |       body: body
 31 |     });
 32 |   };
 33 | 
 34 |   editPost = (postIndex, title, body) => {
 35 |     this.setState({
 36 |       id: postIndex + 1,
 37 |       title: title,
 38 |       body: body
 39 |     });
 40 |   };
 41 | 
 42 |   addOrUpdatePost = e => {
 43 |     e.preventDefault();
 44 |     if (
 45 |       this.state.title === '' ||
 46 |       this.state.body === '' ||
 47 |       this.state.id === ''
 48 |     ) {
 49 |       alert('No field should be empty');
 50 |       return;
 51 |     } else if (this.state.id > this.state.data.length + 1) {
 52 |       alert('Please use the next id');
 53 |     } else {
 54 |       if (this.state.data[this.state.id - 1] !== undefined) {
 55 |         axios
 56 |           .put(`https://jsonplaceholder.typicode.com/posts/${this.state.id}`, {
 57 |             id: this.state.id,
 58 |             title: this.state.title,
 59 |             body: this.state.body
 60 |           })
 61 |           .then(res => {
 62 |             let updatedData = [...this.state.data];
 63 |             updatedData[this.state.id - 1] = res.data;
 64 |             this.setState({
 65 |               id: updatedData.length + 1,
 66 |               title: '',
 67 |               body: '',
 68 |               data: updatedData
 69 |             });
 70 |             console.log(res);
 71 |           })
 72 |           .catch(err => console.log(err));
 73 |       } else {
 74 |         axios
 75 |           .post('https://jsonplaceholder.typicode.com/posts', {
 76 |             id: this.state.id + 1,
 77 |             title: this.state.title,
 78 |             body: this.state.body
 79 |           })
 80 |           .then(res => {
 81 |             console.log(res);
 82 |             let newPost = res.data;
 83 |             let newData = [...this.state.data, newPost];
 84 |             this.setState({
 85 |               id: this.state.id + 1,
 86 |               title: '',
 87 |               body: '',
 88 |               data: newData
 89 |             });
 90 |           })
 91 |           .catch(err => console.log(err));
 92 |       }
 93 |     }
 94 |   };
 95 | 
 96 |   deletePost = postIndex => {
 97 |     axios
 98 |       .delete(`https://jsonplaceholder.typicode.com/posts/${postIndex}`)
 99 |       .then(res => {
100 |         let newData = [...this.state.data];
101 |         newData.splice(postIndex, 1);
102 |         this.setState({
103 |           id: newData.length + 1,
104 |           title: '',
105 |           body: '',
106 |           data: newData
107 |         });
108 |         console.log(res);
109 |       })
110 |       .catch(err => console.log(err));
111 |   };
112 | 
113 |   componentDidMount() {
114 |     axios
115 |       .get('https://jsonplaceholder.typicode.com/posts')
116 |       .then(res => {
117 |         let newData = res.data.slice(0, 10);
118 |         this.setState(
119 |           {
120 |             id: newData[newData.length - 1].id + 1,
121 |             data: newData
122 |           },
123 |           () => console.log(this.state.id)
124 |         );
125 |         console.log(newData);
126 |       })
127 |       .catch(err => console.log("Couldn't fetch data. Error: " + err));
128 |   }
129 | 
130 |   render() {
131 |     return (
132 |       <div className='ArticleContainer'>
133 |         <h1>Simple Blog</h1>
134 |         <div className='AddArticle'>
135 |           <b>id of article: </b>
136 |           <input type='number' onChange={this.changeId} value={this.state.id} />
137 |           <form>
138 |             <input
139 |               onChange={this.changeTitle}
140 |               type='text'
141 |               placeholder='Title'
142 |               value={this.state.title}
143 |             />
144 |             <textarea
145 |               onChange={this.changeBody}
146 |               placeholder='Enter Body'
147 |               value={this.state.body}
148 |             ></textarea>
149 |             <input
150 |               onClick={this.addOrUpdatePost}
151 |               type='submit'
152 |               value='Add/Update Post'
153 |             />
154 |           </form>
155 |         </div>
156 |         {this.state.data.length === 0 ? (
157 |           <p>Loading Posts...</p>
158 |         ) : (
159 |           this.state.data.map((post, index) => (
160 |             <article key={index}>
161 |               <h2>
162 |                 {index + 1}. {post.title}
163 |               </h2>
164 |               <p>{post.body.substr(0, 100)}...</p>
165 |               <button onClick={() => this.deletePost(index)} className='delete'>
166 |                 Delete
167 |               </button>
168 |               <button
169 |                 onClick={() => this.editPost(index, post.title, post.body)}
170 |                 className='edit'
171 |               >
172 |                 Edit
173 |               </button>
174 |             </article>
175 |           ))
176 |         )}
177 |       </div>
178 |     );
179 |   }
180 | }
181 | 
182 | export default App;
183 | 


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