Fre
/
food-grapqhl-client
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

chore: initial setup

This commit is contained in:
Kristof Van Miegem 2019-02-11 19:56:58 +01:00
parent fe2331e6a7
commit 8c14b16ca1
24 changed files with 342 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
config/webpack.config.js
View File

@ -308,11 +308,6 @@ module.exports = function(webpackEnv) {
],
include: paths.appSrc,
},
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: require.resolve('graphql-tag/loader'),
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
@ -451,6 +446,12 @@ module.exports = function(webpackEnv) {
'sass-loader'
),
},
// Support for .graphql files
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: require.resolve('graphql-tag/loader'),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.

47
package-lock.json generated Normal file
View File

@ -0,0 +1,47 @@
{
"name": "food-graphql-client",
"version": "0.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@types/node": {
"version": "10.12.24",
"resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.24.tgz",
"integrity": "sha512-GWWbvt+z9G5otRBW8rssOFgRY87J9N/qbhqfjMZ+gUuL6zoL+Hm6gP/8qQBG4jjimqdaNLCehcVapZ/Fs2WjCQ==",
"dev": true
},
"@types/prop-types": {
"version": "15.5.8",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz",
"integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw==",
"dev": true
},
"@types/react": {
"version": "16.8.2",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.2.tgz",
"integrity": "sha512-6mcKsqlqkN9xADrwiUz2gm9Wg4iGnlVGciwBRYFQSMWG6MQjhOZ/AVnxn+6v8nslFgfYTV8fNdE6XwKu6va5PA==",
"dev": true,
"requires": {
"@types/prop-types": "15.5.8",
"csstype": "2.6.2"
}
},
"@types/styled-components": {
"version": "4.1.8",
"resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-4.1.8.tgz",
"integrity": "sha512-NrG0wmB9Rafy5i00GFxUM/uEge148bX2QPr+Q/MI2fXrew6WOp1hN2A3YEG0AeT45z47CMdJ3BEffPsdQCWayA==",
"dev": true,
"requires": {
"@types/node": "10.12.24",
"@types/react": "16.8.2",
"csstype": "2.6.2"
}
},
"csstype": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.2.tgz",
"integrity": "sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow==",
"dev": true
}
}
}

32
package.json
View File

@ -3,8 +3,23 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"graphql": "14.1.1",
"graphql-tag": "2.10.1",
"react": "16.8.1",
"react-apollo": "2.4.0",
"react-app-polyfill": "0.2.0",
"react-dev-utils": "7.0.1",
"react-dom": "16.8.1",
"styled-components": "4.1.3"
},
"devDependencies": {
"@babel/core": "7.1.6",
"@babel/plugin-syntax-json-strings": "^7.2.0",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@svgr/webpack": "2.4.1",
"@types/react": "^16.7.20",
"@types/react-dom": "^16.0.11",
"@types/styled-components": "^4.1.8",
"apollo-boost": "^0.1.27",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
@ -14,7 +29,7 @@
"babel-preset-react-app": "^7.0.0",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.1",
"chalk": "^2.4.2",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
@ -28,8 +43,6 @@
"file-loader": "2.0.0",
"fork-ts-checker-webpack-plugin-alt": "0.4.14",
"fs-extra": "7.0.0",
"graphql": "^14.1.1",
"graphql-tag": "^2.10.1",
"graphql.macro": "^1.3.3",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
@ -43,15 +56,9 @@
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.3.1",
"postcss-safe-parser": "4.0.1",
"react": "^16.7.0",
"react-apollo": "^2.4.0",
"react-app-polyfill": "^0.2.0",
"react-dev-utils": "^7.0.1",
"react-dom": "^16.7.0",
"resolve": "1.8.1",
"sass-loader": "7.1.0",
"style-loader": "0.23.0",
"styled-components": "^4.1.3",
"terser-webpack-plugin": "1.1.0",
"typescript": "^3.2.4",
"url-loader": "1.1.1",
@ -60,13 +67,6 @@
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3"
},
"devDependencies": {
"@babel/plugin-syntax-json-strings": "^7.2.0",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@types/react": "^16.7.20",
"@types/react-dom": "^16.0.11",
"ts-transform-graphql-tag": "^0.2.1"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",

BIN
public/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
public/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
public/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

9
public/browserconfig.xml Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>

BIN
public/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
public/favicon.ico Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 15 KiB

18
public/index.html
View File

@ -3,6 +3,14 @@
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
@ -22,7 +30,15 @@
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>
<title>Food Reservation</title>
<style>
body {
background-color: #7E00E8;
color: #ffffff;
font-family: Rubik;
font-size: 16px;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

BIN
public/mstile-150x150.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

29
public/safari-pinned-tab.svg Normal file
View File

@ -0,0 +1,29 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M4258 5115 c-2 -1 -46 -5 -98 -9 -684 -45 -1462 -285 -2095 -646
-235 -134 -614 -399 -751 -525 -6 -5 -44 -39 -85 -74 -94 -83 -367 -355 -444
-445 -33 -37 -65 -73 -70 -80 -23 -24 -192 -242 -206 -266 -25 -39 -42 -127
-36 -180 7 -60 45 -135 89 -177 32 -30 106 -82 498 -348 96 -65 177 -120 179
-122 2 -1 5 -57 5 -122 1 -105 4 -124 22 -148 12 -15 30 -30 40 -31 33 -6 37
-18 38 -116 1 -85 -1 -96 -16 -96 -28 0 -77 -52 -81 -85 -2 -16 2 -42 10 -57
14 -28 65 -62 77 -51 6 7 7 2 9 -116 2 -74 -8 -101 -37 -101 -7 0 -23 -12 -37
-26 l-24 -26 -1 -289 c-1 -160 3 -313 8 -340 23 -128 137 -226 271 -234 132
-8 262 90 292 219 8 36 12 217 13 611 0 308 1 570 1 582 1 21 14 14 131 -65
l129 -87 1 -322 c0 -297 2 -326 20 -376 72 -193 328 -248 474 -101 67 67 88
131 87 276 0 65 2 118 5 118 8 0 379 -254 382 -262 2 -4 9 -8 16 -8 7 0 21 -8
32 -17 32 -29 173 -123 183 -123 5 0 11 -4 13 -8 2 -5 36 -31 76 -57 l72 -48
1 -231 c1 -267 1 -274 35 -344 56 -115 200 -181 328 -149 120 30 213 143 218
266 2 36 6 50 15 47 7 -3 113 -74 235 -157 123 -84 238 -157 256 -163 38 -11
88 9 110 45 10 16 13 519 13 2412 0 2609 3 2442 -56 2528 -59 85 -134 121
-257 124 -48 2 -88 2 -90 0z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

19
public/site.webmanifest Normal file
View File

@ -0,0 +1,19 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

5
src/app.tsx
View File

@ -20,7 +20,10 @@ const apolloClient = new ApolloClient({
// --------------
// 1) First we need to create a query to get all the stores.
//
// Define the query in the queries.graphql file.
// 2) Create a select component for the store in the storeSelect.tsx file.
// 3) Use the Query component from react-apollo to connect the select
// component with the GraphQL backend.
class App extends React.PureComponent {
render() {

69
src/createReservation.tsx
View File

@ -1,23 +1,58 @@
import React from 'react';
import { compose } from 'react-apollo';
import { getStoresQuery } from './queries';
import { compose, graphql } from 'react-apollo';
import styled from 'styled-components';
import mutations from './mutations.graphql';
import StoreSelect from './storeSelect';
import ProductTable from './productTable';
interface CreateReservationProps {
storesData: object;
// createReservation: Function
}
class CreateReservation extends React.PureComponent<CreateReservationProps> {
render() {
const { storesData } = this.props;
console.warn('stores data', storesData);
return (
<form>
<select>
<option value="volvo">Volvo</option>
</select>
</form>
);
}
}
const Form = styled.form`
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 4em;
`;
export default compose(getStoresQuery)(CreateReservation);
const H1 = styled.h1`
`;
const Button = styled.button`
background: none;
border-radius: 4px;
color: #ffffff;
cursor: pointer;
font-size: 20px;
padding-top: 8px;
padding-bottom: 8px;
width: 200px;
`;
const CreateReservation = React.memo(({ /* createReservation */ }: CreateReservationProps) => {
const [reservationProducts, setReservationProducts] = React.useState<{ [key: string]: number }>({});
const [storeId, setStoreId] = React.useState<string>('');
const onChangeQuantity = React.useCallback((productId: string, quantity: string) => {
setReservationProducts(rps => ({
...rps,
[productId]: parseInt(quantity, 10)
}));
}, []);
const onSubmit = React.useCallback((e) => {
e.preventDefault();
}, [reservationProducts]);
return (
<Form onSubmit={onSubmit}>
<H1>Create reservation</H1>
<StoreSelect value={storeId} onChange={setStoreId} />
<ProductTable storeId={storeId} onChangeQuantity={onChangeQuantity} />
<Button type="submit">Reserve</Button>
</Form>
);
});
export default CreateReservation;

0
src/mutations.graphql Normal file
View File

53
src/productTable.tsx Normal file
View File

@ -0,0 +1,53 @@
import React from 'react';
import { Query } from 'react-apollo';
import styled from 'styled-components';
import QuantitySelect from './quantitySelect';
import * as queries from './queries.graphql';
const Table = styled.table`
margin-top: 32px;
margin-bottom: 32px;
`;
const Tr = styled.tr`
> td {
padding-bottom: 16px;
}
`
const Description = styled.div`
font-size: 12px;
`;
const PriceTd = styled.td`
padding-left: 64px;
padding-right 16px;
vertical-align: top;
`;
const QuantityTd = styled.td`
padding-left: 16px;
padding-right 16px;
width: 64px;
`;
interface Product {
description: string;
name: string;
price: number;
id: string;
}
interface ProductTableProps {
onChangeQuantity: Function;
storeId: string
}
const ProductTable = React.memo(({ onChangeQuantity, storeId }: ProductTableProps) => {
return (
<div>Product table</div>
);
});
export default ProductTable;

32
src/quantitySelect.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
import styled from 'styled-components';
const Select = styled.select`
height: 32px;
width: 64px;
`;
const quantityOptions = (new Array(10).fill(0)).map((v, i) => i);
interface QuantitySelectProps {
id: string;
onChange: Function;
}
const QuantitySelect = React.memo(({ id, onChange }: QuantitySelectProps) => {
const onChangeQuantity = React.useCallback((e) => {
onChange(id, e.target.value);
}, []);
return (
<Select onChange={onChangeQuantity}>
{quantityOptions.map(v => (
<option key={v} value={v}>{v}</option>
))}
</Select>
);
});
export default QuantitySelect;

6
src/queries.graphql
View File

@ -1,6 +0,0 @@
query getStores {
stores {
id
name
}
}

6
src/queries.ts
View File

@ -1,6 +0,0 @@
import { graphql } from 'react-apollo';
import { getStores } from './queries.graphql';
export const getStoresQuery = graphql(getStores, {
name: 'storesData',
});

1
src/react-app-env.d.ts vendored
View File

@ -63,7 +63,6 @@ declare module '*.module.sass' {
export default classes;
}
// graphql.d.ts file
declare module '*.graphql' {
import {DocumentNode} from 'graphql';

36
src/storeSelect.tsx Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import { Query } from 'react-apollo';
import styled from 'styled-components';
import * as queries from './queries.graphql';
const Select = styled.select`
height: 32px;
width: 200px;
`;
interface Store {
id: string;
name: string;
}
interface StoreSelectProps {
value: string;
onChange: Function;
}
const StoreSelect = React.memo(({ value, onChange }: StoreSelectProps) => {
const onChangeStore = React.useCallback((e) => {
e.preventDefault();
onChange(e.target.value);
}, []);
return (
<div>Store select</div>
);
});
export default StoreSelect;

36
yarn.lock
View File

@ -826,6 +826,10 @@
"@svgr/core" "^2.4.1"
loader-utils "^1.1.0"
"@types/node@*":
version "10.12.24"
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.24.tgz#b13564af612a22a20b5d95ca40f1bffb3af315cf"
"@types/prop-types@*":
version "15.5.8"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.8.tgz#8ae4e0ea205fe95c3901a5a1df7f66495e3a56ce"
@ -847,6 +851,14 @@
"@types/prop-types" "*"
csstype "^2.2.0"
"@types/styled-components@^4.1.8":
version "4.1.8"
resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.8.tgz#15c8a53bb4b9066e528fafb7558963dee5690ae0"
dependencies:
"@types/node" "*"
"@types/react" "*"
csstype "^2.2.0"
"@types/tapable@1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.2.tgz#e13182e1b69871a422d7863e11a4a6f5b814a4bd"
@ -3866,7 +3878,7 @@ graphql-anywhere@^4.1.0-alpha.0:
apollo-utilities "^1.1.2"
tslib "^1.9.3"
graphql-tag@^2.10.1, graphql-tag@^2.4.2:
graphql-tag@2.10.1, graphql-tag@^2.10.1, graphql-tag@^2.4.2:
version "2.10.1"
resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.10.1.tgz#10aa41f1cd8fae5373eaf11f1f67260a3cad5e02"
@ -3878,7 +3890,7 @@ graphql.macro@^1.3.3:
babel-plugin-macros "^2.4.5"
graphql-tag "^2.10.1"
graphql@^14.1.1:
graphql@14.1.1:
version "14.1.1"
resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.1.1.tgz#d5d77df4b19ef41538d7215d1e7a28834619fac0"
dependencies:
@ -7132,9 +7144,9 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-apollo@^2.4.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/react-apollo/-/react-apollo-2.4.1.tgz#89db63ebacf01c1603553bb476f089492aaeab2c"
react-apollo@2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/react-apollo/-/react-apollo-2.4.0.tgz#22f68c429120d3c332adaef0d02c60771055d9ea"
dependencies:
fbjs "^1.0.0"
hoist-non-react-statics "^3.0.0"
@ -7143,7 +7155,7 @@ react-apollo@^2.4.0:
lodash.isequal "^4.5.0"
prop-types "^15.6.0"
react-app-polyfill@^0.2.0:
react-app-polyfill@0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-0.2.0.tgz#60eaf037223b2f3a5671f45e5ac3b418f0b48ad2"
dependencies:
@ -7153,7 +7165,7 @@ react-app-polyfill@^0.2.0:
raf "3.4.0"
whatwg-fetch "3.0.0"
react-dev-utils@^7.0.1:
react-dev-utils@7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-7.0.1.tgz#c53e759a22668ee2c0d146c24ce4bdec2b41e3c8"
dependencies:
@ -7182,7 +7194,7 @@ react-dev-utils@^7.0.1:
strip-ansi "4.0.0"
text-table "0.2.0"
react-dom@^16.7.0:
react-dom@16.8.1:
version "16.8.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.1.tgz#ec860f98853d09d39bafd3a6f1e12389d283dbb4"
dependencies:
@ -7199,7 +7211,7 @@ react-is@^16.6.0, react-is@^16.7.0:
version "16.8.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.1.tgz#a80141e246eb894824fb4f2901c0c50ef31d4cdb"
react@^16.7.0:
react@16.8.1:
version "16.8.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.1.tgz#ae11831f6cb2a05d58603a976afc8a558e852c4a"
dependencies:
@ -8119,7 +8131,7 @@ style-loader@0.23.0:
loader-utils "^1.1.0"
schema-utils "^0.4.5"
styled-components@^4.1.3:
styled-components@4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.1.3.tgz#4472447208e618b57e84deaaeb6acd34a5e0fe9b"
dependencies:
@ -8377,10 +8389,6 @@ tryer@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
ts-transform-graphql-tag@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/ts-transform-graphql-tag/-/ts-transform-graphql-tag-0.2.1.tgz#f596c491196b6a6a65b65a8b99bf6e2314c78017"
tslib@^1.9.0, tslib@^1.9.3:
version "1.9.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"