2020-1-capstone-design1 / Wico_Project1

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

feat: 킥보드 및 사용자 검색 기능 구현

Inline Side-by-side
Showing 11 changed files with 227 additions and 122 deletions
...@@ -12,55 +12,51 @@ const UserDataKey = { ...@@ -12,55 +12,51 @@ const UserDataKey = {
12 rental_fee: '대여 금액', 12 rental_fee: '대여 금액',
13 }; 13 };
14 14
15 -class KickboardHistoryTable extends React.Component { 15 +function timestampToString(stamp) {
16 - constructor(props) { 16 + if (!stamp) return '';
17 - super(props); 17 + const date = stamp.split('T')[0];
18 - this.state = { 18 + const time = stamp.split('T')[1].split('.')[0];
19 - data: []
20 - };
21 - }
22 19
23 - componentDidMount() { 20 + return `${date} ${time}`;
24 - fetch(`http://1.201.143.67:5901/kickboard/rent/${this.props.kbId}`) 21 +}
25 - .then(r => r.json())
26 - .then(d => {
27 - if(d.data && d.data.length) this.setState({data: d.data});
28 - })
29 - .catch(err => console.log(err));
30 - }
31 22
32 - render() { 23 +const KickboardHistoryTable = (props) => {
33 - return ( 24 + const {kbId, historyData} = props;
34 - <Card 25 +
35 - title={`${this.props.kbId}번 킥보드 사용자 히스토리`} 26 + return (
36 - ctTableFullWidth 27 + <Card
37 - ctTableResponsive 28 + title={`${kbId}번 킥보드 사용자 히스토리`}
38 - content={ 29 + ctTableFullWidth
39 - <Table striped hover> 30 + ctTableResponsive
40 - <thead> 31 + content={
41 - <tr> 32 + <Table striped hover>
42 - {Object.values(UserDataKey).map((prop, key) => { 33 + <thead>
43 - return <th key={key}>{prop}</th>; 34 + <tr>
44 - })} 35 + {Object.values(UserDataKey).map((prop, key) => {
45 - </tr> 36 + return <th key={key}>{prop}</th>;
46 - </thead> 37 + })}
47 - <tbody> 38 + </tr>
48 - {this.state.data.map((data, idx) => ( 39 + </thead>
40 + <tbody>
41 + {historyData.map((data, idx) => {
42 + const {user_id, rent_datetime, return_datetime, rental_time, rental_distance, rental_fee} = data;
43 +
44 + return (
49 <tr key={idx}> 45 <tr key={idx}>
50 - <td>{data.user_id}</td> 46 + <td>{user_id}</td>
51 - <td>{data.rent_datetime}</td> 47 + <td>{timestampToString(rent_datetime)}</td>
52 - <td>{data.return_datetime}</td> 48 + <td>{timestampToString(return_datetime)}</td>
53 - <td>{data.rental_time}</td> 49 + <td>{rental_time}분</td>
54 - <td>{data.rental_distance}</td> 50 + <td>{rental_distance}km</td>
55 - <td>{data.rental_fee}</td> 51 + <td>{rental_fee}원</td>
56 </tr> 52 </tr>
57 - ))} 53 + );
58 - </tbody> 54 + })}
59 - </Table> 55 + </tbody>
60 - } 56 + </Table>
61 - /> 57 + }
62 - ) 58 + />
63 - } 59 + )
64 }; 60 };
65 61
66 export default KickboardHistoryTable; 62 export default KickboardHistoryTable;
......
...@@ -61,7 +61,7 @@ const kickboardDataKey = { ...@@ -61,7 +61,7 @@ const kickboardDataKey = {
61 // "updated_datetime":"2020-06-12T10:00:28.715Z", 61 // "updated_datetime":"2020-06-12T10:00:28.715Z",
62 // "battery":72 62 // "battery":72
63 63
64 -function makeTimestampToString(stamp) { 64 +function timestampToString(stamp) {
65 if (!stamp) return ''; 65 if (!stamp) return '';
66 const date = stamp.split('T')[0]; 66 const date = stamp.split('T')[0];
67 const time = stamp.split('T')[1].split('.')[0]; 67 const time = stamp.split('T')[1].split('.')[0];
...@@ -69,32 +69,16 @@ function makeTimestampToString(stamp) { ...@@ -69,32 +69,16 @@ function makeTimestampToString(stamp) {
69 return `${date} ${time}`; 69 return `${date} ${time}`;
70 } 70 }
71 71
72 -class KickboardStatusCard extends React.Component { 72 +const KickboardStatusCard = (props) => {
73 - constructor(props) { 73 + const {kbId, kbData} = props;
74 - super(props); 74 + const { battery, coordinates, states, is_good_posture, total_driven_distance,
75 - this.state = { 75 + total_driven_time, is_good_gps_signal, connected, updated_coordinates_datetime,
76 - data: {} 76 + connection_updated_datetime, model_name, updated_datetime } = kbData;
77 - }; 77 + const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
78 - }
79 78
80 - componentDidMount() { 79 + return (
81 - fetch(`http://1.201.143.67:5901/kickboard/${this.props.kbId}`) 80 + <Card
82 - .then(r => r.json()) 81 + title={`${kbId}번 킥보드`}
83 - .then(d => {
84 - if(d.data && d.data.length) this.setState({data: d.data[0]});
85 - })
86 - .catch(err => console.log(err));
87 - }
88 -
89 - render() {
90 - const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
91 - const { battery, coordinates, states, is_good_posture, total_driven_distance,
92 - total_driven_time, is_good_gps_signal, connected, updated_coordinates_datetime,
93 - connection_updated_datetime, model_name, updated_datetime } = this.state.data;
94 -
95 - return (
96 - <Card
97 - title={`${this.props.kbId}번 킥보드`}
98 stats={getStats} 82 stats={getStats}
99 statsIcon="fa fa-history" 83 statsIcon="fa fa-history"
100 content={ 84 content={
...@@ -117,16 +101,15 @@ class KickboardStatusCard extends React.Component { ...@@ -117,16 +101,15 @@ class KickboardStatusCard extends React.Component {
117 <KickboardData>{kickboardDataKey.total_driven_time} : {total_driven_time}분</KickboardData> 101 <KickboardData>{kickboardDataKey.total_driven_time} : {total_driven_time}분</KickboardData>
118 <KickboardData>{kickboardDataKey.is_good_gps_signal} : {is_good_gps_signal ? '양호' : '불량'}</KickboardData> 102 <KickboardData>{kickboardDataKey.is_good_gps_signal} : {is_good_gps_signal ? '양호' : '불량'}</KickboardData>
119 <KickboardData>{kickboardDataKey.connected} : {connected ? '연결됨' : '연결되지 않음'}</KickboardData> 103 <KickboardData>{kickboardDataKey.connected} : {connected ? '연결됨' : '연결되지 않음'}</KickboardData>
120 - <KickboardData>{kickboardDataKey.updated_coordinates_datetime} : {makeTimestampToString(updated_coordinates_datetime)}</KickboardData> 104 + <KickboardData>{kickboardDataKey.updated_coordinates_datetime} : {timestampToString(updated_coordinates_datetime)}</KickboardData>
121 - <KickboardData>{kickboardDataKey.connection_updated_datetime} : {makeTimestampToString(connection_updated_datetime)}</KickboardData> 105 + <KickboardData>{kickboardDataKey.connection_updated_datetime} : {timestampToString(connection_updated_datetime)}</KickboardData>
122 <KickboardData>{kickboardDataKey.model_name} : {model_name}</KickboardData> 106 <KickboardData>{kickboardDataKey.model_name} : {model_name}</KickboardData>
123 - <KickboardData>{kickboardDataKey.updated_datetime} : {makeTimestampToString(updated_datetime)}</KickboardData> 107 + <KickboardData>{kickboardDataKey.updated_datetime} : {timestampToString(updated_datetime)}</KickboardData>
124 </KickboardDataList> 108 </KickboardDataList>
125 </Row> 109 </Row>
126 } 110 }
127 - /> 111 + />
128 - ); 112 + );
129 - }
130 }; 113 };
131 114
132 export default KickboardStatusCard; 115 export default KickboardStatusCard;
...\ No newline at end of file ...\ No newline at end of file
......
1 -import React from "react"; 1 +import React, {useRef} from "react";
2 import styled from "styled-components"; 2 import styled from "styled-components";
3 3
4 const SearchButtonWrapper = styled.div` 4 const SearchButtonWrapper = styled.div`
...@@ -30,11 +30,25 @@ const ApplyButton = styled.div` ...@@ -30,11 +30,25 @@ const ApplyButton = styled.div`
30 30
31 31
32 32
33 -const SearchButton = () => { 33 +const SearchButton = (props) => {
34 + const {setKbId} = props;
35 + const inputEl = useRef(null);
36 +
37 + const searchKickboard = (e) => {
38 + const searchText = e.target.value;
39 + fetch(`http://1.201.143.67:5901/kickboard/${searchText}`)
40 + .then(r => r.json())
41 + .then(d => {
42 + if(d.success && d.data.length) setKbId();
43 + else window.alert('해당 번호의 킥보드가 존재하지 않습니다!')
44 + })
45 + .catch(err => console.log(err));
46 + };
47 +
34 return ( 48 return (
35 <SearchButtonWrapper> 49 <SearchButtonWrapper>
36 - <SearchInput type="text" className="form-control" placeholder={"킥보드 번호로 검색하기"}/> 50 + <SearchInput ref={inputEl} type="text" className="form-control" placeholder={"킥보드 번호로 검색하기"}/>
37 - <ApplyButton><span>검색</span></ApplyButton> 51 + <ApplyButton onClick={(e) => searchKickboard(e)}><span>검색</span></ApplyButton>
38 </SearchButtonWrapper> 52 </SearchButtonWrapper>
39 ); 53 );
40 }; 54 };
......
...@@ -27,17 +27,11 @@ class Sidebar extends Component { ...@@ -27,17 +27,11 @@ class Sidebar extends Component {
27 backgroundColor: 'rgb(217,94,45)' 27 backgroundColor: 'rgb(217,94,45)'
28 }; 28 };
29 29
30 - console.log(this.props.color);
31 return ( 30 return (
32 <div 31 <div
33 id="sidebar" 32 id="sidebar"
34 className="sidebar" 33 className="sidebar"
35 > 34 >
36 - {this.props.hasImage ? (
37 - <div className="sidebar-background" style={sidebarBackground} />
38 - ) : (
39 - null
40 - )}
41 <div className="logo"> 35 <div className="logo">
42 <a 36 <a
43 href="https://www.creative-tim.com?ref=lbd-sidebar" 37 href="https://www.creative-tim.com?ref=lbd-sidebar"
......
...@@ -23,7 +23,6 @@ import Button from "components/CustomButton/CustomButton.jsx"; ...@@ -23,7 +23,6 @@ import Button from "components/CustomButton/CustomButton.jsx";
23 export class Tasks extends Component { 23 export class Tasks extends Component {
24 handleCheckbox = event => { 24 handleCheckbox = event => {
25 const target = event.target; 25 const target = event.target;
26 - console.log(event.target);
27 this.setState({ 26 this.setState({
28 [target.name]: target.checked 27 [target.name]: target.checked
29 }); 28 });
......
1 +import React, {useRef} from "react";
2 +import styled from "styled-components";
3 +import {Col, Row} from "react-bootstrap";
4 +import Card from "components/Card/Card.jsx";
5 +
6 +const Wrapper = styled.div`
7 + display: flex;
8 + align-items: center;
9 + justify-content: center;
10 + color: #333333;
11 + text-align: center;
12 +`;
13 +
14 +const EmptyImage = styled.img`
15 + max-width: 100%;
16 + height: auto !important;
17 +`;
18 +
19 +const SearchButton = (props) => {
20 + return (
21 + <Card
22 + content={
23 + <Row>
24 + <Col md={8} mdOffset={2}>
25 + <EmptyImage src="https://raw.githubusercontent.com/devSoyoung/whale-extension-keycrab/master/images/empty.png" alt="empty"/>
26 + </Col>
27 + <Col md={12}>
28 + <Wrapper>
29 + {
30 + Number(props.userId)<0
31 + ? <div>검색 결과가 존재하지 않습니다.</div>
32 + : <div>전화번호, 이메일, 사용자ID를 통해<br/>사용자를 검색해보세요!</div>
33 + }
34 + </Wrapper>
35 + </Col>
36 + </Row>
37 +
38 + }
39 + />
40 + );
41 +};
42 +
43 +export default SearchButton;
44 +
45 +
1 -import React from "react"; 1 +import React, {useRef, useState} from "react";
2 import styled from "styled-components"; 2 import styled from "styled-components";
3 3
4 const SearchButtonWrapper = styled.div` 4 const SearchButtonWrapper = styled.div`
...@@ -8,7 +8,7 @@ const SearchButtonWrapper = styled.div` ...@@ -8,7 +8,7 @@ const SearchButtonWrapper = styled.div`
8 `; 8 `;
9 9
10 const SearchInput = styled.input` 10 const SearchInput = styled.input`
11 - width: 60%; 11 + width: 55%;
12 `; 12 `;
13 13
14 const ApplyButton = styled.div` 14 const ApplyButton = styled.div`
...@@ -29,22 +29,58 @@ const ApplyButton = styled.div` ...@@ -29,22 +29,58 @@ const ApplyButton = styled.div`
29 `; 29 `;
30 30
31 const SelectBox = styled.select` 31 const SelectBox = styled.select`
32 - width: 17%; 32 + width: 22%;
33 color: #333333; 33 color: #333333;
34 border-color: #E3E3E3; 34 border-color: #E3E3E3;
35 border-radius: 4px; 35 border-radius: 4px;
36 `; 36 `;
37 37
38 +const searchTypeKR = {
39 + phone_number: '전화번호',
40 + email: '이메일',
41 + user_id: '사용자ID'
42 +};
43 +
44 +const SearchButton = (props) => {
45 + const selectEl = useRef(null);
46 + const inputEl = useRef(null);
47 + const {setUserId} = props;
48 + const [searchType, setSearchType] = useState('phone_number');
49 +
50 + const searchUserData = (e) => {
51 + e.preventDefault();
52 + const searchText = inputEl.current.value;
53 +
54 + if(searchType === 'user_id') {
55 + fetch(`http://1.201.143.67:5901/user/${searchType}`)
56 + .then(r => r.json())
57 + .then(d => {
58 + if(d.success) setUserId(searchType);
59 + else setUserId('-1'); // 검색결과 X
60 + })
61 + } else {
62 + fetch(`http://1.201.143.67:5901/user/${searchType}/${searchText}`)
63 + .then(r => r.json())
64 + .then(d => {
65 + if(d.success) setUserId(d.data[0].user_id);
66 + else setUserId('-1'); // 검색결과 X
67 + })
68 + }
69 + };
70 +
71 + const onChangeSearchOption = (e) => {
72 + setSearchType(e.target.value)
73 + };
38 74
39 -const SearchButton = () => {
40 return ( 75 return (
41 <SearchButtonWrapper> 76 <SearchButtonWrapper>
42 - <SelectBox> 77 + <SelectBox ref={selectEl} onChange={(e) => onChangeSearchOption(e)}>
43 - <option value="전화 번호">전화 번호</option> 78 + <option value="phone_number">전화번호</option>
44 - <option value="이메일">이메일</option> 79 + <option value="email">이메일</option>
80 + <option value="user_id">사용자ID</option>
45 </SelectBox> 81 </SelectBox>
46 - <SearchInput type="text" className="form-control" placeholder={"킥보드 번호로 검색하기"}/> 82 + <SearchInput type="text" ref={inputEl} className="form-control" placeholder={`${searchTypeKR[searchType]}로 검색하기`}/>
47 - <ApplyButton><span>검색</span></ApplyButton> 83 + <ApplyButton onClick={(e) => searchUserData(e)}><span>검색</span></ApplyButton>
48 </SearchButtonWrapper> 84 </SearchButtonWrapper>
49 ); 85 );
50 }; 86 };
......
...@@ -9,7 +9,7 @@ const UserData = styled.div` ...@@ -9,7 +9,7 @@ const UserData = styled.div`
9 font-size: 15px; 9 font-size: 15px;
10 `; 10 `;
11 11
12 -function makeTimestampToString(stamp) { 12 +function timestampToString(stamp) {
13 if (!stamp) return ''; 13 if (!stamp) return '';
14 const date = stamp.split('T')[0]; 14 const date = stamp.split('T')[0];
15 const time = stamp.split('T')[1].split('.')[0]; 15 const time = stamp.split('T')[1].split('.')[0];
...@@ -56,10 +56,10 @@ const UserDataCard = (props) => { ...@@ -56,10 +56,10 @@ const UserDataCard = (props) => {
56 </Row> 56 </Row>
57 <Row> 57 <Row>
58 <Col md={6} sm={6} xs={12}> 58 <Col md={6} sm={6} xs={12}>
59 - <UserData>가입 날짜 : {makeTimestampToString(created_datetime)}</UserData> 59 + <UserData>가입 날짜 : {timestampToString(created_datetime)}</UserData>
60 </Col> 60 </Col>
61 <Col md={6} sm={6} xs={12}> 61 <Col md={6} sm={6} xs={12}>
62 - <UserData>최근 로그인 날짜 : {makeTimestampToString(recent_login_datetime)}</UserData> 62 + <UserData>최근 로그인 날짜 : {timestampToString(recent_login_datetime)}</UserData>
63 </Col> 63 </Col>
64 </Row> 64 </Row>
65 <Row> 65 <Row>
......
...@@ -7,6 +7,14 @@ import moment from "moment"; ...@@ -7,6 +7,14 @@ import moment from "moment";
7 7
8 const thArray = ['킥보드 시리얼 번호', '대여 시각', '반납 시각', '총 대여 시간', '이동 거리', '대여 금액']; 8 const thArray = ['킥보드 시리얼 번호', '대여 시각', '반납 시각', '총 대여 시간', '이동 거리', '대여 금액'];
9 9
10 +function timestampToString(stamp) {
11 + if (!stamp) return '';
12 + const date = stamp.split('T')[0];
13 + const time = stamp.split('T')[1].split('.')[0];
14 +
15 + return `${date} ${time}`;
16 +}
17 +
10 const UserHistoryCard = (props) => { 18 const UserHistoryCard = (props) => {
11 const {userId, rentData} = props; 19 const {userId, rentData} = props;
12 const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`; 20 const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
...@@ -14,7 +22,6 @@ const UserHistoryCard = (props) => { ...@@ -14,7 +22,6 @@ const UserHistoryCard = (props) => {
14 return ( 22 return (
15 <Card 23 <Card
16 title={`${userId}번 사용자 킥보드 사용 히스토리`} 24 title={`${userId}번 사용자 킥보드 사용 히스토리`}
17 - ctTableFullWidth
18 ctTableResponsive 25 ctTableResponsive
19 stats={getStats} 26 stats={getStats}
20 statsIcon="fa fa-history" 27 statsIcon="fa fa-history"
...@@ -31,11 +38,11 @@ const UserHistoryCard = (props) => { ...@@ -31,11 +38,11 @@ const UserHistoryCard = (props) => {
31 {rentData.map((data, idx) => ( 38 {rentData.map((data, idx) => (
32 <tr key={idx}> 39 <tr key={idx}>
33 <td>{data.serial_number}</td> 40 <td>{data.serial_number}</td>
34 - <td>{data.rent_datetime}</td> 41 + <td>{timestampToString(data.rent_datetime)}</td>
35 - <td>{data.return_datetime}</td> 42 + <td>{timestampToString(data.return_datetime)}</td>
36 - <td>{data.rental_time}</td> 43 + <td>{data.rental_time}분</td>
37 - <td>{data.rental_distance}</td> 44 + <td>{data.rental_distance}km</td>
38 - <td>{data.rental_fee}</td> 45 + <td>{data.rental_fee}원</td>
39 </tr> 46 </tr>
40 ))} 47 ))}
41 </tbody> 48 </tbody>
......
...@@ -8,6 +8,23 @@ import SearchButton from '../components/Kickboard/SearchButton'; ...@@ -8,6 +8,23 @@ import SearchButton from '../components/Kickboard/SearchButton';
8 8
9 const Kickboard = () => { 9 const Kickboard = () => {
10 const [kbId, setKbId] = useState('000165'); 10 const [kbId, setKbId] = useState('000165');
11 + const [kbData, setKbData] = useState({});
12 + const [historyData, setHistoryData] = useState([]);
13 +
14 + useEffect(() => {
15 + fetch(`http://1.201.143.67:5901/kickboard/${kbId}`)
16 + .then(r => r.json())
17 + .then(d => {
18 + if(d.data && d.data.length) setKbData(d.data[0]);
19 +
20 + fetch(`http://1.201.143.67:5901/kickboard/rent/${kbId}`)
21 + .then(r => r.json())
22 + .then(d => {
23 + if(d.data && d.data.length) setHistoryData(d.data);
24 + })
25 + })
26 + .catch(err => console.log(err));
27 + },[kbId]);
11 28
12 // 여기 API 요청 29 // 여기 API 요청
13 return ( 30 return (
...@@ -15,7 +32,7 @@ const Kickboard = () => { ...@@ -15,7 +32,7 @@ const Kickboard = () => {
15 <Grid fluid> 32 <Grid fluid>
16 <Row> 33 <Row>
17 <Col md={4} mdOffset={8} sm={3} smOffset={9} style={{marginBottom:15}}> 34 <Col md={4} mdOffset={8} sm={3} smOffset={9} style={{marginBottom:15}}>
18 - <SearchButton/> 35 + <SearchButton setKbId={setKbId}/>
19 </Col> 36 </Col>
20 </Row> 37 </Row>
21 <Row> 38 <Row>
...@@ -23,12 +40,12 @@ const Kickboard = () => { ...@@ -23,12 +40,12 @@ const Kickboard = () => {
23 <GoogleMapCard/> 40 <GoogleMapCard/>
24 </Col> 41 </Col>
25 <Col md={6}> 42 <Col md={6}>
26 - <KickboardStatusCard kbId={kbId}/> 43 + <KickboardStatusCard kbId={kbId} kbData={kbData}/>
27 </Col> 44 </Col>
28 </Row> 45 </Row>
29 <Row> 46 <Row>
30 <Col md={12}> 47 <Col md={12}>
31 - <KickboardHistoryTable kbId={kbId}/> 48 + <KickboardHistoryTable kbId={kbId} historyData={historyData}/>
32 </Col> 49 </Col>
33 </Row> 50 </Row>
34 </Grid> 51 </Grid>
......
...@@ -3,9 +3,10 @@ import { Grid, Row, Col, Table } from "react-bootstrap"; ...@@ -3,9 +3,10 @@ import { Grid, Row, Col, Table } from "react-bootstrap";
3 import UserDataCard from '../components/UserHistory/UserDataCard'; 3 import UserDataCard from '../components/UserHistory/UserDataCard';
4 import UserHistoryCard from '../components/UserHistory/UserHistoryCard'; 4 import UserHistoryCard from '../components/UserHistory/UserHistoryCard';
5 import SearchButton from "../components/UserHistory/SearchButton"; 5 import SearchButton from "../components/UserHistory/SearchButton";
6 +import Fallback from '../components/UserHistory/Fallback';
6 7
7 const UserHistory = () => { 8 const UserHistory = () => {
8 - const [userId, setUserId] = useState(7575); 9 + const [userId, setUserId] = useState('0');
9 const [userData, setUserData] = useState({}); 10 const [userData, setUserData] = useState({});
10 const [rentData, setRentData] = useState([]); 11 const [rentData, setRentData] = useState([]);
11 12
...@@ -14,37 +15,50 @@ const UserHistory = () => { ...@@ -14,37 +15,50 @@ const UserHistory = () => {
14 },[]); 15 },[]);
15 16
16 useEffect(() => { 17 useEffect(() => {
18 + if(Number(userId)<0) return;
17 fetch(`http://1.201.143.67:5901/user/${userId}`) 19 fetch(`http://1.201.143.67:5901/user/${userId}`)
18 .then(r => r.json()) 20 .then(r => r.json())
19 .then(d => { 21 .then(d => {
20 - console.log('userData',d.data[0]) 22 + if(!d.success) setUserId('0'); // 유효하지 않은 userId인 경우
21 if(d.data && d.data.length) setUserData(d.data[0]); 23 if(d.data && d.data.length) setUserData(d.data[0]);
22 24
23 fetch(`http://1.201.143.67:5901/user/rent/${userId}`) 25 fetch(`http://1.201.143.67:5901/user/rent/${userId}`)
24 .then(r => r.json()) 26 .then(r => r.json())
25 .then(d => { 27 .then(d => {
26 - console.log('rentData',d.data);
27 if(d.data && d.data.length) setRentData(d.data); 28 if(d.data && d.data.length) setRentData(d.data);
28 }) 29 })
29 }) 30 })
30 - .catch(err => console.log(err)); },[userId]); 31 + .catch(err => console.log(err));
32 + },[userId]);
31 33
32 return ( 34 return (
33 <div className="content"> 35 <div className="content">
34 <Grid fluid> 36 <Grid fluid>
35 <Row> 37 <Row>
36 <Col md={4} mdOffset={8} sm={5} smOffset={7} style={{marginBottom:15}}> 38 <Col md={4} mdOffset={8} sm={5} smOffset={7} style={{marginBottom:15}}>
37 - <SearchButton/> 39 + <SearchButton setUserId={setUserId}/>
38 - </Col>
39 - </Row>
40 - <Row>
41 - <Col md={12}>
42 - <UserDataCard userId={userId} userData={userData}/>
43 - </Col>
44 - <Col md={12}>
45 - <UserHistoryCard userId={userId} rentData={rentData}/>
46 </Col> 40 </Col>
47 </Row> 41 </Row>
42 + {
43 + Number(userId)>0
44 + ? (
45 + <Row>
46 + <Col md={12}>
47 + <UserDataCard userId={userId} userData={userData}/>
48 + </Col>
49 + <Col md={12}>
50 + <UserHistoryCard userId={userId} rentData={rentData}/>
51 + </Col>
52 + </Row>
53 + )
54 + : (
55 + <Row>
56 + <Col md={8} mdOffset={2}>
57 + <Fallback userId={userId}/>
58 + </Col>
59 + </Row>
60 + )
61 + }
48 </Grid> 62 </Grid>
49 </div> 63 </div>
50 ); 64 );
......