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 @@ + + + + +Created by potrace 1.11, written by Peter Selinger 2001-2013 + + + + + 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 ( +
+

Create reservation

+ + + + + ); +}); + +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"