diff --git a/config/webpack.config.js b/config/webpack.config.js
index f758471..8529fa8 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -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.
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..c36c0e2
--- /dev/null
+++ b/package-lock.json
@@ -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
+ }
+ }
+}
diff --git a/package.json b/package.json
index c268cd8..a888d9f 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
new file mode 100644
index 0000000..879f9cc
Binary files /dev/null and b/public/android-chrome-192x192.png differ
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
new file mode 100644
index 0000000..63e10b5
Binary files /dev/null and b/public/android-chrome-512x512.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..f3ee06e
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
new file mode 100644
index 0000000..b3930d0
--- /dev/null
+++ b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+
+
+
+
+
+ #da532c
+
+
+
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 0000000..13dc71e
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 0000000..5749b49
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
old mode 100755
new mode 100644
index a11777c..292612f
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index 323182f..36c4719 100755
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,14 @@
+
+
+
+
+
+
+
+
- React App
+ Food Reservation
+
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
new file mode 100644
index 0000000..9623e63
Binary files /dev/null and b/public/mstile-150x150.png differ
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
new file mode 100644
index 0000000..e3373dc
--- /dev/null
+++ b/public/safari-pinned-tab.svg
@@ -0,0 +1,29 @@
+
+
+
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 0000000..b20abb7
--- /dev/null
+++ b/public/site.webmanifest
@@ -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"
+}
diff --git a/src/app.tsx b/src/app.tsx
index 0b65080..4ff8f26 100755
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -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() {
diff --git a/src/createReservation.tsx b/src/createReservation.tsx
index f2c8939..b454eea 100644
--- a/src/createReservation.tsx
+++ b/src/createReservation.tsx
@@ -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 {
- render() {
- const { storesData } = this.props;
- console.warn('stores data', storesData);
- return (
-
- );
- }
-}
+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('');
+ const onChangeQuantity = React.useCallback((productId: string, quantity: string) => {
+ setReservationProducts(rps => ({
+ ...rps,
+ [productId]: parseInt(quantity, 10)
+ }));
+ }, []);
+
+ const onSubmit = React.useCallback((e) => {
+ e.preventDefault();
+
+ }, [reservationProducts]);
+
+ return (
+
+ );
+});
+
+export default CreateReservation;
diff --git a/src/mutations.graphql b/src/mutations.graphql
new file mode 100644
index 0000000..e69de29
diff --git a/src/productTable.tsx b/src/productTable.tsx
new file mode 100644
index 0000000..04508a7
--- /dev/null
+++ b/src/productTable.tsx
@@ -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 (
+ Product table
+ );
+});
+
+export default ProductTable;
diff --git a/src/quantitySelect.tsx b/src/quantitySelect.tsx
new file mode 100644
index 0000000..082bf4f
--- /dev/null
+++ b/src/quantitySelect.tsx
@@ -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 (
+
+ );
+});
+
+export default QuantitySelect;
+
+
diff --git a/src/queries.graphql b/src/queries.graphql
index 3b12d9f..e69de29 100644
--- a/src/queries.graphql
+++ b/src/queries.graphql
@@ -1,6 +0,0 @@
-query getStores {
- stores {
- id
- name
- }
-}
\ No newline at end of file
diff --git a/src/queries.ts b/src/queries.ts
deleted file mode 100644
index 1d8c62c..0000000
--- a/src/queries.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { graphql } from 'react-apollo';
-import { getStores } from './queries.graphql';
-
-export const getStoresQuery = graphql(getStores, {
- name: 'storesData',
-});
\ No newline at end of file
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 737479e..b65039c 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -63,7 +63,6 @@ declare module '*.module.sass' {
export default classes;
}
-// graphql.d.ts file
declare module '*.graphql' {
import {DocumentNode} from 'graphql';
diff --git a/src/storeSelect.tsx b/src/storeSelect.tsx
new file mode 100644
index 0000000..78a9180
--- /dev/null
+++ b/src/storeSelect.tsx
@@ -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 (
+ Store select
+ );
+});
+
+export default StoreSelect;
+
+
+
+
diff --git a/yarn.lock b/yarn.lock
index 1ebfd39..ceb542f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"