F/lp transition

frontend/package.json

@@ -15,6 +15,7 @@
     "react": "^16.12.0",
     "react-bootstrap": "^1.0.0-beta.8",
     "react-dom": "^16.12.0",
+    "react-icons": "^3.10.0",
     "react-moment": "^0.9.2",
     "react-responsive-carousel": "^3.1.51",
     "react-router-dom": "^5.0.0",

frontend/src/components/App/index.js

@@ -1,7 +1,7 @@
 import React from 'react' ;
 import {BrowserRouter as Router, Route} from 'react-router-dom'; 
 import Navigation from '../Navigation'; 
-import HomePage from "../Home Page"; 
+import LandingPage from "../Landing Page"; 
 import SponsorsPage from '../Sponsors Page';
 import SignUpPage from "../Signup Page";
 import LoginPage from "../Login Page"; 
@@ -11,6 +11,11 @@ import DashboardEditProfilePage from '../Dashboard/Common/Edit Profile Page';
 import * as ROUTES from "../../config/routes"
 import { withAuthentication } from "../Session"
 import  DashboardGroupPage from '../Dashboard/Common/Group Page';
+import OurTeam from "../OurTeam";
+import OurWork from "../OurWork";
+import Contact from "../Contact";
+import Bootcamp from "../Bootcamp"
+import Projects from '../Projects';
 
 /**
  * @author Raj Shrimali and Vidhur Kumar
@@ -20,14 +25,20 @@ class App extends React.Component {
         return (
             <Router>
                 <Navigation/> 
-                <Route exact path={ROUTES.LANDING} component={HomePage} />
+                <Route exact path={ROUTES.LANDING} component={LandingPage} />
                 <Route path={ROUTES.SPONSORS} component={SponsorsPage} />
                 <Route path={ROUTES.LOGIN} component={LoginPage} />
                 <Route path={ROUTES.SIGNUP} component={SignUpPage} />
                 <Route path={ROUTES.DASHBOARD_HOME} component={Dashboard} />
                 <Route path={ROUTES.DASHBORD_EDIT_PROFILE} component={DashboardEditProfilePage}/>
                 <Route path={ROUTES.DASHBOARD_EVENT} component={DashboardEventPage}/>                
                 <Route path={ROUTES.DASHBOARD_GROUP} component={DashboardGroupPage} />
+
+                <Route path={ROUTES.PROJECTS} component={Projects} />
+                <Route path={ROUTES.BOOTCAMP} component={Bootcamp} />
+                <Route path={ROUTES.OUR_TEAM} component={OurTeam} />
+                <Route path={ROUTES.OUR_WORK} component={OurWork} />
+                <Route path={ROUTES.CONTACT} component={Contact} />
             </Router> 
         )
     }

frontend/src/components/Bootcamp/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, Container } from 'react-bootstrap';
+import Events from './sections/Introduction';
+import Footer from '../Footer';
+
+import Timeline from './sections/Timeline';
+import Introduction from './sections/Introduction';
+
+let divPadding = {
+  padding: "4em 0 8em 0",
+}
+
+let rightAlign = {
+  float: "right",
+}
+
+
+export default class Bootcamp extends React.Component {
+  render() {
+    return (
+      <div style={divPadding}>
+      <Introduction />
+      </div>
+    );
+  }
+}

frontend/src/components/Bootcamp/sections/Introduction.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { Container } from 'react-bootstrap';
+import Card from 'react-bootstrap/Card';
+import { FaFileExcel } from "react-icons/fa";
+//import CardDeck from 'react-bootstrap/CardDeck';
+//import portrait from '../assets/portrait.png';
+
+var divPadding = {
+  padding: "4em 0 4em 0",
+}
+
+var divPaddingInner = {
+  padding: "0 0 2em 0",
+}
+
+var noBorder = {
+  border: "none",
+}
+
+
+var lightBlue = {
+  backgroundColor: "#F1F9FF",
+}
+
+var container = {
+  display: flex,
+}
+export default class Introduction extends React.Component {
+  render() {
+    return(
+      <div style={divPadding}>
+      <Container style={container}>
+      <h3>Welcome to Bootcamp</h3>
+      <p>DSGT bootcamp is an immersive 11-week experience where you’ll
+        learn a variety of data science skills and work in teams to answer 
+        significant questions by analyzing data. Our mentors will host 
+        workshops and guide you through your projects. We work in iterative
+        milestones and provide feedback on your work.
+      </p>
+      </Container>
+      </div>
+    );
+  }
+}

frontend/src/components/Bootcamp/sections/Timeline.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Image, Row } from 'react-bootstrap';
+
+import timeline from './timeline.png';
+
+let blue = {
+  color: "#0063B9",
+}
+
+
+export default class Home extends React.Component {
+    render() {
+        return (
+          <div>
+          <Row className="justify-content-md-center"><h1 style={blue}>Our Work</h1> </Row>
+          <Image src={timeline} fluid/>
+          </div>
+        );
+      }
+    }

frontend/src/components/Contact/index.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { Button, Col, Container, Row } from 'react-bootstrap';
+import Form from 'react-bootstrap/Form';
+import Footer from '../Footer';
+
+let divPadding = {
+  padding: "4em 0 4em 0",
+}
+
+let divPaddingInner = {
+  padding: "2em 0 2em 0",
+}
+
+let blue = {
+  color: "#0063B9",
+}
+
+class ContactForm extends React.Component {
+  render() {
+    return(
+      <Form>
+        <Form.Group controlId="contactName">
+          <Form.Label>Name</Form.Label>
+          <Form.Control placeholder="Required field" />
+        </Form.Group>
+        <Form.Group controlId="contactEmail">
+          <Form.Label>Email address</Form.Label>
+          <Form.Control type="email" placeholder="Required field" />
+        </Form.Group>
+        <Form.Group controlId="contactMessage">
+          <Form.Label>Message</Form.Label>
+          <Form.Control as="textarea" rows="3" />
+        </Form.Group>
+      <Button variant="primary" type="submit">
+      Submit
+      </Button>
+      </Form>
+
+    );
+  }
+}
+
+export default class Contact extends React.Component {
+  render() {
+    return(
+      <div>
+      <Container style={divPadding}>
+      <Row className="justify-content-md-center" style={blue}><h1>Contact</h1> </Row>
+      <Row style={divPaddingInner}>
+        <Col xs={0} sm={6} md={8}>
+        Cras lacinia pulvinar ex. Integer mattis vitae tortor et bibendum. Praesent eu eros eget dolor interdum sollicitudin. Curabitur ac dolor non mi volutpat porta. Nullam dapibus eleifend metus, non fringilla quam interdum vel. Quisque tincidunt ut orci at faucibus. Nulla facilisi. Proin efficitur sapien sed massa feugiat pharetra. Sed non nisl sed lacus lobortis pellentesque non sed quam.
+
+        Nullam volutpat tortor nec efficitur auctor. Sed imperdiet erat et turpis lacinia, et pulvinar nunc imperdiet. Maecenas sit amet tempus ipsum, ac volutpat leo. Nulla finibus quis lectus at fermentum. In ultricies ultricies tortor, vitae consectetur diam imperdiet cursus. Morbi tincidunt, enim et accumsan blandit, augue tortor sodales magna, eu elementum erat dolor eu nunc. Phasellus hendrerit finibus iaculis. Cras a ligula sollicitudin, consectetur purus at, aliquet dolor. Cras sapien massa, lobortis non urna molestie, blandit malesuada erat. Sed in felis tellus. Donec sem enim, pretium nec posuere ac, tempor et nibh. Nam at lorem tristique, aliquet enim at, consequat leo. Ut non ultrices lorem.
+        </Col>
+        <Col>
+          <ContactForm />
+        </Col>
+      </Row>
+      </Container>
+      <Footer />
+      </div>
+    );
+  }
+}

frontend/src/components/Firebase/event.ts

@@ -3,8 +3,11 @@
  * Following Singleton model as expected from a tutorial online
  * Instantiate with a firebase app instance - will use that 
  */
+
+
+import firebase from "firebase/app";
 import Firebase from "./firebase"; 
-import {firestore, auth, functions} from "firebase/app";
+import firestore from "firebase/app";
 
 /**
  * @author Vidhur Kumar
@@ -138,7 +141,7 @@ class EventApi {
     async add_to_event_attendee_list(id: string, name: string) {
         let eventRef = this.db.collection("events").doc(id);
         return eventRef.update({
-            attendee_list: firestore.FieldValue.arrayUnion(name)
+            attendee_list: firebase.firestore.FieldValue.arrayUnion(name)
         });
     }
 
@@ -190,7 +193,7 @@ class EventApi {
         let eventRef = this.db.collection("events").doc(id);
 
         eventRef.update({
-            rsvp_list: firestore.FieldValue.arrayUnion(userName)
+            rsvp_list: firebase.firestore.FieldValue.arrayUnion(userName)
         });
     }
 }

frontend/src/components/Firebase/file.ts

@@ -3,7 +3,10 @@
  * support special, common uploads such as Venmo and Resume. 
  * This should be the POC for all google cloud storage functionality. 
  */
+
+import firebase from "firebase/app";
 import Firebase from "./firebase"; 
+import firestore from "firebase/app";
 
 
 

frontend/src/components/Firebase/groups.ts

@@ -3,7 +3,7 @@
  * for managing groups, mostly related to creating, deleting, etc. 
  */
 import Firebase from "./firebase";
-import {firestore} from "firebase/app";
+import firebase from "firebase/app";
 
 
 export default class GroupApi {
@@ -54,7 +54,7 @@ export default class GroupApi {
         // add user to group 
         const curr_uid = this._fbapp.user.get_current_uid(); 
         // console.log(name)
-        this.db.collection('users').doc(curr_uid).update({groups: firestore.FieldValue.arrayUnion(name)})
+        this.db.collection('users').doc(curr_uid).update({groups: firebase.firestore.FieldValue.arrayUnion(name)})
     }
 
     /**
@@ -75,7 +75,7 @@ export default class GroupApi {
             let individualRemovalPromise = this.db.collection('usergroups').doc(name).collection('members').get().then((members: any) => {
                 // for each member in here, update their document to not include this group 
                 members.docs.forEach((memberDocRef:any) => {
-                    this.db.collection('users').doc(memberDocRef.id).update({groups: firestore.FieldValue.arrayRemove(name)}); 
+                    this.db.collection('users').doc(memberDocRef.id).update({groups: firebase.firestore.FieldValue.arrayRemove(name)}); 
                     memberDocRef.ref.delete(); 
                 })
             });

frontend/src/components/Firebase/user.ts

@@ -5,7 +5,11 @@
  */
 import Firebase from "./firebase"; 
 import * as entity from "./entity"; 
-import {firestore, auth, functions} from "firebase/app";
+import firebase from "firebase/app";
+//import {auth, firestore, functions} from "firebase/app";
+import auth from "firebase/app";
+import firestore from "firebase/app";
+import functions from "firebase/app";
 
 import {DUES_SEMESTER, DUES_YEAR} from "../../config/config";
 /**
@@ -20,7 +24,7 @@ class UserApi {
         this._fbapp = firebaseApp; 
         this.db = firebaseApp.db; 
         this.auth = firebaseApp.app.auth(); 
-        this.auth.setPersistence(auth.Auth.Persistence.SESSION);
+        this.auth.setPersistence(firebase.auth.Auth.Persistence.SESSION);
         this.functions = this._fbapp.app.functions(); 
     }
 
@@ -228,7 +232,7 @@ class UserApi {
     async update_user_XP(uid: string, XP: number) {
         let userRef = await this.db.collection('users').doc(uid);
         return userRef.update({
-            XP: firestore.FieldValue.increment(XP)
+            XP: firebase.firestore.FieldValue.increment(XP)
         });
     }
 
@@ -275,8 +279,8 @@ class UserApi {
     async add_eventXP_to_user(uid: string, eventId: string, eventXP: number) {
         let userRef = await this.db.collection('users').doc(uid);
         userRef.update({
-            XP: firestore.FieldValue.increment(eventXP),
-            xp_history: firestore.FieldValue.arrayUnion({id: eventId, xp: eventXP}),
+            XP: firebase.firestore.FieldValue.increment(eventXP),
+            xp_history: firebase.firestore.FieldValue.arrayUnion({id: eventId, xp: eventXP}),
         });
 
         // let userRef = await this.db.collection('users').doc(uid);
@@ -450,7 +454,7 @@ class UserApi {
                 // we don't /need/ to wait for completion. 
                 promises.push(this.db.collection('usergroups').doc(element).collection("members").doc(user).set({})); 
             });
-            await this.db.collection('users').doc(user).update({groups: firestore.FieldValue.arrayUnion(groups)});
+            await this.db.collection('users').doc(user).update({groups: firebase.firestore.FieldValue.arrayUnion(groups)});
             //wait for completion 
             await promises; 
             return true; 
@@ -460,7 +464,7 @@ class UserApi {
 
     async addUserToGroup(uid: string, group: string) {
         // update the user's doc 
-        let p1 = this.db.collection('users').doc(uid).update({groups: firestore.FieldValue.arrayUnion(group)});
+        let p1 = this.db.collection('users').doc(uid).update({groups: firebase.firestore.FieldValue.arrayUnion(group)});
         let p2 = this.db.collection('usergroups').doc(group).collection("members").doc(uid).set({}); 
         await p1
             .then(() => {
@@ -509,7 +513,7 @@ class UserApi {
             // approve & add 
             if (response === 1) {
                 this.db.collection('usergroups').doc(name).collection('members').doc(uid).set({}); 
-                this.db.collection('users').doc(this.get_current_uid()).update({groups: firestore.FieldValue.arrayUnion(name)})     
+                this.db.collection('users').doc(this.get_current_uid()).update({groups: firebase.firestore.FieldValue.arrayUnion(name)})     
             }
             // no matter what, just delete the request 
             this.db.collection('usergroups').doc(name).collection('join_requests').doc(uid).delete(); 
@@ -530,7 +534,7 @@ class UserApi {
 
         if (perm) {
             // start the update operation 
-            const comp_promise = this.db.collection('users').doc(user).update({groups: firestore.FieldValue.arrayRemove(groups)});
+            const comp_promise = this.db.collection('users').doc(user).update({groups: firebase.firestore.FieldValue.arrayRemove(groups)});
             // delete from groups 
             groups.forEach(element => {
                 this.db.collection("usergroups").doc(element).collection("members").doc(user).delete(); 

frontend/src/components/Footer/Navigation.css

@@ -0,0 +1,20 @@
+/****
+ Used for both navigation bar at top and footer
+ ****/
+
+.main {
+    background: #001629;
+}
+
+.navbar, .navbar-default {
+  color: white !important;
+}
+
+
+.nav-link {
+  color: white ;
+}
+
+.nav-link:hover {
+    color: #338AFC;
+}