Sidebar component

babel.config.json

@@ -5,5 +5,5 @@
         {
           "loose": true
         }
-      ]]
+      ], "@babel/plugin-transform-runtime" ], 
 }

package.json

@@ -10,6 +10,7 @@
     "@babel/core": "^7.1.2",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.16.8",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.4",
@@ -23,17 +24,18 @@
     "webpack-cli": "^3.1.2"
   },
   "dependencies": {
+    "@formspree/react": "^2.2.4",
     "animate.css": "^4.1.1",
     "animate.css-react": "^1.1.0",
-    "@formspree/react": "^2.2.4",
     "axios": "^0.19.1",
     "merge-images": "^2.0.0",
     "react": "^16.5.2",
     "react-bouncing-text": "0.0.4",
     "react-dom": "^16.5.2",
     "react-json-view": "^1.19.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.0",
     "requirements": "^1.3.2",
-    "run": "^1.4.0"
+    "run": "^1.4.0",
+    "swagger-parser": "^10.0.3"
   }
 }

src/Home.jsx

@@ -1,57 +1,23 @@
+
 import React from 'react';
 import './styles/main.scss';
-import Form from './Form.jsx';
-import Footer from './Footer.jsx';
 import Header from './Header.jsx';
+import Sidebar from './Sidebar.jsx';
+
+function Home({api}) {
 
-function Home() {
-  const { useState } = React;
-  const [method, setMethod] = useState('');
-  const [endpoint, setEndpoint] = useState('');
-  const [showForm, setShowForm] = useState(false);
-
-  const toggleButton = (method, endpoint) => {
-    setMethod(method);
-    setEndpoint(endpoint);
-    setShowForm(true);
-  }
+const createSidebarData = (api) => {
+  return null
+}
 
     return (
         <>
         <Header />
-        <div className="main">
-          <div className="sidebar">
-            <div className="sidenav">
-            <a href="#" onClick={() => toggleButton("GET",'/bitlinks/{Your_bitlink}')}><span className="Get">Retrieve</span> a Bitlink</a>
-            <a href="#" onClick={() => toggleButton("GET",'/bitlinks/{Your_bitlink}/clicks')}><span className="Get">GET</span> clicks for a Bitlink</a>
-            <a href="#" onClick={() => toggleButton("GET",'/groups/{Your_group_guid}/bitlinks')}><span className="Get">Retrieve</span> Bitlinks by Group</a>
-            <a href="#" onClick={() => toggleButton("POST",'/expand')}><span className="Post">Expand</span> a Bitlink</a>
-            <a href="#" onClick={() => toggleButton("POST",'/bitlinks')}><span className="Post">Create</span> a Bitlink</a>
-            <a href="#" onClick={() => toggleButton("POST",'/shorten')}><span className="Post">Shorten</span> a Link</a>
-            <a href="#" onClick={() => toggleButton("PATCH",'/bitlinks/{bitlink}')}><span className="Patch">Update</span> a Bitlink</a>
-            <a href="#" onClick={() => toggleButton("PATCH",'/user')}><span className="Patch">Update</span> a User</a>
-            <a href="#" onClick={() => toggleButton("PATCH",'/groups/{group_guid}')}><span className="Patch">Update</span> a Group</a>
-            <a href="#" onClick={() => toggleButton("DELETE",'/groups/{group_guid}')}><span className="Delete">Delete</span> a Group</a>
-          </div>
-        </div>
-        <div className="center">
-            {!showForm && <div>
-              <p>
-                Introduction: Welcome to the Bitly API! If you'd like to use Bitly to shorten, brand, share, or retrieve data from links programmatically, you've come to the right place.If you're interested in integrating
-              </p>
-              <p>
-                your app or software platform with Bitly, you'll need to register and authenticate your service with our API. To do so please contact us at [email protected]
-              </p>
-              <p>
-                We currently provide our documentation in the form of an OpenAPI 2.0 document. We do not support any code-generation at this time but feel free to use the specification if you would like.
-              </p>
-            </div> }
-          <Footer />
-
-          {(showForm) && <Form endpoint={endpoint} method={method} />}
-
-          </div>
-        </div>
+        {/*example.map(endpointObject=>{
+          return <div><span>{endpointObject.title}</span></div>
+        })*/}
+        <Sidebar items = {createSidebarData(api)}/>
+
     </>
   );
 

src/Sidebar.jsx

@@ -0,0 +1,50 @@
+
+import React from 'react';
+import './styles/new_sidebar.scss';
+
+const Sidebar = ({items}) => {
+    const example = [{
+    title: "Retrieve a Bitlink", type: "GET", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Get Clicks for a Bitlink", type: "GET", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Retrieve Bitlinks by Group", type: "GET", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Expand a Bitlink", type: "POST", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Create a Bitlink", type: "POST", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Shorten a Link", type: "POST", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Update a Bitlink", type: "PATCH", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Update a User", type: "PATCH", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Update a Group", type: "PATCH", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Delete a Group", type: "DEL", path: "/bitlinks/{bitlink}"
+    }]
+
+    const methodtypefunction = (methodtype) => {
+            if(methodtype === 'GET') { 
+                return 'green'
+            } else if (methodtype === 'POST') 
+                { return 'blue'
+            } else if (methodtype === 'PATCH') {
+                return 'orange'
+            } else if (methodtype === 'DEL') {
+                return 'red'
+            }
+    }
+
+    return (
+      <div className='sidebar-new'>
+        {example.map(endpointObject=>{
+          return <div className='sidebar-new-object'><div className={`sidebar-type--${methodtypefunction(endpointObject.type)}`}><h4>{endpointObject.type}</h4></div><div className='sidebar-title'><a href="#"><h5>{endpointObject.title}</h5></a></div></div>
+        })}
+
+      </div>
+    );
+  }
+
+  export default Sidebar;

src/Team.jsx

@@ -16,6 +16,7 @@ function Team({year}) {
 
             <div className="sidebar">
                 <a onClick={() => setSelectedYear(2022)}>2022</a>
+                <br/>
                 <a onClick={() => setSelectedYear(2021)}>2021</a>
             </div>
             <div className="center">

src/index.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+
+import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import{
      HashRouter as Router,
@@ -10,8 +11,33 @@ import './styles/main.scss';
 import Home from './Home.jsx';
 import Team from './Team.jsx';
 import APIinfo from './APIinfo.jsx';
+import SwaggerParser from "@apidevtools/swagger-parser";
+import AngesComponent from './wintern-bios/2022/AngesComponent.jsx';
+import KadiatouComponent from './wintern-bios/2022/KadiatouComponent.jsx';
+import LaurenComponent from './wintern-bios/2022/LaurenComponent.jsx';
+import SkylerComponent from './wintern-bios/2022/SkylerComponent.jsx';
+import MargaretComponent from './wintern-bios/2022/MargaretComponent.jsx';
 
+import Header from './Header.jsx';
 const App = () => {
+const [api, setApi] = useState(null);
+
+useEffect(() => {
+  const openSwaggerFile = async () => {
+    try {
+      let api = await SwaggerParser.validate("./static/v4.json");
+      setApi(api);
+      console.log("API name: %s, Version: %s", api.info.title, api.info.version);
+      console.log(api);
+    }
+    catch(err) {
+      console.error(err);
+    }
+  }
+
+  openSwaggerFile();
+}, [])
+
     return (
       <Router>
         <Switch>
@@ -24,13 +50,34 @@ const App = () => {
           <Route path="/team-2022">
             <Team year={2022} />
           </Route>
+          <Route path="/ange-louis">
+            <Header />
+            <AngesComponent />
+          </Route>
+          <Route path="/kadiatou-diallo">
+            <Header />
+            <KadiatouComponent />
+          </Route>
+          <Route path="/lauren-avilla">
+            <Header />
+            <LaurenComponent />
+          </Route>
+          <Route path="/skyler-basco">
+            <Header />
+            <SkylerComponent />
+          </Route>
+          <Route path="/margaret-diaz">
+            <Header />
+            <MargaretComponent />
+          </Route>
           <Route path="/">
-            <Home />
+          {api ? <Home api={api} /> : <div>Loading ...</div>}
           </Route>
         </Switch>
     </Router>
     );
-}
+
+    }
 
 ReactDOM.render(<App />, document.getElementById('app'));
 

src/styles/2022_team_styles/_skyler-bio.scss

@@ -11,8 +11,11 @@
     font-weight: 900 !important;
 }
 
+
 .about-content h1, h2, h3 {
     font-family: 'Poppins', sans-serif !important; 
+    color:black !important;
+
 }
 
 .about-content {
@@ -21,7 +24,8 @@
 
 .about-content p{
     text-align: center !important;
-
+    color:black !important;
+
 }
 .aboutallcontent {
     text-align: center;
@@ -31,13 +35,22 @@
     font-size: 25px;
     font-family: 'Poppins', sans-serif !important; 
     font-weight: bolder !important;
+    color:black !important;
 
 }
 
 .main-container h2 {
     font-size: 18px;
     font-family: 'Poppins', sans-serif !important; 
     font-weight: bolder !important;
+    color:black !important;
+
+}
+
+.main-container{
+    background:#F2F1FF;
+    border: 1px solid black;
+    box-shadow: 3px 3px black;
 
 }
 
@@ -63,6 +76,9 @@
 .main-container p {
     text-align: left;
     font-family: 'Poppins', sans-serif !important; 
+    color:black !important;
+    font-size: 17px;
+
 
 }
 
@@ -74,12 +90,23 @@
     text-align: center;
 }
 
+.skyler-giphys {
+    display: block;
+    padding: 10px;
+    width: 200px;
+    height: auto;
+    text-align: center;
+    box-shadow: 3px 3px black;
+    border: 1px solid black;
+    background-color: white;
+}
+
 .main-container {
     display: table;
     overflow: hidden;
     min-height: 4200px; /* USE THIS TO ADJUST FIXED CONTAINER HEIGHT */
-    padding-left: 250px;
-    padding-right: 250px;
+    padding-left: 330px;
+    padding-right: 330px;
    /* min-height: 1300px !important; 
     /* increase size of div according to contents? https://stackoverflow.com/questions/20814855/how-to-increase-size-of-div-according-to-its-contents
     /*
@@ -97,6 +124,9 @@
     padding: 10px;
     width: 200px;
     height: auto;
+    box-shadow: 3px 3px black;
+    border: 1px solid black;
+    background-color: white;
 }
 
 
@@ -229,7 +259,7 @@
     padding: 0px;
     width: auto;
     height: 250px;
-    border-radius: 10px;
+    border-radius: 0px;
     box-shadow: 3px 3px black;
     border: 1px solid black;
 
@@ -242,7 +272,7 @@
     padding: 0px;
     width: auto;
     height: 250px;
-    border-radius: 10px;
+    border-radius: 0px;
     box-shadow: 3px 3px black;
     border: 1px solid black;
 }
@@ -281,6 +311,8 @@
 .contact-formspree textarea {
     font-family: 'Poppins', sans-serif !important;  
     width: 400px; 
+    border: 1px solid black;
+
 }
 
 .contact-formspree-button button p {