diff options
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/components/AddToCart.js | 6 | ||||
| -rw-r--r-- | frontend/components/ErrorMessage.js | 7 | ||||
| -rw-r--r-- | frontend/components/Item.js | 2 | ||||
| -rw-r--r-- | frontend/components/Items.js | 10 | ||||
| -rw-r--r-- | frontend/components/Order.js | 12 | ||||
| -rw-r--r-- | frontend/components/Page.js | 14 | ||||
| -rw-r--r-- | frontend/components/Permissions.js | 113 | ||||
| -rw-r--r-- | frontend/components/PleaseSignIn.js | 11 | ||||
| -rw-r--r-- | frontend/components/Reset.js | 2 | ||||
| -rw-r--r-- | frontend/components/ResetRequest.js | 4 | ||||
| -rw-r--r-- | frontend/components/Search.js | 13 | ||||
| -rw-r--r-- | frontend/components/styles/SickButton.js | 5 | ||||
| -rw-r--r-- | frontend/components/styles/Table.js | 31 | ||||
| -rw-r--r-- | frontend/pages/buy.js | 16 | ||||
| -rw-r--r-- | frontend/pages/diagram.js | 202 | ||||
| -rw-r--r-- | frontend/pages/update.js (renamed from frontend/pages/admin/update.js) | 8 | ||||
| -rw-r--r-- | frontend/queries/index.js | 6 |
17 files changed, 344 insertions, 118 deletions
diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js index 3566c0c..18186d8 100644 --- a/frontend/components/AddToCart.js +++ b/frontend/components/AddToCart.js @@ -18,7 +18,11 @@ class AddToCart extends Component { const existingIndex = data.me.cart.findIndex(cartItem => cartItem.id === newCartItem.id); if (existingIndex >= 0) { // already in cache, just replace it - data.me.cart = [...data.me.cart.slice(0, existingIndex), newCartItem, ...data.me.cart.slice(existingIndex + 1)]; + data.me.cart = [ + ...data.me.cart.slice(0, existingIndex), + newCartItem, + ...data.me.cart.slice(existingIndex + 1), + ]; } else { data.me.cart = [...data.me.cart, newCartItem]; } diff --git a/frontend/components/ErrorMessage.js b/frontend/components/ErrorMessage.js index 3731554..c73a2b7 100644 --- a/frontend/components/ErrorMessage.js +++ b/frontend/components/ErrorMessage.js @@ -18,14 +18,14 @@ const StyledError = styled.div` } `; -const DisplayError = ({ error }) => { +const DisplayError = ({ error, refetch }) => { if (!error || !error.message) return null; if (error.networkError && error.networkError.result && error.networkError.result.errors.length) { return error.networkError.result.errors.map((error, i) => ( <StyledError key={i}> <p> <strong>Shoot!</strong> - {error.message} + {error.message.replace('GraphQL error: ', '')} </p> </StyledError> )); @@ -34,7 +34,8 @@ const DisplayError = ({ error }) => { <StyledError> <p> <strong>Shoot!</strong> - {error.message} + {error.message.replace('GraphQL error: ', '')} + <button onClick={refetch}>Try Again</button> </p> </StyledError> ); diff --git a/frontend/components/Item.js b/frontend/components/Item.js index 2ed5742..99d8d93 100644 --- a/frontend/components/Item.js +++ b/frontend/components/Item.js @@ -83,7 +83,7 @@ class ItemComponent extends React.Component { <div className="buttonList"> <Link href={{ - pathname: '/admin/update', + pathname: '/update', query: { id: item.id }, }} > diff --git a/frontend/components/Items.js b/frontend/components/Items.js index 3c28de2..22e2d75 100644 --- a/frontend/components/Items.js +++ b/frontend/components/Items.js @@ -32,8 +32,6 @@ class ItemList extends React.Component { }; render() { const fetchPolicy = this.state.refetch ? 'network-only' : 'cache-first'; - console.log(this.state.refetch, this.props.page); - console.log(fetchPolicy); return ( <Center key={this.props.page}> <Pagination page={this.props.page} /> @@ -46,13 +44,9 @@ class ItemList extends React.Component { fetchPolicy={fetchPolicy} > {({ data, error, loading }) => { - if (loading) return <div>Loading</div>; + if (loading) return null; if (error) return <div>Error</div>; - return ( - <Items key={this.props.page}> - {data.items.map(item => <Item key={item.id} item={item} />)} - </Items> - ); + return <Items>{data.items.map(item => <Item key={item.id} item={item} />)}</Items>; }} </Query> <Pagination page={this.props.page} /> diff --git a/frontend/components/Order.js b/frontend/components/Order.js index b38254f..f6743fa 100644 --- a/frontend/components/Order.js +++ b/frontend/components/Order.js @@ -7,6 +7,7 @@ import styled from 'styled-components'; import { SINGLE_ORDER_QUERY } from '../queries'; import formatMoney from '../lib/formatMoney'; import Dump from './Dump'; +import Error from './ErrorMessage'; const OrderStyles = styled.div` max-width: 1000px; @@ -51,10 +52,15 @@ class Order extends Component { render() { return ( - <Query query={SINGLE_ORDER_QUERY} variables={{ id: this.props.id }}> - {({ data: { order }, error, loading }) => { + <Query + query={SINGLE_ORDER_QUERY} + variables={{ id: this.props.id }} + fetchPolicy="network-only" + > + {({ data, error, loading, refetch }) => { if (loading) return <p>Loading...</p>; - if (!order || error) return <p>No Order Found!</p>; + if (error) return <Error error={error} refetch={refetch} />; + const order = data.order; return ( <OrderStyles> <Head> diff --git a/frontend/components/Page.js b/frontend/components/Page.js index 3c6e3b1..ab14b10 100644 --- a/frontend/components/Page.js +++ b/frontend/components/Page.js @@ -51,10 +51,15 @@ const StyledPage = styled.div` `; class Page extends React.Component { + static propTypes = { + children: PropTypes.node.isRequired, + }; componentDidMount() { - // console.log('ComponentDidMount'); - // When the page loads, re-refetch the current user query - // client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' }); + // The first time we load in the client, we need to refetch the current user data + if (typeof window !== 'undefined' && !window.__CLIENTLOADED__) { + client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' }); + window.__CLIENTLOADED__ = true; + } } render() { return ( @@ -68,8 +73,5 @@ class Page extends React.Component { ); } } -Page.propTypes = { - children: PropTypes.node.isRequired, -}; export default Page; diff --git a/frontend/components/Permissions.js b/frontend/components/Permissions.js index 0b3976c..69a621b 100644 --- a/frontend/components/Permissions.js +++ b/frontend/components/Permissions.js @@ -1,44 +1,18 @@ import React from 'react'; import { Query, Mutation } from 'react-apollo'; -import styled from 'styled-components'; -import { BarLoader } from 'react-spinners'; -import { perPage } from '../config'; import { ALL_USERS_QUERY, UPDATE_PERMISSIONS_MUTATION } from '../queries/index'; import Error from './ErrorMessage'; -import Form from './styles/Form'; import SickButton from './styles/SickButton'; +import Table from './styles/Table'; -const PermissionsBox = styled.div` - border: 1px solid ${props => props.theme.offWhite}; - box-shadow: ${props => props.theme.bs}; - margin-bottom: 5rem; - padding: 2rem; - label { - cursor: pointer; - span { - transition: all 0.1s; - padding: 0 1rem; - display: block; - border: 1px solid ${props => props.theme.offWhite}; - border-left-width: 20px; - } - input { - display: none; - } - input:checked + span { - border-color: red; - } - margin-right: 1rem; - margin-bottom: 1rem; - } - .labels { - display: flex; - flex-wrap: wrap; - & > * { - flex: 0 1 auto; - } - } -`; +const possiblePermissions = [ + 'ADMIN', + 'USER', + 'ITEMCREATE', + 'ITEMUPDATE', + 'ITEMDELETE', + 'PERMISSIONUPDATE', +]; class User extends React.Component { state = { @@ -60,22 +34,12 @@ class User extends React.Component { return ( <Mutation mutation={UPDATE_PERMISSIONS_MUTATION}> {(updatePermissions, { loading, error }) => ( - <PermissionsBox key={user.id} className="user"> - <BarLoader className="barLoader" width="100%" height={5} color="red" loading={loading} /> + <tr key={user.id} className="user"> <Error error={error} /> - <h2> - {user.name} -- {user.email} - </h2> - <div className="labels"> - {[ - 'ADMIN', - 'USER', - 'ITEMCREATE', - 'ITEMUPDATE', - 'ITEMDELETE', - 'PERMISSIONUPDATE', - 'NUKE', - ].map(permission => ( + <td>{user.name}</td> + <td>{user.email}</td> + {possiblePermissions.map(permission => ( + <td> <label key={permission} htmlFor={`${user.id}-permission-${permission}`}> <input type="checkbox" @@ -85,25 +49,26 @@ class User extends React.Component { onChange={this.handlePermissionsChange} value={permission} /> - <span>{permission}</span> </label> - ))} - </div> - <SickButton - type="button" - onClick={async () => { - const res = await updatePermissions({ - variables: { - permissions: this.state.permissions, - userId: this.props.user.id, - }, - }); - console.log(res); - }} - > - Update Permissions - </SickButton> - </PermissionsBox> + </td> + ))} + <td> + <SickButton + type="button" + disabled={loading} + onClick={async () => { + const res = await updatePermissions({ + variables: { + permissions: this.state.permissions, + userId: this.props.user.id, + }, + }); + }} + > + Updat{loading ? 'ing' : 'e'} + </SickButton> + </td> + </tr> )} </Mutation> ); @@ -118,7 +83,17 @@ const Permissions = () => ( return ( <div> <h1>Manage User Permissions</h1> - {data.users.map(user => <User key={user.id} user={user} />)} + <Table> + <thead> + <tr> + <th>Name</th> + <th>Email</th> + {possiblePermissions.map(p => <th>{p}</th>)} + <th>👇🏻</th> + </tr> + </thead> + <tbody>{data.users.map(user => <User key={user.id} user={user} />)}</tbody> + </Table> </div> ); }} diff --git a/frontend/components/PleaseSignIn.js b/frontend/components/PleaseSignIn.js index 1533dbd..ff3b956 100644 --- a/frontend/components/PleaseSignIn.js +++ b/frontend/components/PleaseSignIn.js @@ -20,9 +20,16 @@ const PleaseSignIn = props => ( // check if they NO permissions, or they don't meet the requmrenets if ( !data.me.permissions || - !props.allowedPermissions.some(permission => data.me.permissions.contains(permission)) + !props.allowedPermissions.some(permission => data.me.permissions.includes(permission)) ) { - return <p>Insufficient Permissions to Manage Permissions</p>; + return ( + <p> + Insufficient Permissions to Manage Permissions. You have: + <strong>{data.me.permissions}</strong> + and you need + <strong>{props.allowedPermissions.join(' OR ')}</strong> + </p> + ); } } return props.children; diff --git a/frontend/components/Reset.js b/frontend/components/Reset.js index 5bc7f98..bbfc436 100644 --- a/frontend/components/Reset.js +++ b/frontend/components/Reset.js @@ -40,7 +40,7 @@ class Reset extends React.Component { }} refetchQueries={[{ query: CURRENT_USER_QUERY }]} > - {(resetMutation, { error, loading }) => ( + {(resetMutation, { error, loading, called }) => ( <Form onSubmit={e => this.resetPassword(e, resetMutation)}> <Error error={error} /> <fieldset disabled={loading} aria-busy={loading}> diff --git a/frontend/components/ResetRequest.js b/frontend/components/ResetRequest.js index fb6f660..4ed902e 100644 --- a/frontend/components/ResetRequest.js +++ b/frontend/components/ResetRequest.js @@ -3,6 +3,7 @@ import { Mutation } from 'react-apollo'; import { REQUEST_RESET_MUTATION } from '../queries'; import Form from './styles/Form'; import Error from './ErrorMessage'; +import Dump from './Dump'; class ResetRequest extends React.Component { state = { @@ -12,7 +13,7 @@ class ResetRequest extends React.Component { render() { return ( <Mutation mutation={REQUEST_RESET_MUTATION} variables={this.state}> - {(resetMutation, { loading, error }) => ( + {(resetMutation, { loading, error, called, data }) => ( <Form onSubmit={async e => { e.preventDefault(); @@ -21,6 +22,7 @@ class ResetRequest extends React.Component { }} > <Error error={error} /> + {!error && called && !loading && <p>Success! Check Your Email!</p>} <fieldset disabled={loading} aria-busy={loading}> <label htmlFor="email"> Email diff --git a/frontend/components/Search.js b/frontend/components/Search.js index 49c5023..a1b69cb 100644 --- a/frontend/components/Search.js +++ b/frontend/components/Search.js @@ -1,6 +1,6 @@ import Downshift from 'downshift'; import Router from 'next/router'; -import styled from 'styled-components'; +import styled, { keyframes } from 'styled-components'; import debounce from 'lodash.debounce'; import { client } from '../lib/withData'; import { SEARCH_ITEMS_QUERY } from '../queries'; @@ -35,6 +35,15 @@ const DropDownItem = styled.div` } `; +const glow = keyframes` + from { + box-shadow: 0 0 0px yellow; + } + + to { + box-shadow: 0 0 10px 1px yellow; + } +`; const SearchStyles = styled.div` position: relative; input { @@ -43,7 +52,7 @@ const SearchStyles = styled.div` border: 0; font-size: 2rem; &.loading { - background: red; + animation: ${glow} 0.5s ease-in-out infinite alternate; } } `; diff --git a/frontend/components/styles/SickButton.js b/frontend/components/styles/SickButton.js index 3bd5001..5b5352e 100644 --- a/frontend/components/styles/SickButton.js +++ b/frontend/components/styles/SickButton.js @@ -10,6 +10,11 @@ const SickButton = styled.button` font-size: 2rem; padding: 0.8rem 1.5rem; transform: skew(-2deg); + display: inline-block; + transition: all 0.5s; + &[disabled] { + opacity: 0.5; + } `; export default SickButton; diff --git a/frontend/components/styles/Table.js b/frontend/components/styles/Table.js new file mode 100644 index 0000000..e9d0673 --- /dev/null +++ b/frontend/components/styles/Table.js @@ -0,0 +1,31 @@ +import styled from 'styled-components'; + +const Table = styled.table` + border-spacing: 0; + width: 100%; + border: 1px solid ${props => props.theme.offWhite}; + thead { + font-size: 10px; + } + td, + th { + border-bottom: 1px solid ${props => props.theme.offWhite}; + border-right: 1px solid ${props => props.theme.offWhite}; + padding: 10px 5px; + position: relative; + &:last-child { + border-right: none; + width: 150px; + button { + width: 100%; + } + } + } + tr { + &:hover { + background: ${props => props.theme.offWhite}; + } + } +`; + +export default Table; 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 ( - <div> - <p>Buy</p> - <TakeMyMoney /> - </div> - ) - } -} - -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 = () => ( + <DiagramStyles> + <span className="location frontend">Frontend</span> + <span className="location backend">Backend</span> + <div className="slat slat1"> + <img + src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/640px-React-icon.svg.png" + alt="React.js" + /> + <h2>React.js</h2> + <span className="for">For Building The Interface along with:</span> + <ul> + <li> + <strong>Next.js</strong> for server side rendering, routing and tooling + </li> + <li> + <strong>Styled Components</strong> for styling + </li> + <li> + <strong>React-Apollo</strong> for interfacing with Apollo Client + </li> + </ul> + </div> + <div className="slat slat2"> + <img + src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOThweCIgaGVpZ2h0PSI0MnB4IiB2aWV3Qm94PSIwIDAgMTIwIDQyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHN0eWxlPgogICAgICAgIHRleHQgewogICAgICAgICAgICBmb250LWZhbWlseTogJ1NvdXJjZSBTYW5zIFBybycsICdIZWx2ZXRpY2EgTmV1ZScsIEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7CiAgICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxnIGlkPSJob21lcGFnZS0rLW5hdiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImhvbWUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNTAuMDAwMDAwLCAtMTUzOS4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1MC4wMDAwMDAsIDE1MzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0ibG9nby1hcG9sbG8tc3BhY2UtY29weS0yOCIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iTGF5ZXJfMiI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJsb2dvX2Fwb2xsb19zcGFjZS1saW5rIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0OS42MTkxNTUsIDE1LjcxNjE3NSkgc2NhbGUoLTEsIDEpIHJvdGF0ZSgtMTgwLjAwMDAwMCkgdHJhbnNsYXRlKC00OS42MTkxNTUsIC0xNS43MTYxNzUpIHRyYW5zbGF0ZSgwLjExOTE1NSwgMC43MTYxNzUpIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJsb2dvX2Fwb2xsb19zcGFjZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIC0wLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4zMzE4MjUsIDAuOTY1MzA5KSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSIxNS44Mzg5MTQgMjAuNTYxMDg2IDEyLjkwNTQ2IDIwLjU2MTA4NiA4LjY3MDA0NTI1IDkuNTY4OTg5NDQgMTEuMzIzNDM4OSA5LjU2ODk4OTQ0IDEyLjAxNTU2NTYgMTEuNDMwOTUwMiAxNi4wMTc0OTYyIDExLjQzMDk1MDIgMTUuMjkzMDMxNyAxMy40OTEyODIxIDEyLjY1ODIyMDIgMTMuNDkxMjgyMSAxNC4zNzIyNDc0IDE4LjIyMDkzNTEgMTcuNDIxMTc2NSA5LjU2ODk4OTQ0IDIwLjA3NDMyODggOS41Njg5ODk0NCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIHBvaW50cz0iNjAuNDAwMjQxMyA5LjU2ODk4OTQ0IDYwLjQwMDI0MTMgMjAuNTYxMDg2IDYyLjc1NjkyMzEgMjAuNTYxMDg2IDYyLjc1NjkyMzEgMTEuNjI4OTU5MyA2Ny40MDQxNjI5IDExLjYyODk1OTMgNjcuNDA0MTYyOSA5LjU2ODk4OTQ0Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSI3My45ODI3NDUxIDkuNTY4OTg5NDQgNzMuOTgyNzQ1MSAyMC41NjEwODYgNzYuMzM5NDI2OCAyMC41NjEwODYgNzYuMzM5NDI2OCAxMS42Mjg5NTkzIDgwLjk4NjkwOCAxMS42Mjg5NTkzIDgwLjk4NjkwOCA5LjU2ODk4OTQ0Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00Ny4zNDg1MzcsMTguNTkxMTMxMiBDNDkuMjk3NDk2MiwxOC41OTExMzEyIDUwLjg4MzEzNzMsMTcuMDA1NzMxNSA1MC44ODMxMzczLDE1LjA1NjY1MTYgQzUwLjg4MzEzNzMsMTMuMTA3ODEzIDQ5LjI5NzQ5NjIsMTEuNTIyMTcxOSA0Ny4zNDg1MzcsMTEuNTIyMTcxOSBDNDUuMzk5NTc3NywxMS41MjIxNzE5IDQzLjgxNDE3OCwxMy4xMDc4MTMgNDMuODE0MTc4LDE1LjA1NjY1MTYgQzQzLjgxNDE3OCwxNy4wMDU4NTIyIDQ1LjM5OTU3NzcsMTguNTkxMTMxMiA0Ny4zNDg1MzcsMTguNTkxMTMxMiBaIE00Ny4zNDg1MzcsMjAuNzQyMjAyMSBDNDQuMjA4NTA2OCwyMC43NDIyMDIxIDQxLjY2Mjk4NjQsMTguMTk2NjgxNyA0MS42NjI5ODY0LDE1LjA1NjY1MTYgQzQxLjY2Mjk4NjQsMTEuOTE2NjIxNCA0NC4yMDg1MDY4LDkuMzcwOTgwMzkgNDcuMzQ4NTM3LDkuMzcwOTgwMzkgQzUwLjQ4ODU2NzEsOS4zNzA5ODAzOSA1My4wMzQwODc1LDExLjkxNjYyMTQgNTMuMDM0MDg3NSwxNS4wNTY2NTE2IEM1My4wMzQwODc1LDE4LjE5NjY4MTcgNTAuNDg4Njg3OCwyMC43NDIyMDIxIDQ3LjM0ODUzNywyMC43NDIyMDIxIFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOTEuODIwNjkzOCwxOC41OTExMzEyIEM5My43Njk4OTQ0LDE4LjU5MTEzMTIgOTUuMzU1NTM1NCwxNy4wMDU3MzE1IDk1LjM1NTUzNTQsMTUuMDU2NjUxNiBDOTUuMzU1NTM1NCwxMy4xMDc4MTMgOTMuNzY5ODk0NCwxMS41MjIxNzE5IDkxLjgyMDY5MzgsMTEuNTIyMTcxOSBDODkuODcxNzM0NSwxMS41MjIxNzE5IDg4LjI4NjMzNDgsMTMuMTA3ODEzIDg4LjI4NjMzNDgsMTUuMDU2NjUxNiBDODguMjg2MzM0OCwxNy4wMDU4NTIyIDg5Ljg3MTczNDUsMTguNTkxMTMxMiA5MS44MjA2OTM4LDE4LjU5MTEzMTIgWiBNOTEuODIwNjkzOCwyMC43NDIyMDIxIEM4OC42ODA5MDUsMjAuNzQyMjAyMSA4Ni4xMzUxNDMzLDE4LjE5NjY4MTcgODYuMTM1MTQzMywxNS4wNTY2NTE2IEM4Ni4xMzUxNDMzLDExLjkxNjYyMTQgODguNjgwOTA1LDkuMzcwOTgwMzkgOTEuODIwNjkzOCw5LjM3MDk4MDM5IEM5NC45NjA3MjQsOS4zNzA5ODAzOSA5Ny41MDY0ODU3LDExLjkxNjYyMTQgOTcuNTA2NDg1NywxNS4wNTY2NTE2IEM5Ny41MDY0ODU3LDE4LjE5NjY4MTcgOTQuOTYwNzI0LDIwLjc0MjIwMjEgOTEuODIwNjkzOCwyMC43NDIyMDIxIFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMzIuMDU2MTA4NiwyMC41NjEwODYgTDI5LjI3MDk1MDIsMjAuNTYxMDg2IEwyOC44NzE0MzI5LDIwLjU2MTA4NiBMMjYuOTMwNjc4NywyMC41NjEwODYgTDI2LjkzMDY3ODcsOS41Njg4Njg3OCBMMjkuMjcwOTUwMiw5LjU2ODg2ODc4IEwyOS4yNzA5NTAyLDEzLjM1MTY3NDIgTDMyLjA1NjEwODYsMTMuMzUxNjc0MiBDMzQuMDA5NzczOCwxMy4zNTE2NzQyIDM1LjU5MzQ4NDIsMTUuMDAyOTU2MyAzNS41OTM0ODQyLDE2Ljk1NjM4MDEgQzM1LjU5MzQ4NDIsMTguOTEwMTY1OSAzNC4wMDk3NzM4LDIwLjU2MTA4NiAzMi4wNTYxMDg2LDIwLjU2MTA4NiBaIE0zMi4wNTYxMDg2LDE1LjUwMjk4NjQgTDI5LjI3MDk1MDIsMTUuNTAyOTg2NCBMMjkuMjcwOTUwMiwxOC40MDk4OTQ0IEwzMi4wNTYxMDg2LDE4LjQwOTg5NDQgQzMyLjgyMDYzMzUsMTguNDA5ODk0NCAzMy40NDIyOTI2LDE3LjcyMDc4NDMgMzMuNDQyMjkyNiwxNi45NTYzODAxIEMzMy40NDIyOTI2LDE2LjE5MTk3NTkgMzIuODIwNjMzNSwxNS41MDI5ODY0IDMyLjA1NjEwODYsMTUuNTAyOTg2NCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI0LjkxMDA0NTIsNi4yMzI4ODA4NCBDMjQuNzA2MzY1LDYuMjMyODgwODQgMjQuNTI2NTc2Miw2LjEzMjAwNjAzIDI0LjQxNjc3MjIsNS45NzczMTUyMyBDMjQuNDE2NzcyMiw1Ljk3NzMxNTIzIDIzLjg4ODg2ODgsNS4zNzUwODI5NiAyMy42MDQyMjMyLDUuMDkwMDc1NDEgQzIyLjQwMDEyMDcsMy44ODU5NzI4NSAyMC45OTgxMjk3LDIuOTQwODE0NDggMTkuNDM3MzQ1NCwyLjI4MDU0Mjk5IEMxNy44MjIwMjExLDEuNTk3MjI0NzQgMTYuMTA1NzAxNCwxLjI1MDc5OTQgMTQuMzM1NTY1NiwxLjI1MDc5OTQgQzEyLjU2NTE4ODUsMS4yNTA3OTk0IDEwLjg0ODg2ODgsMS41OTcyMjQ3NCA5LjIzMzc4NTgyLDIuMjgwNTQyOTkgQzcuNjcyODgwODQsMi45NDA4MTQ0OCA2LjI3MDg4OTg5LDMuODg1OTcyODUgNS4wNjY5MDc5OSw1LjA5MDA3NTQxIEMzLjg2MjY4NDc3LDYuMjk0NDE5MzEgMi45MTc0MDU3Myw3LjY5NjI4OTU5IDIuMjU3MjU0OSw5LjI1NzA3MzkxIEMxLjU3NDE3Nzk4LDEwLjg3MjM5ODIgMS4yMjc2MzE5OCwxMi41ODg5NTkzIDEuMjI3NjMxOTgsMTQuMzU4OTc0NCBDMS4yMjc2MzE5OCwxNi4xMjg5ODk0IDEuNTc0MTc3OTgsMTcuODQ1NTUwNSAyLjI1NzI1NDksMTkuNDYwODc0OCBDMi45MTc0MDU3MywyMS4wMjE2NTkxIDMuODYyNjg0NzcsMjIuNDIzNTI5NCA1LjA2NjkwNzk5LDIzLjYyNzYzMiBDNi4yNzEwMTA1NiwyNC44MzE4NTUyIDcuNjczMDAxNTEsMjUuNzc3MDEzNiA5LjIzMzc4NTgyLDI2LjQzNzI4NTEgQzEwLjg0ODg2ODgsMjcuMTIwNjAzMyAxMi41NjUxODg1LDI3LjQ2NzAyODcgMTQuMzM1NTY1NiwyNy40NjcwMjg3IEMxNi4xMDU3MDE0LDI3LjQ2NzAyODcgMTcuODIyMTQxOCwyNy4xMjA2MDMzIDE5LjQzNzM0NTQsMjYuNDM3Mjg1MSBDMjAuNTc0MjM4MywyNS45NTY0NDA0IDIxLjYyNjMwNDcsMjUuMzIzNTU5NiAyMi41Nzk1NDc1LDI0LjU1MDIyNjIgQzIyLjUyODYyNzUsMjQuNDAwMjQxMyAyMi41MDAxNTA4LDI0LjIzOTM5NjcgMjIuNTAwMTUwOCwyNC4wNzIwMzYyIEMyMi41MDAxNTA4LDIzLjI1NTI2NCAyMy4xNjIzNTI5LDIyLjU5MzA2MTggMjMuOTc5MDA0NSwyMi41OTMwNjE4IEMyNC43OTU4OTc0LDIyLjU5MzA2MTggMjUuNDU4MDk5NSwyMy4yNTUyNjQgMjUuNDU4MDk5NSwyNC4wNzIwMzYyIEMyNS40NTgwOTk1LDI0Ljg4ODkyOTEgMjQuNzk1ODk3NCwyNS41NTEwMTA2IDIzLjk3OTAwNDUsMjUuNTUxMDEwNiBDMjMuNzc2Mjg5NiwyNS41NTEwMTA2IDIzLjU4Mjg2NTgsMjUuNTEwMTA1NiAyMy40MDY4MTc1LDI1LjQzNjAxODEgQzIwLjkzNzE5NDYsMjcuNDYwOTk1NSAxNy43Nzg0NjE1LDI4LjY3NjgwMjQgMTQuMzM1NTY1NiwyOC42NzY4MDI0IEM2LjQyNzg3MzMsMjguNjc2ODAyNCAwLjAxNzQ5NjIyOTMsMjIuMjY2NTQ2IDAuMDE3NDk2MjI5MywxNC4zNTg4NTM3IEMwLjAxNzQ5NjIyOTMsNi40NTExNjEzOSA2LjQyNzg3MzMsMC4wNDA3ODQzMTM3IDE0LjMzNTU2NTYsMC4wNDA3ODQzMTM3IEMxOC43NTg4NTM3LDAuMDQwNzg0MzEzNyAyMi43MTIwMzYyLDIuMDQ4MTQ0OCAyNS4zMzgxNTk5LDUuMjAwMTIwNjYgQzI1LjQ0NzQ4MTEsNS4zMDk1NjI1OSAyNS41MTU0MTQ4LDUuNDYwNzU0MTUgMjUuNTE1NDE0OCw1LjYyNzYzMTk4IEMyNS41MTUyOTQxLDUuOTYyMjMyMjggMjUuMjQ0NTI0OSw2LjIzMjg4MDg0IDI0LjkxMDA0NTIsNi4yMzI4ODA4NCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8dGV4dCBpZD0iQ0xJRU5ULUNvcHktOSIgb3BhY2l0eT0iMC41IiBmb250LXNpemU9IjE3IiBmb250LXdlaWdodD0ibm9ybWFsIiBsZXR0ZXItc3BhY2luZz0iMC44NzkzMTAzNjkiPgogICAgICAgICAgICAgICAgICAgIDx0c3BhbiB4PSI0Mi4yMTQxMzc4IiB5PSI0MiI+Q0xJRU5UPC90c3Bhbj4KICAgICAgICAgICAgICAgIDwvdGV4dD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" + alt="React.js" + /> + <h2>Apollo Client</h2> + <span className="for">For Data Management</span> + <small /> + <ul> + <li> + Performing GraphQL <strong>Mutations</strong> + </li> + <li> + Fetching GraphQL <strong>Queries</strong> + </li> + <li> + <strong>Caching</strong> GraphQL Data + </li> + <li> + Managing <strong>Local State</strong> + </li> + <li> + <strong>Error</strong> and <strong>Loading</strong> UI States + </li> + <li> + <small>Apollo-client replaces the need for redux + data fetching libraries</small> + </li> + </ul> + </div> + <div className="slat slat3"> + <img + src="https://camo.githubusercontent.com/389368863d9b9df25acd07644bad7642459c3533/68747470733a2f2f696d6775722e636f6d2f5376366a3042362e706e67" + alt="React.js" + /> + <h2>YOGA Server</h2> + + <span className="for">An Express GraphQL Server For:</span> + <ul> + <li> + Implementing <strong>Query</strong> and <strong>Mutation</strong>{' '} + <strong>Resolvers</strong> + </li> + <li> + Custom <strong>Server Side Logic</strong> + </li> + <li> + <strong>Charging</strong> Credit Cards + </li> + <li> + <strong>Sending</strong> Email + </li> + <li> + Performing <strong>Authentication</strong> + </li> + <li> + Checking <strong>Permissions</strong> + </li> + </ul> + </div> + <div className="slat slat4"> + <img + src="https://camo.githubusercontent.com/87336b0d10b0d1f27518e14c4a36f995babd6a2f/68747470733a2f2f696d6775722e636f6d2f485575313072482e706e67" + alt="React.js" + /> + <h2>Prisma Server</h2> + + <span className="for">A GraphQL Database Interface</span> + <ul> + <li> + Provides a set of GraphQL <strong>CRUD APIs</strong> for our (currently MySQL){' '} + <strong>Database</strong> + </li> + <li> + <strong>Schema</strong> Definition + </li> + <li> + Data <strong>Relationships</strong> + </li> + <li> + <strong>Queried</strong> Directly from our Yoga Server + </li> + <li> + <strong>Self-hosted</strong> or <strong>as-a-service</strong> + </li> + </ul> + </div> + <span className="arrow arrow1">↔</span> + <span className="arrow arrow2">↔</span> + <span className="arrow arrow3">↔</span> + </DiagramStyles> +); + +const DiagramPage = () => ( + <Page> + <Diagram /> + </Page> +); + +export default withData(DiagramPage); diff --git a/frontend/pages/admin/update.js b/frontend/pages/update.js index 2f445d7..b30cd1c 100644 --- a/frontend/pages/admin/update.js +++ b/frontend/pages/update.js @@ -1,8 +1,8 @@ import { Component } from 'react'; -import withData from '../../lib/withData'; -import UpdateItem from '../../components/UpdateItem'; -import Page from '../../components/Page'; -import PleaseSignIn from '../../components/PleaseSignIn'; +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() { diff --git a/frontend/queries/index.js b/frontend/queries/index.js index 5e9e28b..26eae35 100644 --- a/frontend/queries/index.js +++ b/frontend/queries/index.js @@ -102,11 +102,14 @@ export const SINGLE_ITEM_QUERY = gql` export const SINGLE_ORDER_QUERY = gql` query order($id: ID!) { - order(where: { id: $id }) { + order(id: $id) { id charge total createdAt + user { + id + } items { id title @@ -179,6 +182,7 @@ export const CURRENT_USER_QUERY = gql` id email name + permissions orders { charge id |