Ttykuu

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 ;

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.