implement search

SwissDataScienceCenter · Aug 22, 2023 · 821fd7f · 821fd7f
1 parent d81237f
commit 821fd7f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/client/src/features/kgSearch/index.ts b/client/src/features/kgSearch/index.ts
@@ -4,6 +4,7 @@ import {
   KgSearchResultLink,
   KgSearchResult,
 } from "../kgSearch/KgSearch.d";
+import { stateToSearchString } from "./KgSearchState";
 
-export { kgSearchApi, EntityType };
+export { kgSearchApi, EntityType, stateToSearchString };
 export type { KgSearchResult, KgSearchResultLink };
diff --git a/client/src/landing/AnonymousHome.tsx b/client/src/landing/AnonymousHome.tsx
@@ -25,13 +25,18 @@
 
 import React, { Fragment } from "react";
 import type { CSSProperties } from "react";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { HashLink } from "react-router-hash-link";
 import { Row, Col } from "reactstrap";
+import { useForm } from "react-hook-form";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 
+import { RenkuMarkdown } from "../components/markdown/RenkuMarkdown";
+import { ExternalLink } from "../components/ExternalLinks";
+import { stateToSearchString } from "../features/kgSearch";
 import { StatuspageBanner } from "../statuspage";
+import { Docs } from "../utils/constants/Docs";
 import { Url } from "../utils/helpers/url";
 
 import { NavBarWarnings } from "./NavBarWarnings";
@@ -55,10 +60,6 @@ import logo_EPFL from "./Logos/EPFL.svg";
 import logo_ETH from "./Logos/ETH.svg";
 import logo_SDSC from "./Logos/SDSC.svg";
 
-import { ExternalLink } from "../components/ExternalLinks";
-import { RenkuMarkdown } from "../components/markdown/RenkuMarkdown";
-import { Docs } from "../utils/constants/Docs";
-
 import type { AnonymousHomeConfig } from "./anonymousHome.types";
 import { BottomNav, TopNav } from "./anonymousHomeNav";
 
@@ -90,22 +91,43 @@ function HomeHeader(props: AnonymousHomeConfig) {
   );
 }
 
+type SearchInputFormFields = {
+  phrase: string;
+};
+
 function SearchInput() {
+  const { handleSubmit, register } = useForm<SearchInputFormFields>({
+    defaultValues: { phrase: "" },
+  });
+  const history = useHistory();
+  const onSubmit = (inputs: SearchInputFormFields) => {
+    const searchState = { phrase: inputs.phrase };
+    const searchString = stateToSearchString(searchState);
+    const searchUrl = `${Url.get(Url.pages.search)}/?${searchString}`;
+    history.push(searchUrl);
+  };
   return (
     <div className="d-flex flex-nowrap w-100 flex-sm-grow-1 mx-0 mx-lg-2">
       <div className="search-box flex-nowrap justify-content-center m-auto">
-        <div className="quick-nav input-group flex-nowrap input-group-sm justify-content-center">
+        <form
+          className="quick-nav input-group flex-nowrap input-group-sm justify-content-center"
+          onSubmit={handleSubmit(onSubmit)}
+        >
           <input
             type="text"
             autoComplete="off"
             className="form-control form-control-sm rk-landing-search"
             placeholder="Explore existing public projects and datasets"
             aria-label="Search input"
+            {...register("phrase")}
           />
-          <span className="quick-nav-icon d-flex justify-content-center align-items-center mx-4 cursor-pointer">
+          <span
+            className="quick-nav-icon d-flex justify-content-center align-items-center mx-4 cursor-pointer"
+            onClick={handleSubmit(onSubmit)}
+          >
             <FontAwesomeIcon icon={faSearch} />
           </span>
-        </div>
+        </form>
       </div>
     </div>
   );