Commit d4c8d671 authored by kusang96's avatar kusang96
Browse files

Pagination 수정중

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