RateLine.js
2.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React, {useEffect} from 'react';
import { Surface, Text,Divider} from 'react-native-paper';
import { View,StyleSheet } from 'react-native';
import {connect} from 'react-redux';
import {load } from '../../reducers/search';
import PromptSearchRate from '../PromptSearch/PromptSearchRate';
const RateLine = ({load,pastRecords }) => {
useEffect(()=>{
const get = async () => {
await load();
}
get();
}, [load]);
return (
<Surface style={styles.surface}>
{pastRecords.length ?
<>
<Text style={styles.info}>점수 변화</Text>
<View style={styles.scoreContainer}>
{pastRecords.map((past,index)=> (
<View key={index} style={styles.past}>
<Text style={styles.score}>{past.score}</Text>
<Text style={styles.day}>{past.date.substring(5,7)+'/'+past.date.substring(8,10)}</Text>
</View>
))}
</View>
<Text style={styles.message}>당신의 점수 변화를 확인해 보세요!</Text>
</>
: <PromptSearchRate />
}
</Surface>
);
}
const styles = StyleSheet.create({
surface: {
padding: 8,
flex: 0.3,
width: '95%',
alignItems: 'center',
justifyContent: 'center',
elevation: 2,
marginTop: 10,
marginBottom: 10,
borderRadius: 5
},
info:{
fontSize:23,
fontWeight:'bold',
marginBottom: 5,
},
score:{
fontSize:20,
color:"#002857"
},
scoreContainer:{
flexDirection:'row',
justifyContent: 'space-around',
width:'100%'
},
day:{
fontSize: 10,
textAlign:'center',
marginBottom:5
},
past:{
alignItems:'center',
marginBottom:5
},
message:{
margin: 5,
color:"#6e8fb4"
}
});
const RateLineContainer = ( {load,pastRecords } ) => (
<RateLine load={load} pastRecords={pastRecords} />
);
export default connect(
({search})=>({
pastRecords:search.pastRecords
}),
{
load
}
)(RateLineContainer);