From c80d1b624d6ed81d0bf31e473c4948167f4e3afd Mon Sep 17 00:00:00 2001 From: wrzesinski-hubert Date: Tue, 30 Jun 2020 19:22:32 +0200 Subject: [PATCH] dropdown --- package-lock.json | 102 ++++++++++++++++++++++- package.json | 7 +- src/App.tsx | 7 +- src/components/TopBar/Results/index.scss | 21 +++++ src/components/TopBar/Results/index.tsx | 64 ++++++++++++++ src/components/TopBar/index.scss | 2 +- src/components/TopBar/index.tsx | 18 +--- 7 files changed, 195 insertions(+), 26 deletions(-) create mode 100644 src/components/TopBar/Results/index.scss create mode 100644 src/components/TopBar/Results/index.tsx diff --git a/package-lock.json b/package-lock.json index 8ff59d4..aa67c95 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz", - "integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==" + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.5.tgz", + "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", diff --git a/package.json b/package.json index db22b16..ccb0384 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 5897bee..0582597 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,16 +12,13 @@ import { BuisnessProvided } from "./businesslogic/BusinessLogicProvider"; function App() { const [isOpenTransfer, setOpenTransfer] = useState(false); - const [text, setText] = useState(""); + return (
{(context) => ( { - setText(e.target.value); - }} handleTransfer={(e) => { setOpenTransfer(!isOpenTransfer); }} @@ -54,8 +51,6 @@ function App() { />
- -

{text}

); } diff --git a/src/components/TopBar/Results/index.scss b/src/components/TopBar/Results/index.scss new file mode 100644 index 0000000..4b250b9 --- /dev/null +++ b/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%; +} diff --git a/src/components/TopBar/Results/index.tsx b/src/components/TopBar/Results/index.tsx new file mode 100644 index 0000000..dc63207 --- /dev/null +++ b/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(""); + const [data, setData] = useState>([]); + const [open, setOpen] = React.useState(false); + + const handleChange = (event: React.ChangeEvent) => { + 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 ( + +
+ + {open ? ( +
+ {data.map((lecture, index) => ( +
+

{lecture.name}

+
+ ))} +
+ ) : null} +
+ + ); +}; diff --git a/src/components/TopBar/index.scss b/src/components/TopBar/index.scss index e0ae02a..e31438e 100644 --- a/src/components/TopBar/index.scss +++ b/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 { diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx index c0455ce..d00f7a6 100644 --- a/src/components/TopBar/index.tsx +++ b/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 - ) => void; } interface TopBarState { @@ -36,10 +33,6 @@ export default class TopBar extends React.Component { }; } - handleChange(e: React.ChangeEvent) { - this.props.textChangeHandler(e); - } - handleTransfer(e: React.MouseEvent) { this.props.handleTransfer(e); } @@ -80,12 +73,7 @@ export default class TopBar extends React.Component { alt="search" src={Search} /> - this.handleChange(e)} - /> +