From 97d32bb98dd669d6ef934036cbf8d4278de0b481 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Sun, 8 Aug 2021 19:23:18 +0530
Subject: somehow created a search bar
---
src/components/App.tsx | 2 +
src/components/Form/Items/RegisterItemForm.tsx | 3 --
src/components/Form/People/RegisterPersonForm.tsx | 2 +-
src/components/Util/SearchBar.scss | 28 +++++++++++++
src/components/Util/SearchBar.tsx | 50 +++++++++++++++++++++++
5 files changed, 81 insertions(+), 4 deletions(-)
create mode 100644 src/components/Util/SearchBar.scss
create mode 100644 src/components/Util/SearchBar.tsx
diff --git a/src/components/App.tsx b/src/components/App.tsx
index f7e0348..40b38f4 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -12,9 +12,11 @@ import { BrowserRouter, Route, Switch } from "react-router-dom";
import Header from "./Header/Header";
import HomePage from "./Pages/HomePage";
import BillingPage from "./Pages/BillingPage";
+import SearchBar from "./Util/SearchBar";
const App: React.FC = () => (
<>
+ <SearchBar/>
<BrowserRouter>
<Header/>
<div className={"root-content"}>
diff --git a/src/components/Form/Items/RegisterItemForm.tsx b/src/components/Form/Items/RegisterItemForm.tsx
index 7e9f67b..4089084 100644
--- a/src/components/Form/Items/RegisterItemForm.tsx
+++ b/src/components/Form/Items/RegisterItemForm.tsx
@@ -6,9 +6,6 @@
* Copyright (c) 2021 Vidhu Kant Sharma
*/
-// TODO: Code isn't tested properly
-// I'd be surprised if it < 10 bugs
-
import React, { useState, Dispatch, SetStateAction } from "react";
import "./../Form.scss";
import { NewItem } from "./../../../interfaces"
diff --git a/src/components/Form/People/RegisterPersonForm.tsx b/src/components/Form/People/RegisterPersonForm.tsx
index 3922975..dedc45a 100644
--- a/src/components/Form/People/RegisterPersonForm.tsx
+++ b/src/components/Form/People/RegisterPersonForm.tsx
@@ -8,7 +8,7 @@
import React, { useState } from "react";
import "./../Form.scss";
-import { Person, Address } from "./../../../interfaces"
+import { Person } from "./../../../interfaces"
import axios from "axios";
interface props {
diff --git a/src/components/Util/SearchBar.scss b/src/components/Util/SearchBar.scss
new file mode 100644
index 0000000..d08f1ac
--- /dev/null
+++ b/src/components/Util/SearchBar.scss
@@ -0,0 +1,28 @@
+@import "../../styles/theme";
+
+.searchBar input {
+ width: 12rem;
+}
+
+.searchResults {
+ margin-top: $fontSize1;
+ width: 12rem;
+ height: 10rem;
+ background-color: $background3;
+ overflow-x: hidden;
+ overflow-y: auto;
+ border: 1px solid $border2;
+}
+
+.searchResult {
+ color: $defFG;
+}
+
+.searchResults .dataItem {
+ width: 100%;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ color: black;
+}
+
diff --git a/src/components/Util/SearchBar.tsx b/src/components/Util/SearchBar.tsx
new file mode 100644
index 0000000..d26415b
--- /dev/null
+++ b/src/components/Util/SearchBar.tsx
@@ -0,0 +1,50 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+import React, { useState } from "react";
+import "./SearchBar.scss";
+
+const SearchBar: React.FC = () => {
+ const sampledata: string[] = ["one", "two", "three", "four", "five", "six"]
+
+ const [searchValue, setSearchValue] = useState<string>("");
+ const [searchSelection, setSearchSelection] = useState<string>("");
+
+ const setSelectionValue = (value: string) => {
+ setSearchValue("");
+ setSearchSelection(value);
+ console.log(searchSelection);
+ }
+
+ return (
+ <div className="searchBar">
+ <div className="searchBarInput">
+ <input
+ type="text"
+ value={searchValue}
+ onChange={
+ (event) => {
+ setSearchValue(event.target.value);
+ console.log(searchSelection);
+ }
+ }
+ />
+ </div>
+
+ <div className="searchResults">
+ {
+ searchValue === ""
+ || sampledata.map((i) => i.toLowerCase().includes(searchValue.toLowerCase())
+ && (<p key={i} className={"searchResult"} onClick={() => setSelectionValue(i)}>{i}</p>))
+ }
+ </div>
+ </div>
+ );
+}
+
+export default SearchBar;
--
cgit v1.2.3