dropdown

package-lock.json

@@ -1417,6 +1417,30 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.56",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz",
+      "integrity": "sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.10.2",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      },
+      "dependencies": {
+        "@material-ui/utils": {
+          "version": "4.10.2",
+          "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz",
+          "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==",
+          "requires": {
+            "@babel/runtime": "^7.4.4",
+            "prop-types": "^15.7.2",
+            "react-is": "^16.8.0"
+          }
+        }
+      }
+    },
     "@material-ui/pickers": {
       "version": "3.2.10",
       "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.2.10.tgz",
@@ -1834,6 +1858,11 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
       "integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA=="
     },
+    "@types/lru-cache": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@types/lru-cache/-/lru-cache-4.1.2.tgz",
+      "integrity": "sha512-ve2IoUJClE+4S/sG2zoLGEHP6DCvqgyz7UkHZdiICdQaAYRaCXsRWfJlbL8B0KvUyo9lgzD+oR0YSy4YikFyFQ=="
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2657,6 +2686,63 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz",
       "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA=="
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
+    "axios-extensions": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/axios-extensions/-/axios-extensions-3.1.3.tgz",
+      "integrity": "sha512-/OB9OcJLNOIx9pdW4m4/hFRvNo12wlX5BaprIzqpMaLR02I88Mr98/wW4QN9rhx0/yg9rM7i6Af/RpV4MyxXjA==",
+      "requires": {
+        "@types/lru-cache": "^4.1.1",
+        "lru-cache": "^5.1.1",
+        "tslib": "^1.9.0",
+        "util": "^0.11.1"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        },
+        "util": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
+          "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.2.tgz",
@@ -6830,9 +6916,9 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
     },
     "immer": {
-      "version": "1.10.0",
+      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.5.tgz",
-      "integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg=="
+      "integrity": "sha512-TtRAKZyuqld2eYjvWgXISLJ0ZlOl1OOTzRmrmiY8SlB0dnAhZ1OiykIDL5KDFNaPHDXiLfGQFNJGtet8z8AEmg=="
     },
     "import-cwd": {
       "version": "2.1.0",
@@ -11238,6 +11324,11 @@
             }
           }
         },
+        "immer": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
+          "integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg=="
+        },
         "inquirer": {
           "version": "7.0.4",
           "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.4.tgz",
@@ -13734,6 +13825,11 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-immer": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/use-immer/-/use-immer-0.4.0.tgz",
+      "integrity": "sha512-mxx4jbRRc1/56geSc3VHx8gg3FvlzUpQPfVNJXtU1NRK/iTdK0pV3k3YPi7iFUcCM8YJ6/0dUBENyuk3WO/gxw=="
+    },
     "util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",

package.json

@@ -12,6 +12,7 @@
     "@devexpress/dx-react-scheduler-material-ui": "^2.6.3",
     "@material-ui/core": "^4.10.0",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -19,6 +20,9 @@
     "@types/node": "^12.12.42",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
+    "axios": "^0.19.2",
+    "axios-extensions": "^3.1.3",
+    "immer": "^7.0.5",
     "install": "^0.13.0",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
@@ -26,7 +30,8 @@
     "react-scripts": "3.4.1",
     "sass": "^1.26.5",
     "to": "^0.2.9",
-    "typescript": "^3.9.3"
+    "typescript": "^3.9.3",
+    "use-immer": "^0.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.tsx

@@ -12,16 +12,13 @@ import { BuisnessProvided } from "./businesslogic/BusinessLogicProvider";
 
 function App() {
 	const [isOpenTransfer, setOpenTransfer] = useState(false);
-	const [text, setText] = useState("");
+
 
 	return (
 		<div className="App">
 			<BusinessLogicContext.Consumer>
 				{(context) => (
 					<TopBar
-						textChangeHandler={(e) => {
-							setText(e.target.value);
-						}}
 						handleTransfer={(e) => {
 							setOpenTransfer(!isOpenTransfer);
 						}}
@@ -54,8 +51,6 @@ function App() {
 					/>
 				</div>
 			</div>
-
-			<h1>{text}</h1>
 		</div>
 	);
 }

src/components/TopBar/Results/index.scss

@@ -0,0 +1,21 @@
+.lecture {
+  position: relative;
+  z-index: 10;
+  padding: 5px;
+  background-color: #e6c759;
+  font-size: 18px;
+}
+.lecture:hover{
+  background-color: #d4b851;
+  cursor: pointer;
+}
+.dropdown::-webkit-scrollbar {
+  display: none;
+}
+.dropdown {
+  max-height: 400px;
+  overflow-y: auto;
+}
+.top-bar__input-field {
+  width: 100%;
+}

src/components/TopBar/Results/index.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import axios from "axios";
+import { Input } from "@material-ui/core";
+import "./index.scss";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+
+interface data {
+  id: number;
+  name: string;
+  sym: string;
+}
+
+export const Results: React.FC = () => {
+  const [input, setInput] = useState<string>("");
+  const [data, setData] = useState<Array<data>>([]);
+  const [open, setOpen] = React.useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInput(event.target.value);
+    //query should be updated on backend to not accept empty string
+    if (event.target.value !== "") {
+      console.log(event.target.value);
+      search(event.target.value);
+    } else {
+      search("xxxxxxxxxxxxxxx");
+    }
+  };
+  const search = (text: string) => {
+    axios
+      .get(`http://localhost:1287/getCourses?name=${text}`)
+      .then((response) => setData(response.data));
+  };
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleClickAway = () => {
+    setOpen(false);
+  };
+
+  return (
+    <ClickAwayListener onClickAway={handleClickAway}>
+      <div>
+        <Input
+          placeholder="Wyszukaj..."
+          inputProps={{ "aria-label": "description" }}
+          className="top-bar__input-field"
+          onChange={handleChange}
+          onClick={handleClick}
+        />
+        {open ? (
+          <div className="dropdown">
+            {data.map((lecture, index) => (
+              <div className="lecture" key={index}>
+                <p>{lecture.name}</p>
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </ClickAwayListener>
+  );
+};

src/components/TopBar/index.scss

@@ -24,12 +24,12 @@
     &-div {
       width: 70%;
       display: flex;
-      align-items: center;
       flex-grow: 3;
     }
 
     &-field {
       width: 96%;
+      margin-top: 10px;
     }
 
     &-icon {

src/components/TopBar/index.tsx

@@ -1,6 +1,5 @@
-import React, { ChangeEvent } from "react";
+import React from "react";
 import "./index.scss";
-import Input from "@material-ui/core/Input";
 import Transfer from "./transfer.png";
 import Search from "./search.svg";
 import UK from "./UK.png";
@@ -8,14 +7,12 @@ import PL from "./PL.png";
 import User from "./user.png";
 import CloseIcon from "./close.svg";
 import { Profile } from "./Profile";
+import {Results} from "./Results";
 
 interface TopBarProps {
 	handleTransfer: (e: React.MouseEvent) => void;
 	onLangChange: (lang: boolean) => void;
 	handleLogout: () => void;
-	textChangeHandler: (
-		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-	) => void;
 }
 
 interface TopBarState {
@@ -36,10 +33,6 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
 		};
 	}
 
-	handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-		this.props.textChangeHandler(e);
-	}
-
 	handleTransfer(e: React.MouseEvent) {
 		this.props.handleTransfer(e);
 	}
@@ -80,12 +73,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
 						alt="search"
 						src={Search}
 					/>
-					<Input
+					<div className="top-bar__input-field"><Results/></div>
-						placeholder="Wyszukaj..."
-						inputProps={{ "aria-label": "description" }}
-						className="top-bar__input-field"
-						onChange={(e) => this.handleChange(e)}
-					/>
 					<img
 						className="top-bar__input-icon"
 						alt="close"