diff --git a/frontend/src/pages/Admin/Components/Faq/AddFaq/AddFaq.jsx b/frontend/src/pages/Admin/Components/Faq/AddFaq/AddFaq.jsx index 9eeff517..b9941f29 100644 --- a/frontend/src/pages/Admin/Components/Faq/AddFaq/AddFaq.jsx +++ b/frontend/src/pages/Admin/Components/Faq/AddFaq/AddFaq.jsx @@ -1,63 +1,23 @@ -import React from "react"; -import { WithContext as ReactTags } from "react-tag-input"; +import React, { useRef, useState } from "react"; import styles from "./add-faq.module.scss"; import { Button2 } from "../../../../../components/util/Button/index"; -import { END_POINT } from "./../../../../../config/api"; -import { SimpleToast } from "./../../../../../components/util/Toast/Toast"; - -const KeyCodes = { - comma: 188, - enter: 13, -}; -const delimiters = [KeyCodes.comma, KeyCodes.enter]; - -export class AddFaq extends React.Component { - constructor(props) { - super(props); - this.state = { - fields: {}, - errors: {}, - tags: [], - token: localStorage.getItem("token"), - successToast: false, - errorToast: false, - }; - this.handleDelete = this.handleDelete.bind(this); - this.handleAddition = this.handleAddition.bind(this); - this.handleDrag = this.handleDrag.bind(this); - this.handleCloseToast = this.handleCloseToast.bind(this); - } - - handleCloseToast(event, reason) { - if (reason === "clickaway") { - return; - } - this.setState({ errorToast: false }); - this.setState({ successToast: false }); - } - - handleDelete(i) { - const { tags } = this.state; - this.setState({ - tags: tags.filter((tag, index) => index !== i), - }); - } - - handleAddition(tag) { - this.setState((state) => ({ tags: [...state.tags, tag] })); - } - - handleDrag(tag, currPos, newPos) { - const tags = [...this.state.tags]; - const newTags = tags.slice(); - newTags.splice(currPos, 1); - newTags.splice(newPos, 0, tag); - this.setState({ tags: newTags }); - } - - handleValidation() { - let fields = this.state.fields; - let tags = this.state.tags; +import { SimpleToast } from "../../../../../components/util/Toast/Toast"; +import { END_POINT } from "../../../../../config/api"; + +export function AddFaq() { + const tagRef = useRef(); + const [tags, setTags] = useState([]); + const [formData, setFormData] = useState({ question: "", answer: "", tags: [] }); + const [errorObj, setErrorObj] = useState({}); + const [successToast, setSuccessToast] = useState(false); + const [errorToast, setErrorToast] = useState(false); + + const handleCloseToast = () => { + setSuccessToast(false); + setErrorToast(false); + }; + + const handleValidation = () => { let errors = {}; let formIsValid = true; @@ -65,183 +25,192 @@ export class AddFaq extends React.Component { formIsValid = false; errors["tags"] = "* Please provide the necessary tags"; } - if (!fields["question"]) { + if (!formData["question"]) { formIsValid = false; errors["question"] = "* Question cannot be empty"; } - if (!fields["answer"]) { + if (!formData["answer"]) { formIsValid = false; errors["answer"] = "* Answer cannot be empty"; } - if (typeof fields["question"] !== "undefined") { - if (fields["question"].length < 9) { - formIsValid = false; - errors["question"] = "* Question should consists mimimum 8 characters"; - } + if (formData["question"] && formData["question"].length < 8) { + formIsValid = false; + errors["question"] = "* Question should consist of a minimum of 8 characters"; } - if (typeof fields["answer"] !== "undefined") { - if (fields["answer"].length < 9) { - formIsValid = false; - errors["answer"] = "* Answer should consists mimimum 8 characters"; - } + if (formData["answer"] && formData["answer"].length < 8) { + formIsValid = false; + errors["answer"] = "* Answer should consist of a minimum of 8 characters"; } - this.setState({ errors: errors }); + + setErrorObj(errors); return formIsValid; - } + }; + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData({ ...formData, [name]: value }); + }; + + const addTag = () => { + const tag = tagRef.current.value.trim(); + if (tag && !tags.includes(tag)) { + setTags([...tags, tag]); + setFormData({ ...formData, tags: [...tags, tag] }); + tagRef.current.value = ""; + } + }; + + const removeTag = (tagToRemove) => { + const newTags = tags.filter(tag => tag !== tagToRemove); + setTags(newTags); + setFormData({ ...formData, tags: newTags }); + }; - contactSubmit(e) { + const handleSubmit = async (e) => { e.preventDefault(); - if (this.handleValidation()) { - let tags = this.state.tags; - return fetch(`${END_POINT}/faq/postFaq`, { - method: "POST", - headers: { - "Content-Type": "application/json", - Authorization: "Bearer " + this.state.token, - }, - body: JSON.stringify({ ...this.state.fields, tags }), - }) - .then((response) => { - if (response.status === 200) { - this.setState({ - successToast: true, - tags: [], - fields: { question: "", answer: "" }, - errors: {}, - }); - } - response - .json() - .then((res) => { - if (res.statusCode === 500) { - this.setState({ errorToast: true }); - } - }) - .catch((err) => { - console.log("Error: ", err); - }); - }) - .catch((err) => { - console.error("must be a backend problem🤔:", err); + if (handleValidation()) { + try { + const response = await fetch(`${END_POINT}/faq/postFaq`, { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${localStorage.getItem("token")}`, + }, + body: JSON.stringify(formData), }); + + if (response.status === 200) { + setSuccessToast(true); + setFormData({ question: "", answer: "", tags: [] }); + setTags([]); + } else { + setErrorToast(true); + } + } catch (error) { + setErrorToast(true); + } } - } - - handleChange(field, e) { - let fields = this.state.fields; - fields[field] = e.target.value; - this.setState({ fields }); - } - - render() { - return ( -
-
-
-
-

Add   Faq

-
-
-
- - -
-
- {this.state.errors["question"] ? ( -
- {this.state.errors["question"]} -
- ) : ( -
  
- )} -
-
+ }; + + return ( +
+
+
+
+

Add   Faq

+
+ +
+ + +
+
+ {errorObj.question ? ( +
+ {errorObj.question} +
+ ) : ( +
  
+ )}
- -
+
+
+ +
+ + +
+
+ {errorObj.answer ? ( +
+ {errorObj.answer} +
+ ) : ( +
  
+ )} +
+
+
+ +
+
+
+ {tags.map((tag, index) => ( + + ))} +
- -
-
- {this.state.errors["answer"] ? ( -
- {this.state.errors["answer"]} -
- ) : ( -
  
- )} -
-
-
- -
- { + if (e.key === "Enter") { + e.preventDefault(); + addTag(); + } }} + placeholder="Enter Tags (Hit enter to add tags)" /> -
+
- {this.state.errors["tags"] ? ( + {errorObj.tags ? (
- {this.state.errors["tags"]} + {errorObj.tags}
) : (
  
)}
-
-
- -
- -
+
+ +
+ +
+
- -
- ); - } + + +
+ ); } + +const Tag = ({ label, remove }) => ( +
remove(label)}> + {label} + x +
+); diff --git a/frontend/src/pages/Admin/Components/Faq/AddFaq/add-faq.module.scss b/frontend/src/pages/Admin/Components/Faq/AddFaq/add-faq.module.scss index 7078063d..fc36a27b 100644 --- a/frontend/src/pages/Admin/Components/Faq/AddFaq/add-faq.module.scss +++ b/frontend/src/pages/Admin/Components/Faq/AddFaq/add-faq.module.scss @@ -128,27 +128,45 @@ align-items: center; } -.selectedClass { - margin-top: 10px; -} - .tagClass { margin-right: 10px; - color: white; + color: rgb(194, 66, 66); background-color: #0275d8; border-radius: 33px; padding: 5px; } +.tags-container { + display: flex; + flex-wrap: wrap; + align-items: center; +} -.removeClass { - border-radius: 33%; - margin-left: 1%; - background-color: #0275d8; - border-style: none; - color: white; - padding-right: 5px; +.tags { + display: flex; + flex-wrap: wrap; + gap: 7px; + padding-bottom: 10px; +} + +.tag { + display: flex; + align-items: center; + background-color: #ffffff; + padding: 6px 10px; + border-radius: 6px; + border: 2px solid #110f7b; +} + +.tag-label { + margin-right: 15px; + color: grey; +} + +.tag-remove { + cursor: pointer; } + @media screen and (max-width: 750px) { .faq-parent { display: block;