From c90bb84024c861b802010403c72c2edf86822398 Mon Sep 17 00:00:00 2001 From: parwez-zafar Date: Tue, 5 Dec 2023 18:28:04 +0530 Subject: [PATCH] login, register and shop page image feature implemented --- src/_nav.js | 18 + src/index.js | 4 +- src/routes.js | 19 + src/views/Banner/banner.js | 13 +- src/views/Images/LoginImage.js | 709 ++++++++++++++++++++++++++++++ src/views/Images/RegisterImage.js | 709 ++++++++++++++++++++++++++++++ src/views/Images/ShopImage.js | 709 ++++++++++++++++++++++++++++++ 7 files changed, 2173 insertions(+), 8 deletions(-) create mode 100644 src/views/Images/LoginImage.js create mode 100644 src/views/Images/RegisterImage.js create mode 100644 src/views/Images/ShopImage.js diff --git a/src/_nav.js b/src/_nav.js index be65ba6..af52b8d 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -109,6 +109,24 @@ const _nav = [ icon: , to: "/banner", }, + { + component: CNavItem, + name: "Register Image", + icon: , + to: "/registerImage", + }, + { + component: CNavItem, + name: "Login Image", + icon: , + to: "/loginImage", + }, + { + component: CNavItem, + name: "Shop Page Image", + icon: , + to: "/shopImage", + }, { component: CNavItem, name: "Testimonials", diff --git a/src/index.js b/src/index.js index e480d1a..1352647 100644 --- a/src/index.js +++ b/src/index.js @@ -14,9 +14,9 @@ import { createRoot } from "react-dom/client"; const setupAxios = () => { //axios.defaults.baseURL = 'https://bolo-api.checkapp.one/' - // axios.defaults.baseURL = "http://localhost:8000"; + axios.defaults.baseURL = "http://localhost:8000"; // axios.defaults.baseURL = "https://happy-sombrero-ray.cyclic.app/"; //->latest deployed - axios.defaults.baseURL = "https://printsigns.onrender.com/"; //->latest deployed + // axios.defaults.baseURL = "https://printsigns.onrender.com/"; //->latest deployed axios.defaults.headers = { "Cache-Control": "no-cache,no-store", diff --git a/src/routes.js b/src/routes.js index a8d14f6..61d84dc 100644 --- a/src/routes.js +++ b/src/routes.js @@ -93,6 +93,10 @@ import AddUserAddress from "./views/UserAddress/addUserAddress"; import ViewAddress from "./views/UserAddress/viewAddress"; import Design from "./views/Design/design"; import Banners from "./views/Banner/banner"; +import RegisterImage from './views/Images/RegisterImage' +import LoginImage from './views/Images/LoginImage' +import ShopImage from './views/Images/ShopImage' + const routes = [ { path: "/", exact: true, name: "Home" }, { @@ -253,6 +257,21 @@ const routes = [ name: "Banners", element: Banners, }, + { + path: "/registerImage", + name: "RegisterImage", + element: RegisterImage, + }, + { + path: "/loginImage", + name: "LoginImage", + element: LoginImage, + }, + { + path: "/shopImage", + name: "ShopImage", + element: ShopImage, + }, { path: "/testimonial/view/:id", name: "ViewTestimonial", diff --git a/src/views/Banner/banner.js b/src/views/Banner/banner.js index c97491a..e437d30 100644 --- a/src/views/Banner/banner.js +++ b/src/views/Banner/banner.js @@ -83,7 +83,8 @@ const Banners = () => { useEffect(() => { getBanner(); - }, [token, banner]); + }, []); + // }, [token, banner]); const handleEditClick = (_id, bannerName, bannerImage) => { setOpen(true); @@ -310,7 +311,7 @@ const Banners = () => {
- + */} { onChange={(e) => setBannerName( e.target.value.charAt(0).toUpperCase() + - e.target.value.slice(1) + e.target.value.slice(1) ) } /> @@ -482,7 +483,7 @@ const Banners = () => { p={2} display={"flex"} justifyContent={"right"} - // width={"500px"} + // width={"500px"} > {!edit && ( */} + + + {/* + + Banner Name + + handleClose()}> + + + */} + {/*
*/} + {/* + setBannerName( + e.target.value.charAt(0).toUpperCase() + + e.target.value.slice(1) + ) + } + /> */} + {/* {bannerName ? ( + <> + + {25 - bannerName.length} characters left + + + ) : ( + <> + )} */} + + + + {bannerImage && ( + + bannerImage + handeldeleteImage()} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + )} + {olderImage && ( + + bannerImage + setOlderImage("")} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + )} + + + {error &&

{error}

} +

+ Upload jpg, jpeg and png only* +

+ + + {!edit && ( + + )} + {edit && ( + + )} + + + + +
+ + + + +
+
+
+
+
+
+ {/*
+ +
*/} +
+
+ +
+ + + + + + + + + + + {!loading && banner?.length === 0 && ( + + + + )} + {loading ? ( + + + + ) : ( + banner && + banner + .map((item, i) => ( + + + {/* */} + + + )) + )} + +
ImageAction
+ +
+ Loading... +
+ + {/* {item?.image} */} +
{ }
+ 		+
{item.bannerName}
+ 		+ + {/* */} +
+
+ + {/*
+ setPage(value)} + /> +
*/} +
+
+
+
+ + + + ); +}; + +export default Banners; diff --git a/src/views/Images/RegisterImage.js b/src/views/Images/RegisterImage.js new file mode 100644 index 0000000..1e46397 --- /dev/null +++ b/src/views/Images/RegisterImage.js @@ -0,0 +1,709 @@ +import React, { useState, useEffect } from "react"; +import axios from "axios"; +import { isAutheticated } from "src/auth"; +import { + Button, + Box, + IconButton, + Modal, + Pagination, + TextField, + Typography, +} from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; +import { ClipLoader } from "react-spinners"; +import swal from "sweetalert"; +import CloudUploadIcon from "@mui/icons-material/CloudUpload"; +import DeleteSharpIcon from "@mui/icons-material/DeleteSharp"; + +const style = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: 400, + bgcolor: "background.paper", + borderRadius: "0.5rem", + boxShadow: 24, + width: "500px", +}; + +const Banners = () => { + const token = isAutheticated(); + const [loading, setLoading] = useState(true); + const [updating, setUpdating] = useState(true); // for loading state + // const [isUpdate, setIsUpdate] = useState(false); // for edit state + const [saveLoding, setSaveLoading] = useState(true); + const [edit, setEdit] = useState(false); + const [bannerName, setBannerName] = useState(""); + const [bannerImage, setBannerImage] = useState(""); + const [error, setError] = useState(""); + const [bannerId, setBannerId] = useState(""); + const [banner, setBanner] = useState([]); + const [itemPerPage, setItemPerPage] = useState(10); + const [page, setPage] = useState(1); + const [open, setOpen] = useState(false); + const [olderBannerName, setOlderBaannerName] = useState(""); + const [olderImage, setOlderImage] = useState(""); + + const handleOpen = () => setOpen(true); + const handleClose = () => { + setOpen(false); + // setUpdating(false); + setEdit(false); + + setBannerName(""); + setBannerId(""); + setOlderImage(""); + setBannerImage(""); + }; + + const getBanner = async () => { + try { + const response = await axios.get("/api/registerImage/getImage", { + // headers: { + // Authorization: `Bearer ${token}`, + // }, + }); + + if (response.status === 200) { + // console.log(response); + setBanner(response?.data?.image); + setLoading(false); + } + } catch (error) { + swal({ + title: error, + text: " please login to access the resource ", + icon: "error", + button: "Retry", + dangerMode: true, + }); + } + }; + + useEffect(() => { + getBanner(); + }, []); + // }, [token, banner]); + + const handleEditClick = (_id, bannerImage) => { + setOpen(true); + console.log("bannerImage", bannerImage); + setOlderImage(bannerImage); + + setBannerId(_id); + setOlderBaannerName(bannerName); + setEdit(true); + // setUpdating(false); + }; + // const bannerNamesArray = []; + // const setBannerNamesArray = () => { + // banner && + // banner.map((banner) => { + // bannerNamesArray.push(banner.bannerName.toLowerCase()); + // }); + // }; + // setBannerNamesArray(); + + const handleUpdate = () => { + // const filteredArrayNames = bannerNamesArray.filter( + // (item) => item !== olderBannerName.toLowerCase() + // ); + // console.log(filteredArrayNames, "filter"); + // const bannerExits = filteredArrayNames.includes(bannerName.toLowerCase()); + // if (bannerExits) { + // swal({ + // title: "Warning", + // text: "Banner already exists ", + // icon: "error", + // button: "Retry", + // dangerMode: true, + // }); + // return; + // } + + if ((!bannerImage && !olderImage)) { + swal({ + title: "Warning", + text: "Please fill all the required fields!", + icon: "error", + button: "Retry", + dangerMode: true, + }); + return; + } + setUpdating(false); + const formData = new FormData(); + + formData.append("bannerImage", bannerImage); + + formData.append("olderImage", JSON.stringify(olderImage)); + + axios + .patch(`/api/registerImage/update/${bannerId}`, formData, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + // setUpdating(true); + // setIsUpdate(false); + handleClose(); + setBannerId(""); + setBannerName(""); + setBannerImage(""); + setOlderImage(""); + setUpdating(true); + setEdit(false); + swal({ + title: "Congratulations!!", + text: "The banner was updated successfully!", + icon: "success", + button: "OK", + }); + // getCategories(); // Refresh the category list after updating + }) + .catch((err) => { + // console.log(err); + swal({ + title: "Sorry, please try again", + text: err, + icon: "error", + button: "Retry", + dangerMode: true, + }); + setUpdating(true); + }); + }; + + const handleDelete = (_id) => { + swal({ + title: "Are you sure?", + icon: "error", + buttons: { + Yes: { text: "Yes", value: true }, + Cancel: { text: "Cancel", value: "cancel" }, + }, + }).then((value) => { + if (value === true) { + axios + .delete(`/api/registerImage/delete/${_id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + swal({ + title: "Congratulations!!", + text: "The banner was deleted successfully!", + icon: "success", + button: "OK", + }); + // getCategories(); // Refresh the category list after deleting + }) + .catch((err) => { + swal({ + title: "", + text: "Something went wrong!", + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + } + }); + }; + + const handleSaveBanner = async () => { + const bannerExits = bannerNamesArray.includes(bannerName.toLowerCase()); + if (bannerExits) { + swal({ + title: "Warning", + text: "Banner Already exits.", + icon: "error", + button: "Retry", + dangerMode: true, + }); + return; + } + if (!bannerImage) { + swal({ + title: "Warning", + text: "Please fill all the required fields!", + icon: "error", + button: "Retry", + dangerMode: true, + }); + return; + } + setSaveLoading(false); + setLoading(true); + const formData = new FormData(); + formData.append("bannerName", bannerName); + formData.append("bannerImage", bannerImage); + + axios + .post("/api/registerImage/add", formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/formdata", + }, + }) + .then((response) => { + if (response.status === 201) { + setOpen(false); + setLoading(false); + setSaveLoading(true); + setBannerName(""); + setBannerImage(""); + setOlderImage(""); + swal({ + title: "Added", + text: "New Banner added successfully!", + icon: "success", + button: "OK", + }); + // getCategories(); // Refresh the category list after adding + } + }) + .catch((error) => { + setSaveLoading(true); + swal({ + title: error, + text: "something went wrong", + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; + // const getPageCount = () => { + // return Math.max(1, Math.ceil(banner?.length / itemPerPage)); + // }; + + const handleFileChange = (e) => { + const files = e.target.files[0]; + + // Check file types and append to selectedFiles + const allowedTypes = ["image/jpeg", "image/png", "image/jpg"]; + if (allowedTypes.includes(files.type)) { + setBannerImage(files); + } + }; + const handeldeleteImage = () => { + setBannerImage(""); + }; + return ( +
+
+
+
+
+
+
+ Register Image +
+ +
+ {/* */} + + + {/* + + Banner Name + + handleClose()}> + + + */} + {/*
*/} + {/* + setBannerName( + e.target.value.charAt(0).toUpperCase() + + e.target.value.slice(1) + ) + } + /> */} + {/* {bannerName ? ( + <> + + {25 - bannerName.length} characters left + + + ) : ( + <> + )} */} + + + + {bannerImage && ( + + bannerImage + handeldeleteImage()} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + )} + {olderImage && ( + + bannerImage + setOlderImage("")} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + )} + + + {error &&

{error}

} +

+ Upload jpg, jpeg and png only* +

+ + + {!edit && ( + + )} + {edit && ( + + )} + + + + +
+
+
+
+ +
+
+
+
+
+
+ {/*
+ +
*/} +
+
+ +
+ + + + + + + + + + + {!loading && banner?.length === 0 && ( + + + + )} + {loading ? ( + + + + ) : ( + banner && + banner + .map((item, i) => ( + + + {/* */} + + + )) + )} + +
ImageAction
+ +
+ Loading... +
+ + {/* {item?.image} */} +
{ }
+ 		+
{item.bannerName}
+ 		+ + {/* */} +
+
+ + {/*
+ setPage(value)} + /> +
*/} +
+
+
+
+
+
+
+ ); +}; + +export default Banners; diff --git a/src/views/Images/ShopImage.js b/src/views/Images/ShopImage.js new file mode 100644 index 0000000..6795464 --- /dev/null +++ b/src/views/Images/ShopImage.js @@ -0,0 +1,709 @@ +import React, { useState, useEffect } from "react"; +import axios from "axios"; +import { isAutheticated } from "src/auth"; +import { + Button, + Box, + IconButton, + Modal, + Pagination, + TextField, + Typography, +} from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; +import { ClipLoader } from "react-spinners"; +import swal from "sweetalert"; +import CloudUploadIcon from "@mui/icons-material/CloudUpload"; +import DeleteSharpIcon from "@mui/icons-material/DeleteSharp"; + +const style = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: 400, + bgcolor: "background.paper", + borderRadius: "0.5rem", + boxShadow: 24, + width: "500px", +}; + +const Banners = () => { + const token = isAutheticated(); + const [loading, setLoading] = useState(true); + const [updating, setUpdating] = useState(true); // for loading state + // const [isUpdate, setIsUpdate] = useState(false); // for edit state + const [saveLoding, setSaveLoading] = useState(true); + const [edit, setEdit] = useState(false); + const [bannerName, setBannerName] = useState(""); + const [bannerImage, setBannerImage] = useState(""); + const [error, setError] = useState(""); + const [bannerId, setBannerId] = useState(""); + const [banner, setBanner] = useState([]); + const [itemPerPage, setItemPerPage] = useState(10); + const [page, setPage] = useState(1); + const [open, setOpen] = useState(false); + const [olderBannerName, setOlderBaannerName] = useState(""); + const [olderImage, setOlderImage] = useState(""); + + const handleOpen = () => setOpen(true); + const handleClose = () => { + setOpen(false); + // setUpdating(false); + setEdit(false); + + setBannerName(""); + setBannerId(""); + setOlderImage(""); + setBannerImage(""); + }; + + const getBanner = async () => { + try { + const response = await axios.get("/api/shopImage/getImage", { + // headers: { + // Authorization: `Bearer ${token}`, + // }, + }); + + if (response.status === 200) { + // console.log(response); + setBanner(response?.data?.image); + setLoading(false); + } + } catch (error) { + swal({ + title: error, + text: " please login to access the resource ", + icon: "error", + button: "Retry", + dangerMode: true, + }); + } + }; + + useEffect(() => { + getBanner(); + }, []); + // }, [token, banner]); + + const handleEditClick = (_id, bannerImage) => { + setOpen(true); + console.log("bannerImage", bannerImage); + setOlderImage(bannerImage); + + setBannerId(_id); + setOlderBaannerName(bannerName); + setEdit(true); + // setUpdating(false); + }; + // const bannerNamesArray = []; + // const setBannerNamesArray = () => { + // banner && + // banner.map((banner) => { + // bannerNamesArray.push(banner.bannerName.toLowerCase()); + // }); + // }; + // setBannerNamesArray(); + + const handleUpdate = () => { + // const filteredArrayNames = bannerNamesArray.filter( + // (item) => item !== olderBannerName.toLowerCase() + // ); + // console.log(filteredArrayNames, "filter"); + // const bannerExits = filteredArrayNames.includes(bannerName.toLowerCase()); + // if (bannerExits) { + // swal({ + // title: "Warning", + // text: "Banner already exists ", + // icon: "error", + // button: "Retry", + // dangerMode: true, + // }); + // return; + // } + + if ((!bannerImage && !olderImage)) { + swal({ + title: "Warning", + text: "Please fill all the required fields!", + icon: "error", + button: "Retry", + dangerMode: true, + }); + return; + } + setUpdating(false); + const formData = new FormData(); + + formData.append("bannerImage", bannerImage); + + formData.append("olderImage", JSON.stringify(olderImage)); + + axios + .patch(`/api/shopImage/update/${bannerId}`, formData, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + // setUpdating(true); + // setIsUpdate(false); + handleClose(); + setBannerId(""); + setBannerName(""); + setBannerImage(""); + setOlderImage(""); + setUpdating(true); + setEdit(false); + swal({ + title: "Congratulations!!", + text: "The banner was updated successfully!", + icon: "success", + button: "OK", + }); + // getCategories(); // Refresh the category list after updating + }) + .catch((err) => { + // console.log(err); + swal({ + title: "Sorry, please try again", + text: err, + icon: "error", + button: "Retry", + dangerMode: true, + }); + setUpdating(true); + }); + }; + + const handleDelete = (_id) => { + swal({ + title: "Are you sure?", + icon: "error", + buttons: { + Yes: { text: "Yes", value: true }, + Cancel: { text: "Cancel", value: "cancel" }, + }, + }).then((value) => { + if (value === true) { + axios + .delete(`/api/shopImage/delete/${_id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + swal({ + title: "Congratulations!!", + text: "The banner was deleted successfully!", + icon: "success", + button: "OK", + }); + // getCategories(); // Refresh the category list after deleting + }) + .catch((err) => { + swal({ + title: "", + text: "Something went wrong!", + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + } + }); + }; + + const handleSaveBanner = async () => { + // const bannerExits = bannerNamesArray.includes(bannerName.toLowerCase()); + // if (bannerExits) { + // swal({ + // title: "Warning", + // text: "Banner Already exits.", + // icon: "error", + // button: "Retry", + // dangerMode: true, + // }); + // return; + // } + if (!bannerImage) { + swal({ + title: "Warning", + text: "Please fill all the required fields!", + icon: "error", + button: "Retry", + dangerMode: true, + }); + return; + } + setSaveLoading(false); + setLoading(true); + const formData = new FormData(); + formData.append("bannerName", bannerName); + formData.append("bannerImage", bannerImage); + + axios + .post("/api/shopImage/add", formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/formdata", + }, + }) + .then((response) => { + if (response.status === 201) { + setOpen(false); + setLoading(false); + setSaveLoading(true); + setBannerName(""); + setBannerImage(""); + setOlderImage(""); + swal({ + title: "Added", + text: "New Banner added successfully!", + icon: "success", + button: "OK", + }); + // getCategories(); // Refresh the category list after adding + } + }) + .catch((error) => { + setSaveLoading(true); + swal({ + title: error, + text: "something went wrong", + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; + // const getPageCount = () => { + // return Math.max(1, Math.ceil(banner?.length / itemPerPage)); + // }; + + const handleFileChange = (e) => { + const files = e.target.files[0]; + + // Check file types and append to selectedFiles + const allowedTypes = ["image/jpeg", "image/png", "image/jpg"]; + if (allowedTypes.includes(files.type)) { + setBannerImage(files); + } + }; + const handeldeleteImage = () => { + setBannerImage(""); + }; + return ( +
+
+
+
+
+
+
+ Shop Page Image +
+ +
+ {/* */} + + + {/* + + Banner Name + + handleClose()}> + + + */} + {/*
*/} + {/* + setBannerName( + e.target.value.charAt(0).toUpperCase() + + e.target.value.slice(1) + ) + } + /> */} + {/* {bannerName ? ( + <> + + {25 - bannerName.length} characters left + + + ) : ( + <> + )} */} + + + + {bannerImage && ( + + bannerImage + handeldeleteImage()} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + )} + {olderImage && ( + + bannerImage + setOlderImage("")} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + )} + + + {error &&

{error}

} +

+ Upload jpg, jpeg and png only* +

+ + + {!edit && ( + + )} + {edit && ( + + )} + + + + +
+
+
+
+ +
+
+
+
+
+
+ {/*
+ +
*/} +
+
+ +
+ + + + + + + + + + + {!loading && banner?.length === 0 && ( + + + + )} + {loading ? ( + + + + ) : ( + banner && + banner + .map((item, i) => ( + + + {/* */} + + + )) + )} + +
ImageAction
+ +
+ Loading... +
+ + {/* {item?.image} */} +
{ }
+ 		+
{item.bannerName}
+ 		+ + {/* */} +
+
+ + {/*
+ setPage(value)} + /> +
*/} +
+
+
+
+
+
+
+ ); +}; + +export default Banners;