fix: added navbar autocomplete

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.21
+appVersion: 1.5.23
 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.21
+  tag: 1.5.23
   pullPolicy: Always
   containerPort: 80
 

k8s/values.yaml

@@ -90,11 +90,35 @@ function renderSuggestion(suggestionProps: any) {
   );
 }
 
-let popperNode: any;
+type AutocompleteType = 'navbar' | 'heroContent';
+
+const autocompleteOptions = {
+  heroContent: {
+    inputProps: {},
+  },
+  navbar: {
+    inputProps: {
+      style: {
+        paddingBottom: '12px',
+        paddingTop: '12px',
+      },
+    },
+  },
+};
+
+interface Options {
+  readonly id: string;
+  readonly type: AutocompleteType;
+}
 
-const Autocomplete = () => {
+const Autocomplete = ({ id, type }: Options) => {
   const classes = useStyles();
 
+  const additionalOptions = autocompleteOptions[type];
+
+  // TODO: explore useRef, fix popper width
+  let popperNode: any;
+
   const [value, setValue] = useState('');
   const history = useHistory();
   const { courses, users } = useSelector((state: State) => state.autocomplete);
@@ -118,7 +142,7 @@ const Autocomplete = () => {
         item.type === 'course'
           ? `/courses/${item.slug}`
           : `/instructors/${item.email}`;
-
+      setValue('');
       history.push(link);
     } else if (changes.hasOwnProperty('inputValue')) {
       setValue(changes.inputValue);
@@ -128,11 +152,7 @@ const Autocomplete = () => {
 
   return (
     <div className={classes.root}>
-      <Downshift
-        id="downshift-popper"
-        selectedItem={value}
-        onStateChange={handleChange}
-      >
+      <Downshift id={id} selectedItem={value} onStateChange={handleChange}>
         {({
           clearSelection,
           getInputProps,
@@ -145,6 +165,7 @@ const Autocomplete = () => {
         }) => {
           const { onBlur, onFocus, ...inputProps } = getInputProps({
             placeholder: 'What would you like to learn?',
+            ...additionalOptions.inputProps,
           });
 
           return (

src/atoms/Autocomplete/index.tsx

@@ -17,6 +17,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   icon: {
     alignItems: 'center',
+    color: '#000',
     display: 'flex',
     height: '100%',
     justifyContent: 'center',
@@ -41,11 +42,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginTop: theme.spacing(1),
     position: 'absolute',
     right: 0,
-    zIndex: 1,
   },
   root: {
     flexGrow: 1,
-    height: 250,
   },
 }));
 

src/atoms/Autocomplete/styles.ts

@@ -34,7 +34,7 @@ const HeroContent = () => {
             Find any course and topic and start learning today.
           </Typography>
           <div className={classes.searchBox}>
-            <Autocomplete />
+            <Autocomplete id="heroContent" type="heroContent" />
           </div>
         </Grid>
       </Container>

src/atoms/SearchBox/index.tsx

@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     flexGrow: 1,
   },
   searchBox: {
-    
+    height: '250px',
   }
 }));
 

src/atoms/SearchBox/styles.ts

@@ -7,8 +7,8 @@ import MoreIcon from '@material-ui/icons/MoreVert';
 import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
+import Autocomplete from '../../atoms/Autocomplete';
 import LogoutButton from '../../atoms/LogoutButton';
-import SearchBox from '../../atoms/SearchBox';
 import { LOGIN, REGISTER } from '../../constants/routes';
 // source: https://www.freepik.com
 import Logo from '../../images/logo.svg';
@@ -83,7 +83,9 @@ const NavBar = ({ handleSidebarOpen, open }: any) => {
             <img className={classes.logo} src={Logo} /> Kudemy
           </Button>
 
-          <SearchBox />
+          <div className={classes.searchBox}>
+            <Autocomplete id="navbar" type="navbar" />
+          </div>
 
           <div className={classes.grow} />