add autocompletion

web/package.json

@@ -4,6 +4,7 @@
     "description": "frontend for justlog",
     "repository": "github.com/gempir/justlog",
     "dependencies": {
+        "prop-types": "^15.7.2",
         "react": "^16.12.0",
         "react-dom": "^16.12.0",
         "react-redux": "^7.1.3",

web/src/js/components/AutocompleteInput.jsx

@@ -1,19 +1,39 @@
 import React, { Component } from "react";
 
 export default class AutocompleteInput extends Component {
-    render() {            
+
+    state = {
+        focused: false,
+    };
+
+    input;
+
+    render() {
         return <div className="AutocompleteInput">
             <input
                 type="text"
+                ref={el => this.input = el}
                 placeholder={this.props.placeholder}
-                onChange={this.props.onChange}
+                onChange={e => this.props.onChange(e.target.value)}
+                onFocus={() => this.setState({ focused: true })}
+                onBlur={() => this.setState({ focused: false })}
                 value={this.props.value}
             />
-            <ul>
+            {this.state.focused && <ul>
                 {this.props.autocompletions
-                .filter(channel => channel.name.includes(this.props.value))
-                .map(channel => <li key={channel.userID} onClick={() => this.setChannel(channel.name)}>{channel.name}</li>)}
-            </ul>
+                    .filter(completion => completion.includes(this.props.value))
+                    .map(completion =>
+                        <li key={completion} onClick={() => this.handleClick(completion)} onMouseDown={e => e.preventDefault()}>
+                            {completion}
+                        </li>
+                    )}
+            </ul>}
         </div>
     }
+
+    handleClick = (completion) => {
+        this.props.onChange(completion);
+        this.input.blur();
+        this.props.onAutocompletionClick(completion);
+    }
 }

web/src/js/components/Filter.jsx

@@ -16,6 +16,8 @@ class Filter extends Component {
         }
     }
 
+    username;
+
     componentDidMount() {
         if (this.props.currentChannel && this.props.currentUsername) {
             this.props.searchLogs(this.props.currentChannel, this.props.currentUsername, this.state.year, this.state.month);
@@ -23,18 +25,11 @@ class Filter extends Component {
     }
 
     render() {
-        const completions = this.props.channels
-            .filter(channel => channel.name.includes(this.props.currentChannel));
-
-        const autocompletions = [];
-        for (const completion of completions) {
-            autocompletions.push(<li key={completion.userID} onClick={() => this.setChannel(completion.name)}>{completion.name}</li>);
-        }
-
         return (
             <form className="filter" autoComplete="off" onSubmit={this.onSubmit}>
-                <AutocompleteInput placeholder="pajlada" onChange={this.onChannelChange} value={this.props.currentChannel} autocompletions={this.props.channels} />
+                <AutocompleteInput placeholder="pajlada" onChange={this.onChannelChange} value={this.props.currentChannel} onAutocompletionClick={() => this.username.focus()} autocompletions={this.props.channels.map(channel => channel.name)} />
                 <input
+                    ref={el => this.username = el}
                     type="text"
                     placeholder="gempir"
                     onChange={this.onUsernameChange}
@@ -45,8 +40,8 @@ class Filter extends Component {
         )
     }
 
-    onChannelChange = (e) => {
-        this.props.dispatch(setCurrent(e.target.value, this.props.currentUsername));
+    onChannelChange = (channel) => {
+        this.props.dispatch(setCurrent(channel, this.props.currentUsername));
     }
 
     onUsernameChange = (e) => {

web/src/scss/modules/AutocompleteInput.scss

@@ -7,9 +7,27 @@
 
     ul {
         position: absolute;
+        z-index: 100;
+        margin: 0;
+        padding: 0;
+        color: white;
+        list-style-type: none;
         background: $grey-medium;
         top: 100%;
         left: 0;
         right: 0;
+        @include box-shadow(2);
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+        
+        li {
+            cursor: pointer;
+            padding: 0.5rem;
+            font-size: 0.8rem;
+
+            &:hover {
+                background: $grey-light;
+            }
+        }
     }
 }

web/yarn.lock

@@ -7813,6 +7813,7 @@ fsevents@^1.2.7:
     mini-css-extract-plugin: ^0.9.0
     node-sass: ^4.13.1
     pnp-webpack-plugin: ^1.6.0
+    prop-types: ^15.7.2
     react: ^16.12.0
     react-dom: ^16.12.0
     react-redux: ^7.1.3