add select

src/components/auth/auth.js

@@ -2,6 +2,7 @@ import React from "react";
 
 import { useForm } from "../hooks/useForm";
 import Input from "../input";
+import { CustomSelect } from "../select";
 import Button from "../button/button";
 import { logInForm } from "../../utils/formFields";
 
@@ -38,6 +39,9 @@ export const AuthForm = ({ error, submitHandler }) => {
 					);
 				})}
 				{error && <p className="auth__error-auth-text">{error}</p>}
+
+				<CustomSelect label="SELECT ME" />
+
 				<div className="auth__control-box">
 					<Button disabled={!form.validForm} className="auth__submit-btn" type="submit" text="Log In" />
 				</div>

src/components/select/index.js

@@ -0,0 +1,103 @@
+import React from "react";
+
+import "./style.scss";
+
+const mock = [{ id: 1, text: "ONE" }, { id: 2, text: "TWO" }, { id: 3, text: "THREE" }];
+
+export const CustomSelect = ({ label, options = mock, emptyLine = false, searchInput = true, reset }) => {
+	const [copyOption, setCopyOption] = React.useState([]);
+	const [show, toggleShow] = React.useState(false);
+	const [value, toggleValue] = React.useState("");
+	const [inputValue, toggleInputValue] = React.useState("");
+	const list = React.createRef();
+
+	React.useEffect(() => {
+		document.addEventListener("mousedown", handleClickOutSide);
+		return () => document.removeEventListener("mousedown", handleClickOutSide);
+	});
+
+	React.useEffect(() => {
+		if (reset) {
+			toggleValue("");
+			toggleInputValue("");
+			setCopyOption(options);
+
+			toggleShow(false);
+		}
+	}, [options, reset]);
+
+	React.useEffect(() => {
+		setCopyOption(options);
+	}, [options]);
+
+	const handleClickOutSide = e => {
+		if (!show) return;
+
+		if (list.current && !list.current.contains(e.target)) {
+			toggleShow(false);
+		}
+	};
+
+	const toggleEvent = text => {
+		toggleValue(text);
+		toggleInputValue(text);
+		toggleShow(false);
+	};
+
+	const clickOnEptyLine = () => {
+		toggleValue("");
+		toggleInputValue("");
+
+		toggleShow(false);
+	};
+
+	const chahgeValueEvent = e => {
+		const { value } = e.target;
+		toggleInputValue(e.target.value);
+
+		if (!value) {
+			setCopyOption(options);
+			toggleInputValue(value);
+		} else {
+			const filtered = copyOption.filter(el => el.text.toLowerCase().indexOf(value.toLowerCase()) >= 0);
+
+			setCopyOption(filtered);
+			toggleInputValue(value);
+		}
+	};
+
+	return (
+		<div className="select">
+			{label && (
+				<label htmlFor="select" className="select__lable">
+					{label}
+				</label>
+			)}
+			<div className="select__value-box" onClick={() => toggleShow(true)}>
+				{searchInput ? null : <span>{value} &nbsp;</span>}
+				<input
+					value={inputValue}
+					autoComplete="off"
+					type={searchInput ? "text" : "hidden"}
+					onChange={chahgeValueEvent}
+					id="select"
+					className="select__input"
+				/>
+			</div>
+			{show && (
+				<ul className="select__list" ref={list}>
+					{emptyLine && (
+						<li className="select__item" onClick={clickOnEptyLine}>
+							&nbsp;
+						</li>
+					)}
+					{copyOption.map(el => (
+						<li className="select__item" key={el.id} onClick={toggleEvent.bind(null, el.text)}>
+							{el.text}
+						</li>
+					))}
+				</ul>
+			)}
+		</div>
+	);
+};

src/components/select/style.scss

@@ -0,0 +1,42 @@
+.select {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+
+	&__list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		width: 100%;
+		background-color: #fff;
+
+		position: absolute;
+		left: 0;
+		top: 100%;
+		z-index: 10;
+	}
+
+	&__value-box {
+		border: 1px solid #eee;
+		border-radius: 3px;
+		padding: 0.5rem;
+	}
+
+	&__item {
+		display: flex;
+		padding: 0.5rem;
+		cursor: pointer;
+		&:hover {
+			background-color: #eee;
+		}
+	}
+
+	&__input {
+		border: none;
+		width: 100%;
+		&:focus {
+			outline: none;
+		}
+	}
+}

src/router.js

@@ -54,7 +54,10 @@ export const App = withRouter(({ history }) => {
 		const token = localStorage.getItem("token");
 		if (token) {
 			const exp = checkJWT(token);
-			if (!exp) history.push("/auth");
+			if (!exp) {
+				history.push("/auth");
+				localStorage.removeItem("token");
+			}
 		}
 	}, [history]);