moved badge onto landing (#216)

* moved badge onto landing * Hijack this branch for some lint stuff
HackRU · Aug 26, 2019 · 8280b7e · 8280b7e
1 parent 0071163
commit 8280b7e
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 71 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+*.json
+*.css
diff --git a/package.json b/package.json
@@ -30,8 +30,8 @@
         "build": "env-cmd build react-scripts build",
         "test": "react-scripts test",
         "eject": "react-scripts eject",
-        "lint": "eslint 'src/**' --ignore-pattern '*.json'",
-        "lint-fix": "eslint 'src/**' --ignore-pattern '*.json' --fix"
+        "lint": "eslint 'src/**'",
+        "lint-fix": "eslint 'src/**' --fix"
     },
     "eslintConfig": {
         "extends": "react-app"

diff --git a/src/App.jsx b/src/App.jsx
@@ -11,7 +11,6 @@ import {
     TeamPage,
     ProjectorPage,
     E404 } from "./components/Pages"; // Router Pages
-import MLHBadge from "./MLHBadge"; // We need this to qualify as an official MLH event
 import NavBar from "./NavBar";
 import { defaults } from "./Defaults"; // Get a handle to the default application settings
 import { Profile } from "./components/Profile"; // User profile storage
@@ -107,8 +106,6 @@ class App extends Component {
                     <div className="root-wrapper">
                         {/* We need to show this on our webpage at all times, so we're just going to dump it in the root */}
                         <NavBar profile={this.state.profile}/>
-                        {/* We need to show this on our webpage at all times, so we're just going to dump it in the root */}
-                        <MLHBadge />
                         {/* We put the background here so that even after the page reroutes to different urls, the flying
                             logos will stay constant, allowing for a seemless user experience. First, we render the logos
                             then we render the background ontop of them, allowing the logos to fly behind the clouds */}

diff --git a/src/NavBar.jsx b/src/NavBar.jsx
@@ -1,8 +1,9 @@
-import React, { Component } from 'react';
-import { Navbar, NavbarBrand, Nav, NavLink, NavItem, Collapse, NavbarToggler, Button, Container } from 'reactstrap';
-import { Link } from 'react-router-dom';
+import React, { Component } from "react";
+import { Navbar, NavbarBrand, Nav, NavLink, NavItem, Collapse, NavbarToggler, Button, Container } from "reactstrap";
+import { Link } from "react-router-dom";
 import { navlinks, theme } from "./Defaults";
-import "./NavBar.css"
+import { ProfileType } from "./components/Profile";
+import "./NavBar.css";
 
 class NavBar extends Component {
     constructor(props) {
@@ -22,14 +23,14 @@ class NavBar extends Component {
     }
 
     componentDidMount() {
-        window.addEventListener('scroll', this.handleScroll);
-        window.addEventListener('resize', this.handleResize);
+        window.addEventListener("scroll", this.handleScroll);
+        window.addEventListener("resize", this.handleResize);
 
         this.handleResize();
     }
 
     componentWillUnmount() {
-        window.removeEventListener('scroll', this.handleScroll);
+        window.removeEventListener("scroll", this.handleScroll);
     }
 
     handleResize() {
@@ -54,7 +55,7 @@ class NavBar extends Component {
         } else if (this.state.shouldRender === 0 && offset > badgeHeight) {
             this.setState({
                 shouldRender: 1
-            })
+            });
         }
     }
 
@@ -74,14 +75,19 @@ class NavBar extends Component {
     getAuthButtons() {
         return (
             <div>
-                <Link to="/login" class="link"><Button color="link" className="customButton">Login</Button></Link>{' '}
-                <Link to="/signup" ><Button color="link" className="customButton">Sign Up</Button></Link>
+                <Link to="/login"
+                    class="link"><Button color="link"
+                        className="customButton">Login</Button></Link>{" "}
+                <Link to="/signup" ><Button color="link"
+                    className="customButton">Sign Up</Button></Link>
             </div>
         );
     }
     getDashboardButton() {
         return (
-            <Link to="/dashboard" style={{ textDecoration: 'none' }}><Button className="customButton" color="link">Dashboard</Button></Link>
+            <Link to="/dashboard"
+                style={{ textDecoration: "none" }}><Button className="customButton"
+                    color="link">Dashboard</Button></Link>
         );
     }
     getNavLinks() {
@@ -90,47 +96,56 @@ class NavBar extends Component {
         for (let i = 0; i < keys.length - 1; i++) {
             navLinks.push(
                 <NavItem>
-                    <NavLink href={"/" + navlinks[keys[i]].url} onClick={this.toggleIfMobile}>{keys[i].toString()}</NavLink>
+                    <NavLink href={"/" + navlinks[keys[i]].url}
+                        onClick={this.toggleIfMobile}>{keys[i].toString()}</NavLink>
                 </NavItem>
             );
         }
         return (
             navLinks
-        )
+        );
     }
 
     getLandingNav() {
         return (
-        <Collapse isOpen={this.state.isOpen} navbar>
-            <Nav navbar className="mr-auto">
-                {this.getNavLinks()}
-            </Nav>
-            <Nav navbar className="ml-auto">
-                { this.props.profile.isLoggedIn ?
-                    this.getDashboardButton() :
-                    this.getAuthButtons()}
-            </Nav>
-        </Collapse>
+            <Collapse isOpen={this.state.isOpen}
+                navbar>
+                <Nav navbar
+                    className="mr-auto">
+                    {this.getNavLinks()}
+                </Nav>
+                <Nav navbar
+                    className="ml-auto">
+                    { this.props.profile.isLoggedIn ?
+                        this.getDashboardButton() :
+                        this.getAuthButtons()}
+                </Nav>
+            </Collapse>
         );
     }
 
     getDashboardNav() {
         return (
-        <Collapse isOpen={this.state.isOpen} navbar>
-            <Nav navbar className="mr-auto">
-                <NavItem>
-                    <NavLink onClick={this.toggleIfMobile}><Link to="/#">Home</Link></NavLink>
-                </NavItem>
-                <NavItem>
-                    <NavLink onClick={this.toggleIfMobile}><Link to="/live">Live</Link></NavLink> 
-                </NavItem>
-            </Nav>
-            <Nav navbar className="ml-auto">
-                <NavItem>
-                    <Link to="/logout" style={{ textDecoration: 'none' }}><Button className="customButton" color="link">Logout</Button></Link>
-                </NavItem>
-            </Nav>
-        </Collapse>
+            <Collapse isOpen={this.state.isOpen}
+                navbar>
+                <Nav navbar
+                    className="mr-auto">
+                    <NavItem>
+                        <NavLink onClick={this.toggleIfMobile}><Link to="/#">Home</Link></NavLink>
+                    </NavItem>
+                    <NavItem>
+                        <NavLink onClick={this.toggleIfMobile}><Link to="/live">Live</Link></NavLink> 
+                    </NavItem>
+                </Nav>
+                <Nav navbar
+                    className="ml-auto">
+                    <NavItem>
+                        <Link to="/logout"
+                            style={{ textDecoration: "none" }}><Button className="customButton"
+                                color="link">Logout</Button></Link>
+                    </NavItem>
+                </Nav>
+            </Collapse>
         );
     }
 
@@ -139,17 +154,29 @@ class NavBar extends Component {
         let onDashboard = (path === "/dashboard");
         let onLanding = (path === "/");
         return(
-            <Navbar id="navbar" style={{ width: "100%", zIndex: "20", backgroundColor: theme.secondary[1], opacity: this.state.shouldRender | !onLanding, pointerEvents: this.state.shouldRender | !onLanding ? "auto":"none", transition: !onLanding ? "" : "opacity 0.5s" }} fixed="top" dark expand="md">
+            <Navbar id="navbar"
+                style={{ width: "100%", zIndex: "20", backgroundColor: theme.secondary[1], opacity: this.state.shouldRender | !onLanding, pointerEvents: this.state.shouldRender | !onLanding ? "auto":"none", transition: !onLanding ? "" : "opacity 0.5s" }}
+                fixed="top"
+                dark
+                expand="md">
                 <Container>
                     <NavbarBrand>
-                        <NavbarToggler onClick={this.toggle} style={{ marginRight: 10 }} />
-                        <Link style={{ color: theme.accent[0] }} onClick={this.toggleIfMobile} to="/#">HackRU</Link>
+                        <NavbarToggler onClick={this.toggle}
+                            style={{ marginRight: 10 }} />
+                        <Link style={{ color: theme.accent[0] }}
+                            onClick={this.toggleIfMobile}
+                            to="/#">HackRU</Link>
                     </NavbarBrand>
-                    { onDashboard ? 
+                    { onDashboard ?
                         this.getDashboardNav() :
                         this.getLandingNav() }
                 </Container>
             </Navbar> );
     }
 }
-export default NavBar;
+
+NavBar.propTypes = {
+    profile: ProfileType,
+};
+
+export default NavBar;
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import { Container, Row, Col } from "reactstrap";
 import { theme } from "../../Defaults";
 import { Redirect } from "react-router-dom";
-import { Link } from "react-router-dom";
 import ApplicationStatus from "./ApplicationStatus";
 import Section from "./Section";
 import Loading from "./Loading";

diff --git a/src/components/Landing/Landing.jsx b/src/components/Landing/Landing.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
 import { Container, Row } from "reactstrap";
 import Home from "./Sections/Home";
 import Freeze from "./Sections/Freeze";
@@ -56,27 +56,29 @@ class LandingPage extends Component {
             }
         }
         return (
-            [<MLHBadge/>,
-            <Container id="LandingPage"
-                className="section"
-                fluid
-                style={{ backgroundColor: theme.secondary[1] }}>
-                <ParallaxProvider>
-                    <ScrollableAnchor id="home">
-                        <div>
-                            <Row className="section">
-                                { !defaults.freeze ?
-                                    <Home isMobile={this.props.isMobile}
-                                        profile={this.props.profile}
-                                        loggedout={this.props.loggedout}
-                                        dismissAlert={this.props.dismissAlert} /> :
-                                    <Freeze isMobile={this.props.isMobile} />}
-                            </Row>
-                        </div>
-                    </ScrollableAnchor>
-                    {rows}
-                </ParallaxProvider>
-            </Container>]
+            <Fragment>
+                <MLHBadge/>
+                <Container id="LandingPage"
+                    className="section"
+                    fluid
+                    style={{ backgroundColor: theme.secondary[1] }}>
+                    <ParallaxProvider>
+                        <ScrollableAnchor id="home">
+                            <div>
+                                <Row className="section">
+                                    { !defaults.freeze ?
+                                        <Home isMobile={this.props.isMobile}
+                                            profile={this.props.profile}
+                                            loggedout={this.props.loggedout}
+                                            dismissAlert={this.props.dismissAlert} /> :
+                                        <Freeze isMobile={this.props.isMobile} />}
+                                </Row>
+                            </div>
+                        </ScrollableAnchor>
+                        {rows}
+                    </ParallaxProvider>
+                </Container>
+            </Fragment>
         );
     }
 }