From d6c5204d91585495ce98df583b71ebf897a68e74 Mon Sep 17 00:00:00 2001 From: Mohamed Date: Sun, 5 Feb 2023 23:45:58 +0100 Subject: [PATCH 1/2] create custom hook for dashboard component --- .../ManageServices/ManageServices.jsx | 156 +++++++++--------- 1 file changed, 78 insertions(+), 78 deletions(-) diff --git a/src/component/Dashoboard/ManageServices/ManageServices.jsx b/src/component/Dashoboard/ManageServices/ManageServices.jsx index 2dc5b36..d6178b2 100644 --- a/src/component/Dashoboard/ManageServices/ManageServices.jsx +++ b/src/component/Dashoboard/ManageServices/ManageServices.jsx @@ -12,27 +12,27 @@ import TableLoader from '../../Shared/TableOrder/TableOrder'; import AddService from '../AddService/AddService'; const ManageServices = () => { - const {user : { email }} = useContext(UserContext) + const { user: { email } } = useContext(UserContext) const [services, setServices] = useState([]) const [isUpdated, setIsUpdated] = useState(false) const [edit, setEdit] = useState(null); useEffect(() => { axios.get('https://immense-river-40491.herokuapp.com/services') - .then(res => { - setServices(res.data); - setIsUpdated(false) - }) + .then(res => { + setServices(res.data); + setIsUpdated(false) + }) }, [isUpdated, edit]) - + const checkPermission = (id, action) => { const getMainServices = services.slice(0, 6) - const getService = getMainServices.find(({_id}) => id === _id) - - if(getService && email === "test@admin.com"){ - swal("Permission restriction!","As a test admin, you can't edit or delete the main six services. You can only edit or delete your added services", "info" ) + const getService = getMainServices.find(({ _id }) => id === _id) + + if (getService && email === "test@admin.com") { + swal("Permission restriction!", "As a test admin, you can't edit or delete the main six services. You can only edit or delete your added services", "info") } else { - if(action === 'edit'){ + if (action === 'edit') { setEdit(id) } else { handleDelete(id) @@ -48,77 +48,77 @@ const ManageServices = () => { icon: "warning", buttons: true, dangerMode: true, - }) - .then( wantDelete => { - if (wantDelete) { - const loading = toast.loading('deleting...Please wait!') - axios.delete(`https://immense-river-40491.herokuapp.com/delete/${id}`) - .then(res => { - toast.dismiss(loading) - if(res){ - setIsUpdated(true); - toast.success('Service has been deleted successfully!'); - } - else{ - toast.error('Something went wrong, please try again'); - } - }) - .catch(err => { - toast.dismiss(loading) - swal({ - title: "Failed!", - text: 'Something went wrong, please try again', - icon: "error", - }); - }) - } - }) + }) + .then(wantDelete => { + if (wantDelete) { + const loading = toast.loading('deleting...Please wait!') + axios.delete(`https://immense-river-40491.herokuapp.com/delete/${id}`) + .then(res => { + toast.dismiss(loading) + if (res) { + setIsUpdated(true); + toast.success('Service has been deleted successfully!'); + } + else { + toast.error('Something went wrong, please try again'); + } + }) + .catch(err => { + toast.dismiss(loading) + swal({ + title: "Failed!", + text: 'Something went wrong, please try again', + icon: "error", + }); + }) + } + }) } return ( <> - { edit ? - - : - services.length === 0 ? - - : -
- - - - - - - - - - - { - services.map(({_id, name, price, description}) => { - let des = description - // let shortDes = des.split(' ').slice(0,5).join(' ') - return( - - - - - - - ) - }) - } - -
NameDescriptionPriceAction
{name}{des ? des : "Nothing"}${price} - - -
-
- } + {edit ? + + : + services.length === 0 ? + + : +
+ + + + + + + + + + + { + services.map(({ _id, name, price, description }) => { + let des = description + // let shortDes = des.split(' ').slice(0,5).join(' ') + return ( + + + + + + + ) + }) + } + +
NameDescriptionPriceAction
{name}{des ? des : "Nothing"}${price} + + +
+
+ } ); }; From e80da7aad6d20b2215b264b77603d9f8eb03e3dc Mon Sep 17 00:00:00 2001 From: Mohamed Date: Sun, 5 Feb 2023 23:47:15 +0100 Subject: [PATCH 2/2] custom hook for fetching data on dashboard --- .../Dashoboard/OrderList/OrderList.jsx | 61 ++++++------ .../UserDashboard/AddReview/Review.jsx | 92 +++++++++---------- .../UserDashboard/BookList/BookList.jsx | 77 ++++++++-------- .../Dashoboard/hooks/useFetchData.jsx | 13 +++ 4 files changed, 120 insertions(+), 123 deletions(-) create mode 100644 src/component/Dashoboard/hooks/useFetchData.jsx diff --git a/src/component/Dashoboard/OrderList/OrderList.jsx b/src/component/Dashoboard/OrderList/OrderList.jsx index 976a989..0f1fee4 100644 --- a/src/component/Dashoboard/OrderList/OrderList.jsx +++ b/src/component/Dashoboard/OrderList/OrderList.jsx @@ -1,50 +1,45 @@ import axios from 'axios'; -import React, { useEffect, useState } from 'react'; +import React from 'react'; import { Table } from 'react-bootstrap'; import TableLoader from '../../Shared/TableOrder/TableOrder'; import Order from './Order'; -import './OrderList.css' +import './OrderList.css'; +import { useFetchData } from '../hooks/useFetchData'; const OrderList = () => { - const [orders, setOrders] = useState([]); - const [isUpdated, setIsUpdated] = useState(false); - - useEffect(() => { - axios.get('https://immense-river-40491.herokuapp.com/orders') - .then(res => setOrders(res.data)) - },[isUpdated]) + const [orders, setIsUpdated] = useFetchData('https://immense-river-40491.herokuapp.com/orders', [], []); const handleAction = (id, status) => { setIsUpdated(true) - axios.patch(`https://immense-river-40491.herokuapp.com/statusUpdate/${id}`, {status: status }) - .then(res => res.data && setIsUpdated(false)) + axios.patch(`https://immense-river-40491.herokuapp.com/statusUpdate/${id}`, { status: status }) + .then(res => res.data && setIsUpdated(false)) } - + return (
{ - orders.length === 0 ? - - : -
- - - - - - - - - - - { - orders.map(order => ) - } - -
NameEmail IDServiceStatus
-
+ orders.length === 0 ? + + : +
+ + + + + + + + + + + { + orders.map(order => ) + } + +
NameEmail IDServiceStatus
+
} - +
); }; diff --git a/src/component/Dashoboard/UserDashboard/AddReview/Review.jsx b/src/component/Dashoboard/UserDashboard/AddReview/Review.jsx index c0e4499..6fa94ed 100644 --- a/src/component/Dashoboard/UserDashboard/AddReview/Review.jsx +++ b/src/component/Dashoboard/UserDashboard/AddReview/Review.jsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext } from 'react'; import { Button } from 'react-bootstrap'; import ReviewForm from './ReviewFrom'; import './Review.css'; @@ -11,19 +11,13 @@ import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'; import { faEdit } from '@fortawesome/free-regular-svg-icons'; import toast from 'react-hot-toast'; import swal from 'sweetalert'; +import { useFetchData } from '../../hooks/useFetchData'; const Review = () => { - const { user: {email, img} } = useContext(UserContext); - const [review, setReview] = useState({}); - const [isUpdated, setIsUpdated] = useState(false) - const {_id, name, address, description} = review || {}; - useEffect(() => { - axios(`https://immense-river-40491.herokuapp.com/userReview?email=${email}`) - .then(res => { - setReview(res.data[0]); - }) - }, [email, isUpdated]) + const { user: { email, img } } = useContext(UserContext); + const [review, setIsUpdated] = useFetchData(`https://immense-river-40491.herokuapp.com/userReview?email=${email}`, {}, [email]); + const { _id, name, address, description } = review || {}; const handleDelete = (id) => { setIsUpdated(false) @@ -33,48 +27,48 @@ const Review = () => { icon: "warning", buttons: true, dangerMode: true, - }) - .then( wantDelete => { - if (wantDelete) { - const loading = toast.loading('deleting...Please wait!') - axios.delete(`https://immense-river-40491.herokuapp.com/deleteReview/${id}`) - .then(res => { - toast.dismiss(loading) - if(res){ - setIsUpdated(true); - toast.success('Your review has been deleted successfully!'); - } - else{ - toast.error('Something went wrong, please try again'); - } - }) - .catch(err => { - toast.dismiss(loading) - swal({ - title: "Failed!", - text: 'Something went wrong, please try again', - icon: "error", - }); - }) - } - }); + }) + .then(wantDelete => { + if (wantDelete) { + const loading = toast.loading('deleting...Please wait!') + axios.delete(`https://immense-river-40491.herokuapp.com/deleteReview/${id}`) + .then(res => { + toast.dismiss(loading) + if (res) { + setIsUpdated(true); + toast.success('Your review has been deleted successfully!'); + } + else { + toast.error('Something went wrong, please try again'); + } + }) + .catch(err => { + toast.dismiss(loading) + swal({ + title: "Failed!", + text: 'Something went wrong, please try again', + icon: "error", + }); + }) + } + }); } return (
- { description ? -
-
- { img ? : - } -
{name}
-
{address}
-

{description}

+ {description ? +
+
+ {img ? : + } +
{name}
+
{address}
+

{description}

+
+ +
- - -
- : - + : + }
); diff --git a/src/component/Dashoboard/UserDashboard/BookList/BookList.jsx b/src/component/Dashoboard/UserDashboard/BookList/BookList.jsx index 8544db7..47b4cd5 100644 --- a/src/component/Dashoboard/UserDashboard/BookList/BookList.jsx +++ b/src/component/Dashoboard/UserDashboard/BookList/BookList.jsx @@ -1,23 +1,18 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import axios from 'axios'; import { Button } from 'react-bootstrap'; -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext } from 'react'; import toast from 'react-hot-toast'; import swal from 'sweetalert'; import { UserContext } from '../../../../App'; import './BookList.css' import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'; import ListSkeleton from '../../../Shared/TableOrder/ListSkeleton'; +import { useFetchData } from '../../hooks/useFetchData'; const BookList = () => { const { user } = useContext(UserContext); - const [bookings, setBookings] = useState([]); - const [isUpdated, setIsUpdated] = useState(false); - - useEffect(() => { - axios.get(`https://immense-river-40491.herokuapp.com/bookingList?email=${user.email}`) - .then(res => setBookings(res.data)) - },[user.email, isUpdated]) + const [bookings, setIsUpdated] = useFetchData(`https://immense-river-40491.herokuapp.com/bookingList?email=${user.email}`, [], [user.email]); const handleDelete = (id, status) => { setIsUpdated(false) @@ -27,51 +22,51 @@ const BookList = () => { icon: "warning", buttons: true, dangerMode: true, - }) - .then( wantDelete => { - if (wantDelete) { - const loading = toast.loading('deleting...Please wait!') - axios.delete(`https://immense-river-40491.herokuapp.com/deleteOrder/${id}`) - .then(res => { - toast.dismiss(loading) - if(res){ - setIsUpdated(true); - toast.success('Your Booking is successfully canceled!'); - } - else{ - toast.error('Something went wrong, please try again'); - } - }) - .catch(err => { - toast.dismiss(loading) - swal({ - title: "Failed!", - text: 'Something went wrong, please try again', - icon: "error", - }); - }) - } - }); + }) + .then(wantDelete => { + if (wantDelete) { + const loading = toast.loading('deleting...Please wait!') + axios.delete(`https://immense-river-40491.herokuapp.com/deleteOrder/${id}`) + .then(res => { + toast.dismiss(loading) + if (res) { + setIsUpdated(true); + toast.success('Your Booking is successfully canceled!'); + } + else { + toast.error('Something went wrong, please try again'); + } + }) + .catch(err => { + toast.dismiss(loading) + swal({ + title: "Failed!", + text: 'Something went wrong, please try again', + icon: "error", + }); + }) + } + }); } return (
- {bookings.length === 0 && } + {bookings.length === 0 && }
{ - bookings.map(({_id, serviceName,status,description,img}) => { - return(
+ bookings.map(({ _id, serviceName, status, description, img }) => { + return (
- +
-

{status}

+

{status}

{serviceName}

{description}

-
) diff --git a/src/component/Dashoboard/hooks/useFetchData.jsx b/src/component/Dashoboard/hooks/useFetchData.jsx new file mode 100644 index 0000000..4b049e0 --- /dev/null +++ b/src/component/Dashoboard/hooks/useFetchData.jsx @@ -0,0 +1,13 @@ +import { useState, useEffect } from 'react'; +import axios from 'axios'; +export const useFetchData = (url, initialData, dependents) => { + const [data, setData] = useState(initialData); + const [isUpdated, setIsUpdated] = useState(false); + + useEffect(() => { + axios.get(url) + .then(res => setData(res.data)) + }, [url, ...dependents, isUpdated]); + + return [data, setIsUpdated]; +}