Skip to content

Feature/custom hooks #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Feature/custom hooks #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d6c5204
create custom hook for dashboard component
metmetal Feb 5, 2023
e80da7a
custom hook for fetching data on dashboard
metmetal Feb 5, 2023
a33a14e
Merge branch 'master' into feature/customHooks
metmetal Feb 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 72 additions & 83 deletions src/component/Dashoboard/ManageServices/ManageServices.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,15 @@ import AddService from '../AddService/AddService';

const ManageServices = () => {
const { state: { email }} = useAppContext()
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)
})
}, [isUpdated, edit])

const checkPermission = (id, action) => {
const getMainServices = services.slice(0, 6)
const getService = getMainServices.find(({_id}) => id === _id)
if(getService && email === "[email protected]"){
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 === "[email protected]") {
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)
Expand All @@ -47,77 +36,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 ?
<AddService edit={edit} setEdit={setEdit} services={services}/>
:
services.length === 0 ?
<TableLoader/>
:
<div className="orderList">
<Table hover width="100%">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{
services.map(({_id, name, price, description}) => {
let des = description
// let shortDes = des.split(' ').slice(0,5).join(' ')
return(
<tr>
<td>{name}</td>
<td>{des ? des : "Nothing"}</td>
<td>${price}</td>
<td>
<Button variant="outline-success" onClick={() => checkPermission(_id, 'edit')}>
<FontAwesomeIcon icon={faEdit}/>
Edit</Button>
<Button className="ml-2" variant="outline-danger" onClick={() => checkPermission(_id, 'delete')}>
<FontAwesomeIcon icon={faTrashAlt}/>
Delete</Button>
</td>
</tr>
)
})
}
</tbody>
</Table>
</div>
}
{edit ?
<AddService edit={edit} setEdit={setEdit} services={services} />
:
services.length === 0 ?
<TableLoader />
:
<div className="orderList">
<Table hover width="100%">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{
services.map(({ _id, name, price, description }) => {
let des = description
// let shortDes = des.split(' ').slice(0,5).join(' ')
return (
<tr>
<td>{name}</td>
<td>{des ? des : "Nothing"}</td>
<td>${price}</td>
<td>
<Button variant="outline-success" onClick={() => checkPermission(_id, 'edit')}>
<FontAwesomeIcon icon={faEdit} />
Edit</Button>
<Button className="ml-2" variant="outline-danger" onClick={() => checkPermission(_id, 'delete')}>
<FontAwesomeIcon icon={faTrashAlt} />
Delete</Button>
</td>
</tr>
)
})
}
</tbody>
</Table>
</div>
}
</>
);
};
Expand Down
61 changes: 28 additions & 33 deletions src/component/Dashoboard/OrderList/OrderList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="px-2">
{
orders.length === 0 ?
<TableLoader/>
:
<div className="orderList">
<Table hover>
<thead>
<tr>
<th>Name</th>
<th>Email ID</th>
<th>Service</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{
orders.map(order => <Order key={order._id} order={order} handleAction={handleAction}/>)
}
</tbody>
</Table>
</div>
orders.length === 0 ?
<TableLoader />
:
<div className="orderList">
<Table hover>
<thead>
<tr>
<th>Name</th>
<th>Email ID</th>
<th>Service</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{
orders.map(order => <Order key={order._id} order={order} handleAction={handleAction} />)
}
</tbody>
</Table>
</div>
}

</div>
);
};
Expand Down
91 changes: 43 additions & 48 deletions src/component/Dashoboard/UserDashboard/AddReview/Review.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

import React, { useEffect, useState } from 'react';
import { Button } from 'react-bootstrap';
import ReviewForm from './ReviewFrom';
Expand All @@ -11,19 +12,13 @@ import { faEdit } from '@fortawesome/free-regular-svg-icons';
import toast from 'react-hot-toast';
import swal from 'sweetalert';
import { useAppContext } from '../../../../context';
import { useFetchData } from '../../hooks/useFetchData';


const Review = () => {
const { state: { user: { email, img } } } = useAppContext();
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)
Expand All @@ -33,48 +28,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 (
<div>
{ description ?
<div className="userReviewBox">
<div className="review col-md-6 mx-auto">
{ img ? <img src={img} alt=""/>:
<img src={`${userImg}`} alt=""/>}
<h5 className="testimonialName">{name}</h5>
<h6 className="testimonialAddress">{address}</h6>
<p><i>{description}</i></p>
{description ?
<div className="userReviewBox">
<div className="review col-md-6 mx-auto">
{img ? <img src={img} alt="" /> :
<img src={`${userImg}`} alt="" />}
<h5 className="testimonialName">{name}</h5>
<h6 className="testimonialAddress">{address}</h6>
<p><i>{description}</i></p>
</div>
<Button as={Link} to={`/dashboard/review/${_id}`} variant="outline-success"> <FontAwesomeIcon icon={faEdit} /> Edit</Button>
<Button variant="outline-danger" onClick={() => handleDelete(_id)}> <FontAwesomeIcon icon={faTrashAlt} /> Delete</Button>
</div>
<Button as={Link} to={`/dashboard/review/${_id}`} variant="outline-success"> <FontAwesomeIcon icon={faEdit}/> Edit</Button>
<Button variant="outline-danger" onClick={() => handleDelete(_id)}> <FontAwesomeIcon icon={faTrashAlt}/> Delete</Button>
</div>
:
<ReviewForm setIsUpdated={setIsUpdated}/>
:
<ReviewForm setIsUpdated={setIsUpdated} />
}
</div>
);
Expand Down
Loading