farheen_blog_app 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/pages/CreatePost.jsx +118 -72
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "farheen_blog_app",
3
3
  "private": false,
4
- "version": "0.0.2",
4
+ "version": "0.0.3",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "dev": "vite",
package/src/pages/CreatePost.jsx CHANGED
@@ -1,79 +1,125 @@
1
1
  import { useState } from "react";
2
-
3
2
  import { createPost } from "../services/postService";
4
3
 
5
4
  const CreatePost = () => {
6
- const [title, setTitle] = useState("");
7
-
8
- const [content, setContent] =
9
- useState("");
10
-
11
- const [image, setImage] =
12
- useState(null);
13
-
14
- const handleSubmit = async (e) => {
15
- e.preventDefault();
16
-
17
- const formData = new FormData();
18
-
19
- formData.append("title", title);
20
-
21
- formData.append("content", content);
22
-
23
- if (image) {
24
- formData.append("image", image);
25
- }
26
-
27
- try {
28
- await createPost(formData);
29
-
30
- alert("Post Created");
31
-
32
- setTitle("");
33
- setContent("");
34
- } catch (error) {
35
- console.log(error);
36
- }
37
- };
38
-
39
- return (
40
- <div className="max-w-xl mx-auto mt-10">
41
- <form
42
- onSubmit={handleSubmit}
43
- className="flex flex-col gap-4"
44
- >
45
- <input
46
- type="text"
47
- placeholder="Title"
48
- className="border p-3 rounded"
49
- value={title}
50
- onChange={(e) =>
51
- setTitle(e.target.value)
52
- }
53
- />
54
-
55
- <textarea
56
- placeholder="Content"
57
- className="border p-3 rounded h-40"
58
- value={content}
59
- onChange={(e) =>
60
- setContent(e.target.value)
61
- }
62
- />
63
-
64
- <input
65
- type="file"
66
- onChange={(e) =>
67
- setImage(e.target.files[0])
68
- }
69
- />
70
-
71
- <button className="bg-black text-white p-3 rounded">
72
- Create Post
73
- </button>
74
- </form>
75
- </div>
76
- );
5
+ const [formData, setFormData] = useState({
6
+ title: "",
7
+ content: "",
8
+ image: null
9
+ });
10
+
11
+ const [loading, setLoading] =
12
+ useState(false);
13
+
14
+ const handleChange = (e) => {
15
+ const { name, value, files } =
16
+ e.target;
17
+
18
+ setFormData({
19
+ ...formData,
20
+ [name]: files ? files[0] : value
21
+ });
22
+ };
23
+
24
+ const handleSubmit = async (e) => {
25
+ e.preventDefault();
26
+
27
+ try {
28
+ setLoading(true);
29
+
30
+ const data = new FormData();
31
+
32
+ data.append(
33
+ "title",
34
+ formData.title
35
+ );
36
+
37
+ data.append(
38
+ "content",
39
+ formData.content
40
+ );
41
+
42
+ if (formData.image) {
43
+ data.append(
44
+ "image",
45
+ formData.image
46
+ );
47
+ }
48
+
49
+ await createPost(data);
50
+
51
+ alert("Post Created");
52
+
53
+ setFormData({
54
+ title: "",
55
+ content: "",
56
+ image: null
57
+ });
58
+
59
+ } catch (error) {
60
+
61
+ console.log(error);
62
+
63
+ alert(
64
+ error.response?.data?.message ||
65
+ "Something went wrong"
66
+ );
67
+
68
+ } finally {
69
+ setLoading(false);
70
+ }
71
+ };
72
+
73
+ return (
74
+ <div className="max-w-xl mx-auto mt-10">
75
+
76
+ <form
77
+ onSubmit={handleSubmit}
78
+ className="flex flex-col gap-4"
79
+ >
80
+
81
+ <input
82
+ type="text"
83
+ name="title"
84
+ placeholder="Enter Title"
85
+ className="border p-3 rounded"
86
+ value={formData.title}
87
+ onChange={handleChange}
88
+ required
89
+ />
90
+
91
+ <textarea
92
+ name="content"
93
+ placeholder="Enter Content"
94
+ className="border p-3 rounded h-40"
95
+ value={formData.content}
96
+ onChange={handleChange}
97
+ required
98
+ />
99
+
100
+ <input
101
+ type="file"
102
+ name="image"
103
+ accept="image/*"
104
+ onChange={handleChange}
105
+ />
106
+
107
+ <button
108
+ type="submit"
109
+ disabled={loading}
110
+ className="bg-black text-white p-3 rounded"
111
+ >
112
+ {
113
+ loading
114
+ ? "Creating..."
115
+ : "Create Post"
116
+ }
117
+ </button>
118
+
119
+ </form>
120
+
121
+ </div>
122
+ );
77
123
  };
78
124
 
79
125
  export default CreatePost;