Added disappearing buttons to submit and clear

src/components/elements.tsx

@@ -50,7 +50,8 @@ export const Button = styled.button`
   border: 1px solid ${selectedTheme.mainColor};
   color: ${selectedTheme.mainColor};
   background: none;
-  min-height: 3em;
+
+  min-height: 2rem;
   height: 100%;
 
   &:hover {

src/components/searchBar.tsx

@@ -1,22 +1,43 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 
 import selectedTheme from "./themeManager";
 
+import { Button } from "./elements";
+
+const Search = styled.form`
+  width: 100%;
+  height: 2rem;
+
+  display: flex;
+
+  padding-top: 0.25rem;
+`;
+
 const SearchInput = styled.input`
   width: 100%;
+
   font-size: 1rem;
+
   border: none;
   border-bottom: 1px solid ${selectedTheme.accentColor};
+
   background: none;
   border-radius: 0;
   color: ${selectedTheme.mainColor};
 
+  margin: 0px;
+
   :focus {
     outline: none;
   }
 `;
 
+const SearchButton = styled(Button)`
+  margin: 0px 2px;
+  min-height: 0;
+`;
+
 export interface ISearchProviderProps {
   name: string;
   url: string;
@@ -28,10 +49,15 @@ interface ISearchBarProps {
 }
 
 const SearchBar = ({ providers }: ISearchBarProps) => {
-  let [input, setInput] = useState("");
+  let [input, setInput] = useState<string>("");
+  let [buttonsHidden, setButtonsHidden] = useState<boolean>(true);
+
+  useEffect(() => {
+    setButtonsHidden(input === "");
+  }, [input]);
 
   const handleSearchQuery = (e: React.FormEvent) => {
-    var query = input || "";
+    var query: string = input || "";
 
     if (query.split(" ")[0].includes("/")) {
       handleQueryWithProvider(query);
@@ -43,13 +69,14 @@ const SearchBar = ({ providers }: ISearchBarProps) => {
   };
 
   const handleQueryWithProvider = (query: string) => {
-    let queryArray = query.split(" ");
-    let prefix = queryArray[0];
+    let queryArray: Array<string> = query.split(" ");
+    let prefix: string = queryArray[0];
+
     queryArray.shift();
 
-    let searchQuery = queryArray.join(" ");
+    let searchQuery: string = queryArray.join(" ");
 
-    let providerFound = false;
+    let providerFound: boolean = false;
     if (providers) {
       providers.forEach((provider: ISearchProviderProps) => {
         if (provider.prefix === prefix) {
@@ -64,13 +91,25 @@ const SearchBar = ({ providers }: ISearchBarProps) => {
   };
 
   return (
-    <form onSubmit={(e) => handleSearchQuery(e)}>
+    <Search onSubmit={(e) => handleSearchQuery(e)}>
       <SearchInput
         type="text"
-        onChange={(e) => setInput(e.target.value)}
+        value={input}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          setInput(e.target.value)
+        }
       ></SearchInput>
-      <button type="submit" hidden />
-    </form>
+      <SearchButton
+        type="button"
+        onClick={() => setInput("")}
+        hidden={buttonsHidden}
+      >
+        Clear
+      </SearchButton>
+      <SearchButton type="submit" hidden={buttonsHidden}>
+        Search
+      </SearchButton>
+    </Search>
   );
 };