{"size": 22021, "ext": "js", "max_stars_repo_path": "src/App.js", "max_stars_repo_name": "Team5599/FRC-5599-Web-React-v4.1", "max_stars_repo_stars_event_min_datetime": "2020-10-07T20:20:20.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-12T00:17:06.000Z", "max_issues_repo_path": "src/App.js", "max_issues_repo_name": "Team5599/FRC-5599-Web-React-v4.1", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/App.js", "max_forks_repo_name": "Team5599/FRC-5599-Web-React-v4.1", "max_forks_repo_forks_event_min_datetime": "2020-10-07T20:21:10.000Z", "max_forks_repo_forks_event_max_datetime": "2020-10-07T20:21:10.000Z"}
{"max_stars_count": 3, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 61.1694444444, "max_line_length": 392, "alphanum_fraction": 0.3518913764}
import * as React from 'react';
import * as FeatherIcon from 'react-feather';
import { hot } from "react-hot-loader";
import { Stack } from '@fluentui/react';
import { Icon } from '@fluentui/react/lib/Icon';
import { TooltipHost } from '@fluentui/react/lib/Tooltip';
import { NeutralColors } from '@fluentui/theme';
import { FontSizes } from '@fluentui/theme';
import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { Button, ButtonType } from 'office-ui-fabric-react/lib/Button'
import { ContextualMenu } from 'office-ui-fabric-react/lib/ContextualMenu';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import Home from './Home';
import Members from "./Members"
import Robots from "./Robots"
import Social from "./Social"
import Competitions from './Competitions';
import Contact from './Contact';
import Projects from './Projects';
import Resources from './Resources';
import Search from './Search';
import $ from 'jquery';

class App extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            announcement: {},
        }
    }

    componentDidMount() {
        $('.modal').modal('show')
        console.log("Modal please")
    }

    render() {

        const numericalSpacingStackTokens = { childrenGap: "0.75em" }
        const calloutProps = { gapSpace: 0 }
        const hostStyles = { root: { display: 'inline-block' } };

        return (
            <Router>
                <div id="mobileMenu" className="d-none vh-100 p-5" style={{ backgroundColor: NeutralColors.black, zIndex: 100, overflowY: "scroll" }}>
                    <h1 className="display-4" style={{ color: NeutralColors.gray30 }}>Menu</h1>
                    <nav className="nav flex-column" style={{ fontSize: FontSizes.size24, color: NeutralColors.gray30 }}>
                        <div className="row" onClick={() => {
                            $("#mobileMenu").addClass("d-none")
                        }}>
                            <div className="col-auto">
                                <Icon iconName="ChromeClose" />
                            </div>
                            <div className="col">
                                Close
                            </div>
                        </div>
                        <Link To="/" className="my-2" onClick={() => {
                            $("#mobileMenu").addClass("d-none")
                        }}>
                            <div className="row">
                                <div className="col-auto">
                                    <Icon iconName="Home" />
                                </div>
                                <div className="col">
                                    Home
                                </div>
                            </div>
                        </Link>
                        <Link To="/members" className="my-2" onClick={() => {
                            $("#mobileMenu").addClass("d-none")
                        }}>
                            <div className="row">
                                <div className="col-auto">
                                    <Icon iconName="Teamwork" />
                                </div>
                                <div className="col">
                                    Members
                                </div>
                            </div>
                        </Link>
                        <a href="/competitions" className="my-2" onClick={() => {
                            $("#mobileMenu").addClass("d-none")
                        }}>
                            <div className="row" onClick={() => {
                                $("#mobileMenu").addClass("d-none")
                            }}>
                                <div className="col-auto">
                                    <img src="img/FIRST_Vertical_RGB_reverse.png" width="24pt" alt="FIRST Logo"></img>
                                </div>
                                <div className="col">
                                    FIRST Robotics
                                </div>
                            </div>
                        </a>
                        <Link To="/robots" className="my-2 " onClick={() => {
                            $("#mobileMenu").addClass("d-none")
                        }}>
                            <div className="row">
                                <div className="col-auto">
                                    <Icon iconName="Robot" />
                                </div>
                                <div className="col">
                                    Robots
                                </div>
                            </div>
                        </Link>
                        <Link To="/projects" className="my-2 " onClick={() => {
                            $("#mobileMenu").addClass("d-none")
                        }}>
                            <div className="row">
                                <div className="col-auto">
                                    <Icon iconName="ClipboardList" />
                                </div>
                                <div className="col">
                                    Projects
                                </div>
                            </div>
                        </Link>
                        <a href="https://flic.kr/ps/3b8mmU" className="my-2 " onClick={() => {
                            $("#mobileMenu").addClass("d-none")
                        }}>
                            <div className="row">
                                <div className="col-auto">
                                    <Icon iconName="Album" />
                                </div>
                                <div className="col">
                                    Gallery
                                </div>
                            </div>
                        </a>
                        <Link To="/social" className="my-2 " onClick={() => {
                            $("#mobileMenu").addClass("d-none")
                        }}>
                            <div className="row">
                                <div className="col-auto">
                                    <Icon iconName="Share" />
                                </div>
                                <div className="col">
                                    Social Media
                                </div>
                            </div>
                        </Link>
                        <Link To="/contact" className="my-2 " onClick={() => {
                            $("#mobileMenu").addClass("d-none")
                        }}>
                            <div className="row">
                                <div className="col-auto">
                                    <Icon iconName="Headset" />
                                </div>
                                <div className="col">
                                    Contact Us
                                </div>
                            </div>
                        </Link>
                        <Link To="/resources" className="my-2 " onClick={() => {
                            $("#mobileMenu").addClass("d-none")
                        }}>
                            <div className="row">
                                <div className="col-auto">
                                    <Icon iconName="Folder" />
                                </div>
                                <div className="col">
                                    Resources
                                </div>
                            </div>
                        </Link>
                        <Link To="/search" className="my-2 " onClick={() => {
                            $("#mobileMenu").addClass("d-none")
                        }}>
                            <div className="row">
                                <div className="col-auto">
                                    <Icon iconName="Search" />
                                </div>
                                <div className="col">
                                    Search
                                </div>
                            </div>
                        </Link>
                    </nav>
                </div>

                <div className="fixed-bottom d-md-none">
                    <div className="container-fluid" style={{ backgroundColor: NeutralColors.black }}>
                        <div id="bottomNav" className="row ms-fontSize-28 text-center py-2" style={{ fontSize: FontSizes.size24 }}>
                            <div className="col">
                                <Link to="/" style={{ color: "rgb(255,106,0)" }}>
                                    <Icon iconName="Home" />
                                </Link>
                            </div>
                            <div className="col">
                                <Link to="/robots" style={{ color: "rgb(255,106,0)" }}>
                                    <Icon iconName="Robot" />
                                </Link>
                            </div>
                            <div className="col">
                                <Link to="/social" style={{ color: "rgb(255,106,0)" }}>
                                    <Icon iconName="Share" />
                                </Link>
                            </div>
                            <div className="col d-none d-sm-block">
                                <Link to="/resources" style={{ color: "rgb(255,106,0)" }}>
                                    <Icon iconName="Folder" />
                                </Link>
                            </div>
                            <div className="col">
                                <Icon iconName="CollapseMenu" style={{ color: "rgb(255,106,0)" }} onClick={() => {
                                    $("#mobileMenu").removeClass("d-none")
                                }} />
                            </div>
                        </div>
                    </div>
                </div>
                <div className="container-fluid" style={{ backgroundColor: NeutralColors.black }}>
                    <div className="row vh-100">
                        <div className="col-auto h-100 d-none d-md-block">
                            <div className="row h-100">
                                <div className="col my-auto px-3 mh-100" style={{ overflowY: "auto" }}>
                                    <nav style={{ fontSize: FontSizes.size24 }}>
                                        <Stack verticalAlign="space-between" tokens={numericalSpacingStackTokens}>
                                            <TooltipHost content="Home" calloutProps={calloutProps} styles={hostStyles}>
                                                <Link to="/" style={{ color: "rgb(255,106,0)" }}>
                                                    <Icon iconName="Home" />
                                                </Link>
                                            </TooltipHost>
                                            <TooltipHost content="Members and Divisons" calloutProps={calloutProps} styles={hostStyles}>
                                                <Link to="/members" style={{ color: "rgb(255,106,0)" }}>
                                                    <Icon iconName="Teamwork" />
                                                </Link>
                                            </TooltipHost>
                                            <TooltipHost content="FIRST Robotics" calloutProps={calloutProps} styles={hostStyles}>
                                                <Link to="/competitions" style={{ color: "rgb(255,106,0)" }}>
                                                    <img className="d-block" src="img/FIRST_Vertical_RGB_reverse.png" width="28pt" />
                                                </Link>
                                            </TooltipHost>
                                            <TooltipHost content="Robots" calloutProps={calloutProps} styles={hostStyles}>
                                                <Link to="/robots" style={{ color: "rgb(255,106,0)" }}>
                                                    <Icon iconName="Robot" />
                                                </Link>
                                            </TooltipHost>
                                            <TooltipHost content="Projects" calloutProps={calloutProps} styles={hostStyles}>
                                                <Link to="/projects" style={{ color: "rgb(255,106,0)" }}>
                                                    <Icon iconName="ClipboardList" />
                                                </Link>
                                            </TooltipHost>
                                            <TooltipHost content="Flickr" calloutProps={calloutProps} styles={hostStyles}>
                                                <a href="https://flic.kr/ps/3b8mmU" style={{ color: "rgb(255,106,0)" }}>
                                                    <Icon iconName="Album" />
                                                </a>
                                            </TooltipHost>
                                            <TooltipHost content="Social Media" calloutProps={calloutProps} styles={hostStyles}>
                                                <Link to="/social" style={{ color: "rgb(255,106,0)" }}>
                                                    <Icon iconName="Share" />
                                                </Link>
                                            </TooltipHost>
                                            <TooltipHost content="Contact" calloutProps={calloutProps} styles={hostStyles}>
                                                <Link to="/contact" style={{ color: "rgb(255,106,0)" }}>
                                                    <Icon iconName="Headset" />
                                                </Link>
                                            </TooltipHost>
                                            <TooltipHost content="Team Resources" calloutProps={calloutProps} styles={hostStyles}>
                                                <Link to="/resources" style={{ color: "rgb(255,106,0)" }}>
                                                    <Icon iconName="Folder" />
                                                </Link>
                                            </TooltipHost>
                                            <TooltipHost content="Search" calloutProps={calloutProps} styles={hostStyles}>
                                                <Link to="/search" style={{ color: "rgb(255,106,0)" }}>
                                                    <Icon iconName="Search" />
                                                </Link>
                                            </TooltipHost>
                                        </Stack>
                                    </nav>
                                </div>
                            </div>
                        </div>
                        <div className="col h-100 px-0" style={{ overflowY: "scroll", overflowX: "hidden" }}>
                            <div className="d-flex flex-column min-vh-100">
                                <Switch>
                                    <Route exact path="/" component={Home} />
                                    <Route path="/members" component={Members} />
                                    <Route path="/competitions" component={Competitions} />
                                    <Route path="/robots" component={Robots} />
                                    <Route path="/projects" component={Projects} />
                                    <Route path="/social" component={Social} />
                                    <Route path="/contact" component={Contact} />
                                    <Route path="/resources" component={Resources} />
                                    <Route path="/search" component={Search} />
                                </Switch>
                                <footer className="py-5 mx-0 mt-auto">
                                    <div className="container">
                                        <div className="row">
                                            <div className="col-6 col-sm-4 pb-3">
                                                <div className="d-flex flex-column">
                                                    <h4 className="text-muted">About Us</h4>
                                                    <Link className="text-muted" to="/team">Our Team</Link>
                                                    <Link className="text-muted" to="/members">Our Members</Link>
                                                    <Link className="text-muted" to="/robots">Our Robots</Link>
                                                    <Link className="text-muted" to="/competitions">Competitions</Link>
                                                </div>
                                            </div>
                                            <div className="col-6 col-sm-4 pb-3">
                                                <div className="d-flex flex-column">
                                                    <h4 className="text-muted">Community</h4>
                                                    <Link className="text-muted" to="/social">Social Media</Link>
                                                    <Link className="text-muted" to="/projects">Projects</Link>
                                                </div>
                                            </div>
                                            <div className="col-6 col-sm-4 pb-3">
                                                <div className="d-flex flex-column">
                                                    <h4 className="text-muted">Resources</h4>
                                                    <Link className="text-muted" to="/gallery">Gallery</Link>
                                                    <Link className="text-muted" to="/more">More</Link>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="d-flex flex-wrap justify-content-center pb-3">
                                            <TooltipHost content="GitHub" calloutProps={calloutProps} styles={hostStyles}>
                                                <a className="p-3 m-2 rounded-circle btn btn-outline-secondary" href="https://github.com/team5599"><FeatherIcon.GitHub /></a>
                                            </TooltipHost>
                                            <TooltipHost content="Instagram" calloutProps={calloutProps} styles={hostStyles}>
                                                <a className="p-3 m-2 rounded-circle btn btn-outline-secondary" href="https://www.instagram.com/sentinels_5599/"><FeatherIcon.Instagram /></a>
                                            </TooltipHost>
                                            <TooltipHost content="Facebook" calloutProps={calloutProps} styles={hostStyles}>
                                                <a className="p-3 m-2 rounded-circle btn btn-outline-secondary" href="https://www.facebook.com/team5599sentinels"><FeatherIcon.Facebook /></a>
                                            </TooltipHost>
                                            <TooltipHost content="Twitter" calloutProps={calloutProps} styles={hostStyles}>
                                                <a className="p-3 m-2 rounded-circle btn btn-outline-secondary" href="https://twitter.com/Sentinels5599"><FeatherIcon.Twitter /></a>
                                            </TooltipHost>
                                            <TooltipHost content="YouTube" calloutProps={calloutProps} styles={hostStyles}>
                                                <a className="p-3 m-2 rounded-circle btn btn-outline-secondary" href="https://www.youtube.com/channel/UCALF3caI0F4WJfJisLFSBWQ"><FeatherIcon.Youtube /></a>
                                            </TooltipHost>
                                            <TooltipHost content="Email" calloutProps={calloutProps} styles={hostStyles}>
                                                <a className="p-3 m-2 rounded-circle btn btn-outline-secondary" href="mailto:marketing.sentinels@gmail.com"><FeatherIcon.Mail /></a>
                                            </TooltipHost>
                                        </div>
                                        <div className="text-secondary">
                                            <p className="text-center pb-3">Copyright © 2020 BNCHS Sentinels</p>
                                            <p style={{ fontFamily: "Arial" }}><i>FIRST®</i>, <i>FIRST®</i> Robotics Competition, and <i>FIRST®</i> Tech Challenge, are registered trademarks of <i>FIRST®</i> (<Link to="www.firstinspires.org" className="text-muted">www.firstinspires.org</Link>) which is not overseeing, involved with, or responsible for this activity, product, or service.</p>
                                        </div>
                                        <div className="d-md-none" style={{ paddingBottom: "100px" }}>
                                        </div>
                                    </div>
                                </footer>
                            </div>
                        </div>
                    </div>
                </div>
            </Router >
        );
    }
}

export default hot(module)(App);