Updated "about us"

.vscode/settings.json

@@ -13,6 +13,7 @@
     "cSpell.words": [
         "csrf",
         "definitelytyped",
-        "promisified"
+        "promisified",
+        "Sotong"
     ]
 }

src/static/App.tsx

@@ -3,14 +3,15 @@ import axios from "axios";
 import { BrowserRouter, Switch, Route } from "react-router-dom";
 import { HomePage } from "./components/Home";
 import { IUser, User } from "../models/User";
-import { Navbar } from "./components/Navbar";
+import { Navbar } from "./components/Navbar/Navbar";
 import { Footer } from "./components/Footer";
 import SotongGuidePage from "./components/SotongGuide";
 import PrivacyPolicyPage from "./components/PrivacyPolicy";
 import UserViewPage from "./components/UserView";
 import TestBank from "./components/TestBank";
 import UserProfilePage from "./components/UserProfile";
 import PCP from "./components/PCP";
+import ArbitraryPage from "./components/ArbitraryPage/ArbitraryPage";
 
 interface IAppState {
   userData?: IUser;
@@ -71,6 +72,26 @@ class App extends React.Component<{}, Readonly<IAppState>> {
                   render={() => <SotongGuidePage appState={this.state} />}
                   path="/guide"
                 />
+                <Route
+                  render={() => <ArbitraryPage appState={this.state} />}
+                  path="/arbitraryPage"
+                />
+                <Route
+                  render={() => <ArbitraryPage appState={this.state} />}
+                  path="/events"
+                />
+                <Route
+                  render={() => <ArbitraryPage appState={this.state} />}
+                  path="/sponsorships"
+                />
+                <Route
+                  render={() => <ArbitraryPage appState={this.state} />}
+                  path="/newsletters"
+                />
+                <Route
+                  render={() => <ArbitraryPage appState={this.state} />}
+                  path="/joinUs"
+                />
                 <Route
                   render={() => <UserViewPage appState={this.state} />}
                   path="/users"

src/static/components/About/LinkToAbout.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+function LinkToAbout() {
+  return (
+    <Link className = "tab" to="/about">
+        About
+    </Link>
+  );
+}
+
+export default LinkToAbout;

src/static/components/ArbitraryPage/ArbitraryPage.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { IAppState } from "../../App";
+import axios from "axios";
+import { IGuideResponse } from "../../../controllers/contentController";
+interface ISGState {
+    markdown?: string;
+    editLink?: string;
+    html?: string;
+    toc?: string;
+    fetchTime: Date;
+}
+
+const initialSGState: ISGState = {
+    markdown: undefined,
+    editLink: undefined,
+    html: undefined,
+    toc: undefined,
+    fetchTime: undefined
+};
+
+class ArbitraryPage extends React.Component<{ appState: IAppState }, ISGState> {
+    constructor(props) {
+        super(props);
+        this.state = initialSGState;
+        this.refreshGuide = this.refreshGuide.bind(this);
+    }
+
+    componentWillMount() {
+        this.refreshGuide();
+    }
+
+    refreshGuide(force: Boolean = false) { // This controls the md
+        axios.get<IGuideResponse>("/api/guide" + (force ? "?force=true" : ""))
+        .then(data => {
+            this.setState({
+                markdown: data.data.md,
+                // html: data.data.html, <- The main bulk of text
+                editLink: data.data.editLink,
+                // toc: data.data.toc, <- Contents page
+                fetchTime: data.data.fetchTime
+            });
+        });
+    }
+
+    render() {
+        return(
+            <div className="sotong-guide page mt-2">
+                <div className="row align-items-center">
+                    <div className="col d-flex">
+                        <h1 className="mb-0">Arbitrary Information</h1>
+                    </div>
+                </div>
+                <div className="divider" />
+                <div className="row">
+                    <div className="col">
+                        <small className="text-muted">
+                            Help make this guide better! { this.state.editLink ?
+                                <a href={this.state.editLink} target="_blank">Edit the guide.</a> :
+                                <a href="/auth/facebook">Sign In</a>
+                            }
+                            {this.state.fetchTime ? ` | Last updated: ${this.state.fetchTime.toString()} | ` : ""}
+                            {this.props.appState.userData && this.props.appState.userData.admin ? <a href="#" onClick={() => this.refreshGuide(true)}>Refresh</a> : ""}
+                        </small>
+                    </div>
+                </div>
+                <div className="row mt-4">
+                    { !this.state.markdown && <h3 className="pl-4">Loading...</h3> }
+                    <div className="col-md-3 toc" dangerouslySetInnerHTML={{ __html: this.state.toc }}>
+                    </div>
+                    <div className="col-md-9" dangerouslySetInnerHTML={{ __html: this.state.html}}>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ArbitraryPage;

src/static/components/Events/LinkToEvents.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+function LinkToEvents() {
+  return (
+    <Link className = "tab" to="/events">
+        Events
+    </Link>
+  );
+}
+
+export default LinkToEvents;

src/static/components/Home.tsx

@@ -1,12 +1,10 @@
-import React, { CSSProperties, StatelessComponent } from "react";
+import React, { CSSProperties } from "react";
 import { Link } from "react-router-dom";
-import coverImg from "../assets/cover.jpg";
+import coverImg from "../assets/pp.jpeg";
 import squidImg from "../assets/squid.png";
 import oldManImg from "../assets/oldman.png";
 import phoneImg from "../assets/phone.png";
 
-import { PromiseProvider } from "mongoose";
-
 export const HomePage = () => {
 
     const backgroundImgStyle: CSSProperties = {
@@ -18,7 +16,7 @@ export const HomePage = () => {
         icon: string;
     }
 
-    const IntroBlock: StatelessComponent<IntroBlockProps> = (props) => (
+    const IntroBlock = (props) => (
         <div className="col-md-4">
             <div className="row">
                 <div className="col-3 col-sm-12">
@@ -39,16 +37,20 @@ export const HomePage = () => {
     return (
         <div className="homepage">
             <div className="row">
-                <div className="hero angle--bottom-right" style={backgroundImgStyle}></div>
+                <div className="hero" style={backgroundImgStyle}></div>
             </div>
             <div className="row mt-3">
                 <div className="col title">
                     <h2>UCLA</h2>
-                    <h1>Singaporean Students Association</h1>
+                    <h1>Singapore Students Association</h1>
                     <h5>Your home to all things Singaporean at UCLA!</h5>
                 </div>
             </div>
             <div className="divider" />
+            <h4>About us!</h4>
+                <p>
+                The Singapore Students' Association is a student-led organisation that aims to act as a community for Singaporean students at UCLA. We hope to serve as a familiar society that provides support and comfort for students of similar backgrounds thousands of miles away from home. The organisation also hopes to educate students not of Singaporean origin of the culture through sharing and communication between our members and the rest of the UCLA community. We welcome anyone who has lived/studied in Singapore, has Singaporean friends, or who feels connected to Singaporean culture in any way.
+            </p>
             <div className="row mt-4 directions">
                 <IntroBlock heading="New to UCLA" icon={squidImg}>
                     <p>Get oriented with our <Link to="/guide">Sotong Guide</Link> for incoming freshmen and <a href="/auth/facebook">sign up</a> for

src/static/components/JoinUs/LinkToJoin.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+function LinkToJoin() {
+  return (
+    <Link className="tab" to="/joinUs">
+        Join Us!
+    </Link>
+  );
+}
+
+export default LinkToJoin;

src/static/components/Navbar/Navbar.css

@@ -0,0 +1,31 @@
+.objs {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.tabs{
+    display: flex;
+    flex-direction: row;
+    margin-left: 25vw;
+    align-content: center;
+    display: block;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+.ssaLogo img{
+    display: flex;
+    margin-left: 20px;
+    margin-right: 5px;
+    height: 4vw;
+    width: 4vw;
+}
+
+.tab {
+    text-align: center;
+    margin-top: 10px;
+    margin-left: 0.5vw;
+}

src/static/components/Navbar/Navbar.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import ssaLogo from "../../assets/ssaLogo.png";
+import f_logo from "../../assets/f_logo.png";
+import "./Navbar.css";
+import { NavItem, Nav } from "reactstrap";
+import { Link } from "react-router-dom";
+import SotongGuideDropdown from "../SotongGuideDropdown/SotongGuideDropdown";
+import LinkToAbout from "../About/LinkToAbout";
+import LinkToJoin from "../JoinUs/LinkToJoin";
+import LinkToNewsletters from "../Newsletters/LinkToNewsletters";
+import LinkToEvents from "../Events/LinkToEvents";
+import LinkToSponsorships from "../Sponsorships/LinkToSponsorships";
+
+export const Navbar = ({
+  appState: { userData }
+}) => {
+  const userIconOrSignIn = userData ? (
+    <img className="img-fluid rounded profile-img" src={userData.image} />
+  ) : (
+    <a className="nav-link fb-link" href="/auth/facebook">
+      <img src={f_logo} className="f-logo" />
+      Sign In
+    </a>
+  );
+
+  return (
+    <Nav className="navbar fixed-top flex-md-nowrap p-0">
+      <div className="objs">
+        <Link to="/">
+          <div className="ssaLogo">
+            <img src={ssaLogo} className="ssaLogo" />
+          </div>
+        </Link>
+        <Nav className="ml-auto pr-1 pr-md-0 tabs">
+          <LinkToAbout />
+          <LinkToEvents />
+          <LinkToSponsorships />
+          <LinkToNewsletters />
+          <LinkToJoin />
+          <SotongGuideDropdown userData = {userData} />
+          <NavItem>{userIconOrSignIn}</NavItem>
+        </Nav>
+      </div>
+    </Nav>
+  );
+};