Gfrktyl

I have put together a piece of what can be a much larger frontend in Reactjs.

I just put together the component that renders to the user a list of airports and hotels as well as a header component.

I feel confident about the JavaScript implementation, but what I would like some feedback is on my use of SCSS. I installed node-sass and this is how I implemented it.

LocationList.js:

renderLocation() {

    const filteredLocations = this.props.locations.filter(location => {

      return !location.name.match(/[A-Z0-9]+$/);

    });



    return filteredLocations.map(location => {

      if (location.airport_code) {

        return (

          <div key={location.id}>

            <div className="location">

              <h1>

                {location.name} ({location.airport_code})

              </h1>

              <div className="location-secondary-info">

                <span>

                  <i className="material-icons">airplanemode_active</i>

                  {location.description}

                </span>

              </div>

            </div>

          </div>

        );

      } else {

        return (

          <div key={location.id}>

            <div className="location">

              <h1>{location.name}</h1>

              <div className="location-secondary-info">

                <span>

                  <i className="material-icons">location_city</i>

                  {location.description}

                </span>

              </div>

            </div>

          </div>

        );

      }

    });

  }



  render() {

    return <div className="locations-container">{this.renderLocation()}</div>;

  }

}

Header.js:

const Header = () => {

  return (

    <header className="App-header">

      <div>

        <div>

          <section>

            <i className="material-icons">menu</i>

            <Link to="/" className="anchor">

              Silvercar

            </Link>

          </section>

          <div className="account">

            <section>

              <aside className="account">

                <Link to="/" className="pill anchor">

                  Sign Up | Login

                </Link>

                <Link to="/" className="help">

                  Help

                </Link>

              </aside>

            </section>

          </div>

        </div>

      </div>

    </header>

  );

};

App.scss:

@import "../variables.scss";



body {

  font-size: 14px;

}



.anchor {

  color: $link-color;

  text-decoration: none;

  font-weight: 500;

  font-size: 0.85em;

  text-transform: uppercase;

}



.App {

  display: flex;

  height: 100vh;

}



.App-header {

  border-bottom: 1px solid #eee;

}



.App-header div {

  max-width: 1200px;

}



.App-header div div {

  padding: 16px 8px;

}



.App-header div div section {

  flex: 1 1;

  display: flex;

  align-items: center;

}



section i {

  padding-right: 5px;

}



.App-header div div section .anchor {

  flex: 1 1;

}



.App-header div .account,

.App-header div div {

  display: flex;

  align-items: center;

}



.help {

  font-size: 1em;

  text-decoration: none;

  color: #6a6767;

  font-weight: 400;

  margin: 0 1em;

  white-space: nowrap;

}



.locations-container {

  display: flex;

  height: 200px;

  overflow-y: scroll;

  flex-wrap: wrap;

}



.locations-container div {

  display: flex;

  flex: 1 1 30%;

  flex-flow: wrap;

}



.location {

  border-left: 2px solid $location-color;

  padding: 14px;

  margin: 12px 0;

  flex: 1 1;

  min-width: 275px;

  max-width: 355px;

}



.location h1 {

  padding: 0;

  margin: 0;

  width: 296px;

  font-family: sans-serif;

  font-weight: 500;

  font-size: 20px;

  color: #454545;

  text-transform: uppercase;

}



.location span {

  font-family: "Roboto", sans-serif;

  font-size: 12px;

  color: #a3a3a3;

  width: 296px;

  font-weight: 400;

}



.location-secondary-info {

  display: flex;

  align-items: center;

}



.location-secondary-info span i {

  padding-right: 5px;

}



.location:hover {

  background-color: $location-color;

}



.location:hover h1 {

  color: $hover-color;

}



.location:hover span {

  color: $hover-color;

}



main {

  display: flex;

  flex-flow: column;

  flex: 1 1;

}



.pill {

  margin: 0 1em;

  border-radius: 100px;

  border: 1px solid $link-color;

  padding: 15px;

}

variables.scss:

$location-color: #49aaca;

$link-color: #333;

$hover-color: #fff;

The implementation inside of LocationList.js was the required task, the SCSS preprocessor is the extra credit. Using latest EcmaScript syntax is also extra credit, which I believe I have done. No duplicating of code is also extra credit, but I feel like my if conditional inside of LocationList component is duplicating code, but not sure how else that could have been done.