added popup & code refactoring

Author: Vadim Rogov

src/App.js

@@ -1,11 +1,11 @@
 import React, { Component } from "react";
-import Shop from "./components/shop";
-import AboutUs from "./components/about-us";
-import ContactUs from "./components/contact-us";
-import TermsConditions from "./components/terms-conditions";
-import Checkout from "./components/checkout";
-import Cart from "./components/cart";
-import { MenuBar } from "./components/menu-bar";
+import Shop from "./components/Shop";
+import AboutUs from "./components/AboutUs";
+import ContactUs from "./components/ContactUs";
+import TermsConditions from "./components/TermsConditions";
+import Checkout from "./components/Checkout";
+import Cart from "./components/Cart";
+import { MenuBar } from "./components/MenuBar";
 import { data, manufacturers } from "./db/db";
 
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

src/components/about-us.js renamed to src/components/AboutUs.js

@@ -1,13 +1,13 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-export class CommonBtn extends Component {
+export class CommonLinkBtn extends Component {
  render() {
  const { linkTo, linkName } = this.props;
 
  return (
  <Link to={linkTo}>
- <button className="common-link-btn">{linkName}</button>
+ <button className="CommonLinkBtn">{linkName}</button>
  </Link>
  );
  }

src/components/common-link-btn.js renamed to src/components/CommonLinkBtn.js

@@ -0,0 +1,74 @@
+import React, { Component, Fragment } from "react";
+import Popup from "./Popup";
+
+class ContactUs extends Component {
+ state = {
+ email: "",
+ msg: "",
+ popupActive: false
+ };
+
+ changeEmailHandler = value =>
+ this.setState({
+ email: value
+ });
+
+ changeMessageHandler = value =>
+ this.setState({
+ msg: value
+ });
+
+ flushStateHandler = () =>
+ this.setState({
+ email: "",
+ msg: "",
+ popupActive: true
+ });
+
+ closePopupHandler = () => {
+ this.setState({
+ popupActive: false
+ });
+ };
+
+ render() {
+ return (
+ <Fragment>
+ {this.state.popupActive && (
+ <Popup
+ popupHeader={"Server say:"}
+ renderPopupContentHandler={() => <img class="img-responsive" src='https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LtZJGF3BnjoLSeYeXE_%2F-LuOTLcQnAaCxuZPlxc2%2F-LuOVsoiOc6D7i8HNglF%2F2300883_3.jpg?alt=media&token=0c6d76e7-f6d9-4c08-ab92-5d7032935575' alt='no'/>}
+ closePopupContentHandler={this.closePopupHandler}
+ />
+ )}
+ <div className="page-body">
+ <div className="page-element">
+ <h2>CONTACT US</h2>
+ E-mail:
+ <input
+ value={this.state.email}
+ className="filter-small"
+ onChange={e => this.changeEmailHandler(e.target.value)}
+ placeholder="Enter your email"
+ />
+ Message:
+ <textarea
+ value={this.state.msg}
+ className="input-field-large"
+ onChange={e => this.changeMessageHandler(e.target.value)}
+ placeholder="Enter your message..."
+ />
+ <button
+ className="common-btn"
+ onClick={() => this.flushStateHandler()}
+ >
+ Send
+ </button>
+ </div>
+ </div>
+ </Fragment>
+ );
+ }
+}
+
+export default ContactUs;

src/components/ContactUs.js

@@ -14,7 +14,7 @@ export class ItemCart extends Component {
  } = this.props;
 
  return (
- <div className="item-cart">
+ <div className="ItemCart">
  <div className="item-header">
  <img className="item-picture" src={item.picture} alt='not found'/>
  <div>

src/components/item-cart.js renamed to src/components/ItemCart.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { NavBtn } from "./header-btn";
+import { NavBtn } from "./NavBtn";
 export class MenuBar extends Component {
  render() {
  return (

src/components/item-shop.js renamed to src/components/ItemShop.js

@@ -0,0 +1,49 @@
+import React, { Component } from "react";
+
+class Popup extends Component {
+ constructor(props) {
+ super(props);
+ this.myRef = React.createRef();
+ }
+
+ componentDidMount() {
+ window.addEventListener("mousedown", this.onClickOutside);
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener("mousedown", this.onClickOutside);
+ }
+
+ onClickOutside = e => {
+ if (this.myRef && !this.myRef.current.contains(e.target)) {
+ this.props.closePopupContentHandler();
+ }
+ };
+ render() {
+ const {
+ popupHeader,
+ renderPopupContentHandler,
+ closePopupContentHandler
+ } = this.props;
+ return (
+ <div className="popup-element page-element" ref={this.myRef}>
+ <div className="popup-header">
+ <h2> {popupHeader.toUpperCase()} </h2>
+ </div>
+ <div className="popup-body">
+ <div>{renderPopupContentHandler()}</div>
+ </div>
+ <div className="popup-footer">
+ <button
+ className="common-btn"
+ onClick={() => closePopupContentHandler()}
+ >
+ Close
+ </button>
+ </div>
+ </div>
+ );
+ }
+}
+
+export default Popup;