· 6 years ago · Oct 04, 2019, 07:10 PM
1import React from "react";
2// Подключаем наши компоненты
3import Info from "./components/info";
4import Form from "./components/form";
5import Converter from "./components/converter";
6
7
8const api = "https://www.cbr-xml-daily.ru/daily_json.js";
9
10
11// Создаём наш глобальный компонент
12class App extends React.Component {
13
14 // Создаём объект где будем хранить наши ключи и их значение
15 state = {
16 rub: undefined,
17 error: "",
18 result: {},
19 valute: undefined,
20 value: undefined
21 }
22
23 componentDidMount() {
24 fetch(`${api}`).then(res => res.json()).then(result => this.API(result));
25
26 }
27
28 API = result => {
29 this.setState({ result });
30
31 }
32
33 constructor(props) {
34 super(props);
35 this.valuteMethod = this.valuteMethod.bind(this);
36 }
37
38
39
40 valuteMethod(event) {
41
42 var valute = event.target.value;
43 valute = {};
44 var obj = this.state.result.Valute;
45 // for (var i=0; i<obj.length; i++) {
46 // parseInt(obj[i]);
47 // console.log(obj[i]);
48 // }
49 // console.log(typeof obj[obj[i]]);
50 const array = [0, 1, 2, 3, '4', 5, true, false];
51 console.log(valute);
52 console.log(obj);
53 console.log(array);
54 var valueq = Object.keys(obj).find(valueq => valueq == valute); // вернет 1
55 // const key = Object.keys(obj).find(key => key == valute);
56 console.log(valueq);
57 console.log(this.state.result.Valute[valueq]);
58 function keyByValue(object, value) {
59 // var qwe = this.state.result.find(object[valute])
60 // console.log(qwe);
61
62 return console.log(Object.keys(object).find(key => object[key] === value));
63 }
64
65 keyByValue(this.state, valute);
66 // this.setState({
67
68 // });
69 // let qwe = {};
70 // qwe = this.state.valute;
71 // this.setState({
72 // value: this.state.result.Valute.AMD.Value
73 // });
74 // const data = this.state.result;
75 // this.state = {value: event.target.value};
76
77 // console.log(this.state.valute);
78 // console.log(data);
79 }
80
81// Создаём метод который будет запускаться в форме Form
82 converterMethod = async (event) => {
83
84
85
86
87 event.preventDefault();
88 // Записываем введённые пользователем значения долларов и евро
89 // в переменные dollar и euro
90 let dollar = event.target.elements.dollar.value;
91 let euro = event.target.elements.euro.value;
92 var data = this.state.result;
93 console.log(data);
94 // Проверяем ввёл ли пользователь сумму Долларом либо Евро
95 if(dollar || euro) {
96 // Подключаем API валют ЦБ
97 // Преобразуем инфу из API в json формат
98
99
100 //Образаем время у значения даты из файла
101 let Day = data.Date;
102 Day = Day.split('T')[0];
103
104 let dataNew = new Date();
105 let yy = dataNew.getFullYear();
106 let mm = dataNew.getMonth() + 1;
107 if (mm < 10) mm = '0' + mm;;
108 let dd = dataNew.getDay() - 1;
109 if (dd < 10) dd = '0' + dd;
110 let dataYMD = yy + "-" + mm + "-" + dd;
111 console.log(data)
112 // Проверка на дату
113 if (dataYMD == Day) {
114
115 // Записываем полученные данные в наш state
116 this.setState({
117 rub: (dollar * data.Valute.USD.Value +
118 euro * data.Valute.EUR.Value).toFixed(2),
119 error: undefined
120 });
121 } else {
122 // Записываем полученные данные в наш state
123 this.setState({
124 rub: (dollar * data.Valute.USD.Previous +
125 euro * data.Valute.EUR.Previous).toFixed(2),
126 error: undefined
127 });
128 }
129 // Записываем полученные данные в наш state
130 this.setState({
131 rubValue: (dollar * data.Valute.USD.Value +
132 euro * data.Valute.EUR.Value).toFixed(2),
133 rubPrevious: (dollar * data.Valute.USD.Previous +
134 euro * data.Valute.EUR.Previous).toFixed(2),
135 error: undefined
136 });
137 // Если пользователь не чего не ввел, то в ключ Error выдаём значение
138 } else {
139 this.setState({
140 rub: undefined,
141 error: "Введите колличество Долларов или Евро"
142 });
143 }
144
145 }
146
147
148
149 // Выводим html разметку с нашими компонентами
150 render() {
151
152 return (
153 <div className="wrapper">
154 <div className="main">
155 <div className="container">
156 <div className="row">
157 <div className="col-sm-5 info">
158 <Info />
159 </div>
160 <div className="col-sm-7 form">
161 <select onChange={this.valuteMethod}>
162 <option value="USD">USD</option>
163 <option value="AMD">AMD</option>
164 </select>
165 <Form
166 converterMethod={this.converterMethod}
167
168 />
169 <Converter
170 rub={this.state.rub}
171 error={this.state.error}
172 />
173 </div>
174 </div>
175 </div>
176 </div>
177 </div>
178 );
179 }
180}
181
182
183export default App;