gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

self directory

Browse Source
This commit is contained in:
pawan-dot 2022-10-28 15:17:20 +05:30
parent 6f6a884c54
commit 1064b3c505
15 changed files with 259 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -37,7 +37,7 @@ const App = () => {
setUserData(false) setUserData(false)
} else { } else {
try { try {
console.log('requesting user data from server') // console.log('requesting user data from server')
let response = await axios.get(`/api/v1/user/details`, { let response = await axios.get(`/api/v1/user/details`, {
headers: { headers: {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,

4
src/_nav.js
View File

@ -32,7 +32,7 @@ const _nav = [
{ {
component: CNavItem, component: CNavItem,
name: 'Category', name: 'Categories',
icon: <CIcon icon={cilPencil} customClassName="nav-icon" />, icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
to: '/category', to: '/category',
}, },
@ -63,7 +63,7 @@ const _nav = [
{ {
component: CNavItem, component: CNavItem,
name: 'Banners', name: 'Home Page Banners',
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />, icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: '/banner', to: '/banner',
}, },

64
src/views/Banners/AddBanner.js
View File

@ -27,12 +27,12 @@ const AddBanner = () => {
const [image, setImage] = useState(""); const [image, setImage] = useState("");
const [title, setTitle] = useState(""); const [title, setTitle] = useState("");
const [subTitle, setSubTitle] = useState(""); const [subTitle, setSubTitle] = useState("");
const [section, setSection] = useState(""); // const [section, setSection] = useState("");
const [startDate, setStartDate] = useState(new Date()); const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date()); const [endDate, setEndDate] = useState(new Date());
const [subSection, setSubSection] = useState(""); // const [subSection, setSubSection] = useState("");
const [category, setCategory] = useState(false); // const [category, setCategory] = useState(false);
@ -42,16 +42,16 @@ const AddBanner = () => {
const handleSubmit = async () => { const handleSubmit = async () => {
if (!(title && subTitle && image && section && subSection && startDate && endDate)) { if (!(title && image && startDate && endDate)) {
return swal('Error!', 'All fields are required', 'error') return swal('Error!', 'All fields are required', 'error')
} }
const myForm = new FormData(); const myForm = new FormData();
myForm.set("title", title); myForm.set("title", title);
myForm.set("subTitle", subTitle); // myForm.set("subTitle", subTitle);
myForm.set("section", section); // myForm.set("section", section);
myForm.set("subSection", subSection); // myForm.set("subSection", subSection);
myForm.set("startDate", startDate); myForm.set("startDate", startDate);
myForm.set("endDate", endDate); myForm.set("endDate", endDate);
myForm.set("image", image); myForm.set("image", image);
@ -94,25 +94,25 @@ const AddBanner = () => {
}; };
useEffect(() => { // useEffect(() => {
const getData = async () => { // const getData = async () => {
let res = await axios.get( // let res = await axios.get(
`/api/category/getAll`, // `/api/category/getAll`,
{ // {
headers: { // headers: {
Authorization: `Bearer ${token}`, // Authorization: `Bearer ${token}`,
}, // },
} // }
); // );
console.log(res.data) // // console.log(res.data)
setCategory(res.data.category) // setCategory(res.data.category)
} // }
if (section === "category") { // if (section === "category") {
getData() // getData()
} else { // } else {
setCategory(false) // setCategory(false)
} // }
}, [section]) // }, [section])
return ( return (
<> <>
@ -136,7 +136,7 @@ const AddBanner = () => {
value={title} value={title}
placeholder="Title" /> placeholder="Title" />
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> {/* <CInputGroup className="mb-3">
<CInputGroupText> <CInputGroupText>
<CIcon icon={cilPencil} /> <CIcon icon={cilPencil} />
</CInputGroupText> </CInputGroupText>
@ -145,9 +145,9 @@ const AddBanner = () => {
onChange={(e) => setSubTitle(e.target.value)} onChange={(e) => setSubTitle(e.target.value)}
value={subTitle} value={subTitle}
placeholder="sub title" /> placeholder="sub title" />
</CInputGroup> </CInputGroup> */}
<CInputGroup className="mb-3"> {/* <CInputGroup className="mb-3">
<CInputGroupText > <CInputGroupText >
Section Section
<CIcon icon={cilNotes} /> <CIcon icon={cilNotes} />
@ -167,7 +167,7 @@ const AddBanner = () => {
<option value="offers">offers</option> <option value="offers">offers</option>
<option value="category" >category</option> <option value="category" >category</option>
{/* <option value="6">--select--</option> */}
</select> </select>
@ -187,11 +187,11 @@ const AddBanner = () => {
<option key={index} value={item.name}>{item.name}</option> <option key={index} value={item.name}>{item.name}</option>
))} ))}
{/* <option value="6">--select--</option> */}
</select></>} </select></>}
</CInputGroup> </CInputGroup> */}
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText> <CInputGroupText>
Start Date* Start Date*

10
src/views/Banners/Banner.js
View File

@ -69,7 +69,7 @@ function banner() {
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="page-title-box d-flex align-items-center justify-content-between"> <div className="page-title-box d-flex align-items-center justify-content-between">
<h4 className="mb-3">CMP-BANNER</h4> <h4 className="mb-3">Home Page Banners</h4>
<Link to="/addbanner"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Banner</button></Link> <Link to="/addbanner"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Banner</button></Link>
{/* <div className="page-title-right"> {/* <div className="page-title-right">
<ol className="breadcrumb m-0"> <ol className="breadcrumb m-0">
@ -97,8 +97,8 @@ function banner() {
<tr> <tr>
<th>Title</th> <th>Title</th>
<th>Image</th> <th>Image</th>
<th>Section</th> {/* <th>Section</th>
<th>Sub Section</th> <th>Sub Section</th> */}
<th>Status</th> <th>Status</th>
<th>Added On</th> <th>Added On</th>
<th>Action</th> <th>Action</th>
@ -112,8 +112,8 @@ function banner() {
<img src={`${item?.image.url}`} width="50" alt="" /></td> <img src={`${item?.image.url}`} width="50" alt="" /></td>
<td>{item?.section}</td> {/* <td>{item?.section}</td>
<th>{item?.subSection}</th> <th>{item?.subSection}</th> */}
<td> <td>
<span <span
className={`badge rounded-pill bg-${new Date(`${item?.endDate}`) > new Date() ? "success" : "danger" className={`badge rounded-pill bg-${new Date(`${item?.endDate}`) > new Date() ? "success" : "danger"

107
src/views/Banners/EditBanner.js
View File

@ -29,14 +29,16 @@ const EditBanner = () => {
let history = useHistory(); let history = useHistory();
const [image, setImage] = useState(""); const [image, setImage] = useState("");
const [title, setTitle] = useState(""); const [title, setTitle] = useState("");
const [subTitle, setSubTitle] = useState(""); // const [subTitle, setSubTitle] = useState("");
const [section, setSection] = useState(""); const [imagesPreview, setImagesPreview] = useState();
// const [section, setSection] = useState("");
const [startDate, setStartDate] = useState(""); const [startDate, setStartDate] = useState("");
const [endDate, setEndDate] = useState(""); const [endDate, setEndDate] = useState("");
const [subSection, setSubSection] = useState(""); // const [subSection, setSubSection] = useState("");
const [category, setCategory] = useState(false); // const [category, setCategory] = useState(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
//fetch one Offer //fetch one Offer
@ -46,28 +48,29 @@ const EditBanner = () => {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
}, },
}); });
// console.log(res.data.banner)
// console.log(res.data.banner.startDate) // console.log(res.data.banner.startDate)
setTitle(res.data.banner.title) setTitle(res.data.banner.title)
setSubTitle(res.data.banner.subTitle) // setSubTitle(res.data.banner.subTitle)
setSection(res.data.banner.section) // setSection(res.data.banner.section)
setSubSection(res.data.banner.subSection) // setSubSection(res.data.banner.subSection)
setStartDate(new Date(res.data.banner.startDate).toLocaleDateString()) setImagesPreview(res.data.banner.image.url)
setEndDate(new Date(res.data.banner.endDate).toLocaleDateString()) setStartDate(res.data.banner.startDate)
setEndDate(res.data.banner.endDate)
}, [id]); }, [id]);
const handleSubmit = async () => { const handleSubmit = async () => {
if (!(title && subTitle && image && section && subSection && startDate && endDate)) { if (!(title && startDate && endDate)) {
return swal('Error!', 'All fields are required', 'error') return swal('Error!', 'All fields are required', 'error')
} }
const myForm = new FormData(); const myForm = new FormData();
myForm.set("title", title); myForm.set("title", title);
myForm.set("subTitle", subTitle); // myForm.set("subTitle", subTitle);
myForm.set("section", section); // myForm.set("section", section);
myForm.set("subSection", subSection); // myForm.set("subSection", subSection);
myForm.set("startDate", startDate); myForm.set("startDate", startDate);
myForm.set("endDate", endDate); myForm.set("endDate", endDate);
myForm.set("image", image); myForm.set("image", image);
@ -97,13 +100,31 @@ const EditBanner = () => {
}; };
// const handleImage = (e) => {
// const files = e.target.files[0];
// // console.log(files)
// setImage(files);
// };
// //
const handleImage = (e) => { const handleImage = (e) => {
const files = e.target.files[0]; const files = e.target.files[0];
// console.log(files) // console.log(files)
setImage(files); setImage(files);
// only for file preview------------------------------------
const Reader = new FileReader();
Reader.readAsDataURL(files);
Reader.onload = () => {
if (Reader.readyState === 2) {
setImagesPreview(Reader.result);
}
};
// -----------------------------------------------------------------------------
}; };
//
const onCancel = () => { const onCancel = () => {
// window.location = "/comproducts"; // window.location = "/comproducts";
history.goBack() history.goBack()
@ -111,25 +132,25 @@ const EditBanner = () => {
}; };
useEffect(() => { // useEffect(() => {
const getData = async () => { // const getData = async () => {
let res = await axios.get( // let res = await axios.get(
`/api/category/getAll`, // `/api/category/getAll`,
{ // {
headers: { // headers: {
Authorization: `Bearer ${token}`, // Authorization: `Bearer ${token}`,
}, // },
} // }
); // );
console.log(res.data) // console.log(res.data)
setCategory(res.data.category) // setCategory(res.data.category)
} // }
if (section === "category") { // if (section === "category") {
getData() // getData()
} else { // } else {
setCategory(false) // setCategory(false)
} // }
}, [section]) // }, [section])
return ( return (
<> <>
@ -153,7 +174,7 @@ const EditBanner = () => {
value={title} value={title}
placeholder="Title" /> placeholder="Title" />
</CInputGroup> </CInputGroup>
<CInputGroup className="mb-3"> {/* <CInputGroup className="mb-3">
<CInputGroupText> <CInputGroupText>
<CIcon icon={cilPencil} /> <CIcon icon={cilPencil} />
</CInputGroupText> </CInputGroupText>
@ -162,9 +183,9 @@ const EditBanner = () => {
onChange={(e) => setSubTitle(e.target.value)} onChange={(e) => setSubTitle(e.target.value)}
value={subTitle} value={subTitle}
placeholder="sub title" /> placeholder="sub title" />
</CInputGroup> </CInputGroup> */}
<CInputGroup className="mb-3"> {/* <CInputGroup className="mb-3">
<CInputGroupText> <CInputGroupText>
<CIcon icon={cilNotes} /> <CIcon icon={cilNotes} />
@ -183,7 +204,7 @@ const EditBanner = () => {
<option value="events">events</option> <option value="events">events</option>
<option value="offers">offers</option> <option value="offers">offers</option>
<option value="category" >category</option> <option value="category" >category</option>
{/* <option value="6">--select--</option> */}
</select> </select>
{category && <> {category && <>
@ -202,11 +223,11 @@ const EditBanner = () => {
<option key={index} value={item.name}>{item.name}</option> <option key={index} value={item.name}>{item.name}</option>
))} ))}
{/* <option value="6">--select--</option> */}
</select></>} </select></>}
</CInputGroup> </CInputGroup> */}
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText> <CInputGroupText>
Start Date* Start Date*
@ -258,6 +279,12 @@ const EditBanner = () => {
/> />
</CInputGroup> </CInputGroup>
<div id="createProductFormImage" className="w-50 d-flex">
{imagesPreview && <img className=" w-50 p-1 " src={imagesPreview} alt="Product Preview" />}
</div>
</div> </div>
<div className=" d-flex"> <div className=" d-flex">

6
src/views/Banners/ViewBanner.js
View File

@ -59,7 +59,7 @@ function ViewBanner() {
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="page-title-box d-flex align-items-center justify-content-between"> <div className="page-title-box d-flex align-items-center justify-content-between">
<h4 className="mb-3">CMP-BANNER</h4> <h4 className="mb-3">Home Page Banner</h4>
<Link to="/addbanner"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add New Banner</button></Link> <Link to="/addbanner"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add New Banner</button></Link>
{/* <div className="page-title-right"> {/* <div className="page-title-right">
<ol className="breadcrumb m-0"> <ol className="breadcrumb m-0">
@ -92,8 +92,8 @@ function ViewBanner() {
<tr> <th>Image</th> <td> <tr> <th>Image</th> <td>
<img src={`${banner.image?.url}`} width="50" alt="" /> <img src={`${banner.image?.url}`} width="50" alt="" />
</td></tr> </td></tr>
<tr><th>Section</th><td>{banner?.section}</td></tr> {/* <tr><th>Section</th><td>{banner?.section}</td></tr>
<tr> <th>Sub Section</th><td>{banner?.subSection}</td></tr> <tr> <th>Sub Section</th><td>{banner?.subSection}</td></tr> */}
<tr><th>Start Date</th> <td> <tr><th>Start Date</th> <td>
{new Date(`${banner?.startDate}`).toDateString()} {new Date(`${banner?.startDate}`).toDateString()}
</td></tr> </td></tr>

2
src/views/Category/Category.js
View File

@ -96,7 +96,7 @@ function Products() {
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="page-title-box d-flex align-items-center justify-content-between"> <div className="page-title-box d-flex align-items-center justify-content-between">
<h4 className="mb-3">CMP-Category</h4> <h4 className="mb-3">Categories</h4>
<Link to="/addCategory"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Category</button></Link> <Link to="/addCategory"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Category</button></Link>
{/* <div className="page-title-right"> {/* <div className="page-title-right">
<ol className="breadcrumb m-0"> <ol className="breadcrumb m-0">

61
src/views/Category/EditCategory.js
View File

@ -29,7 +29,9 @@ const AddProduct = () => {
// console.log(id) // console.log(id)
const [image, setImage] = useState(""); const [image, setImage] = useState("");
const [name, setName] = useState(""); const [name, setName] = useState("");
const [imagesPreview, setImagesPreview] = useState();
const [ctegoryBannerImage, setCtegoryBannerImage] = useState(""); const [ctegoryBannerImage, setCtegoryBannerImage] = useState("");
const [ctegoryBannerImagePreview, setCtegoryBannerImagePreview] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
useEffect(async () => { useEffect(async () => {
@ -39,7 +41,9 @@ const AddProduct = () => {
}, },
}); });
// setImage(res.data.category.image.url)
setImagesPreview(res.data.category.image.url)
setCtegoryBannerImagePreview(res.data.category.category_banner.url)
setName(res.data.category.name) setName(res.data.category.name)
}, [id]); }, [id]);
@ -83,10 +87,42 @@ const AddProduct = () => {
} }
const handleImage = (e) => { const handleImage = (e) => {
const files = e.target.files[0]; const files = e.target.files[0];
// console.log(files) // console.log(files)
setImage(files); setImage(files);
// only for file preview------------------------------------
const Reader = new FileReader();
Reader.readAsDataURL(files);
Reader.onload = () => {
if (Reader.readyState === 2) {
setImagesPreview(Reader.result);
}
};
// -----------------------------------------------------------------------------
}; };
const handleBannerImage = (e) => {
const files = e.target.files[0];
// console.log(files)
setCtegoryBannerImage(files);
// only for file preview------------------------------------
const Reader = new FileReader();
Reader.readAsDataURL(files);
Reader.onload = () => {
if (Reader.readyState === 2) {
setCtegoryBannerImagePreview(Reader.result);
}
};
// -----------------------------------------------------------------------------
};
// //
const onCancel = () => { const onCancel = () => {
history.goBack() history.goBack()
@ -102,7 +138,7 @@ const AddProduct = () => {
<CCard className="mr-4 mx-4"> <CCard className="mr-4 mx-4">
<CCardBody className="p-4"> <CCardBody className="p-4">
<CForm> <CForm>
<h3 className="mb-4 justify-content-center">Edit {name} Category</h3> <h3 className="mb-4 justify-content-center">Edit Category</h3>
<div> <div>
<div> <div>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
@ -118,7 +154,7 @@ const AddProduct = () => {
<div>category image *</div> <div>category image *</div>
<CInputGroup className="mb-3 mt-2"> <CInputGroup className="mb-1 mt-2">
{/* <CIcon icon={cilLockLocked} /> */} {/* <CIcon icon={cilLockLocked} /> */}
@ -132,8 +168,13 @@ const AddProduct = () => {
/> />
</CInputGroup> </CInputGroup>
<div id="createProductFormImage" className="w-50 d-flex">
{imagesPreview && <img className=" w-25 p-1 " src={imagesPreview} alt="Product Preview" />}
</div>
<div>category Banner image *</div> <div>category Banner image *</div>
<CInputGroup className="mb-3 mt-2"> <CInputGroup className="mb-1 mt-2">
@ -142,14 +183,22 @@ const AddProduct = () => {
placeholder="image" placeholder="image"
accept="image/*" accept="image/*"
required required
onChange={(e) => setCtegoryBannerImage(e.target.files[0])} onChange={handleBannerImage}
/> />
</CInputGroup> </CInputGroup>
<div id="createProductFormImage" className="w-50 d-flex">
{ctegoryBannerImagePreview && <img className=" w-25 p-1 " src={ctegoryBannerImagePreview} alt="Product Preview" />}
</div>
</div> </div>
<div className=" d-flex"> <div className="mt-3 d-flex">
<button <button
onClick={handleSubmit} onClick={handleSubmit}
type="button" type="button"

16
src/views/Directory/Bisuness.js
View File

@ -3,10 +3,12 @@ import React, { useEffect, useState, useCallback, useMemo } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
// import { API } from "../../data"; // import { API } from "../../data";
import { isAutheticated } from "../../auth"; import { isAutheticated } from "../../auth";
import Pagination from "./Pagination";
const Bisuness = () => { const Bisuness = () => {
const [bisuness, setBisuness] = useState([]) const [bisuness, setBisuness] = useState([])
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage] = useState(20);
const token = isAutheticated(); const token = isAutheticated();
@ -32,7 +34,14 @@ const Bisuness = () => {
getProducts(); getProducts();
}, [getProducts]); }, [getProducts]);
// Get current posts
//pagination
const indexOfLastPost = currentPage * postsPerPage;
const indexOfFirstPost = indexOfLastPost - postsPerPage;
const currentPosts = bisuness.slice(indexOfFirstPost, indexOfLastPost);
// Change page
const paginate = pageNumber => setCurrentPage(pageNumber);
const handleDelete = async (id) => { const handleDelete = async (id) => {
let status = window.confirm("Do you want to delete"); let status = window.confirm("Do you want to delete");
@ -102,7 +111,7 @@ const Bisuness = () => {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{bisuness.map((item, index) => {currentPosts.map((item, index) =>
<tr key={index}> <tr key={index}>
<td>{item?.name} </td> <td>{item?.name} </td>
@ -248,6 +257,9 @@ const Bisuness = () => {
{/* <!-- container-fluid --> */} {/* <!-- container-fluid --> */}
</div> </div>
</div> </div>
<Pagination postsPerPage={postsPerPage}
totalPosts={bisuness.length}
paginate={paginate} />
</> </>
) )
} }

2
src/views/Directory/EditBisuness.js
View File

@ -95,7 +95,7 @@ const EditBisuness = () => {
const handleSubmit = async () => { const handleSubmit = async () => {
if (!(state.name && state.phone && state.email && state.Building_Name && state.Street_Name && state.country && state.city && state.description if (!(state.name && state.phone && state.email && state.Building_Name && state.Street_Name && state.country && state.city && state.description
&& state.category && state.status && image)) { && state.category && state.status)) {
return swal('Error!', 'All fields are required', 'error') return swal('Error!', 'All fields are required', 'error')
} }

25
src/views/Directory/Pagination.js Normal file
View File

@ -0,0 +1,25 @@
import React from 'react';
import { Link } from "react-router-dom";
const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
pageNumbers.push(i);
}
return (
<nav>
<ul className='ml-3 pagination '>
{pageNumbers.map(number => (
<li key={number} className='page-item'>
<Link onClick={() => paginate(number)} to="/bisuness" className='page-link'>
{number}
</Link>
</li>
))}
</ul>
</nav>
);
};
export default Pagination;

4
src/views/Feedback/feedback.js
View File

@ -12,7 +12,7 @@ function feedback() {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage] = useState(10); const [postsPerPage] = useState(20);
const token = isAutheticated(); const token = isAutheticated();
const getRestriction = useCallback(async () => { const getRestriction = useCallback(async () => {
@ -96,7 +96,7 @@ function feedback() {
</thead> </thead>
<tbody> <tbody>
{currentPosts && currentPosts.map((item, index) => {currentPosts && currentPosts.map((item, index) =>
<tr> <tr key={index}>
<td>{item?.name}</td> <td>{item?.name}</td>
<td>{item?.description}</td> <td>{item?.description}</td>

25
src/views/Requirement/Pagination.js Normal file
View File

@ -0,0 +1,25 @@
import React from 'react';
import { Link } from "react-router-dom";
const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
pageNumbers.push(i);
}
return (
<nav>
<ul className='ml-3 pagination '>
{pageNumbers.map(number => (
<li key={number} className='page-item'>
<Link onClick={() => paginate(number)} to="/requirement" className='page-link'>
{number}
</Link>
</li>
))}
</ul>
</nav>
);
};
export default Pagination;

24
src/views/Requirement/Requirement.js
View File

@ -5,11 +5,13 @@ import { Link } from "react-router-dom";
import swal from 'sweetalert'; import swal from 'sweetalert';
// import { API } from "../../data"; // import { API } from "../../data";
import { isAutheticated } from "../../auth"; import { isAutheticated } from "../../auth";
import Pagination from "./Pagination";
import RequirementOpt from "./RequirementOpt"; import RequirementOpt from "./RequirementOpt";
function Requirement() { function Requirement() {
const [requirement, setRequirement] = useState([]) const [requirement, setRequirement] = useState([])
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage] = useState(20);
const token = isAutheticated(); const token = isAutheticated();
// console.log(token) // console.log(token)
const getRequirement = useCallback(async () => { const getRequirement = useCallback(async () => {
@ -29,6 +31,21 @@ function Requirement() {
useEffect(() => { useEffect(() => {
getRequirement(); getRequirement();
}, [getRequirement]); }, [getRequirement]);
const indexOfLastPost = currentPage * postsPerPage;
const indexOfFirstPost = indexOfLastPost - postsPerPage;
const currentPosts = requirement.slice(indexOfFirstPost, indexOfLastPost);
// Change page
const paginate = pageNumber => setCurrentPage(pageNumber);
const handleApprove = async (id) => { const handleApprove = async (id) => {
let status = window.confirm("Do you want to Approve"); let status = window.confirm("Do you want to Approve");
if (!status) return; if (!status) return;
@ -99,7 +116,7 @@ function Requirement() {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{requirement && requirement.map((item, index) => {currentPosts && currentPosts.map((item, index) =>
<RequirementOpt key={index} item={item} handleApprove={handleApprove} /> <RequirementOpt key={index} item={item} handleApprove={handleApprove} />
)} )}
</tbody> </tbody>
@ -115,6 +132,9 @@ function Requirement() {
</div> </div>
{/* <!-- container-fluid --> */} {/* <!-- container-fluid --> */}
</div> </div>
<Pagination postsPerPage={postsPerPage}
totalPosts={requirement.length}
paginate={paginate} />
</div> </div>
); );
} }

7
src/views/Requirement/RequirementOpt.js
View File

@ -9,6 +9,7 @@ const RequirementOpt = ({ item, handleApprove }) => {
const [user, setUser] = useState() const [user, setUser] = useState()
const [approve, setApprove] = useState(false) const [approve, setApprove] = useState(false)
const token = isAutheticated(); const token = isAutheticated();
useEffect(async () => { useEffect(async () => {
let resp = await axios.get( let resp = await axios.get(
`/api/v1/admin/user/${item.addedBy}`, `/api/v1/admin/user/${item.addedBy}`,
@ -18,7 +19,7 @@ const RequirementOpt = ({ item, handleApprove }) => {
}, },
} }
); );
// console.log(resp.data)
setUser(resp.data.user) setUser(resp.data.user)
///approved ///approved
@ -36,7 +37,7 @@ const RequirementOpt = ({ item, handleApprove }) => {
setApprove(false) setApprove(false)
} }
} catch (e) { } catch (e) {
console.log(e)
setApprove(false) setApprove(false)
} }
} }
@ -79,7 +80,7 @@ const RequirementOpt = ({ item, handleApprove }) => {
<img src={`${item.image[0]?.url}`} width="50" alt="" /> <img src={`${item.image[0]?.url}`} width="50" alt="" />
</td> </td>
<td>{item?.areaOfInterest}</td> <td>{item?.areaOfInterest}</td>
<td>{user?.name}</td> {user && <td>{user?.name}</td>}
<td> <td>
{/* {item?.addedOn} */} {/* {item?.addedOn} */}
{new Date(`${item?.createdAt}`).toDateString()}<span> , {`${formatAMPM(item?.createdAt)}`}</span> {new Date(`${item?.createdAt}`).toDateString()}<span> , {`${formatAMPM(item?.createdAt)}`}</span>