SGerts · salewan · Nov 27, 2019
diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,8 @@
 .app {
   padding: 2rem;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 /*.app {*/
   /*text-align: center;*/

diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import {Route, Router, Switch} from 'react-router'
 import {Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink} from 'reactstrap';
 import 'react-virtualized/styles.css';
@@ -8,13 +8,35 @@ import history from './history';
 import ChartPage from './ChartPage';
 import TablePage from './TablePage';
 
+export const FormContext = React.createContext({
+  formValues: {},
+  changeForm: () => {}
+});
+
+export const ChartContext = React.createContext({
+  plot: [],
+  setPlot: () => {}
+});
+
+export const TableContext = React.createContext({
+  table: [],
+  filter: '',
+  setTable: () => {},
+  setFilter: () => {}
+});
+
 export default function App() {
 
   const [isOpen, setIsOpen] = useState(false);
+  const [formValues, setFormValues] = useState({});
+  const [plot, setPlot] = useState([]);
+  const [table, setTable] = useState([]);
+  const [filter, setFilter] = useState('');
 
   const toggle = () => setIsOpen(!isOpen);
-
   const navigate = (path) => () => history.push(path);
+  const _setFormValues = (name, value) => setFormValues({ ...formValues, [name]: value });
+
   return (
     <Router history={history}>
       <Navbar color="light" light expand="md">
@@ -35,10 +57,16 @@ export default function App() {
       <div className='app'>
         <Switch>
           <Route path="/table">
-            <TablePage />
+            <TableContext.Provider value={{ table, filter, setTable, setFilter }}>
+              <TablePage />
+            </TableContext.Provider>
           </Route>
           <Route>
-            <ChartPage />
+            <ChartContext.Provider value={{ plot, setPlot }}>
+              <FormContext.Provider value={{ formValues, changeForm: _setFormValues }}>
+                <ChartPage />
+              </FormContext.Provider>
+            </ChartContext.Provider>
           </Route>
         </Switch>
       </div>

diff --git a/src/ChartPage.jsx b/src/ChartPage.jsx
@@ -1,15 +1,16 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
 import { AutoSizer } from 'react-virtualized';
 
 import './charts.css';
 import { preparePlotData } from './service';
 import Form from './Form';
+import { ChartContext } from './App';
 
 export const ChartPage = () => {
 
   const [loading, setLoading] = useState(false);
-  const [plot, setPlot] = useState([]);
+  const {plot, setPlot} = useContext(ChartContext);
 
   const onSubmit = (formParams) => {
     setLoading(true);

diff --git a/src/Form.js b/src/Form.js
@@ -1,30 +1,56 @@
-import React, { useState } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import { FormGroup, Label } from 'reactstrap';
 import DateRangePicker from '@wojtekmaj/react-daterange-picker';
 import Select from 'react-select';
 import { Button } from 'reactstrap';
 
 import './form.css';
-import {getMinDate, getMaxDate, getSystemList, getCriticalityList} from './service';
+import { getMinDate, getMaxDate, getSystemList, getCriticalityList } from './service';
+import { FormContext } from './App';
 
 const criticalityList = getCriticalityList().map(value => ({ value, label: value }));
 const systemList = getSystemList().map(value => ({ value, label: value }));
 
 const Form = ({ onSubmit, loading, className }) => {
 
-  const [date, setDate] = useState([getMinDate(), getMaxDate()]);
-  const [system, setSystem] = useState(null);
-  const [criticality, setCriticality] = useState(null);
+  const { formValues, changeForm} = useContext(FormContext);
+  const [error, setError] = useState(null);
+  let tmr;
+  const _setError = (err) => {
+    setError(err);
+    tmr = setTimeout(() => setError(null), 5000);
+  };
+  const _onSubmit = () => {
+    if (tmr) {
+      clearTimeout(tmr);
+    }
+    if (formValues.date && formValues.system && formValues.criticality) {
+      onSubmit({ date: formValues.date, system: formValues.system.value, criticality: formValues.criticality.value });
+    } else {
+      _setError('Все поля должны быть заполнены.');
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (tmr) {
+        clearTimeout(tmr);
+      }
+    }
+  }, []);
 
   return (
     <div className={className}>
+      {error && <div style={{flexBasis: '100%', flexShrink: 0}}>{error}</div>}
       <FormGroup style={{flexGrow: '0'}}>
         <Label>Период</Label>
         <div>
         <DateRangePicker
-          onChange={setDate}
-          value={date}
+          onChange={value => changeForm('date', value)}
+          value={formValues.date}
           disabled={loading}
+          minDate={getMinDate()}
+          maxDate={getMaxDate()}
         />
         </div>
       </FormGroup>
@@ -33,9 +59,8 @@ const Form = ({ onSubmit, loading, className }) => {
         <Label>Система</Label>
         <Select
           options={systemList}
-          onChange={ picked => {
-            setSystem(picked.value);
-          }}
+          value={formValues.system}
+          onChange={ picked => changeForm('system', picked)}
           isDisabled={loading}
         />
       </FormGroup>
@@ -44,16 +69,15 @@ const Form = ({ onSubmit, loading, className }) => {
         <Label>Критичность</Label>
         <Select
           options={criticalityList}
-          onChange={ picked => {
-            setCriticality(picked.value);
-          }}
+          value={formValues.criticality}
+          onChange={ picked => changeForm('criticality', picked)}
           isDisabled={loading}
         />
       </FormGroup>
 
       <FormGroup className='form-submit-group'>
         <Button
-          onClick={() => onSubmit({ date, system, criticality }) }
+          onClick={_onSubmit}
           disabled={loading}
         >
           Построить график

diff --git a/src/TablePage.jsx b/src/TablePage.jsx
@@ -1,7 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { FormGroup, Input } from 'reactstrap';
 import { Table, AutoSizer, Column } from 'react-virtualized';
 import { prepareTableData } from './service';
+import { TableContext } from './App';
 
 const dateRenderer = ({ cellData }) => {
 
@@ -10,12 +11,12 @@ const dateRenderer = ({ cellData }) => {
 
 const TablePage = () => {
 
-  const [data, setData] = useState([]);
+  const {table: data, setTable: setData, filter, setFilter} = useContext(TableContext);
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     (async function() {
-      const _data = await prepareTableData();
+      const _data = await prepareTableData(filter);
       setData(_data);
     })()
   }, []);
@@ -27,6 +28,7 @@ const TablePage = () => {
   let timer = null;
 
   const doFilter = async (filter) => {
+    setFilter(filter);
     setLoading(true);
     const _data = await prepareTableData(filter);
     setData(_data);
@@ -51,7 +53,7 @@ const TablePage = () => {
 
   const onFilterKeyUp = async evt => {
     if(evt.keyCode === 13){
-      evt.preventDefault();
+      // evt.preventDefault();
       const filter = evt.target.value;
       await onFilter(filter, true);
     }
@@ -60,45 +62,49 @@ const TablePage = () => {
   return (
     <>
       {loading && <div>Загрузка ...</div>}
-      <FormGroup>
-        <Input
-          type="text"
-          name="filter"
-          id="filter"
-          placeholder="фильтр по всем колонкам"
-          onChange={onFilterChange}
-          onKeyUp={onFilterKeyUp}
-          disabled={loading}
-        />
-      </FormGroup>
-
-      <AutoSizer>
-        {({width, height}) => (
-          <Table
-            width={width}
-            height={height}
-            rowGetter={rowGetter}
-            headerHeight={40}
-            rowCount={data.length}
-            rowHeight={40}
-            headerClassName={''}
-            rowClassName={''}
-            disableHeader={false}
-          >
-            <Column dataKey='ID' width={100} label='ID' />
-            <Column dataKey='System' width={100} label='System' flexGrow={1}/>
-            <Column dataKey='Состояние' width={100} label='Состояние' flexGrow={1}/>
-            <Column dataKey='Найдено при' width={100} label='Найдено при' flexGrow={1}/>
-            <Column dataKey='Критичность' width={100} label='Критичность' flexGrow={1}/>
-            <Column dataKey='Тип Дефекта' width={100} label='Тип Дефекта' flexGrow={1}/>
-            <Column dataKey='Дата создания' width={100} label='Дата создания' flexGrow={1} cellRenderer={dateRenderer} />
-            <Column dataKey='Дата изменения' width={100} label='Дата изменения' flexGrow={1} cellRenderer={dateRenderer} />
-            <Column dataKey='Дата закрытия' width={100} label='Дата закрытия' flexGrow={1} cellRenderer={dateRenderer} />
-            <Column dataKey='Метод обнаружения' width={100} label='Метод обнаружения' flexGrow={1}/>
-            <Column dataKey='reopens_amount' width={100} label='reopens_amount' className={''} flexGrow={1}/>
-          </Table>
-        )}
-      </AutoSizer>
+      <div>
+        <FormGroup>
+          <Input
+            type="text"
+            name="filter"
+            id="filter"
+            placeholder="фильтр по всем колонкам"
+            onChange={onFilterChange}
+            onKeyUp={onFilterKeyUp}
+            disabled={loading}
+            defaultValue={filter}
+          />
+        </FormGroup>
+      </div>
+      <div style={{ flexBasis: '100%' }}>
+        <AutoSizer>
+          {({width, height}) => (
+            <Table
+              width={width}
+              height={height}
+              rowGetter={rowGetter}
+              headerHeight={40}
+              rowCount={data.length}
+              rowHeight={40}
+              headerClassName={''}
+              rowClassName={''}
+              disableHeader={false}
+            >
+              <Column dataKey='ID' width={100} label='ID' />
+              <Column dataKey='System' width={100} label='System' flexGrow={1}/>
+              <Column dataKey='Состояние' width={100} label='Состояние' flexGrow={1}/>
+              <Column dataKey='Найдено при' width={100} label='Найдено при' flexGrow={1}/>
+              <Column dataKey='Критичность' width={100} label='Критичность' flexGrow={1}/>
+              <Column dataKey='Тип Дефекта' width={100} label='Тип Дефекта' flexGrow={1}/>
+              <Column dataKey='Дата создания' width={100} label='Дата создания' flexGrow={1} cellRenderer={dateRenderer} />
+              <Column dataKey='Дата изменения' width={100} label='Дата изменения' flexGrow={1} cellRenderer={dateRenderer} />
+              <Column dataKey='Дата закрытия' width={100} label='Дата закрытия' flexGrow={1} cellRenderer={dateRenderer} />
+              <Column dataKey='Метод обнаружения' width={100} label='Метод обнаружения' flexGrow={1}/>
+              <Column dataKey='reopens_amount' width={100} label='reopens_amount' className={''} flexGrow={1}/>
+            </Table>
+          )}
+        </AutoSizer>
+      </div>
     </>
   )
 };