From 97b6de6aa437f7a913a33b9e6aa18a919faf2caf Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Thu, 12 Apr 2018 16:31:01 -0400 Subject: a whole bunch of things that should be in their own commits --- frontend/pages/admin/update.js | 19 ---- frontend/pages/buy.js | 16 ---- frontend/pages/diagram.js | 202 +++++++++++++++++++++++++++++++++++++++++ frontend/pages/update.js | 19 ++++ 4 files changed, 221 insertions(+), 35 deletions(-) delete mode 100644 frontend/pages/admin/update.js delete mode 100644 frontend/pages/buy.js create mode 100644 frontend/pages/diagram.js create mode 100644 frontend/pages/update.js (limited to 'frontend/pages') diff --git a/frontend/pages/admin/update.js b/frontend/pages/admin/update.js deleted file mode 100644 index 2f445d7..0000000 --- a/frontend/pages/admin/update.js +++ /dev/null @@ -1,19 +0,0 @@ -import { Component } from 'react'; -import withData from '../../lib/withData'; -import UpdateItem from '../../components/UpdateItem'; -import Page from '../../components/Page'; -import PleaseSignIn from '../../components/PleaseSignIn'; - -class Home extends Component { - render() { - return ( - - - - - - ); - } -} - -export default withData(Home); diff --git a/frontend/pages/buy.js b/frontend/pages/buy.js deleted file mode 100644 index d6b1331..0000000 --- a/frontend/pages/buy.js +++ /dev/null @@ -1,16 +0,0 @@ -import { Component } from 'react'; -import withData from '../lib/withData'; -import TakeMyMoney from '../components/TakeMyMoney'; - -class Buy extends Component { - render() { - return ( -
-

Buy

- -
- ) - } -} - -export default withData(Buy); diff --git a/frontend/pages/diagram.js b/frontend/pages/diagram.js new file mode 100644 index 0000000..f7e9a7a --- /dev/null +++ b/frontend/pages/diagram.js @@ -0,0 +1,202 @@ +import Page from '../components/Page'; +import withData from '../lib/withData'; +import styled from 'styled-components'; + +const DiagramStyles = styled.div` + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-column-gap: 20px; + ul { + margin: 0; + padding: 0; + list-style: none; + li { + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + } + } + h2 { + text-align: center; + margin: 0; + background: black; + color: white; + width: calc(40px + 100%); + transform: translateX(-20px); + } + span.for { + font-size: 12px; + text-align: center; + margin-bottom: 2rem; + display: block; + } + .slat { + background: #f7f7f7; + padding: 20px; + min-height: 500px; + grid-column: span 2; + grid-row: 3; + line-height: 1.7; + } + + .location { + grid-column: span 4; + background: red; + padding: 5px; + text-align: center; + color: white; + text-transform: uppercase; + } + + .arrow { + font-size: 50px; + line-height: 1; + transform: translateX(-10px) translateX(-50%); + text-align: center; + grid-row: 2; + margin-bottom: -100%; + background: white; + height: 60px; + } + .arrow1 { + grid-column: 3; + } + .arrow2 { + grid-column: 5; + } + .arrow3 { + grid-column: 7; + } + img { + width: 100%; + height: 125px; + object-fit: contain; + } + .slat2 img { + filter: invert(100%); + } + .slat4 img { + mix-blend-mode: multiply; + } +`; + +const Diagram = () => ( + + Frontend + Backend +
+ React.js +

React.js

+ For Building The Interface along with: +
    +
  • + Next.js for server side rendering, routing and tooling +
    • +
  • + Styled Components for styling +
    • +
  • + React-Apollo for interfacing with Apollo Client +
    • +
+
+
+ React.js +

Apollo Client

+ For Data Management + +
    +
  • + Performing GraphQL Mutations +
    • +
  • + Fetching GraphQL Queries +
    • +
  • + Caching GraphQL Data +
    • +
  • + Managing Local State +
    • +
  • + Error and Loading UI States +
    • +
  • + Apollo-client replaces the need for redux + data fetching libraries +
    • +
+
+
+ React.js +

YOGA Server

+ + An Express GraphQL Server For: +
    +
  • + Implementing Query and Mutation{' '} + Resolvers +
    • +
  • + Custom Server Side Logic +
    • +
  • + Charging Credit Cards +
    • +
  • + Sending Email +
    • +
  • + Performing Authentication +
    • +
  • + Checking Permissions +
    • +
+
+
+ React.js +

Prisma Server

+ + A GraphQL Database Interface +
    +
  • + Provides a set of GraphQL CRUD APIs for our (currently MySQL){' '} + Database +
    • +
  • + Schema Definition +
    • +
  • + Data Relationships +
    • +
  • + Queried Directly from our Yoga Server +
    • +
  • + Self-hosted or as-a-service +
    • +
+
+ ↔ + ↔ + ↔ + +); + +const DiagramPage = () => ( + + + +); + +export default withData(DiagramPage); diff --git a/frontend/pages/update.js b/frontend/pages/update.js new file mode 100644 index 0000000..b30cd1c --- /dev/null +++ b/frontend/pages/update.js @@ -0,0 +1,19 @@ +import { Component } from 'react'; +import withData from '../lib/withData'; +import UpdateItem from '../components/UpdateItem'; +import Page from '../components/Page'; +import PleaseSignIn from '../components/PleaseSignIn'; + +class Home extends Component { + render() { + return ( + + + + + + ); + } +} + +export default withData(Home); -- cgit v1.3