Added Search bar

inventory-manager/src/components/EncoraContent.tsx

@@ -1,20 +1,30 @@
 import React from 'react';
-import {Layout} from 'antd';
+import {Col, Layout} from 'antd';
 import NewProductButton from "./segment2-new_product/NewProductButton";
 import InventoryTableObj from "./segment3-table/segment/InventoryTableObj";
 import {SearchProvider} from "../context/SearchContext";
 import InventoryMetricsTable from "./segment4-metrics/InventoryMetricsTable";
 import {DataProvider} from "../context/DataContext";
+import SearchByComponent from "./segment1-search_product/SearchByBar";
 
 const HomePageContent: React.FC = () => {
-
     return (
         <SearchProvider>
             <DataProvider>
                 <Layout>
                     <div style={{padding: '24px', backgroundColor: '#f5f5f5', minHeight: '100vh'}}>
-                        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
-                            <NewProductButton/>
+                        <div style={{
+                            display: 'flex',
+                            justifyContent: "space-evenly",
+                            alignItems: "center",
+                            marginBottom: 16
+                        }}>
+                            <Col>
+                                <SearchByComponent/>
+                            </Col>
+                            <Col>
+                                <NewProductButton/>
+                            </Col>
                         </div>
                         <div style={{marginBottom: 16}}>
                             <InventoryTableObj/>

inventory-manager/src/components/segment1-search_product/SearchByBar.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Form } from 'antd';
+import InputSearch from "./input-bars/InputSearch";
+import CascaderSearch from "./input-bars/CascaderSearch";
+
+const FiltersForm: React.FC = () => {
+    return (
+        <Form layout="inline" colon={false} style={{ marginBottom: 16 }}>
+            <Form.Item label="Search by name">
+                <InputSearch parameter="name" />
+            </Form.Item>
+
+            <Form.Item label="Search by category">
+                <InputSearch parameter="category" />
+            </Form.Item>
+
+            <Form.Item label="Search by availability">
+                <CascaderSearch />
+            </Form.Item>
+        </Form>
+    );
+};
+
+export default FiltersForm;

inventory-manager/src/components/segment1-search_product/input-bars/CascaderSearch.tsx

@@ -0,0 +1,36 @@
+import { Cascader } from 'antd';
+import React from 'react';
+import { useSearchContext } from '../../../context/SearchContext';
+
+const STOCK_OPTIONS = [
+    { label: 'Everything', value: '0' },
+    { label: 'Stock', value: '1' },
+    { label: 'No stock', value: '2' },
+];
+
+const CascaderSearch: React.FC = () => {
+    const { stockQuantity, setParams } = useSearchContext();
+
+    const value = stockQuantity !== undefined ? [String(stockQuantity)] : undefined;
+
+    const onChange = (val?: string[]) => {
+        if (!val || val.length === 0) {
+            setParams({ stockQuantity: undefined });
+        } else {
+            setParams({ stockQuantity: Number(val[0]) });
+        }
+    };
+
+    return (
+        <Cascader
+            options={STOCK_OPTIONS}
+            value={value}
+            onChange={onChange}
+            allowClear
+            placeholder="Stock"
+            changeOnSelect={false}
+            style={{ flex: '1 1 220px', minWidth: 220, maxWidth: 420 }}        />
+    );
+};
+
+export default CascaderSearch;

inventory-manager/src/components/segment1-search_product/input-bars/InputSearch.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import {Input} from "antd";
+import {useSearchContext} from "../../../context/SearchContext";
+import {Product} from "../../../types/Product";
+
+interface Props {
+    parameter: keyof Product;
+}
+
+const InputSearch: React.FC<Props> = ({parameter}) => {
+
+    const {setParams} = useSearchContext();
+
+    function onChange(e: React.ChangeEvent<HTMLInputElement>) {
+        const next = e.target.value;
+        if (!e.target.value) {
+            if (parameter === 'name') setParams({name: null});
+            if (parameter === 'category') setParams({category: null});
+        } else {
+            if (parameter === 'name') setParams({name: next});
+            if (parameter === 'category') setParams({category: next});
+        }
+    }
+
+    const getPlaceholder = (): string => {
+        if (parameter === 'name') return 'Watermelon';
+        if (parameter === 'category') return 'Food';
+        return '';
+    };
+
+    return (
+        <Input
+            placeholder={getPlaceholder()}
+            onChange={onChange}
+        />
+    );
+}
+
+export default InputSearch;

inventory-manager/src/components/segment2-new_product/NewProductButton.tsx

@@ -11,7 +11,14 @@ const NewProductButton = () => {
     }
 
     return (
-        <div className="App">
+        <div className="App"
+             style={{
+                 display: 'flex',
+                 justifyContent: 'space-between',
+                 alignItems: 'center',   // <- vertical alignment
+                 marginBottom: 16,
+             }}
+        >
             <Button type="primary" onClick={showModal}>Add new product</Button>
             <Modal
                 title="Add new product to inventory"

inventory-manager/src/context/SearchContext.tsx

@@ -1,8 +1,8 @@
 import React, {createContext, useContext, useState} from 'react';
 
 type FilterParams = {
-    name: string | undefined;
-    category: string | undefined;
+    name: string | undefined | null;
+    category: string | undefined | null;
     stockQuantity: number | undefined;
     page: number | undefined;
     sort: string[] | undefined;
@@ -24,11 +24,11 @@ const SearchContext = createContext<FilterParams>(defaultValues);
 export const useSearchContext = () => useContext(SearchContext);
 
 export const SearchProvider: React.FC<{ children: React.ReactNode }> = ({children}) => {
-    const [name, setName] = useState('');
+    const [name, setName] = useState<string|null>('');
     const [stockQuantity, setStockQuantity] = useState(0);
     const [page, setPage] = useState(0);
     const [sort, setSort] = useState(['']);
-    const [category, setCategory] = useState('');
+    const [category, setCategory] = useState<string|null>('');
 
     const setParams = (params: Partial<FilterParams>) => {
         if (params.name !== undefined && params.name !== '') setName(params.name);