위시리스트 구현

susu.J·2020년 7월 4일
0

부모 위시리스트 js

import React from 'react';
import { withRouter } from 'react-router-dom'
import Nav from '../../Components/Nav/Nav';
import WishViewer from './WishViewer/WishViewer';
import WishEmpty from './WishEmpty/WishEmpty';
import Footer from '../../Components/Footer/Footer';
import './WishList.scss';

export class WishList extends React.Component {
  constructor() {
    super();
    this.state = {
      productListArr: [], //배열로 받는다
    };
  }

  componentDidMount () {
    const token = localStorage.getItem('AccessToken')
    if (token) {
      fetch('http://10.58.0.55:8000/account/wishlist/',
        {
          method: 'GET',
          headers: {Authorization: localStorage.getItem('AccessToken')}
        })
        .then((res) => res.json())
        .then((res) => this.setState({productListArr : res.prod_wishlist}))
      //productListArr: res.prod_wishlist.. 포스트맨에 용진님이 쏴준 위시리스트 데이터 한번 벗겨내기. 객체를 담을 수 없기때문에 
    } else {
      alert("로그인을 먼저 진행해주세요");
      this.props.history.push('/loginscreen');
     }
  }
  //로그인 안하고 위시리스트 들어가면 로그인을 먼저 진행해달라고 한 뒤, 로그인 창으로 이동시켜준다. 

  
  
  render() {
   console.log("productListArr >>> ",this.state.productListArr)
   const {productListArr} = this.state
    return (
      <div className="WishList">
        <Nav/> 
        <div className="wishlist-container">
          {productListArr.length !== 0 
            ? <WishViewer products={productListArr} /> 
            : <WishEmpty/>}
        </div>
        <Footer/> 
      </div>
    );
  };
}
export default withRouter(WishList);

위에 삼항연산자 쓰기.

{productListArr.length !== 0 ? : }
productListArr.length가 0이 아닐때, 즉, 하나라도 데이터가 들어올때는 위시리스트의 상품이 보여지는 페이지인 wishviewer가 들어가게되고, 아닐때에는 "위시리스트가 비어있습니다" 라는 문구가 뜨는 페이지인 wishEmpty를 보여준다.
(근데 wishEmpty)페이지가 보여지는 때는 용진님의 위시리스트 api주소가 들어오지 않을때 보여진다..ㅜㅜ 그래서 임시방편으로 일단 "로그인을 먼저진행해주세요"를 보인뒤 로그인창으로 연결했다.(위 참고 )
이부분 다시 확인해봐야겠다 .

부모 위시리스트.scss

.WishList {
height: 100%;
overflow-y: visible;
.wishlist-container {
position: relative;
height: 250vh;
top: -57vh;
z-index: 10;
background-color: #fff;
}
}

profile
on the move 👉🏼 https://sjeong82.tistory.com/

0개의 댓글