Notes

import { Button } from "@mui/material";
import React, { useRef, useState, useEffect } from "react";
import { postImg, getAll, deleteImg } from "../../api/letter";
import { useFormik } from "formik";
import { ImageSchema } from "../../validation/image";
import "./_AddImage.scss";
import Swal from "sweetalert2";
import { Input } from "antd";
import Accordion from "@mui/material/Accordion";
import AccordionActions from "@mui/material/AccordionActions";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

const AddImage = () => {
const [selectedImage, setSelectedImage] = useState(null);
const [setTitle, title] = useState("");
const buttonRef = useRef();

const handleSubmit = (values, actions) => {
const formData = new FormData();
formData.append("profileImg", selectedImage);

postImg(formData);
buttonRef.current.style.background = "#95a5a6";
buttonRef.current.textContent = "Upload File";
setSelectedImage(null);
actions.resetForm();
};

const formik = useFormik({
initialValues: {
profileImg: "",
title: "",
},
validationSchema: ImageSchema,
onSubmit: handleSubmit,
});

const [images, setImages] = useState([]);
const [loading, setLoading] = useState(true);
const [search, setSearch] = useState("");

useEffect(() => {
getAll().then((res) => {
setImages(res);
setLoading(false);
});
}, []);
return (
<>
<div
style={{
display: "flex",
height: "40vh",
width: "100%",
justifyContent: "center",
alignItems: "center",
}}
>
<form onSubmit={formik.handleSubmit} encType="multipart/form-data">
<div style={{ display: "flex", width: "100%" }}>
<Button
ref={buttonRef}
style={{
margin: "25px 0px",
width: "400px",
height: "60px",
backgroundColor: "black",
}}
variant="contained"
component="label"
>
Upload File
<input
value={formik.values.profileImg}
onChange={(e) => {
buttonRef.current.style.background = "red";
buttonRef.current.textContent = e.target.files[0].name;
formik.handleChange(e);
setSelectedImage(e.target.files[0]);
}}
onBlur={formik.handleBlur}
name="profileImg"
type="file"
accept="image/*"
hidden
/>
</Button>
{formik.errors.profileImg && formik.touched.profileImg && (
<div style={{ color: "red" }}>{formik.errors.profileImg}</div>
)}
<input
onChange={(e)=>{
formik.handleChange(e);
setTitle(e.target)
}}
onBlur={formik.handleBlur}
name="title"
value={formik.values.title}
type="text"
placeholder="Title"
required
/>
{formik.errors.title && formik.touched.title && (
<span style={{ color: "red" }}>{formik.errors.title}</span>
)}
</div>
<Button
style={{
display: "block",
margin: "25px 0px",
width: "400px",
height: "60px",
}}
type="submit"
variant="outlined"
color="success"
>
Add Image
</Button>
</form>
</div>
<Input
className="search"
onChange={(e) => setSearch(e.target.value)}
placeholder="Search ID"
/>
<h2>Images</h2>
<div className="sectionCategories">
<div className="containers">
<ul className="responsive-table">
<li className="table-header">
<div className="col col-1">
<h5>ID</h5>
</div>
<div className="col col-2">
<h5>Image</h5>
</div>
<div className="col col-2">
<h5>Title</h5>
</div>
<div className="col col-2">
<h5>Delete</h5>
</div>
</li>
{images &&
images
.filter((item) => {
return search.toLowerCase() === ""
? item
: item.id.toLowerCase().includes(search);
})
.map((img) => (
<li key={img._id} className="table-row">
<div className="col col-1" data-label="ID">
{img._id}
</div>
<div className="col col-2" data-label="Image">
{img.profileImg}
</div>
<div className="col col-2" data-label="Title">
{img.title}
</div>
<div className="col col-2" data-label="Delete">
<button
onClick={() => {
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#95a5a6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!",
}).then((result) => {
if (result.isConfirmed) {
deleteImg(img._id).then((res) => {
Swal.fire(
"Deleted!",
"Your file has been deleted.",
"success"
);
});
setImages(
images.filter((x) => x._id !== img._id)
);
}
});
}}
className="editbtn"
>
Delete
</button>
</div>
</li>
))}
</ul>
</div>
</div>
</>
);
};

export default AddImage;