Feedback #1
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| { | ||
| "name": "break", | ||
| "version": "0.1.0", | ||
| "private": true, | ||
| "dependencies": { | ||
| "@testing-library/jest-dom": "^5.11.9", | ||
| "@testing-library/react": "^11.2.5", | ||
| "@testing-library/user-event": "^12.8.3", | ||
| "bootstrap": "^4.6.0", | ||
| "mdb-ui-kit": "^3.4.0", | ||
| "react": "^17.0.2", | ||
| "react-bootstrap": "^1.5.2", | ||
| "react-bootstrap-icons": "^1.4.0", | ||
| "react-dom": "^17.0.2", | ||
| "react-router-dom": "^5.2.0", | ||
| "react-scripts": "4.0.3", | ||
| "web-vitals": "^1.1.1" | ||
| }, | ||
| "scripts": { | ||
| "start": "react-scripts start", | ||
| "build": "react-scripts build", | ||
| "test": "react-scripts test", | ||
| "eject": "react-scripts eject" | ||
| }, | ||
| "eslintConfig": { | ||
| "extends": [ | ||
| "react-app", | ||
| "react-app/jest" | ||
| ] | ||
| }, | ||
| "browserslist": { | ||
| "production": [ | ||
| ">0.2%", | ||
| "not dead", | ||
| "not op_mini all" | ||
| ], | ||
| "development": [ | ||
| "last 1 chrome version", | ||
| "last 1 firefox version", | ||
| "last 1 safari version" | ||
| ] | ||
| } | ||
| } |
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> | ||
| <!-- Bootstrap CSS --> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" | ||
| integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" | ||
| crossorigin="anonymous" | ||
| /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <meta name="theme-color" content="#000000" /> | ||
| <meta | ||
|
|
||
|
|
||
| </head> | ||
| <body> | ||
| <noscript>You need to enable JavaScript to run this app.</noscript> | ||
| <div id="root"></div> | ||
|
|
||
| </body> | ||
| </html> |
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| /* Imported CSS Page */ | ||
| import './index.css'; | ||
| /* Imported Usage of Bootstrap to App */ | ||
| import 'bootstrap/dist/css/bootstrap.min.css'; | ||
| /* Imported Router Behavior */ | ||
| import { Switch, Route } from 'react-router-dom'; | ||
|
|
||
| /* Imported Components */ | ||
| import SiteNavbar from './components/navbar'; | ||
| import Footer from './components/footer'; | ||
| import FooterNavbar from './components/footernavbar'; | ||
| import ScrollToTop from './components/scroll-to-top'; | ||
|
|
||
| /* Imported Site Pages */ | ||
| import HomePage from './pages/HomePage'; | ||
| import AboutPage from './pages/AboutPage'; | ||
| import AuthorInfo from './pages/AuthorInfo'; | ||
| import ContactPage from './pages/ContactPage'; | ||
| import BlogPageInfo from './blogdata/BlogPageInfo'; | ||
|
|
||
| /* Imported Blog Pages */ | ||
| import WorkBreakBlogs from './pages/workbreak/WorkBreakBlogs'; | ||
| import HomeBreakBlogs from './pages/homebreak/HomeBreakBlogs'; | ||
| import PlayBreakBlogs from './pages/playbreak/PlayBreakBlogs'; | ||
|
|
||
| /* App Component: Container For All Other Components */ | ||
| function App() { | ||
| return ( | ||
| <div className="App"> | ||
| <header className="App-header"> | ||
| <SiteNavbar /> | ||
| <div className="blog-title"> | ||
| </div> | ||
| <Switch> | ||
| <Route path="/" component={HomePage} exact /> | ||
| <Route path="/contact" component={ContactPage} /> | ||
| <Route path="/homebreak/blogs" render={(props) => ( | ||
| <HomeBreakBlogs BlogPageInfo={BlogPageInfo} {...props} /> | ||
| )} /> | ||
| <Route path="/playbreak/blogs" render={(props) => ( | ||
| <PlayBreakBlogs BlogPageInfo={BlogPageInfo} {...props} /> | ||
| )} /> | ||
| <Route path="/workbreak/blogs" render={(props) => ( | ||
| <WorkBreakBlogs BlogPageInfo={BlogPageInfo} {...props} /> | ||
| )} /> | ||
| <Route path="/about" render={(props) => ( | ||
| <AboutPage AuthorInfo={AuthorInfo} {...props} /> | ||
|
There was a problem hiding this comment. 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 |
||
| )} /> | ||
| </Switch> | ||
| </header> | ||
| <div className="footer"> | ||
| <i class="fab fa-facebook"></i> | ||
| <Footer /> | ||
|
Comment on lines
+52
to
+53
There was a problem hiding this comment. 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 |
||
| <ScrollToTop className="scroll-to-top" /> | ||
| <FooterNavbar /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| export default App; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import React, { Component } from "react"; | ||
| import Carousel from "react-bootstrap/Carousel"; | ||
| import PhotoOne from "../images/carousel/Pink.jpeg"; | ||
| import PhotoTwo from "../images/carousel/Blue.jpeg"; | ||
| import PhotoThree from "../images/carousel/Orange.jpeg"; | ||
|
Comment on lines
+2
to
+5
There was a problem hiding this comment. 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. |
||
|
|
||
| /* Large Carousel on Homepage */ | ||
| export class CarouselPhotos extends Component { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <Carousel className="carousel"> | ||
| <Carousel.Item> | ||
| <img className="d-block w-100" src={PhotoOne} alt="First slide" /> | ||
| </Carousel.Item> | ||
| <Carousel.Item> | ||
| <img className="d-block w-100" src={PhotoTwo} alt="Second slide" /> | ||
| </Carousel.Item> | ||
| <Carousel.Item> | ||
| <img className="d-block w-100" src={PhotoThree} alt="Third slide" /> | ||
| </Carousel.Item> | ||
|
Comment on lines
+13
to
+21
There was a problem hiding this comment. Isn't super DRY, try something like this: 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! |
||
| </Carousel> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| export default CarouselPhotos; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import React, { useState } from "react"; | ||
| import { Button, Modal } from "react-bootstrap"; | ||
| import { Heart, Mailbox, HandThumbsUp } from "react-bootstrap-icons"; | ||
|
|
||
| /* Modal on Contact Page */ | ||
| function ContactModal() { | ||
| const [show, setShow] = useState(); | ||
|
|
||
| const handleClose = () => setShow(false); | ||
| const handleShow = () => setShow(true); | ||
|
|
||
| return ( | ||
| <> | ||
| <Button variant="outline-secondary" onClick={() => handleShow()}> | ||
| Send | ||
| </Button> | ||
|
|
||
| <Modal show={show} onHide={() => handleClose()}> | ||
| <Modal.Header closeButton> | ||
| <Modal.Title> | ||
| <Mailbox /> <Heart /> | ||
| </Modal.Title> | ||
| </Modal.Header> | ||
| <Modal.Body> | ||
| Signed, sealed, delivered. We will be in touch soon! | ||
| </Modal.Body> | ||
| <Modal.Footer> | ||
| <Button variant="secondary" onClick={handleClose}> | ||
| <HandThumbsUp /> | ||
| </Button> | ||
| </Modal.Footer> | ||
| </Modal> | ||
| </> | ||
| ); | ||
| } | ||
|
Comment on lines
+6
to
+35
There was a problem hiding this comment. Modal is not erasing information after being submitted. It should wipe all fields after hitting the submit button. |
||
| export default ContactModal; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React, { Component } from "react"; | ||
| import { Nav, Col } from "react-bootstrap"; | ||
|
|
||
| /* Footer Containing Links to Site Pages */ | ||
| export class Footer extends Component { | ||
| render() { | ||
| return ( | ||
| <Nav defaultActiveKey="/home" className="footer-column"> | ||
| <Col> | ||
| <Nav.Link href="/">Home</Nav.Link> | ||
| <Nav.Link href="/about">About</Nav.Link> | ||
| <Nav.Link href="/contact">Contact</Nav.Link> | ||
| </Col> | ||
| <Col> | ||
| <Nav.Link href="/workbreak/blogs">Work Break</Nav.Link> | ||
| <Nav.Link href="/homebreak/blogs">Home Break</Nav.Link> | ||
| <Nav.Link href="/playbreak/blogs">Play Break</Nav.Link> | ||
| </Col> | ||
| </Nav> | ||
| ); | ||
| } | ||
| } | ||
| export default Footer; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React, { Component } from "react"; | ||
| import { Navbar, Nav } from "react-bootstrap"; | ||
| import { Facebook, Twitter, Instagram, Envelope } from "react-bootstrap-icons"; | ||
|
|
||
| /* Footer NavBar with Copyright Info + Social Media Icons (for display only) */ | ||
| export class FooterNavbar extends Component { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <Navbar | ||
| sticky="bottom" | ||
| className="footer-navbar" | ||
| bg="light" | ||
| expand="lg" | ||
| > | ||
| <Navbar.Toggle aria-controls="basic-navbar-nav" /> | ||
| <Navbar.Collapse id="basic-navbar-nav"> | ||
| <p className="copyright-text"> | ||
| © 2021 Break Inc. | ||
| <br /> | ||
| Cookie Policy | ||
| </p> | ||
| <p className="copyright-text"> | ||
| Privacy Policy | ||
| <br /> | ||
| Terms + Agreements | ||
| </p> | ||
| <Nav className="footer-navbar-icons"> | ||
| <Nav.Link href="/"> | ||
| <Facebook /> | ||
| </Nav.Link> | ||
| <Nav.Link href="/about"> | ||
| <Instagram /> | ||
| </Nav.Link> | ||
| <Nav.Link href="/about"> | ||
| <Twitter /> | ||
| </Nav.Link> | ||
| <Nav.Link href="/contact"> | ||
| <Envelope /> | ||
| </Nav.Link> | ||
| </Nav> | ||
| </Navbar.Collapse> | ||
| </Navbar> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| export default FooterNavbar; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React, { Component } from "react"; | ||
| import { Card, CardDeck } from "react-bootstrap"; | ||
| import { Link } from "react-router-dom"; | ||
| import { PauseFill, PlayFill } from "react-bootstrap-icons"; | ||
|
|
||
| /* Cards on Homepage Containing Links to Each Blog */ | ||
| export class HomepageCards extends Component { | ||
| render() { | ||
| return ( | ||
| <> | ||
| <CardDeck className="card-deck"> | ||
| <Card | ||
| border="none" | ||
| className="card-image" | ||
| style={{ | ||
| width: "10rem", | ||
| }} | ||
| > | ||
| <Card.Body className="work-card-body"></Card.Body> | ||
| <Link to="/workbreak/blogs"> | ||
| <Card.Footer className="card-footer"> | ||
| Work Break <PauseFill /> | ||
| </Card.Footer> | ||
| </Link> | ||
| </Card> | ||
| <br /> | ||
|
|
||
| <Card border="none" style={{ width: "10rem" }}> | ||
| <Card.Body className="home-card-body"></Card.Body> | ||
| <Link to="/homebreak/blogs"> | ||
| <Card.Footer className="card-footer"> | ||
| Home Break <PauseFill /> | ||
| </Card.Footer> | ||
| </Link> | ||
| </Card> | ||
| <br /> | ||
|
|
||
| <Card border="none" style={{ width: "10rem" }}> | ||
| <Card.Body className="play-card-body"></Card.Body> | ||
| <Link to="/playbreak/blogs"> | ||
| <Card.Footer className="card-footer"> | ||
| Play Break <PlayFill /> | ||
| </Card.Footer> | ||
| </Link> | ||
| </Card> | ||
| <br /> | ||
| </CardDeck> | ||
| </> | ||
| ); | ||
| } | ||
| } | ||
| export default HomepageCards; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import React, { Component } from "react"; | ||
| import { Navbar, Nav, NavDropdown, Form } from "react-bootstrap"; | ||
| import { PauseCircle, PersonCircle } from "react-bootstrap-icons"; | ||
|
|
||
| /* Header Site Navbar */ | ||
| export class SiteNavbar extends Component { | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <Navbar bg="light" expand="lg"> | ||
| <Navbar.Brand className="nav-title" href="/"> | ||
| Break | ||
| <PauseCircle /> | ||
| </Navbar.Brand> | ||
| <Navbar.Toggle aria-controls="basic-navbar-nav" /> | ||
| <Navbar.Collapse id="basic-navbar-nav"> | ||
| <Nav className="navbar-main-text"> | ||
| <Nav.Link href="/">Home</Nav.Link> | ||
| <Nav.Link href="/about">About</Nav.Link> | ||
| <NavDropdown title="Blog" id="basic-nav-dropdown"> | ||
| <NavDropdown.Item href="/workbreak/blogs"> | ||
| Work BREAK | ||
| </NavDropdown.Item> | ||
| <NavDropdown.Item href="/homebreak/blogs"> | ||
| Home BREAK | ||
| </NavDropdown.Item> | ||
| <NavDropdown.Item href="/playbreak/blogs"> | ||
| Play BREAK | ||
| </NavDropdown.Item> | ||
| </NavDropdown> | ||
| </Nav> | ||
| <Form inline></Form> | ||
| </Navbar.Collapse> | ||
| <ul class="nav navbar-nav navbar-right"> | ||
| <li> | ||
| <a className="nav-right-text" href="/contact"> | ||
| Contact | ||
| </a> | ||
| </li> | ||
| <br /> | ||
| <li> | ||
| <a className="nav-right-text" href=""> | ||
| <PersonCircle /> | ||
| Login | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </Navbar> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| export default SiteNavbar; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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...
Of course, you'd have to update references and what not.