2020-1-capstone-design1 / Wico_Project1

Go to a project
Toggle navigation Toggle navigation pinning
조민지
24ef0c9f 1 parent 6013bad4

feat: 사용자 페이지 API 연동

Inline Side-by-side
Showing 3 changed files with 64 additions and 23 deletions
...@@ -9,9 +9,27 @@ const UserData = styled.div` ...@@ -9,9 +9,27 @@ const UserData = styled.div`
9 font-size: 15px; 9 font-size: 15px;
10 `; 10 `;
11 11
12 +function makeTimestampToString(stamp) {
13 + if (!stamp) return '';
14 + const date = stamp.split('T')[0];
15 + const time = stamp.split('T')[1].split('.')[0];
16 +
17 + return `${date} ${time}`;
18 +}
19 +
12 const UserDataCard = (props) => { 20 const UserDataCard = (props) => {
13 const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`; 21 const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
14 - const {userId} = props; 22 + const {userId, userData} = props;
23 + const {name, user_id, phone_number, email, created_datetime, recent_login_datetime, license_registered, card_registered} = userData;
24 +
25 + // card_registered: false
26 + // created_datetime: "2020-05-03T15:13:07.429Z"
27 + // email: "song@naver.com"
28 + // license_registered: false
29 + // name: "송봉수"
30 + // phone_number: "+821088643678"
31 + // recent_login_datetime: "2020-05-07T07:19:52.302Z"
32 + // user_id: 7569
15 33
16 return ( 34 return (
17 <Card 35 <Card
...@@ -22,34 +40,34 @@ const UserDataCard = (props) => { ...@@ -22,34 +40,34 @@ const UserDataCard = (props) => {
22 <div> 40 <div>
23 <Row> 41 <Row>
24 <Col md={6} sm={6} xs={12}> 42 <Col md={6} sm={6} xs={12}>
25 - <UserData>이름</UserData> 43 + <UserData>이름 : {name}</UserData>
26 </Col> 44 </Col>
27 <Col md={6} sm={6} xs={12}> 45 <Col md={6} sm={6} xs={12}>
28 - <UserData>사용자 ID</UserData> 46 + <UserData>사용자 ID : {user_id}</UserData>
29 </Col> 47 </Col>
30 </Row> 48 </Row>
31 <Row> 49 <Row>
32 <Col md={6} sm={6} xs={12}> 50 <Col md={6} sm={6} xs={12}>
33 - <UserData>전화번호</UserData> 51 + <UserData>전화번호 : {phone_number}</UserData>
34 </Col> 52 </Col>
35 <Col md={6} sm={6} xs={12}> 53 <Col md={6} sm={6} xs={12}>
36 - <UserData>이메일 가입 날짜</UserData> 54 + <UserData>이메일 : {email}</UserData>
37 </Col> 55 </Col>
38 </Row> 56 </Row>
39 <Row> 57 <Row>
40 <Col md={6} sm={6} xs={12}> 58 <Col md={6} sm={6} xs={12}>
41 - <UserData>가입 날짜</UserData> 59 + <UserData>가입 날짜 : {makeTimestampToString(created_datetime)}</UserData>
42 </Col> 60 </Col>
43 <Col md={6} sm={6} xs={12}> 61 <Col md={6} sm={6} xs={12}>
44 - <UserData>최근 로그인 날짜</UserData> 62 + <UserData>최근 로그인 날짜 : {makeTimestampToString(recent_login_datetime)}</UserData>
45 </Col> 63 </Col>
46 </Row> 64 </Row>
47 <Row> 65 <Row>
48 <Col md={6} sm={6} xs={12}> 66 <Col md={6} sm={6} xs={12}>
49 - <UserData>면허증 등록 여부</UserData> 67 + <UserData>면허증 등록 여부 : {license_registered ? '등록됨' : '미등록'}</UserData>
50 </Col> 68 </Col>
51 <Col md={6} sm={6} xs={12}> 69 <Col md={6} sm={6} xs={12}>
52 - <UserData>카드 등록 여부</UserData> 70 + <UserData>카드 등록 여부 : {license_registered ? '등록됨' : '미등록'}</UserData>
53 </Col> 71 </Col>
54 </Row> 72 </Row>
55 </div> 73 </div>
......
...@@ -3,17 +3,21 @@ import { Grid, Row, Col, Table } from "react-bootstrap"; ...@@ -3,17 +3,21 @@ import { Grid, Row, Col, Table } from "react-bootstrap";
3 import styled from "styled-components"; 3 import styled from "styled-components";
4 import Card from "components/Card/Card.jsx"; 4 import Card from "components/Card/Card.jsx";
5 import { tdArray } from "variables/Variables.jsx"; 5 import { tdArray } from "variables/Variables.jsx";
6 +import moment from "moment";
6 7
7 -const thArray = ['킥보드 시리얼 번호', '대여 시각', '반납 시각', '대여 시간', '이동 거리', '대여 금액']; 8 +const thArray = ['킥보드 시리얼 번호', '대여 시각', '반납 시각', '총 대여 시간', '이동 거리', '대여 금액'];
8 9
9 const UserHistoryCard = (props) => { 10 const UserHistoryCard = (props) => {
10 - const {userId} = props; 11 + const {userId, rentData} = props;
12 + const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
11 13
12 return ( 14 return (
13 <Card 15 <Card
14 title={`${userId}번 사용자 킥보드 사용 히스토리`} 16 title={`${userId}번 사용자 킥보드 사용 히스토리`}
15 ctTableFullWidth 17 ctTableFullWidth
16 ctTableResponsive 18 ctTableResponsive
19 + stats={getStats}
20 + statsIcon="fa fa-history"
17 content={ 21 content={
18 <Table striped hover> 22 <Table striped hover>
19 <thead> 23 <thead>
...@@ -24,15 +28,16 @@ const UserHistoryCard = (props) => { ...@@ -24,15 +28,16 @@ const UserHistoryCard = (props) => {
24 </tr> 28 </tr>
25 </thead> 29 </thead>
26 <tbody> 30 <tbody>
27 - {tdArray.map((prop, key) => { 31 + {rentData.map((data, idx) => (
28 - return ( 32 + <tr key={idx}>
29 - <tr key={key}> 33 + <td>{data.serial_number}</td>
30 - {prop.map((prop, key) => { 34 + <td>{data.rent_datetime}</td>
31 - return <td key={key}>{prop}</td>; 35 + <td>{data.return_datetime}</td>
32 - })} 36 + <td>{data.rental_time}</td>
37 + <td>{data.rental_distance}</td>
38 + <td>{data.rental_fee}</td>
33 </tr> 39 </tr>
34 - ); 40 + ))}
35 - })}
36 </tbody> 41 </tbody>
37 </Table> 42 </Table>
38 } 43 }
......
...@@ -5,12 +5,30 @@ import UserHistoryCard from '../components/UserHistory/UserHistoryCard'; ...@@ -5,12 +5,30 @@ import UserHistoryCard from '../components/UserHistory/UserHistoryCard';
5 import SearchButton from "../components/UserHistory/SearchButton"; 5 import SearchButton from "../components/UserHistory/SearchButton";
6 6
7 const UserHistory = () => { 7 const UserHistory = () => {
8 - const [userId, setUserId] = useState(0); 8 + const [userId, setUserId] = useState(7575);
9 + const [userData, setUserData] = useState({});
10 + const [rentData, setRentData] = useState([]);
9 11
10 useEffect(() => { 12 useEffect(() => {
11 - // componentDidMount > 쿼리 검사하기 13 + // TODO: componentDidMount > 쿼리 검사하기
12 },[]); 14 },[]);
13 15
16 + useEffect(() => {
17 + fetch(`http://1.201.143.67:5901/user/${userId}`)
18 + .then(r => r.json())
19 + .then(d => {
20 + console.log('userData',d.data[0])
21 + if(d.data && d.data.length) setUserData(d.data[0]);
22 +
23 + fetch(`http://1.201.143.67:5901/user/rent/${userId}`)
24 + .then(r => r.json())
25 + .then(d => {
26 + console.log('rentData',d.data);
27 + if(d.data && d.data.length) setRentData(d.data);
28 + })
29 + })
30 + .catch(err => console.log(err)); },[userId]);
31 +
14 return ( 32 return (
15 <div className="content"> 33 <div className="content">
16 <Grid fluid> 34 <Grid fluid>
...@@ -21,10 +39,10 @@ const UserHistory = () => { ...@@ -21,10 +39,10 @@ const UserHistory = () => {
21 </Row> 39 </Row>
22 <Row> 40 <Row>
23 <Col md={12}> 41 <Col md={12}>
24 - <UserDataCard userId={userId}/> 42 + <UserDataCard userId={userId} userData={userData}/>
25 </Col> 43 </Col>
26 <Col md={12}> 44 <Col md={12}>
27 - <UserHistoryCard userId={userId}/> 45 + <UserHistoryCard userId={userId} rentData={rentData}/>
28 </Col> 46 </Col>
29 </Row> 47 </Row>
30 </Grid> 48 </Grid>
......