From e506070f2d04850a155d57a4758b03e5426c7b61 Mon Sep 17 00:00:00 2001
From: ritikjaiswal75 <ritik12103032000@gmail.com>
Date: Thu, 11 May 2023 09:53:52 +0530
Subject: [PATCH 1/6] add dashboard page

---
 .../Dashboard/Dashboard.module.scss           | 42 ++++++++++++++++
 src/components/Dashboard/DashboardLayout.tsx  | 14 ++++++
 src/components/Dashboard/Searchbar.tsx        | 48 +++++++++++++++++++
 src/pages/dashboard/index.tsx                 | 17 +++++++
 4 files changed, 121 insertions(+)
 create mode 100644 src/components/Dashboard/Dashboard.module.scss
 create mode 100644 src/components/Dashboard/DashboardLayout.tsx
 create mode 100644 src/components/Dashboard/Searchbar.tsx
 create mode 100644 src/pages/dashboard/index.tsx

diff --git a/src/components/Dashboard/Dashboard.module.scss b/src/components/Dashboard/Dashboard.module.scss
new file mode 100644
index 000000000..9a2adedb5
--- /dev/null
+++ b/src/components/Dashboard/Dashboard.module.scss
@@ -0,0 +1,42 @@
+$base-unit: 4px;
+$base-font-size: 0.3rem;
+$color-blue: #041187;
+$color-red: #e30062;
+$color-green: #85da6b;
+$color-disabled: #e5e7eb;
+$color-white: #fff;
+$color-black: #000;
+$diff-margin: $base-unit * 15;
+$similar-margin: $base-unit * 8;
+$section-padding-top-bottom: $base-unit * 30;
+$section-padding-left-right: $base-unit * 25;
+
+.container {
+    margin: $diff-margin auto;
+}
+
+.searchLabel {
+    font-size: $base-font-size * 5;
+    padding-left: $section-padding-left-right;
+    padding-right: $base-unit * 8;
+    color: $color-blue;
+}
+
+.searchBar {
+    background-color: $color-disabled;
+    border-radius: $base-unit * 2;
+    border: none;
+    width: 70%;
+    height: $base-unit * 15;
+    font-size: $base-font-size * 5;
+}
+
+.searchBtn {
+    margin-left: $base-unit * 8;
+    background-color: $color-blue;
+    color: $color-white;
+    height: $base-unit * 15;
+    border-radius: $base-unit * 2;
+    border: none;
+    width: $base-unit * 40;
+}
diff --git a/src/components/Dashboard/DashboardLayout.tsx b/src/components/Dashboard/DashboardLayout.tsx
new file mode 100644
index 000000000..7431af87f
--- /dev/null
+++ b/src/components/Dashboard/DashboardLayout.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import NavBar from '../navBar';
+import Searchbar from './Searchbar';
+
+function DashboardLayout() {
+    return (
+        <>
+            <NavBar />
+            <Searchbar label={'users'} />
+        </>
+    );
+}
+
+export default DashboardLayout;
diff --git a/src/components/Dashboard/Searchbar.tsx b/src/components/Dashboard/Searchbar.tsx
new file mode 100644
index 000000000..17ed29a8b
--- /dev/null
+++ b/src/components/Dashboard/Searchbar.tsx
@@ -0,0 +1,48 @@
+import React, { KeyboardEvent, useState } from 'react';
+import styles from '@/components/Dashboard/Dashboard.module.scss';
+
+interface searchProps {
+    label: string;
+}
+
+const search = (query: string) => {
+    const searchValues = query.split(',');
+    console.log('Searching', searchValues);
+};
+
+function Searchbar({ label }: searchProps) {
+    const [query, setQuery] = useState('');
+
+    const handleKeyPress = (event: KeyboardEvent) => {
+        if (event.key == 'Enter') {
+            search(query);
+        }
+    };
+
+    return (
+        <section className={styles.container}>
+            <label htmlFor="search" className={styles.searchLabel}>
+                {label}
+            </label>
+            <input
+                type="text"
+                id="search"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={(e) => handleKeyPress(e)}
+                className={styles.searchBar}
+            />
+            <button
+                type="submit"
+                onClick={() => {
+                    search(query);
+                }}
+                className={styles.searchBtn}
+            >
+                Search
+            </button>
+        </section>
+    );
+}
+
+export default Searchbar;
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
new file mode 100644
index 000000000..e519c6528
--- /dev/null
+++ b/src/pages/dashboard/index.tsx
@@ -0,0 +1,17 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+import PageNotFound from '../404';
+import DashboardLayout from '@/components/Dashboard/DashboardLayout';
+
+const DashboardPage = () => {
+    const router = useRouter();
+
+    const { dev } = router.query;
+
+    if (dev !== 'true') {
+        return <PageNotFound />;
+    }
+    return <DashboardLayout />;
+};
+
+export default DashboardPage;

From f737be2ce6845fecea09188ca43fd6f68e354931 Mon Sep 17 00:00:00 2001
From: ritikjaiswal75 <ritik12103032000@gmail.com>
Date: Thu, 11 May 2023 09:58:08 +0530
Subject: [PATCH 2/6] fix styling

---
 src/components/Dashboard/Dashboard.module.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Dashboard/Dashboard.module.scss b/src/components/Dashboard/Dashboard.module.scss
index 9a2adedb5..504b314dc 100644
--- a/src/components/Dashboard/Dashboard.module.scss
+++ b/src/components/Dashboard/Dashboard.module.scss
@@ -13,11 +13,11 @@ $section-padding-left-right: $base-unit * 25;
 
 .container {
     margin: $diff-margin auto;
+    width: 85%;
 }
 
 .searchLabel {
     font-size: $base-font-size * 5;
-    padding-left: $section-padding-left-right;
     padding-right: $base-unit * 8;
     color: $color-blue;
 }
@@ -26,7 +26,7 @@ $section-padding-left-right: $base-unit * 25;
     background-color: $color-disabled;
     border-radius: $base-unit * 2;
     border: none;
-    width: 70%;
+    width: 80%;
     height: $base-unit * 15;
     font-size: $base-font-size * 5;
 }

From 9fbd97357ea5d86708fcd6d86f7c9fc8841d1465 Mon Sep 17 00:00:00 2001
From: ritikjaiswal75 <ritik12103032000@gmail.com>
Date: Thu, 11 May 2023 13:30:20 +0530
Subject: [PATCH 3/6] remove the DashboardLayout component

---
 src/components/Dashboard/DashboardLayout.tsx | 14 --------------
 src/pages/dashboard/index.tsx                | 10 ++++++++--
 2 files changed, 8 insertions(+), 16 deletions(-)
 delete mode 100644 src/components/Dashboard/DashboardLayout.tsx

diff --git a/src/components/Dashboard/DashboardLayout.tsx b/src/components/Dashboard/DashboardLayout.tsx
deleted file mode 100644
index 7431af87f..000000000
--- a/src/components/Dashboard/DashboardLayout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import NavBar from '../navBar';
-import Searchbar from './Searchbar';
-
-function DashboardLayout() {
-    return (
-        <>
-            <NavBar />
-            <Searchbar label={'users'} />
-        </>
-    );
-}
-
-export default DashboardLayout;
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index e519c6528..a9249f803 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -1,7 +1,8 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 import PageNotFound from '../404';
-import DashboardLayout from '@/components/Dashboard/DashboardLayout';
+import NavBar from '@/components/navBar';
+import Searchbar from '@/components/Dashboard/Searchbar';
 
 const DashboardPage = () => {
     const router = useRouter();
@@ -11,7 +12,12 @@ const DashboardPage = () => {
     if (dev !== 'true') {
         return <PageNotFound />;
     }
-    return <DashboardLayout />;
+    return (
+        <>
+            <NavBar />
+            <Searchbar label="Users" />
+        </>
+    );
 };
 
 export default DashboardPage;

From 70e54c3723e0e4fb1ff4a237db956d4db3f6e927 Mon Sep 17 00:00:00 2001
From: ritikjaiswal75 <ritik12103032000@gmail.com>
Date: Thu, 11 May 2023 18:04:58 +0530
Subject: [PATCH 4/6] add types and modify component for better testing

---
 src/components/Dashboard/Searchbar.tsx | 15 +++------------
 src/pages/dashboard/index.tsx          |  7 ++++++-
 src/types/Searchbar.d.ts               |  4 ++++
 3 files changed, 13 insertions(+), 13 deletions(-)
 create mode 100644 src/types/Searchbar.d.ts

diff --git a/src/components/Dashboard/Searchbar.tsx b/src/components/Dashboard/Searchbar.tsx
index 17ed29a8b..f51621a70 100644
--- a/src/components/Dashboard/Searchbar.tsx
+++ b/src/components/Dashboard/Searchbar.tsx
@@ -1,21 +1,12 @@
 import React, { KeyboardEvent, useState } from 'react';
 import styles from '@/components/Dashboard/Dashboard.module.scss';
 
-interface searchProps {
-    label: string;
-}
-
-const search = (query: string) => {
-    const searchValues = query.split(',');
-    console.log('Searching', searchValues);
-};
-
-function Searchbar({ label }: searchProps) {
+function Searchbar({ label, handleSearch }: searchProps) {
     const [query, setQuery] = useState('');
 
     const handleKeyPress = (event: KeyboardEvent) => {
         if (event.key == 'Enter') {
-            search(query);
+            handleSearch(query);
         }
     };
 
@@ -35,7 +26,7 @@ function Searchbar({ label }: searchProps) {
             <button
                 type="submit"
                 onClick={() => {
-                    search(query);
+                    handleSearch(query);
                 }}
                 className={styles.searchBtn}
             >
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index a9249f803..c9730972c 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -4,6 +4,11 @@ import PageNotFound from '../404';
 import NavBar from '@/components/navBar';
 import Searchbar from '@/components/Dashboard/Searchbar';
 
+const search = (query: string) => {
+    const searchValues = query.split(',');
+    console.log('Searching', searchValues);
+};
+
 const DashboardPage = () => {
     const router = useRouter();
 
@@ -15,7 +20,7 @@ const DashboardPage = () => {
     return (
         <>
             <NavBar />
-            <Searchbar label="Users" />
+            <Searchbar label="Users" handleSearch={search} />
         </>
     );
 };
diff --git a/src/types/Searchbar.d.ts b/src/types/Searchbar.d.ts
new file mode 100644
index 000000000..2640ddfac
--- /dev/null
+++ b/src/types/Searchbar.d.ts
@@ -0,0 +1,4 @@
+interface searchProps {
+    label: string;
+    handleSearch: (query: string) => void;
+}

From 090688b741dab86f1b847d8874cb6678044ebb1a Mon Sep 17 00:00:00 2001
From: ritikjaiswal75 <ritik12103032000@gmail.com>
Date: Fri, 12 May 2023 09:47:57 +0530
Subject: [PATCH 5/6] use strict equals for enter key press

---
 src/components/Dashboard/Searchbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Dashboard/Searchbar.tsx b/src/components/Dashboard/Searchbar.tsx
index f51621a70..edb1bd702 100644
--- a/src/components/Dashboard/Searchbar.tsx
+++ b/src/components/Dashboard/Searchbar.tsx
@@ -5,7 +5,7 @@ function Searchbar({ label, handleSearch }: searchProps) {
     const [query, setQuery] = useState('');
 
     const handleKeyPress = (event: KeyboardEvent) => {
-        if (event.key == 'Enter') {
+        if (event.key === 'Enter') {
             handleSearch(query);
         }
     };

From d5ba59be581bbe5718aa6b6f2330d3b6eace21c7 Mon Sep 17 00:00:00 2001
From: ritikjaiswal75 <ritik12103032000@gmail.com>
Date: Mon, 22 May 2023 12:44:55 +0530
Subject: [PATCH 6/6] remove handler passed as props and make a utility

---
 src/components/Dashboard/Searchbar.tsx | 7 ++++---
 src/pages/dashboard/index.tsx          | 2 +-
 src/types/Searchbar.d.ts               | 1 -
 src/utils/splitNSearch.ts              | 4 ++++
 4 files changed, 9 insertions(+), 5 deletions(-)
 create mode 100644 src/utils/splitNSearch.ts

diff --git a/src/components/Dashboard/Searchbar.tsx b/src/components/Dashboard/Searchbar.tsx
index edb1bd702..94114a758 100644
--- a/src/components/Dashboard/Searchbar.tsx
+++ b/src/components/Dashboard/Searchbar.tsx
@@ -1,12 +1,13 @@
 import React, { KeyboardEvent, useState } from 'react';
 import styles from '@/components/Dashboard/Dashboard.module.scss';
+import { splitNSearch } from '@/utils/splitNSearch';
 
-function Searchbar({ label, handleSearch }: searchProps) {
+function Searchbar({ label }: searchProps) {
     const [query, setQuery] = useState('');
 
     const handleKeyPress = (event: KeyboardEvent) => {
         if (event.key === 'Enter') {
-            handleSearch(query);
+            splitNSearch(query);
         }
     };
 
@@ -26,7 +27,7 @@ function Searchbar({ label, handleSearch }: searchProps) {
             <button
                 type="submit"
                 onClick={() => {
-                    handleSearch(query);
+                    splitNSearch(query);
                 }}
                 className={styles.searchBtn}
             >
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index c9730972c..b7df43bed 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -20,7 +20,7 @@ const DashboardPage = () => {
     return (
         <>
             <NavBar />
-            <Searchbar label="Users" handleSearch={search} />
+            <Searchbar label="Users" />
         </>
     );
 };
diff --git a/src/types/Searchbar.d.ts b/src/types/Searchbar.d.ts
index 2640ddfac..de3a2e21d 100644
--- a/src/types/Searchbar.d.ts
+++ b/src/types/Searchbar.d.ts
@@ -1,4 +1,3 @@
 interface searchProps {
     label: string;
-    handleSearch: (query: string) => void;
 }
diff --git a/src/utils/splitNSearch.ts b/src/utils/splitNSearch.ts
new file mode 100644
index 000000000..e6154aa50
--- /dev/null
+++ b/src/utils/splitNSearch.ts
@@ -0,0 +1,4 @@
+export const splitNSearch = (query: string) => {
+    const searchValues = query.split(',');
+    console.log('Searching', searchValues);
+};