Merge pull request #101 from kube-js/develop

fix: added initial autocomplete functionality

Author: mariocoski

assets/jscpd-badge.svg

@@ -2,7 +2,7 @@ apiVersion: v1
 description: A Helm chart for kube-ts-react-client
 name: kube-ts-react-client
 version: 1.0.0
-appVersion: 1.5.9
+appVersion: 1.5.14
 home: https://cloud.docker.com/u/kubejs/repository/docker/kubejs/kube-ts-react-client
 icon: https://avatars2.githubusercontent.com/u/47761918?s=200&v=4
 sources:

k8s/Chart.yaml

@@ -6,7 +6,7 @@ replicaCount: 2
 
 image:
   repository: kubejs/kube-ts-react-client
-  tag: 1.5.9
+  tag: 1.5.14
   pullPolicy: Always
   containerPort: 80
 

k8s/values.yaml

@@ -9,6 +9,7 @@ import {
   ResetPasswordOptions,
   VerifyAccountOptions,
 } from '../redux/auth/actionCreators';
+import { AutocompleteResults } from '../redux/autocomplete/actionCreators';
 import { CourseDetailsResult } from '../redux/courseDetails/actionCreators';
 import { DiscoveryItemsResult } from '../redux/discoveryItems/actionCreators';
 import http from '../services/http';
@@ -63,18 +64,29 @@ export type SearchParams =
 
 export type DiscoveryType = 'homepage' | 'course';
 export interface BaseGetOptions {
-  readonly type: DiscoveryType
+  readonly type: DiscoveryType;
   readonly searchParams?: SearchParams;
 }
 
 export type GetDiscoveryItems<T> = (options: BaseGetOptions) => Promise<T>;
 
+export interface AutocompleteOptions {
+  readonly term: string;
+}
+
+export type Autocomplete = (
+  options: AutocompleteOptions
+) => Promise<AutocompleteResults>;
+
 export interface Api {
   readonly auth: AuthApi;
   readonly categories: Facade<Category>;
   readonly courses: Facade<Course>;
   readonly users: Facade<User>;
-  readonly getDiscoveryItems: GetDiscoveryItems<CourseDetailsResult | DiscoveryItemsResult>;
+  readonly getDiscoveryItems: GetDiscoveryItems<
+    CourseDetailsResult | DiscoveryItemsResult
+  >;
+  readonly autocomplete: Autocomplete;
 }
 
 export const normalisePromise = <T>(promise: ResponsePromise): Promise<T> =>
@@ -118,6 +130,10 @@ const createApi = ({ httpClient, token }: Options): Api => {
           })
         ),
     },
+    autocomplete: ({ term }: AutocompleteOptions) =>
+      normalisePromise<AutocompleteResults>(
+        httpClient.get('autocomplete', { searchParams: { q: term } })
+      ),
     categories: categoriesFactory({
       kyConfig: {
         ...baseConfig,

src/api/index.ts

@@ -9,43 +9,6 @@ import Downshift from 'downshift';
 import React from 'react';
 import useStyles from './styles';
 
-const suggestions = [
-  { label: 'Afghanistan' },
-  { label: 'Aland Islands' },
-  { label: 'Albania' },
-  { label: 'Algeria' },
-  { label: 'American Samoa' },
-  { label: 'Andorra' },
-  { label: 'Angola' },
-  { label: 'Anguilla' },
-  { label: 'Antarctica' },
-  { label: 'Antigua and Barbuda' },
-  { label: 'Argentina' },
-  { label: 'Armenia' },
-  { label: 'Aruba' },
-  { label: 'Australia' },
-  { label: 'Austria' },
-  { label: 'Azerbaijan' },
-  { label: 'Bahamas' },
-  { label: 'Bahrain' },
-  { label: 'Bangladesh' },
-  { label: 'Barbados' },
-  { label: 'Belarus' },
-  { label: 'Belgium' },
-  { label: 'Belize' },
-  { label: 'Benin' },
-  { label: 'Bermuda' },
-  { label: 'Bhutan' },
-  { label: 'Bolivia, Plurinational State of' },
-  { label: 'Bonaire, Sint Eustatius and Saba' },
-  { label: 'Bosnia and Herzegovina' },
-  { label: 'Botswana' },
-  { label: 'Bouvet Island' },
-  { label: 'Brazil' },
-  { label: 'British Indian Ocean Territory' },
-  { label: 'Brunei Darussalam' },
-];
-
 function renderInput(inputProps: any) {
   const { InputProps, classes, ref, ...other } = inputProps;
 
@@ -91,46 +54,21 @@ function renderSuggestion(suggestionProps: any) {
   );
 }
 
-function getSuggestions(
-  value: string | null,
-  { showEmpty }: { showEmpty: boolean } = { showEmpty: false }
-) {
-  const inputValue = String(value)
-    .trim()
-    .toLowerCase();
-  const inputLength = inputValue.length;
-  let count = 0;
-
-  return inputLength === 0 && !showEmpty
-    ? []
-    : suggestions.filter(suggestion => {
-        const keep =
-          count < 5 &&
-          suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
-
-        if (keep) {
-          count += 1;
-        }
-
-        return keep;
-      });
-}
-
 let popperNode: any;
 
-const Autocomplete = () => {
+const Autocomplete = ({value, onChange, suggestions}: any) => {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
-      <Downshift id="downshift-popper">
+      <Downshift id="downshift-popper" selectedItem={value} onStateChange={onChange}>
         {({
+          clearSelection,
           getInputProps,
           getItemProps,
           getLabelProps,
           getMenuProps,
           highlightedIndex,
-          inputValue,
           isOpen,
           selectedItem,
         }) => {
@@ -155,7 +93,7 @@ const Autocomplete = () => {
               })}
               {String(inputProps.value).length > 0 && (
                 <div className={[classes.icon, classes.closeIcon].join(' ')}>
-                  <CloseIcon />
+                  <CloseIcon onClick={clearSelection as any} />
                 </div>
               )}
               <Popper open={isOpen} anchorEl={popperNode}>
@@ -171,7 +109,7 @@ const Autocomplete = () => {
                       width: popperNode ? popperNode.clientWidth : undefined,
                     }}
                   >
-                    {(getSuggestions(inputValue) as any).map(
+                    {suggestions.map(
                       (suggestion: any, index: number) =>
                         renderSuggestion({
                           highlightedIndex,