add new pages

package.json

@@ -38,6 +38,7 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
+    "react-select": "^3.1.0",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",

src/Components/Pages/Home/Home.jsx

 import React, { Component } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHeart } from '@fortawesome/free-solid-svg-icons'
-import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
+import Select  from 'react-select'
 
 import './Home.scss'
 
@@ -9,6 +9,19 @@ class Home extends Component {
   constructor(props){
     super(props);
     this.timeout =  0;
+
+    this.state = {
+      options: [],
+      models: [],
+      codeValue: '',
+      modelValue: '',
+      textareaValue: ''
+    }
+  }
+
+  componentDidMount() {
+    const { actions } = this.props
+    actions.getMod()
   }
 
 
@@ -16,23 +29,68 @@ class Home extends Component {
     clearTimeout(this.timeout);
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.deep.predictions !== this.props.deep.predictions) {
+      this.getPredictionOptions()
+    }
+
+    if (prevProps.deep.models !== this.props.deep.models) {
+      this.getModelOptions()
+    }
+
+    if (prevProps.deep.loading !== this.props.deep.loading) {
+      this.setState({isLoading: this.props.deep.loading});
+    }
+  }
+
 
-  handleChange = (e) => {
+  handleChangeCode = (inputValue ) => {
     const { actions } = this.props
-    const val = e.target.value
+    const val = inputValue
 
     clearTimeout(this.timeout);
     this.timeout = setTimeout(() => {
       if (val){
         actions.getPred({
-          "model": "char_test_final",
+          "model": this.state.modelValue.value,
           "keyword": val
         })
       }
     }, 1000);
   }
 
+  handleTextareaChange = (e) => {
+    this.setState({ textareaValue: e.target.value} )
+  }
+
+  getPredictionOptions = () => {
+    const { predictions } = this.props.deep
+    if (predictions)
+      this.setState({options: predictions.map(pred => {
+          return {value: pred, label: pred}
+        })})
+  }
+
+  getModelOptions = () => {
+    const { models } = this.props.deep
+    if (models)
+      this.setState({models: models.map(pred => {
+          return {value: pred, label: pred}
+        })})
+  }
+
+  onSelectCode = (e) => {
+    this.setState({codeValue: e.value, textareaValue: this.state.textareaValue + '\n' + e.value})
+  }
+
+  onSelectModel = (e) => {
+    console.log('onSelectModel')
+    console.log(e)
+    this.setState({modelValue: {value: e.value, label: e.value}})
+  }
+
   render () {
+    const { options, models, isLoading, codeValue, modelValue, textareaValue } = this.state
     return (
        <div className="site-wrapper-inner">
          <div className="cover-container">
@@ -51,13 +109,41 @@ class Home extends Component {
                </nav>
              </div>
            </div>
+
            <div className="inner cover">
-             <h1 className="cover-heading">Type some text...</h1>
-             <div className="input-group">
-               <textarea className="form-control" aria-label="With textarea" rows="15" onChange={this.handleChange}/>
+             {/*<h1 className="cover-heading">Type some text...</h1>*/}
+             <form className="row">
+               <div className="form-group pt-5 col-2">
+                 <label htmlFor="model">Select Model</label>
+                 <Select
+                     id="model"
+                     cacheOptions
+                     className="basic-single col-12"
+                     options={models}
+                     onChange={this.onSelectModel}
+                     value={modelValue}
+                 />
+               </div>
+               <div className="form-group pt-5 col-10">
+                 <label htmlFor="code">Type some code...</label>
+                 <Select
+                     id="code"
+                     cacheOptions
+                     className="basic-single col-12"
+                     options={options}
+                     onInputChange={this.handleChangeCode}
+                     onChange={this.onSelectCode}
+                     value={codeValue}
+                     isLoading={isLoading}
+                     isClearable={true}
+                 />
+               {/*</div>*/}
+               </div>
+             </form>
+             <div className="input-group pt-5">
+               <textarea className="form-control" aria-label="With textarea" rows="15" value={textareaValue} onChange={this.handleTextareaChange} />
              </div>
            </div>
-
            <div className="mastfoot">
              <div className="inner row">
                <div className="col">Made with  <FontAwesomeIcon icon={faHeart} className="heart-ico"/>  by <p className="name">Richard Babjak, Maroš Hliboký & Kristián Durak.</p></div>

src/Components/Pages/Home/Home.scss

@@ -154,7 +154,7 @@ body {
   .masthead,
   .mastfoot,
   .cover-container {
-    width: 700px;
+    width: 1500px;
   }
 }
 
@@ -167,3 +167,23 @@ body {
 .name{
   color: #ffffff;
 }
+
+
+.css-26l3qy-menu {
+  background-color: #333333!important;
+}
+
+.css-1n7v3ny-option:hover {
+  background-color: #8e9094!important;
+}
+
+.css-yt9ioa-option:hover {
+  background-color: #8e9094!important;
+}
+
+
+
+// posledny selectnuty
+//.css-1n7v3ny-option:focus {
+//  background-color: #8e9094!important;
+//}

src/store/actions/deep.actions.js

@@ -30,9 +30,10 @@ const getPrediction = data => dispatch => {
   }
 }
 
-const getModels = models => dispatch => {
+const getModels = () => dispatch => {
   dispatch(request())
-  services.getModels(models)
+
+  services.getModels()
       .then(res => dispatch(success(res.data)))
       .catch(err => {
         dispatch(failure(err))

src/store/reducers/deep.reducers.js

@@ -39,7 +39,7 @@ export default function deepReducers (state = {}, action) {
         loading: false,
         loaded: true,
         error: false,
-        models: action.data
+        models: action.data.data.results
       }
     case deepConstants.GET_MODELS_FAILURE:
       return {

src/store/services/deep.service.js

@@ -7,9 +7,9 @@ const getPrediction = async data =>
         .then(res => res)
         .catch(error => handleResponse(error.response))
 
-const getModels = async data =>
+const getModels = () =>
     axiosInstance
-        .post('/models', JSON.stringify(data))
+        .post('/get_models')
         .then(res => res)
         .catch(error => handleResponse(error.response))