Merge pull request #82 from heidiyoora/zip

Complete home page makeover

README.md

@@ -1,9 +1,9 @@
-![Splash Image](https://res.cloudinary.com/mrtommyliang/image/upload/v1614012242/DraQLA/bannerlarge_o9khsj.png) <br>
+![Splash Image](./client/assets/splashgif.gif) <br>
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/oslabs-beta/DraQLa/blob/main/LICENSE) ![GitHub package.json version](https://img.shields.io/badge/version-v1.0.0-blue) [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/oslabs-beta/DraQLa/issues) ![Stars](https://img.shields.io/github/stars/oslabs-beta/DraQLa?color=red)
 
 # DraQLa 
 
-DraQLA is a GraphQL migration assistance tool that empowers developers to build GraphQL schemas by introspecting existing PostGreSQL databases, all without writing any code. 
+DraQLa is a GraphQL migration assistance tool that empowers developers to build GraphQL schemas by introspecting existing PostGreSQL databases, all without writing any code. 
 
 
 Accelerated by [OS Labs](https://github.com/oslabs-beta/)
@@ -12,48 +12,58 @@ Accelerated by [OS Labs](https://github.com/oslabs-beta/)
 Visit [draqlabs.io](https://draqlabs.io) to sink your teeth into the tool. 
 
 ## Features
-* Exportable custom GraphQL schema (including resolvers, and mutations) 
+* Exportable custom GraphQL schema (including resolvers and mutations) 
 * Visual interactive diagram of current PostgreSQL database
 * Advice Console that provides high level breakdown of the generated boilerplate
 * Temporary dummy server and sample query/mutation to test the personalized schema with GraphQL's Playground GUI
 * Encrypted URI on client and server side to keep your data private
 
 ## How does DraQLa work? 
-First, start by importing the desired PostgreSQL database that you want to convert into a GraphQL API and enter the URI as prompted. (If you don't have one, feel free to test with our Sample Database!) 
+First, you enter the database URI that you want to convert into a GraphQL API. Then, DraQLa encrypts your URI to ensure your privacy. Or feel free to test with our Sample Database!<br>
 
 DraQLa will immediately start by extracting all of your database's tables and relationships, and will generate compatible GraphQL schemas, which consists of types and their corresponding resolvers. <br><br>
 ![graph](./client/assets/modal.gif)
 
+<br>
 DraQLa also features a user friendly visual representation that depicts the parts of your database that can now be queried and manipulated via GraphQL. <br><br>
-![graph](./client/assets/graphgif.gif)
+
+![graphgif](./client/assets/graphgif.gif)
 
 The Advice Console provides an overview on:
   * GraphQL 
   * how you and your clients can access and manipulate your database
   * a sample query and mutation <br><br>
 ![advice.gif](./client/assets/advice.gif) 
 
-
+<br>
 In addition to your new schema, DraQLa spins up a temporary GraphQL server to allow you to test out the sample query via GraphQL's Playground. <br><br>
-![playground.gif](./client/assets/playground.gif)
 
+![playground.gif](./client/assets/playground.gif)
 
-When you're ready to adopt your schema, click "Export" to receieve the code and further integration instructions.
+<br>
+When you're ready to adopt your schema, click "Export" to receive the code and further integration instructions.
+<br><br>
 
 ## How To Contribute
-We would love for you to test our application and submit any issues you encouter. Please feel free to fork your own repository to and submit your own pull requests.
+We would love for you to test our application and submit any issues you encouter. Please feel free to fork your own repository and submit your own pull requests.
 
-How you can contribute: 
+Things you can do to contribute: 
 * Bug fixes
 * Implementing features
 * Submitting or resolving GitHub issues
 * Help market our application
+<br><br>
 ## Developers
-* [Daniel Dolich](https://github.com/danieldolich)
-* [Emily Krebs](https://github.com/emilykrebs)
-* [Heidi Kim](https://github.com/heidiyoora)
-* [Ross Sarcona](https://github.com/RossRSarc)
-* [Tommy Liang](https://github.com/mrtommyliang)
+Daniel Dolich || [LinkedIn](https://www.linkedin.com/in/danieldolich/) | [GitHub](https://github.com/danieldolich)
+
+Emily Krebs || [LinkedIn](https://www.linkedin.com/in/emilyrkrebs/) | [GitHub](https://github.com/emilykrebs)
+
+Heidi Kim || [LinkedIn](https://www.linkedin.com/in/heidiykim/) | [GitHub](https://github.com/heidiyoora)
+
+Ross Sarcona || [Linkedin](https://www.linkedin.com/in/rosssarcona/) | [GitHub](https://github.com/RossRSarc)
+
+Tommy Liang || [LinkedIn](https://www.linkedin.com/in/mrtommyliang/) | [GitHub](https://github.com/mrtommyliang)
+
 
 ## License
-This project is licensed under the MIT License
+This project is licensed under the [MIT License](https://github.com/oslabs-beta/DraQLa/blob/main/LICENSE)

client/App.jsx

@@ -1,4 +1,4 @@
-import React, { useReducer, lazy, Suspense } from 'react';
+import React, { useReducer, lazy, Suspense, useEffect } from 'react';
 import { Route, Switch, Link, useLocation } from 'react-router-dom';
 import NavBar from './components/navbar';
 
@@ -17,6 +17,21 @@ const App = () => {
 
   const [generalState, generalDispatch] = useReducer(generalReducer, initialGeneralState);
 
+  useEffect(() => {
+    const nav = document.getElementById('NavBarContainer').style;
+    const html = document.querySelector('html').style;
+    const appHeader = document.getElementById('appHeader').style;
+
+    if (location.pathname === '/') {
+      nav.position = 'fixed';
+      appHeader.justifyContent = 'flex-end';
+    } else {
+      html.background = '$currentline';
+      nav.position = '';
+      appHeader.justifyContent = 'space-between';
+    }
+  });
+
   return (
     <GeneralContext.Provider
       value={{
@@ -25,31 +40,21 @@ const App = () => {
       }}>
 
       <div id='appHeader'>
-        {location.pathname === '/app' && <Link to='/' onClick={() => {
-          // const body = document.querySelector('body');
-          // body.style.background = `radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);`;
-        }}>
+        {location.pathname === '/app' && <Link to='/'>
           <img
             className='logo'
             id='logo'
             src='./assets/logoclear.png'
             alt='DraQLa Logo'
-            height='80px'
-            width='80px'
+            height='100px'
+            width='100px'
           ></img>
-          {/* <img
-            id='logotext'
-            src='./assets/logotext.png'
-            alt='DraQLa Text'
-            height='65px'
-            width='150px'
-          ></img> */}
-
+
         </Link>}
         <NavBar location={location.pathname}/>
       </div>
 
-      <Suspense fallback={<div>YOOOO</div>}>
+      <Suspense fallback={<div id='lazy'></div>}>
         <Switch>
           <Route path='/app' component={AppPage} />
           <Route exact path='/' component={HomePage} />

client/components/navbar.jsx

@@ -10,14 +10,15 @@ export default function navbar({ location }) {
 
   let navbarDisplay;
 
+  // conditional rendering depending on URL endpoint
   if (location === '/'){
     navbarDisplay = (
       <>
-        <a href="#overviewText" className="link">
+        <a href="#about" className="link">
           About
         </a>
-        <a href="#teamHeader" className="link">
-          Team
+        <a href="#contact" className="link">
+          Contact Us
         </a>
         <a
           href="https://github.com/oslabs-beta/DraQLa"
@@ -31,9 +32,6 @@ export default function navbar({ location }) {
           to="/app"
           className="link"
           onClick={() => {
-            const body = document.querySelector('body');
-            body.style.background = '#282a36;';
-
             setTimeout(generalDispatch({ type: 'OPEN_URI_MODAL' }), 1000);
           }}
         >
@@ -73,9 +71,8 @@ export default function navbar({ location }) {
       </>
     );
   }
-
   return (
-    <div className="NavBarContainer">
+    <div id="NavBarContainer">
       {navbarDisplay}
     </div>
   );

client/containers/aboutContainer.jsx

@@ -1,9 +1,28 @@
-import React from 'react'
+import React from 'react';
 
 export default function aboutContainer() {
   return (
-    <div>
-
+    <div id='about'>
+      <div className='aboutFlexItem'>
+        <img src='../assets/story.png'></img>
+        <h3>Your Story</h3>
+        <p>You are seeking an upgrade from your REST API framework to GraphQL but the evolution seems daunting.</p>
+      </div>
+      <div className='aboutFlexItem'>
+        <img src='../assets/idea.png'></img>
+        <h3>Our Vision</h3>
+        <p>DraQLa is a GraphQL migration assistance tool that empowers developers to build GraphQL schemas, without writing any code.</p>
+      </div>
+      <div className='aboutFlexItem'>
+        <img id='feature' src='../assets/logoclear.png'></img>
+        <h3>Features</h3>
+        <p>
+          Custom GraphQL schema <br></br>
+          Advice Overview <br></br>
+          Interactive Visualizer <br></br>
+          Testing Opportunities <br></br>
+        </p>
+      </div>
     </div>
-  )
+  );
 }

client/containers/contactContainer.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+export default function contactContainer() {
+  return (
+    <div id='contact'>
+      <div className ='contactDescription'>
+        <hr />
+        <h3> Please feel free to submit <br></br>any comments or suggestions! </h3>
+      </div>
+      <form id='contactForm' className='topBefore' action='https://formspree.io/f/xyybqywd' method='POST'>
+        <input id='name' type='text' name='name'placeholder='NAME'/>
+        <input id='email' type='email' name='_replyto' placeholder='E-MAIL'/>
+        <textarea id='messageBody' type='text' name='message' placeholder='MESSAGE'/>
+        <input id="submit" type="submit" value="SUBMIT"/>
+      </form>
+    </div>
+  );
+}

client/containers/demoContainer.jsx

@@ -1,16 +1,10 @@
-import React, {useRef} from 'react';
+import React from 'react';
 import DemoRow from '../components/demoRow';
 import { useHomeContext } from '../state/contexts';
-import { useInfiniteScroll, useLazyLoading } from '../state/customHooks';
 
 export default function DemoContainer() {
 
-  const { homeDispatch } = useHomeContext();
-  const { overview, info } = useHomeContext().homeState;
-
-  const bottomBoundaryRef = useRef(null);
-  // useLazyLoading('.demoImage', info);
-  // useInfiniteScroll(bottomBoundaryRef, homeDispatch, info);
+  const { info } = useHomeContext().homeState;
 
 
   const rows = info.map((pair, i) => {
@@ -28,12 +22,9 @@ export default function DemoContainer() {
   return (
     <>
       <div className="demoContainer">
-        <div className="demoOverview">
-          <h1 id="overviewText">{overview}</h1>
-        </div>
+        <h1 id='demoTitle'>How It Works</h1>
         {rows}
       </div>
-      <div id='page-bottom-boundary' style={{ border: '1px solid red' }} ref={bottomBoundaryRef}></div>
     </>
   );
 }

client/containers/featureContainer.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const medium = 'https://erkrebs.medium.com/thinking-of-migrating-from-rest-to-graphql-9f0e019c4582';
+
+export default function featureContainer() {
+  return (
+    <div className='featureContainer'>
+      <div className='featureTitle'>
+        <span>Featured on Medium</span>
+        <hr></hr>
+      </div>
+      <div className='featureQuote'>
+        <h1>"DraQLa makes migrating 
+          <br></br>
+          <i>fang</i>-tastic!"</h1>
+      </div>
+      <a href={medium} target='_'>
+        <img src='../assets/medium.png'></img>
+      </a>
+    </div>
+  );
+}

client/containers/footerContainer.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export default function footerContainer() {
+  const linkedin = 'https://www.linkedin.com/company/draqlabs';
+  const twitter = 'https://twitter.com/draQLabs';
+  const github = 'https://github.com/oslabs-beta/DraQLa/';
+
+  return (
+    <div className='footerContainer'>
+      <hr/>
+      <div className='footerIconContainer'>
+        <a href={linkedin} target='_'>
+          <img className='footerIcon' src='../assets/linkedin.png'></img>
+        </a>
+        <a href={twitter} target='_'>
+          <img className='footerIcon' src='../assets/twitter.png'></img>
+        </a>
+        <a href={github} target='_'>
+          <img className='footerIcon' src='../assets/github.png'></img>
+        </a>
+      </div>
+    </div>
+  );
+}

client/containers/graphContainer.jsx

@@ -10,7 +10,7 @@ export default function graphContainer() {
   const { psqlState } = useContext(PSQLContext);
   // const { mongoState } = useContext(MongoContext);
 
-  // ! to toggle between the different graphs
+  // ! to toggle between the different graphs - stretch feature
   let graph;
 
   if (psqlState.d3Tables.name) {

client/containers/splashContainer.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useGenContext } from '../state/contexts';
+
+export default function splashContainer() {
+  const { generalDispatch } = useGenContext();
+
+  return (
+    <>
+      <div id='stars'></div>
+      <div id='stars2'></div>
+      <div id='stars3'></div>
+      <div id='homeTitle'>
+        <Link to='/app' onClick={() =>{
+          setTimeout(generalDispatch({ type: 'OPEN_URI_MODAL' }), 1000);
+        }}>
+          <img src='../assets/logoclear.png' width='300px' height='300px' id='homelogo'></img>
+        </Link>
+          <img id='homelogotext' src='../assets/logotext.png'></img>
+      </div>
+      <section id="scrollDown" className="pointerDown">
+        <a id="scrollDownLink"href="#about"><span></span>scroll to learn more<br></br>or click on our logo to get started</a>
+      </section>
+    </>
+  );
+}

client/graphs/adviceGraph.jsx

@@ -96,8 +96,8 @@ export default function adviceGraph() {
       const svg = d3
         .select(adviceGraphContainer.current)
         .append('svg')
-        .attr('width', '20%') // originally 100%
-        .attr('height', '20%') // originally 100%
+        .attr('width', '20%') 
+        .attr('height', '20%') 
         .attr(
           'viewBox',
           '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height)