Skip to content

Commit 02c88c4

Browse files
shivamgaur99shivamgaur99
committed
fix updateFaq
1 parent 1a1d4a2 commit 02c88c4

File tree

2 files changed

+119
-83
lines changed

2 files changed

+119
-83
lines changed

‎frontend/src/pages/Admin/Components/Faq/ManageFaq/ManageFaq.jsx

+104-80
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from "react";
1+
import React, { useEffect, useState, useCallback } from "react";
22
import Accordion from "@material-ui/core/Accordion";
33
import AccordionDetails from "@material-ui/core/AccordionDetails";
44
import AccordionSummary from "@material-ui/core/AccordionSummary";
@@ -19,25 +19,23 @@ export function ManageFaq() {
1919
const [open, setOpenToast] = useState(false);
2020
const [toastMessage, setToastMessage] = useState("");
2121
const [severity, setSeverity] = useState("success");
22-
const [reload, setReload] = useState(true);
23-
const [editedFaq, setEditedFaq] = useState(null);
22+
const [reload, setReload] = useState(false);
23+
const [faqObject, setFaqObject] = useState({});
2424
const [openEditDialog, setOpenEditDialog] = useState(false);
25-
const [editedQuestion, setEditedQuestion] = useState("");
26-
const [editedAnswer, setEditedAnswer] = useState("");
27-
const [editedIsActive, setEditedIsActive] = useState(true);
28-
const [editedTags, setEditedTags] = useState([]);
25+
const [formErrors, setFormErrors] = useState({});
2926

30-
const handleCloseToast = () => {
27+
const handleCloseToast = useCallback(() => {
3128
setTimeout(() => {
3229
setOpenToast(false);
3330
}, 500);
34-
};
31+
}, []);
3532

3633
const handleChange = (panel) => (event, isExpanded) => {
3734
setExpanded(isExpanded ? panel : false);
3835
};
3936

40-
async function fetchAllFaq() {
37+
const fetchAllFaq = useCallback(async () => {
38+
setIsFetching(true);
4139
try {
4240
const response = await fetch(`${END_POINT}/faq/getFaq`);
4341
const data = await response.json();
@@ -47,7 +45,7 @@ export function ManageFaq() {
4745
console.log(err.message);
4846
setIsFetching(false);
4947
}
50-
}
48+
}, []);
5149

5250
const deleteFaq = async (faqId) => {
5351
setIsFetching(true);
@@ -88,7 +86,7 @@ export function ManageFaq() {
8886
"Content-Type": "application/json",
8987
authorization: `Bearer ${localStorage.getItem("token")}`,
9088
},
91-
body: JSON.stringify({ faqId: faqId, ...updatedFaqDetails }),
89+
body: JSON.stringify({ faqId, ...updatedFaqDetails }),
9290
});
9391

9492
if (!response.ok) {
@@ -99,7 +97,7 @@ export function ManageFaq() {
9997
setToastMessage(data.message);
10098
setOpenToast(true);
10199
setSeverity("success");
102-
setReload(!reload);
100+
setReload((prev) => !prev);
103101
} catch (error) {
104102
console.error("Failed to update FAQ:", error.message);
105103
setToastMessage("Failed to update FAQ");
@@ -108,35 +106,42 @@ export function ManageFaq() {
108106
}
109107
};
110108

111-
useEffect(() => {
112-
fetchAllFaq();
113-
}, [reload]);
114-
115109
const handleEdit = (faqId) => {
116110
const editedFaq = faqs.find((faq) => faq._id === faqId);
117-
setEditedFaq(editedFaq);
118-
setEditedQuestion(editedFaq.question);
119-
setEditedAnswer(editedFaq.answer);
120-
setEditedIsActive(editedFaq.isActive);
121-
setEditedTags(editedFaq.tags);
111+
setFaqObject(editedFaq);
122112
setOpenEditDialog(true);
123113
};
124114

125115
const handleSaveEdit = () => {
126-
const updatedFaq = {
127-
question: editedQuestion,
128-
answer: editedAnswer,
129-
isActive: editedIsActive,
130-
tags: editedTags,
131-
};
132-
updateFaq(editedFaq._id, updatedFaq);
133-
setOpenEditDialog(false);
116+
if (validateForm()) {
117+
updateFaq(faqObject._id, faqObject);
118+
setOpenEditDialog(false);
119+
}
134120
};
135121

136122
const handleCancelEdit = () => {
137-
setOpenEditDialog(false);
123+
setOpenEditDialog(false);
124+
};
125+
126+
const validateForm = () => {
127+
const errors = {};
128+
if (!faqObject.question) {
129+
errors.question = "* Question is required";
130+
}
131+
if (!faqObject.answer) {
132+
errors.answer = "* Answer is required";
133+
}
134+
if (!faqObject.tags.length || faqObject.tags[0] === "") {
135+
errors.tags = "* At least one tag is required";
136+
}
137+
setFormErrors(errors);
138+
return Object.keys(errors).length === 0;
138139
};
139140

141+
useEffect(() => {
142+
fetchAllFaq();
143+
}, [fetchAllFaq, reload]);
144+
140145
return (
141146
<div>
142147
<h1 style={{ textAlign: "center" }}>Manage FAQ</h1>
@@ -209,60 +214,80 @@ export function ManageFaq() {
209214
)}
210215
</div>
211216
</div>
212-
{editedFaq && openEditDialog && (
217+
{faqObject && openEditDialog && (
213218
<div className={style["blur-background"]}>
214-
<div className={style["edit-dialog"]}>
215-
<h2 className={style["edit-dialog-heading"]}>Edit FAQ</h2>
216-
<div className={style["edit-form"]}>
217-
<label htmlFor="editedQuestion">Question:</label>
218-
<input
219-
id="editedQuestion"
220-
type="text"
221-
value={editedQuestion}
222-
onChange={(e) => setEditedQuestion(e.target.value)}
223-
className={style["faq-input"]}
224-
/>
225-
<label htmlFor="editedAnswer">Answer:</label>
226-
<input
227-
id="editedAnswer"
228-
type="text"
229-
value={editedAnswer}
230-
onChange={(e) => setEditedAnswer(e.target.value)}
231-
className={style["faq-input"]}
232-
/>
233-
<label htmlFor="editedIsActive">Is Active:</label>
234-
<input
235-
id="editedIsActive"
236-
type="checkbox"
237-
checked={editedIsActive}
238-
onChange={(e) => setEditedIsActive(e.target.checked)}
239-
className={style["faq-input"]}
240-
/>
241-
<label htmlFor="editedTags">Tags:</label>
242-
<input
243-
id="editedTags"
244-
type="text"
245-
value={editedTags}
246-
onChange={(e) => setEditedTags(e.target.value.split(","))}
247-
className={style["faq-input"]}
248-
/>
249-
<div className={style["submit-btn"]}>
250-
<Button2
251-
className={style["submit-btn-text"]}
252-
label="Save"
253-
type="submit"
254-
onClick={handleSaveEdit}
219+
<div className={style["edit-dialog"]}>
220+
<h2 className={style["edit-dialog-heading"]}>Edit FAQ</h2>
221+
<div className={style["edit-form"]}>
222+
<label htmlFor="editedQuestion">Question:</label>
223+
<input
224+
id="editedQuestion"
225+
type="text"
226+
value={faqObject.question}
227+
onChange={(e) =>
228+
setFaqObject({ ...faqObject, question: e.target.value })
229+
}
230+
className={style["faq-input"]}
231+
/>
232+
{formErrors.question && (
233+
<span className={style["error"]}>{formErrors.question}</span>
234+
)}
235+
<label htmlFor="editedAnswer">Answer:</label>
236+
<input
237+
id="editedAnswer"
238+
type="text"
239+
value={faqObject.answer}
240+
onChange={(e) =>
241+
setFaqObject({ ...faqObject, answer: e.target.value })
242+
}
243+
className={style["faq-input"]}
244+
/>
245+
{formErrors.answer && (
246+
<span className={style["error"]}>{formErrors.answer}</span>
247+
)}
248+
<label htmlFor="editedIsActive">Is Active:</label>
249+
<input
250+
id="editedIsActive"
251+
type="checkbox"
252+
checked={faqObject.isActive}
253+
onChange={(e) =>
254+
setFaqObject({ ...faqObject, isActive: e.target.checked })
255+
}
256+
className={style["checkbox"]}
255257
/>
256-
<Button2
257-
className={style["submit-btn-text"]}
258-
label="Cancel"
259-
type="submit"
260-
onClick={handleCancelEdit}
258+
<label htmlFor="editedTags">Tags:</label>
259+
<input
260+
id="editedTags"
261+
type="text"
262+
value={faqObject.tags.join(",")}
263+
onChange={(e) =>
264+
setFaqObject({
265+
...faqObject,
266+
tags: e.target.value.split(",").map(tag => tag.trim()),
267+
})
268+
}
269+
className={style["faq-input"]}
261270
/>
271+
{formErrors.tags && (
272+
<span className={style["error"]}>{formErrors.tags}</span>
273+
)}
274+
<div className={style["submit-btn"]}>
275+
<Button2
276+
className={style["submit-btn-text"]}
277+
label="Save"
278+
type="submit"
279+
onClick={handleSaveEdit}
280+
/>
281+
<Button2
282+
className={style["submit-btn-text"]}
283+
label="Cancel"
284+
type="button"
285+
onClick={handleCancelEdit}
286+
/>
287+
</div>
262288
</div>
263289
</div>
264290
</div>
265-
</div>
266291
)}
267292
<SimpleToast
268293
open={open}
@@ -273,4 +298,3 @@ export function ManageFaq() {
273298
</div>
274299
);
275300
}
276-

‎frontend/src/pages/Admin/Components/Faq/ManageFaq/manage-faq.module.scss

+15-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
.faq-input {
1111
border-color: #1863ff;
1212
outline: none;
13-
border: double 2px transparent;
13+
border: double 1px transparent;
1414
border-radius: 10px;
1515
background-image: linear-gradient(white, white),
1616
linear-gradient(to right, rgba(255, 0, 90, 1), rgba(10, 24, 61, 1));
@@ -99,7 +99,6 @@
9999
margin-top: 10%;
100100
margin-left: auto;
101101
margin-right: auto;
102-
box-shadow: 5px 5px 15px #888888, -5px -5px 15px #ffffff;
103102
}
104103
.blur-background {
105104
position: fixed;
@@ -165,11 +164,24 @@
165164
align-items: center;
166165
}
167166

167+
.error {
168+
color: rgb(219, 0, 0);
169+
margin-top: 0;
170+
padding-top: 0;
171+
padding-bottom: 5px;
172+
margin-bottom: 5px;
173+
}
174+
175+
.checkbox {
176+
cursor: pointer;
177+
margin-bottom: 10px;
178+
}
179+
168180

169181
@media screen and (max-width: 750px) {
170182
.edit-dialog {
171183
width: 95%;
172-
margin: 10% auto;
184+
margin: 20% auto;
173185
}
174186

175187
.edit-form input,

0 commit comments

Comments
 (0)