UserStory

As a user, when I navigate to the courses page I will see a headline that says "Find Courses", and underneath will be all of the courses that are listed.
As a user, if I find a course that I want to look at, there will be a button on that course listing that will take me to that single course.

AC

WHEN a user navigates to the course search page THEN they should see a headline that says "Find Courses" AND they should see a listing of all the courses offered AND they should be able to click on a course that will take them to the SingleCourse route.

DevNotes

The layout of the page should follow how it's listed here: #1
First thing we should do is create a new component in the Shared folder called SingleCourseCard. Inside of this folder, create SingleCourseCard.js and SingleCourseCard.scss.
Inside of the SingleCourseCard.js file we will be creating the card which we will map over in Courses.js.

First, lets import these statements in SingleCourseCard.js:

import React from 'react';
import { Link } from 'react-router-dom';
import './SingleCourseCard.scss';

Next, create the class structure like this:

class SingleCourseCard extends React.Component {
render() {
return (
);
}
}

Then, export SingleCourseCard
After the render(), but before the return(), import course props. const { course } = this.props;

Inside of the return(), let's use this card from bootstrap:

<div class="media">
<img src={course.imageUrl} class="mr-3" alt={course.name}>
<div class="media-body">
<h3 class="mt-0">{course.name}</h3>
<h5 className="mt-0">Location: {course.address}</h5>
<h5 className="mt-0">Slope: {course.slope}</h5>
<h5 className="mt-0">Yardage: {course.yardage}</h5>
</div>
 <div className="d-flex justify-content-end">
     <Link className="btn btn-outline-primary" to="/course/courseId">Go To This Course</Link>
 </div>
</div>

Next, lets go back to the Courses component.

First, lets import what we need:

import React from 'react';
import SingleCourseCard from '../SingleCourseCard/SingleCourseCard';
import './Courses.scss';

Next, create the file structure with the class:

class Courses extends React.Component {
render() {
return(
);
}
}

Then export the class at the end of the file.
First, lets use state:
```
state = {
courses: [],
```

Next, we need to call the courses data like this:

getCourses = () => {
coursesData.getAllCourses()
  .then((courses) => {
    this.setState({ courses });
  })
  .catch((errorFromGetCourses) => console.error(errorFromGetCourses));
}

Since this data will be used on this component, lets use ComponentDidMount.
```
componentDidMount() {
this.getCourses();
}
```
Next, before the return() but after the render(), call the props with const { courses } = this.props;

Next, inside the return(), we will add an h1 tag and map over the SingleCourseCard like this:

<div className="courses">
<div className="title d-flex justify-content-center">
<h1>Find Courses</h1>
</div>
<div className="course">
  { this.state.courses.map((course) => <SingleCourseCard key={course.id} course={course} />)}
</div>
</div>

Run an npm start to make sure it is all displaying correctly.

phillipsja97 / digiCaddie

Course Search (Authed) Component/Route #11

UserStory

AC

DevNotes