adds routing, about page

Co-authored-by: robpedersendev <40696979+robpedersendev@users.noreply.github.com> Co-authored-by: informagician <6990987+informagician@users.noreply.github.com> Co-authored-by: JameaKidrick <50430635+JameaKidrick@users.noreply.github.com> Co-authored-by: daisymesa <42687274+daisymesa@users.noreply.github.com>
Le-Cache · Jan 3, 2020 · 9a69390 · 9a69390
1 parent 0a7c47f
commit 9a69390
Show file tree

Hide file tree

Showing 9 changed files with 593 additions and 132 deletions.
diff --git a/client/.gitignore b/client/.gitignore
@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/client/package.json b/client/package.json
@@ -7,8 +7,10 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.0",
+    "dotenv": "^8.2.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0"
   },
   "scripts": {

diff --git a/client/public/index.html b/client/public/index.html
@@ -1,22 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <link
+            href="https://fonts.googleapis.com/css?family=Lato&display=swap"
+            rel="stylesheet"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta
+            name="description"
+            content="Web site created using create-react-app"
+        />
+        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+        <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -25,12 +28,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+        <title>React App</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,6 +42,5 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+    --></body>
 </html>
diff --git a/client/src/App.js b/client/src/App.js
@@ -2,18 +2,10 @@ import React from 'react';
 import axios from 'axios';
 import CardsContainer from './components/main/cardsContainer';
 import Sidebar from './components/sidebar/sidebar';
+import { Route } from 'react-router-dom';
+import About from './components/main/about.js';
 import './styles/index.css';
-
-/*
-App
--Sidebar
---Logo (not a component)
---Tract Selection Filter...thing
---Navigation (About, Airtable, Slack)
--Main Card Thing
---Cards Component (house all the cards/introduce pagination)
----Individual card component
-*/
+require('dotenv').config();
 
 class App extends React.Component {
     constructor() {
@@ -26,13 +18,14 @@ class App extends React.Component {
 
     componentDidMount() {
         axios
-            .get(
-                'https://api.airtable.com/v0/appaTBcrHMzJR6ZnS/lecache?api_key=keyXAJzv0BQkXWbI8'
-            )
+            .get(process.env.REACT_APP_APIKEY)
             .then(res => {
                 console.log(res.data.records);
-                this.setState({ users: res.data.records });
-                // console.log(res.data.records[0].fields['First Name']);
+                this.setState({
+                    users: res.data.records.filter(
+                        record => record.fields['Approved']
+                    )
+                });
             })
             .catch(error => console.log(error));
     }
@@ -49,30 +42,69 @@ class App extends React.Component {
               });
     };
 
+    removeFromFilter = program => {
+        this.setState({
+            filters: this.state.filters.filter(item => {
+                return item !== program;
+            })
+        });
+    };
+
     render() {
-        if (this.state.users !== '') {
-            return (
-                <div className="app">
-                    <Sidebar
-                        filters={this.state.filters}
-                        handlesChanges={this.handlesChanges}
-                    />
-                    <CardsContainer
-                        users={this.state.users.filter(user => {
-                            const program = 'Which program are you in?';
-                            return this.state.filters.length > 0
-                                ? this.state.filters.includes(
-                                      user.fields[program]
-                                  )
-                                : user;
-                        })}
-                        handlesChanges={this.handlesChanges}
-                    />
-                </div>
-            );
-        } else {
-            return <h2>Loading..</h2>;
-        }
+        return (
+            <>
+                {this.state.users !== '' ? (
+                    <div className="app">
+                        <Sidebar
+                            filters={this.state.filters}
+                            handlesChanges={this.handlesChanges}
+                        />
+                        <Route
+                            exact
+                            path="/"
+                            render={props => (
+                                <CardsContainer
+                                    {...props}
+                                    filters={this.state.filters}
+                                    users={this.state.users.filter(user => {
+                                        const program =
+                                            'Which program are you in?';
+                                        return this.state.filters.length > 0
+                                            ? this.state.filters.includes(
+                                                  user.fields[program]
+                                              )
+                                            : user;
+                                    })}
+                                    handlesChanges={this.handlesChanges}
+                                    removeFromFilter={this.removeFromFilter}
+                                />
+                            )}
+                        />
+                        <Route exact path="/about" component={About} />
+                    </div>
+                ) : (
+                    <div className="app">
+                        <Sidebar
+                            filters={this.state.filters}
+                            handlesChanges={this.handlesChanges}
+                        />
+                        <Route
+                            exact
+                            path="/"
+                            render={props => (
+                                <CardsContainer
+                                    {...props}
+                                    filters={this.state.filters}
+                                    users={{}}
+                                    handlesChanges={this.handlesChanges}
+                                    removeFromFilter={this.removeFromFilter}
+                                />
+                            )}
+                        />
+                    </div>
+                )}
+            </>
+        );
     }
 }
 

diff --git a/client/src/components/main/about.js b/client/src/components/main/about.js
@@ -0,0 +1,109 @@
+import React from 'react';
+
+const About = () => {
+    return (
+        <main className="about-page">
+            <h2 className="about-header">What is Le Cache?</h2>
+            <div className="about-info">
+                <p>
+                    LeCache is a directory where you can find contact details
+                    for Lambda students and alumni.{' '}
+                </p>
+                <h3>
+                    <strong>What students can do: </strong>
+                </h3>
+                <ul>
+                    <li>
+                        Be featured on the site: Submit profile picture,
+                        location, portfolio, LinkedIn, and GitHub
+                    </li>
+                    <li>See examples of fellow students' work.</li>
+                    <li>
+                        Signal if they are willing to relocate for a role,
+                        passively open to new opportunities, or actively seeking
+                        new opportunities.
+                    </li>
+                </ul>
+                <h3>
+                    <strong>For Recruiters and Hiring Managers: </strong>
+                </h3>
+                <ul>
+                    <li>
+                        See the best and brightest that Lambda School has to
+                        offer.{' '}
+                    </li>
+                    <li>
+                        You can filter to specific tracks so you only see
+                        profiles relevant to you.
+                    </li>
+                </ul>
+                <h3>
+                    <strong>For Non-Lambda Students: </strong>
+                </h3>
+                <p>
+                    See what Lambda grads and students have built over their
+                    time while enrolled within their program.{' '}
+                </p>
+                <p>
+                    Inspired by <a href="">Latinx Who Design</a> by Pablo
+                    Stanley{' '}
+                </p>
+            </div>
+            <div className="about-info about-second-div">
+                <h3>
+                    <strong>The Team</strong>
+                </h3>
+                <p>
+                    Le Cache was created during a Hackathon hosted by Lambda on
+                    January 2, 2020.
+                </p>
+                <div>
+                    <ul>
+                        <div>
+                            <li>
+                                <a href="">Eileen Cuevas</a> - Web Developer
+                            </li>
+                            <li>
+                                <a href="">Daisy Mesa</a> - Web Developer
+                            </li>
+                            <li>
+                                <a href="">Marc Dandoy</a> - UX/UI Designer
+                            </li>
+                        </div>
+                        <div>
+                            <li>
+                                <a href="">Milo Rastgoo</a> - Web Developer
+                            </li>
+                            <li>
+                                <a href="">Jamea Kidrick</a> - Web Developer
+                            </li>
+
+                            <li>
+                                <a href="">Laura Giron</a> - UX Designer /
+                                Project Manager
+                            </li>
+                        </div>
+
+                        <div>
+                            <li>
+                                <a href="">Robert Pedersen</a> - Web Developer
+                            </li>
+                        </div>
+                    </ul>
+                </div>
+                <hr className="divider" />
+                <div className="footer">
+                    <a href="">
+                        <h3>
+                            <strong>
+                                <span>&larr;</span> Back to Directory
+                            </strong>
+                        </h3>
+                    </a>
+                </div>
+            </div>
+        </main>
+    );
+};
+
+export default About;