Skip to content

GitLab

Commit d4c8d671 authored by kusang96's avatar kusang96
Browse files

Pagination 수정중

parent 488f656f
Hide whitespace changes
Inline Side-by-side
client/src/Components/Pagination.js
View file @ d4c8d671
import { Pagination } from "react-bootstrap";
import React from 'react';
import { Pagination } from 'react-bootstrap';
function Paginations(props) {
......@@ -7,26 +7,23 @@ function Paginations(props) {
<Pagination>
<Pagination.First onClick={() => props.handlePage(1)} />
{props.index === 1 ? <Pagination.Prev onClick={()=>props.handlePage(props.index)} /> : <Pagination.Prev onClick={()=>props.handlePage(props.index - 1)} />}
{props.index === props.endPage-1 ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
{props.index === props.endPage ? <Pagination.Item onClick={()=>props.handlePage(props.index - 4)}>{props.index - 4}</Pagination.Item> : ""}
{props.index === props.endPage ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
{props.index === props.totalPosts-1 ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
{props.index === props.totalPosts ? <Pagination.Item onClick={()=>props.handlePage(props.index - 4)}>{props.index - 4}</Pagination.Item> : ""}
{props.index === props.totalPosts ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
{props.index < 3 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index - 2)}>{props.index - 2}</Pagination.Item>}
{props.index === 1 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index - 1)}>{props.index - 1}</Pagination.Item>}
<Pagination.Item active>{props.index}</Pagination.Item>
{props.index === props.endPage ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index + 1)}>{props.index + 1}</Pagination.Item>}
{props.index > props.endPage-2 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index + 2)}>{props.index + 2}</Pagination.Item>}
{props.index === props.totalPosts ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index + 1)}>{props.index + 1}</Pagination.Item>}
{props.index > props.totalPosts-2 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index + 2)}>{props.index + 2}</Pagination.Item>}
{props.index === 1 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 3)}>{props.index + 3}</Pagination.Item> : ""}
{props.index === 1 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 4)}>{props.index + 4}</Pagination.Item> : ""}
{props.index === 2 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 3)}>{props.index + 3}</Pagination.Item> : ""}
{props.index === props.endPage ? "" : <Pagination.Next onClick={()=>props.handlePage(props.index + 1)} />}
<Pagination.Last onClick={() =>props.handlePage(props.endPage)} />
{props.index === props.totalPosts ? "" : <Pagination.Next onClick={()=>props.handlePage(props.index + 1)} />}
<Pagination.Last onClick={() =>props.handlePage(props.totalPosts)} />
</Pagination>
)
}
export default Paginations
\ No newline at end of file
client/src/Components/SubNav.js
View file @ d4c8d671
......@@ -16,7 +16,6 @@ function SubNav() {
const url = ele.toLowerCase()
list.push(
<Nav.Link as={Link} to={`/categories/${url}`}>{ele}</Nav.Link>
//categories/${SubNav.url}/&{url}
)
})
setCategoriesDiv(list)
......
client/src/Pages/Admin.js
View file @ d4c8d671
import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom';
import AllCard from '../Components/AllCard';
import Pagination from '../Components/Pagination';
import Pagination from "../Components/Pagination";
import axios from 'axios';
import catchError from '../utils/catchErrors';
import { Row, Form, FormControl, Button, Container } from 'react-bootstrap';
function Admin() {
const INIT_STATUS = { indexOfFirst: 0, indexOfLast: 10 }
const [search, setSearch] = useState({ word: '' })
const [productlist, setProductlist] = useState([])
const [status, setStatus] = useState(INIT_STATUS)
const [currentPage, setCurrentPage] = useState(1);
const [per, setPer] = useState(10);
const [error, setError] = useState('')
const searchref = useRef(null)
const indexOfLast = currentPage * per;
const indexOfFirst = indexOfLast - per;
useEffect(() => {
getProductlist()
}, [])
function paginate(items, index, itemNumber) {
const posts = [];
const startIndex = (index - 1) * itemNumber
for (var i = 0; i < itemNumber; i++) {
posts.push(items[(startIndex + i)])
}
return posts
}
function currentPosts(tmp) {
let currentPosts = 0;
currentPosts = tmp.slice(indexOfFirst, indexOfLast);
console.log("postsPerPage=",currentPage)
return currentPosts;
}
async function getProductlist() {
try {
const response = await axios.get(`/api/product/getproduct/all`)
......@@ -36,12 +59,19 @@ function Admin() {
const response = await axios.get(`/api/product/getproduct/all?product=${search.word}`)
console.log("response.data=", response.data)
setProductlist(response.data)
e.target.childNodes[0].value = ''
} catch (error) {
catchError(error, setError)
} finally {
searchref.current.value = ''
}
}
if (error) {
alert(`${error}`)
setError('')
searchref.current.value = ''
}
return (
<Container>
<style type="text/css">
......@@ -58,18 +88,18 @@ function Admin() {
`}
</style>
<Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
<FormControl type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
<FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="px-2">
<img src="icon/search.svg" width="20" height="20" />
</Button>
<Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
</Row>
<Row className="justify-content-center m-5">
{productlist.map(pro => (
{currentPosts(productlist).map(pro => (
<AllCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
))}
</Row>
<Pagination />
<Pagination index={currentPage} totalPosts={Math.ceil(productlist.length / per)} handlePage={setCurrentPage} />
</Container>
)
}
......
client/src/Pages/ProductsList.js
View file @ d4c8d671
import React, { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import ListCard from '../Components/ListCard';
import Pagination from "../Components/Pagination";
import axios from 'axios';
import catchError from '../utils/catchErrors';
import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup } from 'react-bootstrap';
......@@ -11,17 +10,8 @@ function ProductsList({ match }) {
const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase())
const [subCategory, setSubCategory] = useState([])
const [productlist, setProductlist] = useState([])
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage, setPostsPerPage] = useState(6);
const [error, setError] = useState('')
const indexOfLast = currentPage * postsPerPage;
const indexOfFirst = indexOfLast - postsPerPage;
function currentPosts(tmp) {
let currentPosts = 0;
currentPosts = tmp.slice(indexOfFirst, indexOfLast);
return currentPosts;
}
const searchref = useRef(null)
useEffect(() => {
setMainCategory(match.params.main.toUpperCase())
......@@ -44,14 +34,16 @@ function ProductsList({ match }) {
const response = await axios.get(`/api/product/getproduct/main/${mainCategory}?product=${search.word}`)
console.log("response.data=", response.data)
setProductlist(response.data)
e.target.childNodes[0].value = ''
} catch (error) {
catchError(error, setError)
} finally {
searchref.current.value = ''
}
}
async function getSubsCategories() {
try {
setError('')
const response = await axios.get(`/api/categories/sub/${mainCategory}`)
setSubCategory(Object.values(response.data)[0])
console.log("object value=", Object.values(response.data));
......@@ -61,8 +53,8 @@ function ProductsList({ match }) {
}
async function getProductlist() {
console.log("tlfgpd")
try {
setError('')
const response = await axios.get(`/api/product/getproduct/main/${mainCategory}`)
setProductlist(response.data)
} catch (error) {
......@@ -72,6 +64,7 @@ function ProductsList({ match }) {
async function handleSort(method) {
try {
setError('')
const response = await axios.get(`/api/product/getproduct/?q=${method}`)
setProductlist(response.data)
} catch (error) {
......@@ -81,17 +74,21 @@ function ProductsList({ match }) {
async function handleSubname(e) {
const subname = e.target.name
console.log("subname=", subname)
try {
console.log("first test!!!!!!!!")
const response = await axios.get(`/api/product/getproduct/sub/${subname}`)
console.log("subname response data=", response.data)
setProductlist([response.data])
} catch (error) {
console.log("error22")
catchError(error, setError)
}
}
if (error) {
alert(`${error}`)
setError('')
searchref.current.value = ''
}
return (
<Container>
<style type="text/css">
......@@ -105,9 +102,13 @@ function ProductsList({ match }) {
border-color: #CDC5C2;
}
.btn:hover {
background: #91877F;
background-color: #91877F;
border-color: #91877F;
}
.dropdown-item:hover, .dropdown-item:active {
background-color: #91877F;
color: #fff;
}
`}
</style>
<Row className="justify-content-center">
......@@ -122,7 +123,7 @@ function ProductsList({ match }) {
</Row>
<Row className="justify-content-end mx-0 my-5">
<Dropdown>
<Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Toggle variant="secondary" className="mx-2">정렬</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
<Dropdown.Item onClick={() => handleSort('newest')}>신상품</Dropdown.Item>
......@@ -131,8 +132,8 @@ function ProductsList({ match }) {
</Dropdown.Menu>
</Dropdown>
<Form inline onSubmit={handleSearch} className="justify-content-end mx-0">
<FormControl type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="px-2">
<FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" variant="secondary" className="px-2">
<img src="/icon/search.svg" width="20" height="20" />
</Button>
</Form>
......@@ -153,8 +154,8 @@ function ProductsList({ match }) {
}
}}>
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
</Link>
))}
</Link>)
)}
{/* <Pagination className="justify-content-center" index={} endPage={} handlePage={}/> */}
</Row>
</Container>
......
server/controllers/product.controller.js
View file @ d4c8d671
......@@ -82,7 +82,6 @@ const categoryId = async (req, res, next, category) => {
if (req.query.product) {
const productslist = await Product.find({ main_category: category, pro_name: { $regex: new RegExp(req.query.product) } })
if (productslist.length == 0) {
console.log('ds')
res.status(404).send('상품을 찾을 수 없습니다.')
} else {
req.productslist = productslist
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment