trying to build autocomplete

web/src/js/components/Filter.jsx

@@ -24,44 +24,32 @@ class Filter extends Component {
     render() {
         return (
             <form className="filter" autoComplete="off" onSubmit={this.onSubmit}>
+                <div className="channel-wrapper">
                 <input
                     type="text"
                     placeholder="pajlada"
                     onChange={this.onChannelChange}
                     value={this.props.currentChannel}
                 />
+                <ul className="channel-autocomplete">
+                    {this.props.channels
+                    .filter(channel => channel.name.includes(this.props.currentChannel))
+                    .map(channel => <li key={channel.userID} onClick={() => this.setChannel(channel.name)}>{channel.name}</li>)}
+                </ul>
+                </div>
                 <input
                     type="text"
                     placeholder="gempir"
                     onChange={this.onUsernameChange}
                     value={this.props.currentUsername}
                 />
-                <div className="date">
-                    <select onChange={this.onYearChange} value={this.state.year}>
-                        <option value="2020">2020</option>
-                        <option value="2019">2019</option>
-                        <option value="2018">2018</option>
-                    </select>
-                    <select onChange={this.onMonthChange} value={this.state.month}>
-                        <option value="1">1</option>
-                        <option value="2">2</option>
-                        <option value="3">3</option>
-                        <option value="4">4</option>
-                        <option value="5">5</option>
-                        <option value="6">6</option>
-                        <option value="7">7</option>
-                        <option value="8">8</option>
-                        <option value="9">9</option>
-                        <option value="10">10</option>
-                        <option value="11">11</option>
-                        <option value="12">12</option>
-                    </select>
-                </div>
                 <button type="submit" className="show-logs">Show logs</button>
             </form>
         )
     }
 
+    setChannel = channel => this.props.dispatch(setCurrent(channel, this.props.currentUsername));
+
     onChannelChange = (e) => {
         this.props.dispatch(setCurrent(e.target.value, this.props.currentUsername));
     }
@@ -85,6 +73,7 @@ class Filter extends Component {
 }
 
 const mapStateToProps = (state) => ({
+    channels: state.channels,
     currentChannel: state.currentChannel,
     currentUsername: state.currentUsername
 });

web/src/js/store/createInitialState.js

@@ -1,6 +1,5 @@
 export default () => {
-    // const regex = /\/(\w+)\/(\w+)\??/;
-    // console.log(window.location.pathname.match(regex));
+    const urlParams = new URLSearchParams(window.location.search);
 
     return {
         apiBaseUrl: process.env.apiBaseUrl,
@@ -10,7 +9,7 @@ export default () => {
         },
         loading: false,
         twitchEmotes: {},
-        currentChannel: "",
-        currentUsername: "",
+        currentChannel: urlParams.get("channel") || "",
+        currentUsername: urlParams.get("username") || "",
     }
 }

web/src/scss/modules/filter.scss

@@ -1,29 +1,71 @@
 .filter {
     position: relative;
-    flex: 0.1;
+    display: flex;
+    width: 600px;
     background: $grey-medium;
-    margin-right: 15px;
-    height: 300px;
-    padding: 1rem;
+    padding: 0.5rem;
+    margin: 0 auto 1rem;
     border-radius: 3px;
+    font-size: 1rem;
     @include box-shadow(1);
 
     input {
         width: 100%;
-        margin-bottom: 10px;
     
         &::-webkit-input-placeholder {
             opacity: 0.25;
         }
     }
 
-    select {
-        margin-right: 5px;
+    .channel-wrapper {
+        width: 100%;
+        position: relative;
+        margin-right: 0.5rem;
+
+        input:focus {
+
+            & + .channel-autocomplete {
+                display: block;
+            }
+        }
+
+        .channel-autocomplete {
+            display: none;
+            position: absolute;
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+            background: $grey-medium;
+            z-index: 100;
+            top: 100%;
+            left: 0;
+            right: 0;
+            padding: 0;
+            font-size: 0.8rem;
+            @include box-shadow(2);
+            border-bottom-left-radius: 3px;
+            border-bottom-right-radius: 3px;
+            color: white;
+
+            li {
+                cursor: pointer;
+                padding: 5px;
+
+                &:hover {
+                    background: $grey-light;
+                }
+            }
+        }
     }
 
+
     .show-logs {
-        position: absolute;
-        bottom: 1rem;
-        right: 1rem;
+        width: 200px;
+        margin-left: 0.5rem;
+        background: $dark-blue;
+
+        &:hover, &:active {
+            background: $light-blue;
+        }
     }
 }

web/src/scss/modules/log-search.scss

@@ -1,5 +1,7 @@
 .log-search {
     display: flex;
+    flex-direction: column;
     padding: 1rem;
-    min-height: 100vh; 
+    max-width: 1600px;
+    margin: 0 auto;
 }

web/src/scss/variables/colors.scss

@@ -3,4 +3,7 @@ $grey-lighter: #919191;
 $grey-light: #616161;
 $grey-medium: #424242;
 $grey-medium-dark: #282828;
-$grey-dark: #212121;
+$grey-dark: #212121;
+
+$dark-blue: #2980b9;
+$light-blue: #3498db;