Feedback

[github-classroom]

👋! GitHub Classroom created this pull request as a place for your teacher to leave feedback on your work. It will update automatically. Don’t close or merge this pull request, unless you’re instructed to do so by your teacher.

In this pull request, your teacher can leave comments and feedback on your code. Click the Subscribe button to be notified if that happens.

Click the Files changed or Commits tab to see all of the changes pushed to main since the assignment started. Your teacher can see this too.

Notes for teachers

Use this PR to leave feedback. Here are some tips:

• Click the Files changed tab to see all of the changes pushed to main since the assignment started. To leave comments on specific lines of code, put your cursor over a line of code and click the blue + (plus sign). To learn more about comments, read “Commenting on a pull request”.
• Click the Commits tab to see the commits pushed to main. Click a commit to see specific changes.
• If you turned on autograding, then click the Checks tab to see the results.
• This page is an overview. It shows commits, line comments, and general comments. You can leave a general comment below.

For more information about this pull request, read “Leaving assignment feedback in GitHub”.

Subscribed: @Abby-Lyttle @emlindly

[lindlym]

Provisional Grade: 70%

Keep in mind, 20% of your final grade is acquired from your partner survey and review results. The remaining 10% missing from your grade is due to lack of DRY in certain areas, and the big chunk is the missing singular blog component. Mostly just best practices and understanding of how React can work with singular components. Let me know if you have any questions!

[lindlym]

This could be made more clean. If you include the path you're aiming for inside of your BlogPageInfo, then you can loop through and create these with a loop. It'd look something like...

BlogPageInfo.map((obj, index) => {
          <Route path={obj.routePath} render={(props) => (
            <HomeBreakBlogs BlogPageInfo={obj} {...props} />
          )} />
})

Of course, you'd have to update references and what not.

[lindlym]

In general, you should always pass properties in camelCase format. This means AuthorInfo here becomes authorInfo if written correctly. You have to update the reference in the file as well (so in this instance, the AboutPage component file will need to change from props.AuthorInfo to props.authorInfo.

[lindlym]

I saw this during the presentation, you had a random thing of links at the bottom, and a random social media icon. Just remove these and keep the FooterNavbar, and throw the links into the FooterNavbar component.

[lindlym]

As a general rule, import components in PascalCase, and properties and other references in camelCase. So you'd keep Carousel as it is, but change the others to photoOne, photoTwo, etc.

[lindlym]

Isn't super DRY, try something like this:

[photoOne, photoTwo, photoThree].map((photoSrc, index) => {
    <Carousel.Item>
        <img className="d-block w-100" src={photoSrc} alt="Slide image..." />
    </Carousel.Item>
})

This way we clean up a good amount of that code. You may have to fiddle with that code a bit to get it to work!

[lindlym]

Modal is not erasing information after being submitted. It should wipe all fields after hitting the submit button.

[lindlym]

Not DRY. Use a map over the props.AuthorInfo array here in order to fix this.

[lindlym]

It's tough to not make this messy, but you probably should have looked into some libraries that allow you to save HTML elements inside of a string and compile it using React. This would have been much better with your blog format... here's a library I'd think of Interweave...

[lindlym]

It's hard to describe, but your blog pages in general are not DRY. You should have one single blog component that can handle all of the various information you're using from your Array of blogs. Right now, you have three separate blog components which are being utilized. Cleaning it up with Interweave, and figuring out how to properly use state (since the component is re-rendering, using state here would be simple), you can figure out how to use one blog page.