Single Hole View (Authed) Component/Route

[phillipsja97]

UserStory

• As a user, once I arrive at the Single Hole View route, I should see a pagination group from 1-18 listing out the holes for that specific course.
• As a user, I should see a title underneath the pagination group in the center of the page that says "Course Title - Hole # __" .
• As a user, underneath the title to the left, I should see a picture of the layout of the hole. To the right of that I should see two details: "Hole Handicap" and "Yardages".
• As a user, underneath the photo and details, I should see a title that says "Caddie Tips" and then underneath that have comments from other users with tips about the hole. To the right of the "Caddie Tips" title there should also be a button at the far right that says "Add Comment" which will allow me to add a new comment.
• As a user, each comment should have the user name, date, comment, and a photo on the left side of the box. There should also be an "edit" and "delete" button at the bottom of the comment box that allows me to alter, or delete only a comment that I have made.

AC

WHEN the user navigates to the page they should see the information listed above THEN they should be able to navigate which hole they want to look at AND they should be able to add a new comment, or edit and delete a comment that they have already made.

DevNotes

• First, SingleHoleCard needs to be created so that we can define how the top half of the page will look. Create a folder in Shared Component called SingleHoleCard and two files called SingleHoleCard.js and SingleHoldCard.scss.
• In SingleHoleCard.js first import what we need:

  import React from 'react';
  import './SingleHoleCard.scss';

• Next, set up the class component name:

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

• Then, export it at the end of the file.