dropdown
This commit is contained in:
wrzesinski-hubert
parent
fcaca8020a
commit
c80d1b624d
102
package-lock.json
generated
102
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
21
src/components/TopBar/Results/index.scss
Normal file
21
src/components/TopBar/Results/index.scss
Normal file
@ -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%;
|
||||
}
|
||||
64
src/components/TopBar/Results/index.tsx
Normal file
64
src/components/TopBar/Results/index.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -24,12 +24,12 @@
|
||||
&-div {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 3;
|
||||
}
|
||||
|
||||
&-field {
|
||||
width: 96%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
|
||||
@ -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
|
||||
placeholder="Wyszukaj..."
|
||||
inputProps={{ "aria-label": "description" }}
|
||||
className="top-bar__input-field"
|
||||
onChange={(e) => this.handleChange(e)}
|
||||
/>
|
||||
<div className="top-bar__input-field"><Results/></div>
|
||||
<img
|
||||
className="top-bar__input-icon"
|
||||
alt="close"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user