Commit d9744453 authored by kusang96's avatar kusang96
Browse files

서버에서 정해진 갯수만큼 가져오기

parent 48427c96
...@@ -6,35 +6,44 @@ import catchError from '../utils/catchErrors'; ...@@ -6,35 +6,44 @@ 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 [length, setLength] = useState(0)
const [currentPage, setCurrentPage] = useState(1) const [currentPage, setCurrentPage] = useState(1)
const [error, setError] = useState('') const [error, setError] = useState('')
const searchref = useRef(null) const searchref = useRef(null)
const per = 10; const per = 9;
useEffect(() => { useEffect(() => {
getProductlist() getProductlist()
}, []) }, [])
useEffect(() => { useEffect(() => {
setStatus({ indexOfFirst: (currentPage - 1) * per, indexOfLast: currentPage * per }) if (search.word == '') {
getProductlist()
} else {
handleSearch()
}
}, [currentPage]) }, [currentPage])
function currentPosts(items) { async function getProductlist() {
let currentPosts = 0; try {
currentPosts = items.slice(status.indexOfFirst, status.indexOfLast); setError('')
return currentPosts setSearch({ word: '' })
const response = await axios.get(`/api/product/getproduct/all?page=${currentPage}`)
setProductlist(response.data.productPiece)
setLength(response.data.length)
} catch (error) {
catchError(error, setError)
}
} }
async function getProductlist() { async function handleSearch() {
try { try {
setError('') setError('')
const response = await axios.get(`/api/product/getproduct/all`) const response = await axios.get(`/api/product/getproduct/all?product=${search.word}&page=${currentPage}`)
setProductlist(response.data) setProductlist(response.data.productPiece)
setCurrentPage(1) setLength(response.data.length)
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
} }
...@@ -48,9 +57,12 @@ function Admin() { ...@@ -48,9 +57,12 @@ function Admin() {
e.preventDefault() e.preventDefault()
try { try {
setError('') setError('')
const response = await axios.get(`/api/product/getproduct/all?product=${search.word}`) if (currentPage != 1) {
setProductlist(response.data)
setCurrentPage(1) setCurrentPage(1)
}
const response = await axios.get(`/api/product/getproduct/all?product=${search.word}&page=${currentPage}`)
setProductlist(response.data.productPiece)
setLength(response.data.length)
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
} finally { } finally {
...@@ -103,11 +115,11 @@ function Admin() { ...@@ -103,11 +115,11 @@ function Admin() {
<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">
{currentPosts(productlist).map(pro => ( {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 index={currentPage} totalPages={Math.ceil(productlist.length / per)} handlePage={setCurrentPage} /> <Pagination index={currentPage} totalPages={Math.ceil(length / per)} handlePage={setCurrentPage} />
</Container> </Container>
) )
} }
......
...@@ -7,20 +7,22 @@ import catchError from '../utils/catchErrors'; ...@@ -7,20 +7,22 @@ import catchError from '../utils/catchErrors';
import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup, Image } from 'react-bootstrap'; import { Container, Row, Col, Form, FormControl, Button, Dropdown, ButtonGroup, Image } from 'react-bootstrap';
function ProductsList({ match }) { function ProductsList({ match }) {
const INIT_STATUS = { indexOfFirst: 0, indexOfLast: 10 }
const [search, setSearch] = useState({ word: '' }) const [search, setSearch] = useState({ word: '' })
const [sortingName, setSortingName] = useState('정렬') const [sortingName, setSortingName] = useState('정렬')
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 [selectSubCategory, setSelectSubCategory] = useState('')
const [productlist, setProductlist] = useState([]) const [productlist, setProductlist] = useState([])
const [status, setStatus] = useState(INIT_STATUS) const [length, setLength] = useState(0)
const [currentPage, setCurrentPage] = useState(1) const [currentPage, setCurrentPage] = useState(1)
const [error, setError] = useState('') const [error, setError] = useState('')
const searchref = useRef(null) const searchref = useRef(null)
const per = 10; const per = 9;
useEffect(() => { useEffect(() => {
setMainCategory(match.params.main.toUpperCase()) setMainCategory(match.params.main.toUpperCase())
setSelectSubCategory('')
setCurrentPage(1)
}, [match.params.main]) }, [match.params.main])
...@@ -30,13 +32,25 @@ function ProductsList({ match }) { ...@@ -30,13 +32,25 @@ function ProductsList({ match }) {
}, [mainCategory]) }, [mainCategory])
useEffect(() => { useEffect(() => {
setStatus({ indexOfFirst: (currentPage - 1) * per, indexOfLast: currentPage * per }) if (search.word == '') {
getProductlist()
} else if (selectSubCategory != '') {
changePageforSubname()
} else {
setSelectSubCategory('')
searchList()
}
}, [currentPage]) }, [currentPage])
function currentPosts(items) { async function searchList() {
let currentPosts = ''; try {
currentPosts = items.slice(status.indexOfFirst, status.indexOfLast); setError('')
return currentPosts const response = await axios.get(`/api/product/getproduct/main/${mainCategory}?product=${search.word}&page=${currentPage}`)
setProductlist(response.data.productsPiece)
setLength(response.data.length)
} catch (error) {
catchError(error, setError)
}
} }
function handleChange(event) { function handleChange(event) {
...@@ -47,9 +61,12 @@ function ProductsList({ match }) { ...@@ -47,9 +61,12 @@ function ProductsList({ match }) {
e.preventDefault() e.preventDefault()
try { try {
setError('') setError('')
const response = await axios.get(`/api/product/getproduct/main/${mainCategory}?product=${search.word}`) if (currentPage != 1) {
setProductlist(response.data)
setCurrentPage(1) setCurrentPage(1)
}
const response = await axios.get(`/api/product/getproduct/main/${mainCategory}?product=${search.word}&page=${currentPage}`)
setProductlist(response.data.productsPiece)
setLength(response.data.length)
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
} finally { } finally {
...@@ -70,9 +87,10 @@ function ProductsList({ match }) { ...@@ -70,9 +87,10 @@ function ProductsList({ match }) {
async function getProductlist() { async function getProductlist() {
try { try {
setError('') setError('')
const response = await axios.get(`/api/product/getproduct/main/${mainCategory}`) setSearch({ word: '' })
setProductlist(response.data) const response = await axios.get(`/api/product/getproduct/main/${mainCategory}?page=${currentPage}`)
setCurrentPage(1) setProductlist(response.data.productsPiece)
setLength(response.data.length)
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
} }
...@@ -126,13 +144,27 @@ function ProductsList({ match }) { ...@@ -126,13 +144,27 @@ function ProductsList({ match }) {
} }
} }
async function changePageforSubname() {
try {
setError('')
setSearch({ word: '' })
const response = await axios.get(`/api/product/getproduct/sub?subname=${selectSubCategory}&page=${currentPage}`)
setProductlist(response.data.productsPiece)
setLength(response.data.length)
} catch (error) {
catchError(error, setError)
}
}
async function handleSubname(e) { async function handleSubname(e) {
const subname = e.target.name const subname = e.target.name
setSelectSubCategory(e.target.name)
try { try {
setError('') setError('')
const response = await axios.get(`/api/product/getproduct/sub?subname=${subname}`) setSearch({ word: '' })
setProductlist(response.data) const response = await axios.get(`/api/product/getproduct/sub?subname=${subname}&page=${currentPage}`)
setCurrentPage(1) setProductlist(response.data.productsPiece)
setLength(response.data.length)
} catch (error) { } catch (error) {
catchError(error, setError) catchError(error, setError)
} }
...@@ -212,7 +244,7 @@ function ProductsList({ match }) { ...@@ -212,7 +244,7 @@ function ProductsList({ match }) {
</Row> </Row>
<Row md={8} sm={12} className="justify-content-center m-2"> <Row md={8} sm={12} className="justify-content-center m-2">
{productlist.length > 0 ? {productlist.length > 0 ?
currentPosts(productlist).map(pro => ( productlist.map(pro => (
<Link to={{ <Link to={{
pathname: `/product/${pro._id}`, pathname: `/product/${pro._id}`,
state: { state: {
...@@ -235,7 +267,7 @@ function ProductsList({ match }) { ...@@ -235,7 +267,7 @@ function ProductsList({ match }) {
) )
} }
</Row> </Row>
{productlist.length != 0 ? <Pagination index={currentPage} totalPages={Math.ceil(productlist.length / per)} handlePage={setCurrentPage} /> : ''} {productlist.length != 0 ? <Pagination index={currentPage} totalPages={Math.ceil(length / per)} handlePage={setCurrentPage} /> : ''}
</Container> </Container>
) )
} }
......
...@@ -38,17 +38,23 @@ const getToHome = async (req, res) => { ...@@ -38,17 +38,23 @@ const getToHome = async (req, res) => {
} }
const getAll = async (req, res) => { const getAll = async (req, res) => {
const per = 9;
try { try {
if (req.query.product) { if (req.query.product) {
const productslist = await Product.find({ pro_name: { $regex: new RegExp(req.query.product) } }).sort({ createdAt: -1 }) const productslist = await Product.find({ pro_name: { $regex: new RegExp(req.query.product) } }).sort({ createdAt: -1 })
const length = productslist.length
const productPiece = await Product.find({ pro_name: { $regex: new RegExp(req.query.product) } }).sort({ createdAt: -1 }).skip((req.query.page - 1) * per).limit(per)
if (productslist.length == 0) { if (productslist.length == 0) {
res.status(404).send('상품을 찾을 수 없습니다.') res.status(404).send('상품을 찾을 수 없습니다.')
} else { } else {
res.json(productslist) res.json({productPiece, length})
} }
} else { } else {
const productslist = await Product.find({}).sort({ createdAt: -1 }) const productslist = await Product.find({}).sort({ createdAt: -1 })
res.json(productslist) const length = productslist.length
const productPiece = await Product.find({}).sort({ createdAt: -1 }).skip((req.query.page - 1) * per).limit(per)
console.log("products=",productPiece)
res.json({productPiece, length})
} }
} catch (error) { } catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.') res.status(500).send('상품을 불러오지 못했습니다.')
...@@ -57,7 +63,9 @@ const getAll = async (req, res) => { ...@@ -57,7 +63,9 @@ const getAll = async (req, res) => {
const getlist = (req, res) => { const getlist = (req, res) => {
try { try {
res.json(req.productslist) const productsPiece = req.productsPiece
const length = req.length
res.json({ productsPiece, length })
} catch (error) { } catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.') res.status(500).send('상품을 불러오지 못했습니다.')
} }
...@@ -65,17 +73,24 @@ const getlist = (req, res) => { ...@@ -65,17 +73,24 @@ const getlist = (req, res) => {
const categoryId = async (req, res, next, category) => { const categoryId = async (req, res, next, category) => {
const per = 9;
try { try {
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) } })
const length = productslist.length
const productsPiece = await Product.find({ main_category: category, pro_name: { $regex: new RegExp(req.query.product) } }).skip((req.query.page - 1) * per).limit(per)
if (productslist.length == 0) { if (productslist.length == 0) {
res.status(404).send('상품을 찾을 수 없습니다.') res.status(404).send('상품을 찾을 수 없습니다.')
} else { } else {
req.productslist = productslist req.length = length
req.productsPiece = productsPiece
} }
} else { } else {
const productslist = await Product.find({ main_category: category }) const productslist = await Product.find({ main_category: category })
req.productslist = productslist const length = productslist.length
req.length = length
const productsPiece = await Product.find({ main_category: category }).skip((req.query.page - 1) * per).limit(per)
req.productsPiece = productsPiece
} }
next() next()
} catch (error) { } catch (error) {
...@@ -84,9 +99,12 @@ const categoryId = async (req, res, next, category) => { ...@@ -84,9 +99,12 @@ const categoryId = async (req, res, next, category) => {
} }
const subname = async (req, res) => { const subname = async (req, res) => {
const per = 9;
try { try {
const findSubname = await Product.find({ sub_category: req.query.subname }) const productslist = await Product.find({ sub_category: req.query.subname })
res.send(findSubname) const length = productslist.length
const productsPiece = await Product.find({ sub_category: req.query.subname }).skip((req.query.page - 1) * per).limit(per)
res.send({ productsPiece, length })
} catch (error) { } catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.') res.status(500).send('상품을 불러오지 못했습니다.')
} }
......
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