add ins link and favicon

cherylqian · cherylqian · commit ddba17deb20f · 2019-08-02T23:13:51.000+08:00
diff --git a/public/favicon.jpg b/public/favicon.jpg
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.jpg">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="theme-color" content="#000000">
   <!--
diff --git a/src/Footer.js b/src/Footer.js
@@ -1,13 +1,17 @@
 import React from "react";
-import { Mail, Facebook, Slack } from "react-feather";
+import { Mail, Facebook, Slack, Instagram } from "react-feather";
 
 const links = [
   {
     icon: <Mail />,
     address: "mailto:siggraphuiuc@gmail.com"
   },
   { icon: <Facebook />, address: "https://www.facebook.com/uiucacmsiggraph/" },
-  { icon: <Slack />, address: "https://siggraphuiuc.slack.com" }
+  { icon: <Slack />, address: "https://siggraphuiuc.slack.com" },
+  {
+    icon: <Instagram />,
+    address: "https://www.instagram.com/siggraph.uiuc/"
+  }
 ];
 
 const Footer = () => (
diff --git a/src/Gallery.js b/src/Gallery.js
@@ -10,7 +10,8 @@ const models = ["cookie", "gorillaobjrefined", "person2", "unicorn"];
 
 class Gallery extends Component {
   state = {
-    slideIndex: 0
+    slideIndex: 0,
+    loading: null
   };
 
   componentDidMount() {
@@ -99,7 +100,9 @@ class Gallery extends Component {
         that.start();
       },
       function(xhr) {
-        console.log((xhr.loaded / xhr.total) * 100 + "% Loaded");
+        that.setState({
+          loading: xhr.loaded !== xhr.total ? xhr.loaded / xhr.total : null
+        });
       },
       function(error) {
         console.log(error);
@@ -119,6 +122,7 @@ class Gallery extends Component {
   };
   render() {
     const { width, height } = this.props.size;
+    const { loading } = this.state;
     return (
       <>
         <div
@@ -128,6 +132,7 @@ class Gallery extends Component {
             this.mount = mount;
           }}
         />
+        {loading && <p>Loading {(loading * 100).toFixed(2)}%</p>}
         <div className="d-flex justify-content-between align-items-center slide-controls">
           <Button variant="outline-dark" onClick={() => this.nextSlide(-1)}>
             <ChevronLeft />
diff --git a/src/Navigation.js b/src/Navigation.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { BrowserRouter as Router, Route } from "react-router-dom";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { Container } from "react-bootstrap";
 
 import Header from "./Header";
@@ -33,14 +33,21 @@ class Navigation extends Component {
   render() {
     return (
       <Router basename={process.env.PUBLIC_URL}>
-        <DefaultLayout exact path="/" component={App} size={this.state} />
-        <DefaultLayout
-          path="/projects"
-          component={Projects}
-          size={this.state}
-        />
-        <DefaultLayout path="/about" component={About} size={this.state} />
-        <DefaultLayout path="/gallery" component={Gallery} size={this.state} />
+        <Switch>
+          <DefaultLayout exact path="/" component={App} size={this.state} />
+          <DefaultLayout
+            path="/projects"
+            component={Projects}
+            size={this.state}
+          />
+          <DefaultLayout path="/about" component={About} size={this.state} />
+          <DefaultLayout
+            path="/gallery"
+            component={Gallery}
+            size={this.state}
+          />
+          <DefaultLayout component={NotFound} />
+        </Switch>
       </Router>
     );
   }
@@ -67,6 +74,10 @@ const DefaultLayout = ({ component: Component, size, ...rest }) => {
 
 const Construction = () => <h1>This page is under construction</h1>;
 
-const NotFound = () => <h1>The page you're looking for does not exist :(</h1>;
+const NotFound = () => (
+  <h1 className="d-flex align-items-center justify-content-center">
+    The page you're looking for does not exist :(
+  </h1>
+);
 
 export default Navigation;
