From 06924cbaa16d72946cb5b883e98db0c51077a7a9 Mon Sep 17 00:00:00 2001 From: print-signs Date: Tue, 17 Oct 2023 12:35:21 +0530 Subject: [PATCH] api integration for delete category any updatecategory done --- package.json | 3 + src/_nav.js | 7 + src/index.js | 3 +- src/routes.js | 7 + src/views/Categories/categories.js | 496 ++++++++++++++++++++ src/views/Testimonials/Testimonials.js | 611 +++++++++++++------------ 6 files changed, 825 insertions(+), 302 deletions(-) create mode 100644 src/views/Categories/categories.js diff --git a/package.json b/package.json index b046275..8a700fc 100644 --- a/package.json +++ b/package.json @@ -37,8 +37,11 @@ "@coreui/react": "^4.3.0", "@coreui/react-chartjs": "^2.0.0", "@coreui/utils": "^1.3.1", + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", "@material-ui/core": "^4.12.4", "@material-ui/data-grid": "^4.0.0-alpha.37", + "@mui/icons-material": "^5.14.13", "@mui/material": "^5.11.12", "@reduxjs/toolkit": "^1.9.2", "axios": "^0.25.0", diff --git a/src/_nav.js b/src/_nav.js index 304acf8..c386d73 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -5,6 +5,7 @@ import { cilAppsSettings, cilBrush, cilCart, + cilCat, cilClipboard, cilCommand, cilCompress, @@ -34,6 +35,12 @@ const _nav = [ icon: , to: "/users", }, + { + component: CNavItem, + name: "Categories", + icon: , + to: "/categories", + }, { component: CNavItem, name: "Products", diff --git a/src/index.js b/src/index.js index 4daf2ee..e480d1a 100644 --- a/src/index.js +++ b/src/index.js @@ -15,7 +15,8 @@ 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 = "https://happy-sombrero-ray.cyclic.app/"; //->latest deployed + // axios.defaults.baseURL = "https://happy-sombrero-ray.cyclic.app/"; //->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 01f8b98..82e182a 100644 --- a/src/routes.js +++ b/src/routes.js @@ -82,6 +82,7 @@ import AddNewAppointment from "./views/Appointments/AddNewAppointment"; import ViewHealthCareProvider from "./views/Business/ViewHealthCareProvider"; import Campaign from "./views/Campaigns/Campaign.js"; import AddCampaign from "./views/Campaigns/AddCampaign.js"; +import Categories from "./views/Categories/categories"; const routes = [ { path: "/", exact: true, name: "Home" }, { @@ -142,6 +143,12 @@ const routes = [ name: "view healthcare providers", element: ViewHealthCareProvider, }, + // Categories + { + path: "//categories", + name: "Categories", + element: Categories, + }, { path: "//campaigns", name: "campaigns", diff --git a/src/views/Categories/categories.js b/src/views/Categories/categories.js new file mode 100644 index 0000000..3d5ad4a --- /dev/null +++ b/src/views/Categories/categories.js @@ -0,0 +1,496 @@ +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"; + +const style = { + position: "absolute", + top: "20%", + left: "50%", + transform: "translate(-50%, -50%)", + width: 400, + bgcolor: "background.paper", + borderRadius: "0.5rem", + boxShadow: 24, + width: "500px", +}; + +const Categories = () => { + 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 [categoryName, setCategoryName] = useState(""); + const [success, setSuccess] = useState(false); + const [categoryId, setCategoryId] = useState(""); + const [category, setCategory] = useState([]); + const [itemPerPage, setItemPerPage] = useState(10); + const [page, setPage] = useState(1); + const [open, setOpen] = useState(false); + + const handleOpen = () => setOpen(true); + const handleClose = () => { + setOpen(false); + // setUpdating(true) + setCategoryName(""); + setCategoryId(""); + // setUpdating(false); + // setIsUpdate(false); + }; + + const getCategories = async () => { + try { + const response = await axios.get("/api/category/getCategories", { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + + if (response.status === 200) { + setCategory(response?.data?.categories); + setLoading(false); + } + } catch (error) { + swal({ + title: error, + text: " please login to access the resource ", + icon: "error", + button: "Retry", + dangerMode: true, + }); + } + }; + + useEffect(() => { + getCategories(); + }, [token, category]); + + console.log(category.length); + const handleEditClick = (_id, categoryName) => { + setOpen(true); + + setCategoryName(categoryName); + setCategoryId(_id); + setEdit(true); + // setUpdating(false); + }; + + const handleUpdate = () => { + setUpdating(false); + axios + .patch( + `/api/category/update/${categoryId}`, + { categoryName }, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ) + .then((res) => { + // setUpdating(true); + // setIsUpdate(false); + handleClose(); + setCategoryId(""); + setCategoryName(""); + setUpdating(true); + setEdit(false); + swal({ + title: "Congratulations!!", + text: "The category was updated successfully!", + icon: "success", + button: "OK", + }); + // getCategories(); // Refresh the category list after updating + }) + .catch((err) => { + swal({ + title: "Sorry, please try again", + text: "Something went wrong!", + icon: "error", + button: "Retry", + dangerMode: 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/category/delete/${_id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + swal({ + title: "Congratulations!!", + text: "The category 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 handleSaveCategory = async () => { + if (!categoryName) { + swal({ + title: "Warning", + text: "Category name is empty. Please enter the category name!", + icon: "error", + button: "Retry", + dangerMode: true, + }); + return; + } + setSaveLoading(false); + setLoading(true); + axios + .post( + "/api/category/add", + { categoryName }, + { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "application/json", + }, + } + ) + .then((response) => { + if (response.status === 201) { + setOpen(false); + setLoading(false); + setSaveLoading(true); + setCategoryName(""); + swal({ + title: "Added", + text: "New category 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(category.length / itemPerPage)); + }; + return ( +
+
+
+
+
+
+
+ Categories +
+ +
+ + + + + + Category Name + + handleClose()}> + + + +
+ setCategoryName(e.target.value)} + /> + + {!edit && ( + + )} + {edit && ( + + )} + + + + +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ +
+ + + + + + + + + + {!loading && category.length === 0 && ( + + + + )} + {loading ? ( + + + + ) : ( + category && + category + .slice( + (`${page}` - 1) * itemPerPage, + `${page}` * itemPerPage + ) + .map((item, i) => ( + + + + + )) + )} + +
Categories NameAction
+
No Data Available
+
+ Loading... +
+
{item.categoryName}
+ 		+ + +
+
+ +
+ setPage(value)} + /> +
+
+
+
+
+
+
+
+ ); +}; + +export default Categories; diff --git a/src/views/Testimonials/Testimonials.js b/src/views/Testimonials/Testimonials.js index 631d304..251d24d 100644 --- a/src/views/Testimonials/Testimonials.js +++ b/src/views/Testimonials/Testimonials.js @@ -1,333 +1,342 @@ - - -import React, { useState, useEffect } from 'react' -import { Link } from 'react-router-dom' -import Button from '@material-ui/core/Button' -import { useNavigate } from 'react-router-dom' -import axios from 'axios' -import { isAutheticated } from 'src/auth' +import React, { useState, useEffect } from "react"; +import { Link } from "react-router-dom"; +import Button from "@material-ui/core/Button"; +import { useNavigate } from "react-router-dom"; +import axios from "axios"; +import { isAutheticated } from "src/auth"; const Testimonials = () => { - const token = isAutheticated() - const navigate = useNavigate() - const [loading, setLoading] = useState(true) - const [success, setSuccess] = useState(true) - const [TestimonialsData, setTestimonialsData] = useState([]) + const token = isAutheticated(); + const navigate = useNavigate(); + const [loading, setLoading] = useState(true); + const [success, setSuccess] = useState(true); + const [TestimonialsData, setTestimonialsData] = useState([]); - const [currentPage, setCurrentPage] = useState(1) - const [itemPerPage, setItemPerPage] = useState(10) - const [showData, setShowData] = useState(TestimonialsData) + const [currentPage, setCurrentPage] = useState(1); + const [itemPerPage, setItemPerPage] = useState(10); + const [showData, setShowData] = useState(TestimonialsData); - const handleShowEntries = (e) => { - setCurrentPage(1) - setItemPerPage(e.target.value) - } + const handleShowEntries = (e) => { + setCurrentPage(1); + setItemPerPage(e.target.value); + }; + const getTestimonialsData = async () => { + axios + .get(`/api/testimonial/getAll/`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + setTestimonialsData(res.data?.testimonial); + setLoading(false); + }) + .catch((err) => { + setLoading(false); + }); + }; + useEffect(() => { + getTestimonialsData(); + }, [success]); - const getTestimonialsData = async () => { + useEffect(() => { + const loadData = () => { + const indexOfLastPost = currentPage * itemPerPage; + const indexOfFirstPost = indexOfLastPost - itemPerPage; + setShowData(TestimonialsData.slice(indexOfFirstPost, indexOfLastPost)); + }; + loadData(); + }, [currentPage, itemPerPage, TestimonialsData]); + + 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 - .get(`/api/testimonial/getAll/`, { - headers: { - Authorization: `Bearer ${token}`, - }, - }) - .then((res) => { - setTestimonialsData(res.data?.testimonial) - setLoading(false) - }) - .catch((err) => { - setLoading(false) - }) - } + .delete(`/api/item/delete/${id}`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + setSuccess((prev) => !prev); + }) + .catch((err) => { + swal({ + title: "Warning", + text: "Something went wrong!", + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + } + }); + }; - useEffect(() => { - getTestimonialsData() - }, [success]) - - useEffect(() => { - const loadData = () => { - const indexOfLastPost = currentPage * itemPerPage - const indexOfFirstPost = indexOfLastPost - itemPerPage - setShowData(TestimonialsData.slice(indexOfFirstPost, indexOfLastPost)) - } - loadData() - }, [currentPage, itemPerPage, TestimonialsData]) - - 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/item/delete/${id}`, { - headers: { - 'Access-Control-Allow-Origin': '*', - Authorization: `Bearer ${token}`, - }, - }) - .then((res) => { - setSuccess((prev) => !prev) - }) - .catch((err) => { - swal({ - title: 'Warning', - text: 'Something went wrong!', - icon: 'error', - button: 'Retry', - dangerMode: true, - }) - }) - } - }) - } - - return ( -
-
-
-
-
-
+
+
+
+
+
-
- Testimonials -
+ > +
+ Testimonials +
-
- -
-
-
-
+
+ +
+
+
+
-
-
-
-
-
-
-
- -
-
-
+ > + + + + + + entries + +
+
+
-
- - - +
+
+ + + + + + + + + + {!loading && showData.length === 0 && ( + + + + )} + {loading ? ( + + + + ) : ( + showData.map((item, i) => { + return ( + + - - - - - - - - - - - - {!loading && showData.length === 0 && ( - - - - )} - {loading ? ( - - - - ) : ( - showData.map((item, i) => { - return ( - - - - - - + + + > + View + + + + + ); + }) + )} + +
NameTestimonialsDate & TimeAction
+
No Data Available
+
+ Loading... +
{item.name}NameTestimonialsDate & TimeAction
-
No Data Available
-
- Loading... -
{item.name}{item.company} - {new Date(item.createdAt).toLocaleString('en-IN', { - weekday: 'short', - month: 'short', - day: 'numeric', - year: 'numeric', - hour: 'numeric', - minute: 'numeric', - hour12: true, - })} - - - - + {new Date(item.createdAt).toLocaleString( + "en-IN", + { + weekday: "short", + month: "short", + day: "numeric", + year: "numeric", + hour: "numeric", + minute: "numeric", + hour12: true, + } + )} + + + - -
+
- - ) - }) - )} - - -
- -
-
-
- Showing {currentPage * itemPerPage - itemPerPage + 1} to{' '} - {Math.min(currentPage * itemPerPage, TestimonialsData.length)} of{' '} - {TestimonialsData.length} entries -
-
- -
-
-
    -
  • - setCurrentPage((prev) => prev - 1)} - > - Previous - -
    • - - {!(currentPage - 1 < 1) && ( -
  • - setCurrentPage((prev) => prev - 1)} - > - {currentPage - 1} - -
    • - )} - -
  • - - {currentPage} - -
    • - - {!( - (currentPage + 1) * itemPerPage - itemPerPage > - TestimonialsData.length - 1 - ) && ( -
  • - { - setCurrentPage((prev) => prev + 1) - }} - > - {currentPage + 1} - -
    • - )} - -
  • - TestimonialsData.length - 1 - ) - ? 'paginate_button page-item next' - : 'paginate_button page-item next disabled' - } - > - setCurrentPage((prev) => prev + 1)} - > - Next - -
    • -
-
-
-
-
-
-
+
+
+
+ Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} + {Math.min( + currentPage * itemPerPage, + TestimonialsData.length + )}{" "} + of {TestimonialsData.length} entries +
-
-
-
- ) -} -export default Testimonials +
+
+
    +
  • + setCurrentPage((prev) => prev - 1)} + > + Previous + +
    • + + {!(currentPage - 1 < 1) && ( +
  • + + setCurrentPage((prev) => prev - 1) + } + > + {currentPage - 1} + +
    • + )} + +
  • + + {currentPage} + +
    • + + {!( + (currentPage + 1) * itemPerPage - itemPerPage > + TestimonialsData.length - 1 + ) && ( +
  • + { + setCurrentPage((prev) => prev + 1); + }} + > + {currentPage + 1} + +
    • + )} + +
  • + TestimonialsData.length - 1 + ) + ? "paginate_button page-item next" + : "paginate_button page-item next disabled" + } + > + setCurrentPage((prev) => prev + 1)} + > + Next + +
    • +
+
+
+ + + + + + + + + ); +}; + +export default Testimonials;