Commit for Mikkel with a patch so that he can help me - will be deleted

src/apps/search-header/search-header.tsx

@@ -1,27 +1,94 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import { useCombobox } from "downshift";
+import {
+  SuggestionsFromQueryStringQuery,
+  useSuggestionsFromQueryStringQuery
+} from "../../core/dbc-gateway/generated/graphql";
 import SearchBar from "../../components/search-bar/search-bar";
+import { Autosuggest } from "../../components/autosuggest/autosuggest";
 
 export interface SearchHeaderProps {
   searchHeaderUrl?: string;
   altText?: string;
   inputPlaceholder?: string;
 }
 
+export type SearchResultArray =
+  SuggestionsFromQueryStringQuery["suggest"]["result"];
+
 const SearchHeader: React.FC<SearchHeaderProps> = ({
   searchHeaderUrl = "/search",
   altText = "search icon",
   inputPlaceholder = "Search here"
 }) => {
   const [q, setQ] = useState("");
 
+  // get all the data we need from our graphQL query
+  const {
+    data,
+    isLoading,
+    status
+  }: {
+    data: SuggestionsFromQueryStringQuery | undefined;
+    isLoading: boolean;
+    status: string;
+  } = useSuggestionsFromQueryStringQuery({ q });
+
+  const [allItems, setAllItems] = useState<object[]>([]);
+
+  const [inputItems, setInputItems] = useState<any[]>([]);
+
+  // once we have data, we set it into our useSate
+  useEffect(() => {
+    if (data) {
+      const arayOfResults = data.suggest.result;
+      setAllItems(arayOfResults);
+      setInputItems(arayOfResults);
+    }
+  }, [data]);
+
+  // here we get all the downshift properties for a combobox that we will need
+  const {
+    isOpen,
+    getMenuProps,
+    highlightedIndex,
+    getItemProps,
+    getInputProps,
+    getComboboxProps
+  } = useCombobox({
+    items: inputItems
+  });
+
   return (
-    <SearchBar
-      q={q}
-      setQuery={setQ}
-      searchHeaderUrl={searchHeaderUrl}
-      altText={altText}
-      inputPlaceholder={inputPlaceholder}
-    />
+    <div className="header__menu-second">
+      {/* eslint-disable react/jsx-props-no-spreading */}
+      {/* The downshift combobox works this way by design */}
+      <form
+        action={searchHeaderUrl}
+        className="header__menu-search"
+        {...getComboboxProps()}
+      >
+        {/* eslint-enable react/jsx-props-no-spreading */}
+        <SearchBar
+          q={q}
+          setQuery={setQ}
+          searchHeaderUrl={searchHeaderUrl}
+          altText={altText}
+          inputPlaceholder={inputPlaceholder}
+          getInputProps={getInputProps}
+        />
+        <Autosuggest
+          q={q}
+          data={allItems}
+          isLoading={isLoading}
+          status={status}
+          getMenuProps={getMenuProps}
+          highlightedIndex={highlightedIndex}
+          getItemProps={getItemProps}
+          isOpen={isOpen}
+        />
+      </form>
+    </div>
   );
 };
 

src/components/autosuggest-text/autossugest-text.tsx

@@ -4,22 +4,43 @@ import { SuggestionsFromQueryStringQuery } from "../../core/dbc-gateway/generate
 export interface AutosuggestTextProps {
   responseData: SuggestionsFromQueryStringQuery["suggest"]["result"];
   currentQ: string;
+  // TODO: find out what type this can be from downshifts official types
+  highlightedIndex: any;
+  getItemProps: any;
 }
 
 export const AutosuggestText: React.FC<AutosuggestTextProps> = ({
-  responseData
+  responseData,
+  highlightedIndex,
+  getItemProps
 }) => {
   return (
     <>
-      {responseData.map((item) => {
+      {responseData.map((item, index) => {
+        /* eslint-disable react/no-array-index-key */
+        // TODO: find a way to index the <li> without using index
         return (
-          <li className="autosuggest-text-container__item text-body-medium-regular">
-            {item.__typename === "Creator" ? `${item.name} (forfatter)` : null}
-            {item.__typename === "Subject" ? `${item.value} (emne)` : null}
-            {item.__typename === "Work"
-              ? `${item.title} (manifestation)`
-              : null}
-          </li>
+          <>
+            {/* eslint-disable react/jsx-props-no-spreading */}
+            <li
+              className="autosuggest-text-container__item text-body-medium-regular"
+              key={index}
+              style={
+                highlightedIndex === index ? { backgroundColor: "#bde4ff" } : {}
+              }
+              {...getItemProps({ item, index })}
+            >
+              {/* eslint-enable react/jsx-props-no-spreading */}
+              {/* eslint-enable react/no-array-index-key */}
+              {item.__typename === "Creator"
+                ? `${item.name} (forfatter)`
+                : null}
+              {item.__typename === "Subject" ? `${item.value} (emne)` : null}
+              {item.__typename === "Work"
+                ? `${item.title} (manifestation)`
+                : null}
+            </li>
+          </>
         );
       })}
     </>

src/components/autosuggest/autosuggest.dev.tsx

@@ -10,6 +10,66 @@ export default {
       name: "Query",
       defaultValue: "Adam",
       control: { type: "text" }
+    },
+    data: {
+      name: "Data",
+      defaultValue: {
+        suggest: {
+          result: [
+            {
+              __typename: "Creator",
+              name: "Adam August"
+            },
+            {
+              __typename: "Creator",
+              name: "Douglas Adams"
+            },
+            {
+              __typename: "Creator",
+              name: "Adam Neutzsky-Wulff"
+            },
+            {
+              __typename: "Creator",
+              name: "Andrew Adamson"
+            },
+            {
+              __typename: "Creator",
+              name: "Adam Wallensten"
+            },
+            {
+              __typename: "Creator",
+              name: "Adam Cooper"
+            },
+            {
+              __typename: "Creator",
+              name: "Adam Sandler"
+            },
+            {
+              __typename: "Creator",
+              name: "Adam McKay"
+            },
+            {
+              __typename: "Creator",
+              name: "Richard Adams"
+            },
+            {
+              __typename: "Creator",
+              name: "Adam Shankman"
+            }
+          ]
+        }
+      },
+      control: { type: "object" }
+    },
+    isLoading: {
+      name: "Is Loading",
+      defaultValue: false,
+      control: { type: "boolean" }
+    },
+    status: {
+      name: "Status of the transaction",
+      defaultValue: "success",
+      control: { type: "text" }
     }
   }
 } as ComponentMeta<typeof Autosuggest>;

src/components/autosuggest/autosuggest.tsx

@@ -1,41 +1,65 @@
 import React from "react";
-import {
-  SuggestionsFromQueryStringQuery,
-  useSuggestionsFromQueryStringQuery
-} from "../../core/dbc-gateway/generated/graphql";
+import { SuggestionsFromQueryStringQuery } from "../../core/dbc-gateway/generated/graphql";
 import { AutosuggestText } from "../autosuggest-text/autossugest-text";
 
 export interface AutosuggestProps {
   q: string;
+  data: SuggestionsFromQueryStringQuery | undefined;
+  isLoading: boolean;
+  status: string;
+  // TODO: find out what type this can be from downshifts official types
+  getMenuProps: any;
+  highlightedIndex: any;
+  getItemProps: any;
+  isOpen: boolean;
 }
 
 export const Autosuggest: React.FC<AutosuggestProps> = ({
-  q = "placeholder"
+  q = "query",
+  data,
+  isLoading,
+  status,
+  getMenuProps,
+  highlightedIndex,
+  getItemProps,
+  isOpen
 }) => {
-  const {
-    data,
-    isLoading,
-    status
-  }: {
-    data: SuggestionsFromQueryStringQuery | undefined;
-    isLoading: boolean;
-    status: string;
-  } = useSuggestionsFromQueryStringQuery({ q });
+  // if (q.length < 3) {
+  //   return (
+  //     <ul className="autosuggest-text-container" style={{ display: "none" }} />
+  //   );
+  // }
 
-  if (isLoading) {
-    return <ul className="autosuggest-text-container">Loading</ul>;
-  }
-
-  // if the service cannot find any suggestions
-  if (data && data.suggest.result.length < 1) {
-    return <ul className="autosuggest-text-container">Ingen suggestions</ul>;
-  }
+  // if (isLoading) {
+  //   return <ul className="autosuggest-text-container">Loading</ul>;
+  // }
 
+  // // if the service cannot find any suggestions
+  // if (data && data.suggest.result.length < 1) {
+  //   return <ul className="autosuggest-text-container">Ingen suggestions</ul>;
+  // }
+  console.log(data);
   if (data && status === "success") {
     return (
-      <ul className="autosuggest-text-container">
-        <AutosuggestText responseData={data.suggest.result} currentQ={q} />
-      </ul>
+      <>
+        {/* eslint-disable react/jsx-props-no-spreading */}
+        {/* The downshift combobox works this way by design */}
+        <ul className="autosuggest-text-container" {...getMenuProps()}>
+          {/* eslint-enable react/jsx-props-no-spreading */}
+          {isOpen && isLoading ? (
+            <li>...Loading</li>
+          ) : (
+            isOpen && (
+              <AutosuggestText
+                responseData={data.suggest.result}
+                currentQ={q}
+                highlightedIndex={highlightedIndex}
+                getItemProps={getItemProps}
+              />
+            )
+          )}
+        </ul>
+      </>
     );
   }
 

src/components/autosuggest/suggest.graphql

@@ -10,7 +10,6 @@ query suggestionsFromQueryString($q: String!) {
         name
       }
       ... on Work {
-        id
         title
       }
     }

src/components/search-bar/search-bar.dev.tsx

@@ -8,11 +8,6 @@ export default {
   title: "Components / Search Bar",
   component: SearchBar,
   argTypes: {
-    searchHeaderUrl: {
-      name: "Search header base URL",
-      defaultValue: "https://bibliotek.dk/search",
-      control: { type: "text" }
-    },
     altText: {
       name: "Alt text for search button image",
       defaultValue: "søgeikon",
@@ -35,7 +30,14 @@ export const Default: ComponentStory<typeof SearchBar> = (
   const [q, setQ] = useState("");
   return (
     <StoryHeader>
-      <SearchBar {...args} q={q} setQuery={setQ} />
+      <div className="header__menu-second">
+        <form
+          action="https://bibliotek.dk/search"
+          className="header__menu-search"
+        >
+          <SearchBar {...args} q={q} setQuery={setQ} />
+        </form>
+      </div>
     </StoryHeader>
   );
 };