Compare commits
9 Commits
1.5.0
...
release/2.
| Author | SHA1 | Date | |
|---|---|---|---|
| 1341258c32 | |||
| 681dd80d3b | |||
| 407b57d2ac | |||
| d22d382127 | |||
| 029e28586b | |||
| 3d33eaf30c | |||
| 6fac6fa4fd | |||
| 98f4d61624 | |||
| 3c0e4a0184 |
@@ -1,20 +1,10 @@
|
||||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# http://editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
|
||||
# Change these settings to your own preference
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# We recommend you to keep these unchanged
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
# editorconfig-tools is unable to ignore longs strings or urls
|
||||
max_line_length = null
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
[ignore]
|
||||
.*/build
|
||||
.*/config
|
||||
.*/node_modules
|
||||
.*/gulpfile.js
|
||||
|
||||
[include]
|
||||
7
.gitattributes
vendored
7
.gitattributes
vendored
@@ -1,11 +1,4 @@
|
||||
# Automatically normalize line endings for all text-based files
|
||||
# http://git-scm.com/docs/gitattributes#_end_of_line_conversion
|
||||
* text=auto
|
||||
|
||||
# For the following file types, normalize line endings to LF on
|
||||
# checkin and prevent conversion to CRLF when they are checked out
|
||||
# (this is required in order to prevent newline related issues like,
|
||||
# for example, after the build script is run)
|
||||
.* text eol=lf
|
||||
*.html text eol=lf
|
||||
*.css text eol=lf
|
||||
|
||||
26
.gitignore
vendored
26
.gitignore
vendored
@@ -1,9 +1,19 @@
|
||||
# Include your project-specific ignores in this file
|
||||
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
|
||||
|
||||
build
|
||||
database.sqlite
|
||||
# dependencies
|
||||
node_modules
|
||||
ncp-debug.log
|
||||
npm-debug.log
|
||||
wedding.db
|
||||
|
||||
# testing
|
||||
coverage
|
||||
|
||||
# production
|
||||
build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
28
Dockerfile
28
Dockerfile
@@ -1,30 +1,14 @@
|
||||
FROM node:7.2.1-alpine
|
||||
FROM node:8.4.0-alpine
|
||||
|
||||
# Need cURL to report to Rollbar
|
||||
RUN apk --no-cache add curl git
|
||||
|
||||
# Copy app
|
||||
COPY ./ /usr/src/app
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
# Install dev + prod dependencies and build release
|
||||
RUN npm install --no-optional --silent
|
||||
|
||||
# Environment variables
|
||||
ENV DATABASE_PATH db/wedding.db
|
||||
ENV NODE_ENV production
|
||||
ENV PORT 80
|
||||
EXPOSE 80
|
||||
|
||||
# Run production build
|
||||
RUN npm run build -- --release --silent
|
||||
COPY ./ /usr/src/app
|
||||
|
||||
RUN curl https://api.rollbar.com/api/1/deploy/ \
|
||||
-F access_token=8bf333d044df48c19a6929e4b1613a8e \
|
||||
-F environment=production \
|
||||
-F revision=$(git log -n 1 --pretty=format:"%H") \
|
||||
-F local_username="$(git log -n 1 --pretty=format:"%an")"
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
WORKDIR /usr/src/app/build
|
||||
RUN npm install
|
||||
RUN npm run build
|
||||
|
||||
CMD [ "node", "server.js" ]
|
||||
CMD [ "node", "./server" ]
|
||||
|
||||
113
README.md
113
README.md
@@ -1,112 +1 @@
|
||||
# Wedding RSVP site
|
||||
Forked from [React Starter Kit](https://www.reactstarterkit.com)
|
||||
development built on top of [Node.js](https://nodejs.org/),
|
||||
[Express](http://expressjs.com/), [GraphQL](http://graphql.org/) and
|
||||
[React](https://facebook.github.io/react/), containing modern web development
|
||||
tools such as [Webpack](http://webpack.github.io/), [Babel](http://babeljs.io/)
|
||||
and [Browsersync](http://www.browsersync.io/). Helping you to stay productive
|
||||
following the best practices. A solid starting point for both professionals
|
||||
and newcomers to the industry.
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Requirements
|
||||
|
||||
* Mac OS X, Windows, or Linux
|
||||
* [Yarn](https://yarnpkg.com/) package + [Node.js](https://nodejs.org/) v6.5 or newer
|
||||
* `node-gyp` prerequisites mentioned [here](https://github.com/nodejs/node-gyp)
|
||||
* Text editor or IDE pre-configured with React/JSX/Flow/ESlint ([learn more](./how-to-configure-text-editors.md))
|
||||
|
||||
### Quick Start
|
||||
|
||||
#### 1. Run `yarn install`
|
||||
|
||||
This will install both run-time project dependencies and developer tools listed
|
||||
in [package.json](../package.json) file.
|
||||
|
||||
#### 2. Run `yarn start`
|
||||
|
||||
This command will build the app from the source files (`/src`) into the output
|
||||
`/build` folder. As soon as the initial build completes, it will start the
|
||||
Node.js server (`node build/server.js`) and [Browsersync](https://browsersync.io/)
|
||||
with [HMR](https://webpack.github.io/docs/hot-module-replacement) on top of it.
|
||||
|
||||
> [http://localhost:3000/](http://localhost:3000/) — Node.js server (`build/server.js`)<br>
|
||||
> [http://localhost:3000/graphql](http://localhost:3000/graphql) — GraphQL server and IDE<br>
|
||||
> [http://localhost:3001/](http://localhost:3001/) — BrowserSync proxy with HMR, React Hot Transform<br>
|
||||
> [http://localhost:3002/](http://localhost:3002/) — BrowserSync control panel (UI)
|
||||
|
||||
Now you can open your web app in a browser, on mobile devices and start
|
||||
hacking. Whenever you modify any of the source files inside the `/src` folder,
|
||||
the module bundler ([Webpack](http://webpack.github.io/)) will recompile the
|
||||
app on the fly and refresh all the connected browsers.
|
||||
|
||||
|
||||
|
||||
Note that the `yarn start` command launches the app in `development` mode,
|
||||
the compiled output files are not optimized and minimized in this case.
|
||||
You can use `--release` command line argument to check how your app works
|
||||
in release (production) mode:
|
||||
|
||||
```shell
|
||||
$ yarn start -- --release
|
||||
```
|
||||
*NOTE: double dashes are required*
|
||||
|
||||
|
||||
### How to Build, Test, Deploy
|
||||
|
||||
If you need just to build the app (without running a dev server), simply run:
|
||||
|
||||
```shell
|
||||
$ yarn run build
|
||||
```
|
||||
|
||||
or, for a production build:
|
||||
|
||||
```shell
|
||||
$ yarn run build -- --release
|
||||
```
|
||||
|
||||
or, for a production docker build:
|
||||
|
||||
```shell
|
||||
$ yarn run build -- --release --docker
|
||||
```
|
||||
|
||||
*NOTE: double dashes are required*
|
||||
|
||||
After running this command, the `/build` folder will contain the compiled
|
||||
version of the app. For example, you can launch Node.js server normally by
|
||||
running `node build/server.js`.
|
||||
|
||||
To check the source code for syntax errors and potential issues run:
|
||||
|
||||
```shell
|
||||
$ yarn run lint
|
||||
```
|
||||
|
||||
To launch unit tests:
|
||||
|
||||
```shell
|
||||
$ yarn run test # Run unit tests with Mocha
|
||||
$ yarn run test:watch # Launch unit test runner and start watching for changes
|
||||
```
|
||||
|
||||
By default, [Mocha](https://mochajs.org/) test runner is looking for test files
|
||||
matching the `src/**/*.test.js` pattern. Take a look at `src/components/Layout/Layout.test.js`
|
||||
as an example.
|
||||
|
||||
To deploy the app, run:
|
||||
|
||||
```shell
|
||||
$ yarn run deploy
|
||||
```
|
||||
|
||||
The deployment script `tools/deploy.js` is configured to push the contents of
|
||||
the `/build` folder to a remote server via Git. You can easily deploy your app
|
||||
to [Azure Web Apps](https://azure.microsoft.com/en-us/services/app-service/web/),
|
||||
or [Heroku](https://www.heroku.com/) this way. Both will execute `yarn install --production`
|
||||
upon receiving new files from you. Note, you should only deploy the contents
|
||||
of the `/build` folder to a remote server.
|
||||
|
||||
Node/Express + React project for my wedding/honeymoon photos
|
||||
|
||||
11121
package-lock.json
generated
Normal file
11121
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
241
package.json
241
package.json
@@ -1,226 +1,31 @@
|
||||
{
|
||||
"name": "wedding",
|
||||
"version": "1.4.0",
|
||||
"version": "2.0.0-SNAPSHOT",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=6.5",
|
||||
"npm": ">=3.10"
|
||||
},
|
||||
"proxy": "http://localhost:3001",
|
||||
"dependencies": {
|
||||
"babel-polyfill": "^6.20.0",
|
||||
"babel-runtime": "^6.20.0",
|
||||
"bluebird": "^3.4.6",
|
||||
"body-parser": "^1.15.2",
|
||||
"classnames": "^2.2.5",
|
||||
"cookie-parser": "^1.4.3",
|
||||
"core-js": "^2.4.1",
|
||||
"express": "^4.14.0",
|
||||
"express-bouncer": "^0.2.0",
|
||||
"express-graphql": "^0.6.1",
|
||||
"express-jwt": "^5.1.0",
|
||||
"fastclick": "^1.0.6",
|
||||
"fbjs": "^0.8.6",
|
||||
"graphql": "^0.8.2",
|
||||
"history": "^4.5.0",
|
||||
"isomorphic-style-loader": "^1.1.0",
|
||||
"jsonwebtoken": "^7.2.1",
|
||||
"node-fetch": "^1.6.3",
|
||||
"nodemailer": "^3.1.3",
|
||||
"normalize.css": "^5.0.0",
|
||||
"passport": "^0.3.2",
|
||||
"passport-facebook": "^2.1.1",
|
||||
"pretty-error": "^2.0.2",
|
||||
"query-string": "^4.2.3",
|
||||
"react": "^15.4.1",
|
||||
"react-dom": "^15.4.1",
|
||||
"react-google-maps": "6",
|
||||
"react-icon-base": "^2.0.4",
|
||||
"react-icons": "^2.2.3",
|
||||
"rollbar": "^0.6.3",
|
||||
"sequelize": "^3.28.0",
|
||||
"slack-node": "^0.1.8",
|
||||
"source-map-support": "^0.4.6",
|
||||
"sqlite3": "^3.1.8",
|
||||
"universal-router": "^2.0.0",
|
||||
"whatwg-fetch": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"assets-webpack-plugin": "^3.5.0",
|
||||
"autoprefixer": "^6.5.3",
|
||||
"babel-cli": "^6.18.0",
|
||||
"babel-core": "^6.18.2",
|
||||
"babel-eslint": "^7.1.1",
|
||||
"babel-loader": "^6.2.8",
|
||||
"babel-plugin-rewire": "^1.0.0",
|
||||
"babel-plugin-transform-runtime": "^6.15.0",
|
||||
"babel-preset-latest": "^6.16.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"babel-preset-react-optimize": "^1.0.1",
|
||||
"babel-preset-stage-0": "^6.16.0",
|
||||
"babel-register": "^6.18.0",
|
||||
"babel-template": "^6.16.0",
|
||||
"babel-types": "^6.19.0",
|
||||
"browser-sync": "^2.18.2",
|
||||
"chai": "^3.5.0",
|
||||
"chokidar": "^1.6.1",
|
||||
"css-loader": "^0.26.0",
|
||||
"editorconfig-tools": "^0.1.1",
|
||||
"enzyme": "^2.6.0",
|
||||
"extend": "^3.0.0",
|
||||
"file-loader": "^0.9.0",
|
||||
"front-matter": "^2.1.1",
|
||||
"git-repository": "^0.1.4",
|
||||
"glob": "^7.1.1",
|
||||
"json-loader": "^0.5.4",
|
||||
"lint-staged": "^3.2.2",
|
||||
"markdown-it": "^8.2.2",
|
||||
"mkdirp": "^0.5.1",
|
||||
"mocha": "^3.1.2",
|
||||
"pixrem": "^3.0.2",
|
||||
"pleeease-filters": "^3.0.0",
|
||||
"postcss": "^5.2.5",
|
||||
"postcss-calc": "^5.3.1",
|
||||
"postcss-color-function": "^2.0.1",
|
||||
"postcss-custom-media": "^5.0.1",
|
||||
"postcss-custom-properties": "^5.0.1",
|
||||
"postcss-custom-selectors": "^3.0.0",
|
||||
"postcss-flexbugs-fixes": "^2.0.0",
|
||||
"postcss-loader": "^1.1.1",
|
||||
"postcss-media-minmax": "^2.1.2",
|
||||
"postcss-nested": "^1.0.0",
|
||||
"postcss-nesting": "^2.3.1",
|
||||
"postcss-partial-import": "^2.1.0",
|
||||
"postcss-pseudoelements": "^3.0.0",
|
||||
"postcss-selector-matches": "^2.0.5",
|
||||
"postcss-selector-not": "^2.0.0",
|
||||
"postcss-url": "^5.1.2",
|
||||
"pre-commit": "^1.2.2",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react-addons-test-utils": "15.4.1",
|
||||
"react-deep-force-update": "^2.0.1",
|
||||
"react-hot-loader": "^3.0.0-beta.6",
|
||||
"redbox-react": "^1.3.3",
|
||||
"rimraf": "^2.5.4",
|
||||
"sinon": "^2.0.0-pre.3",
|
||||
"stylefmt": "^5.0.2",
|
||||
"stylelint": "^7.6.0",
|
||||
"stylelint-config-standard": "^15.0.0",
|
||||
"url-loader": "^0.5.7",
|
||||
"webpack": "^1.13.3",
|
||||
"webpack-hot-middleware": "^2.13.2",
|
||||
"webpack-middleware": "^1.5.1"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"eslint": "^3.10.2",
|
||||
"eslint-config-airbnb": "^13.0.0",
|
||||
"eslint-loader": "^1.6.1",
|
||||
"eslint-plugin-css-modules": "^1.0.9",
|
||||
"eslint-plugin-import": "^2.2.0",
|
||||
"eslint-plugin-jsx-a11y": "^2.2.3",
|
||||
"eslint-plugin-react": "^6.7.1"
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
"react",
|
||||
"stage-0"
|
||||
],
|
||||
"plugins": [
|
||||
"syntax-trailing-function-commas",
|
||||
"transform-async-to-generator",
|
||||
"transform-es2015-destructuring",
|
||||
"transform-es2015-parameters",
|
||||
"transform-es2015-duplicate-keys",
|
||||
"transform-es2015-modules-commonjs",
|
||||
"transform-exponentiation-operator",
|
||||
"transform-runtime"
|
||||
],
|
||||
"env": {
|
||||
"test": {
|
||||
"plugins": [
|
||||
"rewire"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"eslintConfig": {
|
||||
"parser": "babel-eslint",
|
||||
"extends": [
|
||||
"airbnb",
|
||||
"plugin:css-modules/recommended"
|
||||
],
|
||||
"plugins": [
|
||||
"css-modules"
|
||||
],
|
||||
"globals": {
|
||||
"__DEV__": true
|
||||
},
|
||||
"env": {
|
||||
"browser": true
|
||||
},
|
||||
"rules": {
|
||||
"arrow-parens": "off",
|
||||
"generator-star-spacing": "off",
|
||||
"import/extensions": "off",
|
||||
"import/no-extraneous-dependencies": "off",
|
||||
"react/forbid-prop-types": "off",
|
||||
"react/jsx-filename-extension": "off",
|
||||
"react/no-danger": "off",
|
||||
"react/no-unused-prop-types": "off",
|
||||
"react/prefer-stateless-function": "off"
|
||||
}
|
||||
},
|
||||
"stylelint": {
|
||||
"extends": "stylelint-config-standard",
|
||||
"rules": {
|
||||
"string-quotes": "single",
|
||||
"property-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignoreProperties": [
|
||||
"composes"
|
||||
]
|
||||
}
|
||||
],
|
||||
"selector-pseudo-class-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignorePseudoClasses": [
|
||||
"global"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"pre-commit": "lint:staged",
|
||||
"lint-staged": {
|
||||
"*.{md,sh,txt,xml,html,json}": [
|
||||
"editorconfig-tools fix",
|
||||
"git add"
|
||||
],
|
||||
"*.{js,jsx}": [
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
],
|
||||
"*.{css,less,scss,sss}": [
|
||||
"stylefmt",
|
||||
"stylelint",
|
||||
"git add"
|
||||
]
|
||||
"axios": "^0.16.2",
|
||||
"body-parser": "^1.18.1",
|
||||
"express": "^4.15.4",
|
||||
"firebase": "^4.3.1",
|
||||
"firebase-admin": "^5.2.1",
|
||||
"oauth": "^0.9.15",
|
||||
"re-base": "^3.0.3",
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-scripts": "1.0.13",
|
||||
"styled-components": "^2.1.2"
|
||||
},
|
||||
"scripts": {
|
||||
"lint:js": "eslint src tools",
|
||||
"lint:css": "stylelint \"src/**/*.{css,less,scss,sss}\"",
|
||||
"lint:staged": "lint-staged",
|
||||
"lint": "npm run lint:js && npm run lint:css",
|
||||
"test": "mocha \"src/**/*.test.js\" --require babel-register --require test/setup.js",
|
||||
"test:watch": "npm run test -- --reporter min --watch",
|
||||
"clean": "babel-node tools/run clean",
|
||||
"copy": "babel-node tools/run copy",
|
||||
"bundle": "babel-node tools/run bundle",
|
||||
"build": "babel-node tools/run build",
|
||||
"deploy": "babel-node tools/run deployToAzureWebApps",
|
||||
"render": "babel-node tools/run render",
|
||||
"serve": "babel-node tools/run runServer",
|
||||
"start": "babel-node tools/run start"
|
||||
"start": "concurrently \"react-scripts start\" \"nodemon --watch server server\"",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject",
|
||||
"serve": "node ./server"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^3.5.0",
|
||||
"nodemon": "^1.12.0"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
@@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Please read: http://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square70x70logo src="tile.png"/>
|
||||
<square150x150logo src="tile.png"/>
|
||||
<wide310x150logo src="tile-wide.png"/>
|
||||
<square310x310logo src="tile.png"/>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
@@ -1,15 +0,0 @@
|
||||
<?xml version="1.0"?>
|
||||
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
|
||||
<cross-domain-policy>
|
||||
<!-- Read this: https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->
|
||||
|
||||
<!-- Most restrictive policy: -->
|
||||
<site-control permitted-cross-domain-policies="none"/>
|
||||
|
||||
<!-- Least restrictive policy: -->
|
||||
<!--
|
||||
<site-control permitted-cross-domain-policies="all"/>
|
||||
<allow-access-from domain="*" to-ports="*" secure="false"/>
|
||||
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
|
||||
-->
|
||||
</cross-domain-policy>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 3.8 KiB |
@@ -1,15 +0,0 @@
|
||||
# humanstxt.org/
|
||||
# The humans responsible & technology colophon
|
||||
|
||||
# TEAM
|
||||
|
||||
Daniel Head -- Developer/Groom -- @danhead
|
||||
|
||||
# THANKS
|
||||
|
||||
Hana Becka, for saying yes
|
||||
|
||||
# TECHNOLOGY COLOPHON
|
||||
|
||||
CSS3, HTML5, JavaScript
|
||||
React, Flux, SuperAgent
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 925 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 964 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 752 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 666 KiB |
18
public/index.html
Normal file
18
public/index.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<title>Daniel and Hana's Wedding</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
15
public/manifest.json
Normal file
15
public/manifest.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"short_name": "Wedding Photos",
|
||||
"name": "Daniel and Hana's Wedding Photos",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
# www.robotstxt.org/
|
||||
|
||||
# Allow crawling of all content
|
||||
User-agent: *
|
||||
Disallow:
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
BIN
public/tile.png
BIN
public/tile.png
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
34
server/index.js
Normal file
34
server/index.js
Normal file
@@ -0,0 +1,34 @@
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
const bodyParser = require('body-parser');
|
||||
const admin = require('firebase-admin');
|
||||
const serviceAccount = require('./serviceAccountKey.json');
|
||||
|
||||
admin.initializeApp({
|
||||
credential: admin.credential.cert(serviceAccount),
|
||||
databaseURL: 'https://daniel-hana-wedding.firebaseio.com',
|
||||
});
|
||||
|
||||
const db = admin.database();
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3001;
|
||||
|
||||
const routes = require('./routes');
|
||||
|
||||
app.use(bodyParser.json());
|
||||
|
||||
// Prioritise static assets
|
||||
app.use(express.static(path.resolve(__dirname, '../build')));
|
||||
|
||||
// Load server side routes
|
||||
routes(app, db);
|
||||
|
||||
// Return React app for all other GET requests
|
||||
app.get('*', function (req, res) {
|
||||
res.sendFile(path.resolve(__dirname, '../build', 'index.html'));
|
||||
});
|
||||
|
||||
app.listen(PORT, function() {
|
||||
console.log(`Listening on port ${PORT}`);
|
||||
});
|
||||
41
server/routes/approveuid.js
Normal file
41
server/routes/approveuid.js
Normal file
@@ -0,0 +1,41 @@
|
||||
const express = require('express');
|
||||
const admin = require('firebase-admin');
|
||||
const router = express.Router();
|
||||
|
||||
const route = function (db) {
|
||||
router.get('/', function(req, res, next) {
|
||||
res.sendStatus(404);
|
||||
});
|
||||
router.get('/:uid', function(req, res, next) {
|
||||
const uid = req.params.uid;
|
||||
admin.auth().getUser(uid)
|
||||
.then(function() {
|
||||
const userRef = db.ref(`/users/${uid}`);
|
||||
userRef.set({
|
||||
approved: true,
|
||||
});
|
||||
admin.auth().createCustomToken(uid, {
|
||||
approved: true,
|
||||
}).then(function(customToken) {
|
||||
return res.json({
|
||||
success: true,
|
||||
token: customToken,
|
||||
});
|
||||
}).catch(function(err) {
|
||||
console.error('Error creating custom token', err);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
error: err,
|
||||
});
|
||||
});
|
||||
}).catch(function(err) {
|
||||
return res.json({
|
||||
success: false,
|
||||
error: err,
|
||||
});
|
||||
});
|
||||
});
|
||||
return router;
|
||||
}
|
||||
|
||||
module.exports = route;
|
||||
37
server/routes/auth.js
Normal file
37
server/routes/auth.js
Normal file
@@ -0,0 +1,37 @@
|
||||
const express = require('express');
|
||||
const OAuth = require('oauth');
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
const route = function () {
|
||||
router.get('/', function(req, res, next) {
|
||||
res.json({ error: 'Provider required' });
|
||||
});
|
||||
router.get('/:provider', function(req, res, next) {
|
||||
const provider = req.params.provider;
|
||||
if (provider === 'twitter') {
|
||||
const oauth = new OAuth.OAuth(
|
||||
'https://api.twitter.com/oauth/request_token',
|
||||
'https://api.twitter.com/oauth/access_token',
|
||||
'DTODqeC3HjKXF0fttqkq30BcD',
|
||||
'gkZZNajvdzK9GeIHAByMtQZqj7DOAv3z3iitq3YtNH7wAZ1YyC',
|
||||
'1.0A',
|
||||
null,
|
||||
'HMAC-SHA1',
|
||||
);
|
||||
oauth.getOAuthRequestToken(function(err, token, secret) {
|
||||
if (err) {
|
||||
return res.status(500).json({ success: false, error: err });
|
||||
}
|
||||
return res.json({
|
||||
success: true,
|
||||
token: token,
|
||||
secret: secret,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
return router;
|
||||
}
|
||||
|
||||
module.exports = route;
|
||||
28
server/routes/deleteallusers.js
Normal file
28
server/routes/deleteallusers.js
Normal file
@@ -0,0 +1,28 @@
|
||||
const express = require('express');
|
||||
const admin = require('firebase-admin');
|
||||
const router = express.Router();
|
||||
|
||||
const route = function (db) {
|
||||
router.get('/', function(req, res, next) {
|
||||
const usersRef = db.ref('/users');
|
||||
usersRef.once('value', function(s) {
|
||||
const users = s.val();
|
||||
Object.keys(users).forEach(function(user) {
|
||||
const delRef = db.ref(`/users/${user}`);
|
||||
delRef.remove()
|
||||
.then(function() {
|
||||
admin.auth().deleteUser(user);
|
||||
}).catch(function(err) {
|
||||
console.error(err);
|
||||
});
|
||||
});
|
||||
return res.json({
|
||||
deleted: true,
|
||||
users: users,
|
||||
});
|
||||
});
|
||||
});
|
||||
return router;
|
||||
}
|
||||
|
||||
module.exports = route;
|
||||
9
server/routes/index.js
Normal file
9
server/routes/index.js
Normal file
@@ -0,0 +1,9 @@
|
||||
const routes = function(app, db) {
|
||||
app.use('/api/validate', require('./validate')(db))
|
||||
app.use('/api/upgrade', require('./upgrade')(db))
|
||||
app.use('/api/delete-all-users', require('./deleteallusers')(db));
|
||||
app.use('/api/approve-uid', require('./approveuid')(db));
|
||||
// app.use('/api/auth', require('./auth')());
|
||||
}
|
||||
|
||||
module.exports = routes;
|
||||
66
server/routes/upgrade.js
Normal file
66
server/routes/upgrade.js
Normal file
@@ -0,0 +1,66 @@
|
||||
const express = require('express');
|
||||
const admin = require('firebase-admin');
|
||||
const router = express.Router();
|
||||
|
||||
const route = function(db) {
|
||||
router.post('/', function(req, res, next) {
|
||||
const currentUid = req.body.currentUid;
|
||||
const newUid = req.body.newUid;
|
||||
|
||||
if (!currentUid || !newUid) {
|
||||
return res.json({
|
||||
success: false,
|
||||
error: 'currentUid or newUid missing',
|
||||
});
|
||||
}
|
||||
|
||||
const currentRef = db.ref(`/users/${currentUid}`);
|
||||
const newRef = db.ref(`/users/${newUid}`);
|
||||
|
||||
currentRef.once('value', function(s) {
|
||||
const currentData = s.val();
|
||||
// set data for new user
|
||||
newRef.set(currentData);
|
||||
// delete data for current user
|
||||
currentRef.remove().then(function() {
|
||||
// delete current user
|
||||
admin.auth().deleteUser(currentUid).then(function() {
|
||||
if (currentData.approved) {
|
||||
// TODO: Does this endpoint need more protection?
|
||||
// transfer approval to new user
|
||||
admin.auth().createCustomToken(newUid, {
|
||||
approved: true,
|
||||
}).then(function(customToken) {
|
||||
return res.json({
|
||||
success: true,
|
||||
token: customToken,
|
||||
});
|
||||
}).catch(function(err) {
|
||||
console.error('Error creating custom token', err);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
error: err,
|
||||
});
|
||||
});
|
||||
}
|
||||
}).catch(function(err) {
|
||||
console.error(err);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
error: err,
|
||||
});
|
||||
});
|
||||
}).catch(function(err) {
|
||||
console.error(err);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
error: err,
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return router;
|
||||
}
|
||||
|
||||
module.exports = route;
|
||||
65
server/routes/validate.js
Normal file
65
server/routes/validate.js
Normal file
@@ -0,0 +1,65 @@
|
||||
const express = require('express');
|
||||
const admin = require('firebase-admin');
|
||||
const router = express.Router();
|
||||
|
||||
const route = function(db) {
|
||||
router.post('/', function(req, res, next) {
|
||||
const password = req.body.password;
|
||||
const passwordRef = db.ref('server/password');
|
||||
passwordRef.once('value', function(s) {
|
||||
res.json({
|
||||
valid: password === s.val(),
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
router.post('/uid', function(req, res, next) {
|
||||
const password = req.body.password;
|
||||
const uid = req.body.uid;
|
||||
const passwordRef = db.ref('server/password');
|
||||
passwordRef.once('value', function(s) {
|
||||
if (!uid) {
|
||||
return res.status(400).json({
|
||||
error: 'No UID',
|
||||
});
|
||||
}
|
||||
const valid = password === s.val();
|
||||
admin.auth().getUser(uid).then(function() {
|
||||
const userRef = db.ref(`users/${uid}`)
|
||||
.set({
|
||||
isAdmin: false,
|
||||
isAnonymous: true,
|
||||
approved: valid,
|
||||
});
|
||||
if (valid) {
|
||||
admin.auth().createCustomToken(uid, {
|
||||
approved: true,
|
||||
}).then(function(customToken) {
|
||||
return res.json({
|
||||
valid: true,
|
||||
token: customToken,
|
||||
});
|
||||
}).catch(function(err) {
|
||||
console.error('Error creating custom token', err);
|
||||
return res.status(500).json({
|
||||
error: 'Internal server error',
|
||||
});
|
||||
});
|
||||
} else {
|
||||
return res.json({
|
||||
valid: false,
|
||||
});
|
||||
}
|
||||
}).catch(function(err) {
|
||||
return res.json({
|
||||
valid: false,
|
||||
error: err,
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return router;
|
||||
}
|
||||
|
||||
module.exports = route;
|
||||
24
src/App.css
Normal file
24
src/App.css
Normal file
@@ -0,0 +1,24 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #222;
|
||||
height: 150px;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-intro {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
102
src/App.js
Normal file
102
src/App.js
Normal file
@@ -0,0 +1,102 @@
|
||||
import React, { Component } from 'react';
|
||||
import { BrowserRouter, Route } from 'react-router-dom';
|
||||
|
||||
import BackgroundImage from './components/BackgroundImage';
|
||||
import Menu from './components/Menu';
|
||||
import Login from './components/Login';
|
||||
import Albums from './components/Albums';
|
||||
|
||||
import { auth, bucket, db } from './rebase';
|
||||
|
||||
import './App.css';
|
||||
|
||||
const emptyUser = {
|
||||
uid: null,
|
||||
displayName: null,
|
||||
photoURL: null,
|
||||
data: {},
|
||||
}
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
bgImgUrl: null,
|
||||
user: {...emptyUser},
|
||||
albums: {},
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
// Set up auth state observer
|
||||
auth.onAuthStateChanged((res) => {
|
||||
if (res) {
|
||||
const user = {...this.state.user};
|
||||
user.uid = res.uid;
|
||||
user.displayName = res.displayName;
|
||||
user.photoURL = res.photoURL;
|
||||
user.data = {};
|
||||
this.setState({ user });
|
||||
if (!this.userStateBinding) {
|
||||
this.userStateBinding = db.bindToState(`users/${user.uid}`, {
|
||||
context: this,
|
||||
state: 'user.data',
|
||||
});
|
||||
}
|
||||
if(!this.albumDataBinding) {
|
||||
this.albumDataBinding = db.bindToState('albums', {
|
||||
context: this,
|
||||
state: 'albums',
|
||||
});
|
||||
}
|
||||
} else if (this.userStateBinding) {
|
||||
db.removeBinding(this.userStateBinding);
|
||||
db.removeBinding(this.albumDataBinding);
|
||||
this.setState({
|
||||
user: {...emptyUser},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Get BG Image URL
|
||||
bucket.ref('/public/images/background_loggedout.jpg').getDownloadURL().then(bgImgUrl => {
|
||||
this.setState({ bgImgUrl });
|
||||
});
|
||||
}
|
||||
|
||||
renderLogin = () => {
|
||||
return (
|
||||
<div>
|
||||
<Login user={this.state.user} />
|
||||
<BackgroundImage url={this.state.bgImgUrl} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render
|
||||
|
||||
render() {
|
||||
if (this.state.user.uid) {
|
||||
return (
|
||||
<div>
|
||||
<BrowserRouter>
|
||||
<Route path="/" exact render={() => {
|
||||
return <Albums albums={this.state.albums} />
|
||||
}} />
|
||||
</BrowserRouter>
|
||||
<Menu user={this.state.user} />
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
<Login user={this.state.user} />
|
||||
<BackgroundImage url={this.state.bgImgUrl} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
8
src/App.test.js
Normal file
8
src/App.test.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
});
|
||||
8
src/Colours.js
Normal file
8
src/Colours.js
Normal file
@@ -0,0 +1,8 @@
|
||||
const Colours = {
|
||||
nearblack: '#242424',
|
||||
darkgrey: '#2A2B2F',
|
||||
offwhite: '#EFEFEF',
|
||||
white: '#FFFFFF',
|
||||
}
|
||||
|
||||
export default Colours;
|
||||
189
src/client.js
189
src/client.js
@@ -1,189 +0,0 @@
|
||||
import 'babel-polyfill';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import FastClick from 'fastclick';
|
||||
import UniversalRouter from 'universal-router';
|
||||
import queryString from 'query-string';
|
||||
import { createPath } from 'history/PathUtils';
|
||||
import history from './core/history';
|
||||
import App from './components/App';
|
||||
import { ErrorReporter, deepForceUpdate } from './core/devUtils';
|
||||
|
||||
// Global (context) variables that can be easily accessed from any React component
|
||||
// https://facebook.github.io/react/docs/context.html
|
||||
const context = {
|
||||
// Enables critical path CSS rendering
|
||||
// https://github.com/kriasoft/isomorphic-style-loader
|
||||
insertCss: (...styles) => {
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
const removeCss = styles.map(x => x._insertCss());
|
||||
return () => { removeCss.forEach(f => f()); };
|
||||
},
|
||||
};
|
||||
|
||||
function updateTag(tagName, keyName, keyValue, attrName, attrValue) {
|
||||
const node = document.head.querySelector(`${tagName}[${keyName}="${keyValue}"]`);
|
||||
if (node && node.getAttribute(attrName) === attrValue) return;
|
||||
|
||||
// Remove and create a new tag in order to make it work with bookmarks in Safari
|
||||
if (node) {
|
||||
node.parentNode.removeChild(node);
|
||||
}
|
||||
if (typeof attrValue === 'string') {
|
||||
const nextNode = document.createElement(tagName);
|
||||
nextNode.setAttribute(keyName, keyValue);
|
||||
nextNode.setAttribute(attrName, attrValue);
|
||||
document.head.appendChild(nextNode);
|
||||
}
|
||||
}
|
||||
function updateMeta(name, content) {
|
||||
updateTag('meta', 'name', name, 'content', content);
|
||||
}
|
||||
function updateCustomMeta(property, content) { // eslint-disable-line no-unused-vars
|
||||
updateTag('meta', 'property', property, 'content', content);
|
||||
}
|
||||
function updateLink(rel, href) { // eslint-disable-line no-unused-vars
|
||||
updateTag('link', 'rel', rel, 'href', href);
|
||||
}
|
||||
|
||||
// Switch off the native scroll restoration behavior and handle it manually
|
||||
// https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration
|
||||
const scrollPositionsHistory = {};
|
||||
if (window.history && 'scrollRestoration' in window.history) {
|
||||
window.history.scrollRestoration = 'manual';
|
||||
}
|
||||
|
||||
let onRenderComplete = function initialRenderComplete() {
|
||||
const elem = document.getElementById('css');
|
||||
if (elem) elem.parentNode.removeChild(elem);
|
||||
onRenderComplete = function renderComplete(route, location) {
|
||||
document.title = route.title;
|
||||
|
||||
updateMeta('description', route.description);
|
||||
// Update necessary tags in <head> at runtime here, ie:
|
||||
// updateMeta('keywords', route.keywords);
|
||||
// updateCustomMeta('og:url', route.canonicalUrl);
|
||||
// updateCustomMeta('og:image', route.imageUrl);
|
||||
// updateLink('canonical', route.canonicalUrl);
|
||||
// etc.
|
||||
|
||||
let scrollX = 0;
|
||||
let scrollY = 0;
|
||||
const pos = scrollPositionsHistory[location.key];
|
||||
if (pos) {
|
||||
scrollX = pos.scrollX;
|
||||
scrollY = pos.scrollY;
|
||||
} else {
|
||||
const targetHash = location.hash.substr(1);
|
||||
if (targetHash) {
|
||||
const target = document.getElementById(targetHash);
|
||||
if (target) {
|
||||
scrollY = window.pageYOffset + target.getBoundingClientRect().top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Restore the scroll position if it was saved into the state
|
||||
// or scroll to the given #hash anchor
|
||||
// or scroll to top of the page
|
||||
window.scrollTo(scrollX, scrollY);
|
||||
|
||||
// Google Analytics tracking. Don't send 'pageview' event after
|
||||
// the initial rendering, as it was already sent
|
||||
if (window.ga) {
|
||||
window.ga('send', 'pageview', createPath(location));
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// Make taps on links and buttons work fast on mobiles
|
||||
FastClick.attach(document.body);
|
||||
|
||||
const container = document.getElementById('app');
|
||||
let appInstance;
|
||||
let currentLocation = history.location;
|
||||
let routes = require('./routes').default;
|
||||
|
||||
// Re-render the app when window.location changes
|
||||
async function onLocationChange(location) {
|
||||
// Remember the latest scroll position for the previous location
|
||||
scrollPositionsHistory[currentLocation.key] = {
|
||||
scrollX: window.pageXOffset,
|
||||
scrollY: window.pageYOffset,
|
||||
};
|
||||
// Delete stored scroll position for next page if any
|
||||
if (history.action === 'PUSH') {
|
||||
delete scrollPositionsHistory[location.key];
|
||||
}
|
||||
currentLocation = location;
|
||||
|
||||
try {
|
||||
// Traverses the list of routes in the order they are defined until
|
||||
// it finds the first route that matches provided URL path string
|
||||
// and whose action method returns anything other than `undefined`.
|
||||
const route = await UniversalRouter.resolve(routes, {
|
||||
path: location.pathname,
|
||||
query: queryString.parse(location.search),
|
||||
});
|
||||
|
||||
// Prevent multiple page renders during the routing process
|
||||
if (currentLocation.key !== location.key) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (route.redirect) {
|
||||
history.replace(route.redirect);
|
||||
return;
|
||||
}
|
||||
|
||||
appInstance = ReactDOM.render(
|
||||
<App context={context}>{route.component}</App>,
|
||||
container,
|
||||
() => onRenderComplete(route, location),
|
||||
);
|
||||
} catch (error) {
|
||||
console.error(error); // eslint-disable-line no-console
|
||||
|
||||
// Current url has been changed during navigation process, do nothing
|
||||
if (currentLocation.key !== location.key) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Display the error in full-screen for development mode
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
appInstance = null;
|
||||
document.title = `Error: ${error.message}`;
|
||||
ReactDOM.render(<ErrorReporter error={error} />, container);
|
||||
return;
|
||||
}
|
||||
|
||||
// Avoid broken navigation in production mode by a full page reload on error
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
// Handle client-side navigation by using HTML5 History API
|
||||
// For more information visit https://github.com/mjackson/history#readme
|
||||
history.listen(onLocationChange);
|
||||
onLocationChange(currentLocation);
|
||||
|
||||
// Enable Hot Module Replacement (HMR)
|
||||
if (module.hot) {
|
||||
module.hot.accept('./routes', () => {
|
||||
routes = require('./routes').default; // eslint-disable-line global-require
|
||||
|
||||
if (appInstance) {
|
||||
try {
|
||||
// Force-update the whole tree, including components that refuse to update
|
||||
deepForceUpdate(appInstance);
|
||||
} catch (error) {
|
||||
appInstance = null;
|
||||
document.title = `Hot Update Error: ${error.message}`;
|
||||
ReactDOM.render(<ErrorReporter error={error} />, container);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
onLocationChange(currentLocation);
|
||||
});
|
||||
}
|
||||
23
src/components/Albums.js
Normal file
23
src/components/Albums.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
|
||||
class Albums extends React.Component {
|
||||
|
||||
renderCard = (key) => {
|
||||
return (
|
||||
<div>
|
||||
Card - {key}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.props.albums);
|
||||
return (
|
||||
<div className="hello">
|
||||
{Object.keys(this.props.albums).map(this.renderCard)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Albums;
|
||||
@@ -1,52 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
|
||||
const ContextType = {
|
||||
// Enables critical path CSS rendering
|
||||
// https://github.com/kriasoft/isomorphic-style-loader
|
||||
insertCss: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
/**
|
||||
* The top-level React component setting context (global) variables
|
||||
* that can be accessed from all the child components.
|
||||
*
|
||||
* https://facebook.github.io/react/docs/context.html
|
||||
*
|
||||
* Usage example:
|
||||
*
|
||||
* const context = {
|
||||
* history: createBrowserHistory(),
|
||||
* store: createStore(),
|
||||
* };
|
||||
*
|
||||
* ReactDOM.render(
|
||||
* <App context={context}>
|
||||
* <Layout>
|
||||
* <LandingPage />
|
||||
* </Layout>
|
||||
* </App>,
|
||||
* container,
|
||||
* );
|
||||
*/
|
||||
class App extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
context: PropTypes.shape(ContextType).isRequired,
|
||||
children: PropTypes.element.isRequired,
|
||||
};
|
||||
|
||||
static childContextTypes = ContextType;
|
||||
|
||||
getChildContext() {
|
||||
return this.props.context;
|
||||
}
|
||||
|
||||
render() {
|
||||
// NOTE: If you need to add or modify header, footer etc. of the app,
|
||||
// please do that inside the Layout component.
|
||||
return React.Children.only(this.props.children);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default App;
|
||||
24
src/components/BackgroundImage.js
Normal file
24
src/components/BackgroundImage.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
class BackgroundImage extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<BackgroundImg url={this.props.url} />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const BackgroundImg = styled.div`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: ${props => props.url ? `url(${props.url}) no-repeat center top` : ''};
|
||||
background-size: cover;
|
||||
filter: blur(5px);
|
||||
`;
|
||||
|
||||
export default BackgroundImage;
|
||||
@@ -1,27 +0,0 @@
|
||||
@import '../variables.css';
|
||||
|
||||
.root {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 10px 16px;
|
||||
width: 100%;
|
||||
opacity: 0.75;
|
||||
outline: 0;
|
||||
border: 4px solid #fff;
|
||||
border-radius: 14px;
|
||||
background: var(--colour-nearblack);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
cursor: pointer;
|
||||
transition: opacity ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
|
||||
}
|
||||
|
||||
.root:hover,
|
||||
.root:focus {
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 0 4px #fff;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import withStyles from 'isomorphic-style-loader/lib/withStyles';
|
||||
import s from './Button.css';
|
||||
|
||||
class Button extends React.Component {
|
||||
static propTypes = {
|
||||
to: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
handleClick = (event) => {
|
||||
if (this.props.onClick) {
|
||||
this.props.onClick(event);
|
||||
}
|
||||
|
||||
if (this.props.to) {
|
||||
window.location.href = this.props.to;
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { children, ...props } = this.props;
|
||||
return <button className={s.root} {...props} onClick={this.handleClick}>{children}</button>;
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(s)(Button);
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Button",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"main": "./Button.js"
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { analytics } from '../config';
|
||||
|
||||
class Html extends React.Component {
|
||||
static propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
description: PropTypes.string.isRequired,
|
||||
style: PropTypes.string,
|
||||
scripts: PropTypes.arrayOf(PropTypes.string.isRequired),
|
||||
children: PropTypes.string,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { title, description, style, scripts, children } = this.props;
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Palanquin+Dark|Niconne" />
|
||||
{style && <style id="css" dangerouslySetInnerHTML={{ __html: style }} />}
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAY-RO-FaBZyAh8FDJneMc6NjMdK2D8WtQ" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" dangerouslySetInnerHTML={{ __html: children }} />
|
||||
{scripts && scripts.map(script => <script key={script} src={script} />)}
|
||||
{analytics.google.trackingId &&
|
||||
<script
|
||||
dangerouslySetInnerHTML={{ __html:
|
||||
'window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;' +
|
||||
`ga('create','${analytics.google.trackingId}','auto');ga('send','pageview')` }}
|
||||
/>
|
||||
}
|
||||
{analytics.google.trackingId &&
|
||||
<script src="https://www.google-analytics.com/analytics.js" async defer />
|
||||
}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Html;
|
||||
@@ -1,173 +0,0 @@
|
||||
@import '../../../node_modules/normalize.css/normalize.css';
|
||||
@import '../variables.css';
|
||||
|
||||
/*
|
||||
* Base styles
|
||||
* ========================================================================== */
|
||||
|
||||
html {
|
||||
color: #222;
|
||||
font-weight: 100;
|
||||
font-size: 1em; /* ~16px; */
|
||||
font-family: var(--font-family-base);
|
||||
line-height: 1.375; /* ~22px */
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0074c2;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove text-shadow in selection highlight:
|
||||
* https://twitter.com/miketaylr/status/12228805301
|
||||
*
|
||||
* These selection rule sets have to be separate.
|
||||
* Customize the background color to match your design.
|
||||
*/
|
||||
|
||||
::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* A better looking default horizontal rule
|
||||
*/
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the gap between audio, canvas, iframes,
|
||||
* images, videos and the bottom of their containers:
|
||||
* https://github.com/h5bp/html5-boilerplate/issues/440
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove default fieldset styles.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Allow only vertical resizing of textareas.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/*
|
||||
* Browser upgrade prompt
|
||||
* ========================================================================== */
|
||||
|
||||
:global(.browserupgrade) {
|
||||
margin: 0.2em 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Print styles
|
||||
* Inlined to avoid the additional HTTP request:
|
||||
* http://www.phpied.com/delay-loading-your-print-css/
|
||||
* ========================================================================== */
|
||||
|
||||
@media print {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
background: transparent !important;
|
||||
color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]::after {
|
||||
content: ' (' attr(href) ')';
|
||||
}
|
||||
|
||||
abbr[title]::after {
|
||||
content: ' (' attr(title) ')';
|
||||
}
|
||||
|
||||
/*
|
||||
* Don't show links that are fragment identifiers,
|
||||
* or use the `javascript:` pseudo protocol
|
||||
*/
|
||||
|
||||
a[href^='#']::after,
|
||||
a[href^='javascript:']::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/*
|
||||
* Printing Tables:
|
||||
* http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
*/
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import withStyles from 'isomorphic-style-loader/lib/withStyles';
|
||||
import s from './Layout.css';
|
||||
import Navigation from '../Navigation';
|
||||
|
||||
class Layout extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
current: PropTypes.string,
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Navigation current={this.props.current} />
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(s)(Layout);
|
||||
@@ -1,23 +0,0 @@
|
||||
/* eslint-env mocha */
|
||||
/* eslint-disable padded-blocks, no-unused-expressions */
|
||||
|
||||
import React from 'react';
|
||||
import { expect } from 'chai';
|
||||
import { render } from 'enzyme';
|
||||
import App from '../App';
|
||||
import Layout from './Layout';
|
||||
|
||||
describe('Layout', () => {
|
||||
|
||||
it('renders children correctly', () => {
|
||||
const wrapper = render(
|
||||
<App context={{ insertCss: () => {} }}>
|
||||
<Layout>
|
||||
<div className="child" />
|
||||
</Layout>
|
||||
</App>,
|
||||
);
|
||||
expect(wrapper.find('div.child').length).to.eq(1);
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Layout",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"main": "./Layout.js"
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import history from '../../core/history';
|
||||
|
||||
function isLeftClickEvent(event) {
|
||||
return event.button === 0;
|
||||
}
|
||||
|
||||
function isModifiedEvent(event) {
|
||||
return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
|
||||
}
|
||||
|
||||
class Link extends React.Component {
|
||||
static propTypes = {
|
||||
to: PropTypes.string.isRequired,
|
||||
children: PropTypes.node,
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
handleClick = (event) => {
|
||||
if (this.props.onClick) {
|
||||
this.props.onClick(event);
|
||||
}
|
||||
|
||||
if (isModifiedEvent(event) || !isLeftClickEvent(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.defaultPrevented === true) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
history.push(this.props.to);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { to, children, ...props } = this.props;
|
||||
return <a href={to} {...props} onClick={this.handleClick}>{children}</a>;
|
||||
}
|
||||
}
|
||||
|
||||
export default Link;
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Link",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"main": "./Link.js"
|
||||
}
|
||||
186
src/components/Login.js
Normal file
186
src/components/Login.js
Normal file
@@ -0,0 +1,186 @@
|
||||
import React from 'react';
|
||||
import firebase from 'firebase';
|
||||
import axios from 'axios';
|
||||
import styled from 'styled-components';
|
||||
import { auth } from '../rebase';
|
||||
import Colours from '../Colours';
|
||||
|
||||
class Login extends React.Component {
|
||||
state = {
|
||||
authProvider: null,
|
||||
password: null,
|
||||
passwordValid: false,
|
||||
}
|
||||
|
||||
componentWillUpdate(prev, next) {
|
||||
const authProvider = next.authProvider;
|
||||
if (!this.props.user.uid && next.passwordValid && authProvider) {
|
||||
const password = next.password;
|
||||
if (authProvider === 'anonymous') {
|
||||
auth.signInAnonymously().then(res => {
|
||||
this.submitUid(res.uid, password);
|
||||
}).catch(this.handleError);
|
||||
} else if (authProvider === 'twitter') {
|
||||
const provider = new firebase.auth.TwitterAuthProvider();
|
||||
auth.signInWithPopup(provider).then(res => {
|
||||
this.submitUid(res.user.uid, password);
|
||||
}).catch(this.handleError);
|
||||
} else if (authProvider === 'facebook') {
|
||||
const provider = new firebase.auth.FacebookAuthProvider();
|
||||
provider.addScope('email');
|
||||
auth.signInWithPopup(provider).then(res => {
|
||||
this.submitUid(res.user.uid, password);
|
||||
}).catch(err => console.error(err));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleError = (err) => {
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
submitPassword = (e) => {
|
||||
e.preventDefault();
|
||||
const password = this.password.value;
|
||||
if (this.props.user.uid) {
|
||||
return this.submitUid(this.props.user.uid, password);
|
||||
}
|
||||
this.form.reset();
|
||||
axios.post('/api/validate', { password }).then((res) => {
|
||||
if (res.data.valid) {
|
||||
console.log(password);
|
||||
this.setState({
|
||||
password,
|
||||
passwordValid: true,
|
||||
});
|
||||
}
|
||||
}).catch(this.handleError);
|
||||
}
|
||||
|
||||
submitUid = (uid, password) => {
|
||||
if (uid && password) {
|
||||
axios.post('/api/validate/uid', { uid, password }).then(res => {
|
||||
auth.signInWithCustomToken(res.data.token)
|
||||
.catch(this.handleError);
|
||||
}).catch(this.handleError);
|
||||
}
|
||||
}
|
||||
/*
|
||||
authWithTwitterUpgrade = () => {
|
||||
const currentUid = this.props.user.uid;
|
||||
const provider = new firebase.auth.TwitterAuthProvider();
|
||||
auth.signInWithPopup(provider).then(res => {
|
||||
const newUid = res.user.uid;
|
||||
if (newUid) {
|
||||
setTimeout(() => {
|
||||
console.log('upgrading', { currentUid, newUid });
|
||||
axios.post('/api/upgrade', {
|
||||
currentUid,
|
||||
newUid,
|
||||
}).then(res => {
|
||||
auth.signInWithCustomToken(res.data.token)
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}).catch(err => console.error(err));
|
||||
},500);
|
||||
}
|
||||
}).catch(err => console.error(err));
|
||||
}
|
||||
*/
|
||||
|
||||
authAnonymously = (e) => {
|
||||
e.preventDefault();
|
||||
this.setState({ authProvider: 'anonymous' });
|
||||
}
|
||||
|
||||
authWithProvider = (authProvider) => {
|
||||
this.setState({ authProvider });
|
||||
}
|
||||
|
||||
renderPasswordInput = () => {
|
||||
return (
|
||||
<div>
|
||||
<p>Please enter the password to continue</p>
|
||||
<form ref={(el) => this.form = el} onSubmit={(e) => this.submitPassword(e)}>
|
||||
<Input type="text" innerRef={(el) => this.password = el} placeholder="Password" />
|
||||
<Button type="submit">Go!</Button>
|
||||
<Button onClick={() => this.setState({ authProvider: null })}>Back</Button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderIntro = () => {
|
||||
return (
|
||||
<div>
|
||||
<h2>Sign in</h2>
|
||||
<Link href="" onClick={this.authAnonymously}>Sign in anonymously</Link>
|
||||
<p>or</p>
|
||||
<p>Sign in with:</p>
|
||||
<Button onClick={() => this.authWithProvider('facebook')}>Facebook</Button>
|
||||
<Button onClick={() => this.authWithProvider('twitter')}>Twitter</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
const authProvider = this.state.authProvider;
|
||||
const isAuthed = this.props.user.uid !== null;
|
||||
const isApproved = this.props.user.data.approved;
|
||||
const isAnonymous = this.props.user.data.isAnonymous;
|
||||
const isValid = this.state.passwordValid;
|
||||
console.log({ authProvider, isAuthed, isApproved, isAnonymous, isValid });
|
||||
|
||||
let state;
|
||||
if (!isAuthed && !authProvider) {
|
||||
state = 'intro';
|
||||
} else if ((!isAuthed && !isValid) || !isApproved) {
|
||||
state = 'password';
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<LoginOverlay />
|
||||
<LoginContainer>
|
||||
{ state === 'intro' ? this.renderIntro() : '' }
|
||||
{ state === 'password' ? this.renderPasswordInput() : '' }
|
||||
</LoginContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const LoginOverlay = styled.div`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index:24;
|
||||
background-color: ${Colours.white};
|
||||
opacity: .6;
|
||||
`;
|
||||
const LoginContainer = styled.div`
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
padding: 5%;
|
||||
text-align: center;
|
||||
z-index: 25;
|
||||
background-color: ${Colours.white};
|
||||
`
|
||||
const Link = styled.a`
|
||||
text-decoration: none;
|
||||
`
|
||||
const Input = styled.input`
|
||||
border: 1px solid black;
|
||||
`;
|
||||
const Button = styled.button`
|
||||
background-color: lightblue;
|
||||
padding: 15px;
|
||||
border: 0;
|
||||
color: ${Colours.nearblack}
|
||||
`
|
||||
|
||||
export default Login;
|
||||
@@ -1,21 +0,0 @@
|
||||
.root {
|
||||
height: 360px;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
overflow: hidden;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.map {
|
||||
height: 360px;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.infoTitle {
|
||||
margin: 2px 0 10px;
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import withStyles from 'isomorphic-style-loader/lib/withStyles';
|
||||
import { withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps';
|
||||
import s from './Map.css';
|
||||
|
||||
class Map extends React.Component {
|
||||
static propTypes = {
|
||||
defaultZoom: PropTypes.number.isRequired,
|
||||
defaultCenter: PropTypes.shape({
|
||||
lat: PropTypes.number.isRequired,
|
||||
lng: PropTypes.number.isRequired,
|
||||
}).isRequired,
|
||||
markers: PropTypes.arrayOf(PropTypes.shape({
|
||||
title: PropTypes.string.isRequired,
|
||||
position: PropTypes.shape({
|
||||
lat: PropTypes.number.isRequired,
|
||||
lng: PropTypes.number.isRequired,
|
||||
}).isRequired,
|
||||
showInfo: PropTypes.boolean,
|
||||
infoContent: PropTypes.string,
|
||||
})).isRequired,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
markers: this.props.markers,
|
||||
};
|
||||
}
|
||||
|
||||
handleMarkerClick = (targetMarker) => {
|
||||
this.setState({
|
||||
markers: this.state.markers.map(marker => {
|
||||
if (marker === targetMarker) {
|
||||
return {
|
||||
...marker,
|
||||
showInfo: true,
|
||||
};
|
||||
}
|
||||
return marker;
|
||||
}),
|
||||
});
|
||||
};
|
||||
|
||||
handleMarkerClose = (targetMarker) => {
|
||||
this.setState({
|
||||
markers: this.state.markers.map(marker => {
|
||||
if (marker === targetMarker) {
|
||||
return {
|
||||
...marker,
|
||||
showInfo: false,
|
||||
};
|
||||
}
|
||||
return marker;
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const GMap = withGoogleMap(() => (
|
||||
<GoogleMap
|
||||
defaultZoom={this.props.defaultZoom}
|
||||
defaultCenter={this.props.defaultCenter}
|
||||
>
|
||||
{this.state.markers.map((marker, index) => (
|
||||
<Marker
|
||||
key={index}
|
||||
defaultAnimation="2"
|
||||
{...marker}
|
||||
onClick={() => this.handleMarkerClick(marker)}
|
||||
>
|
||||
{marker.showInfo && (
|
||||
<InfoWindow
|
||||
onCloseClick={() => this.handleMarkerClose(marker)}
|
||||
>
|
||||
<div className={s.info}>
|
||||
<h6 className={s.infoTitle}>
|
||||
{marker.url ? (
|
||||
<a href={marker.url}>{marker.title}</a>
|
||||
) : marker.title }
|
||||
</h6>
|
||||
{marker.infoContent}
|
||||
</div>
|
||||
</InfoWindow>
|
||||
)}
|
||||
</Marker>
|
||||
))}
|
||||
</GoogleMap>
|
||||
));
|
||||
return (
|
||||
<GMap
|
||||
containerElement={
|
||||
<div className={s.root} />
|
||||
}
|
||||
mapElement={
|
||||
<div className={s.map} />
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(s)(Map);
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Map",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"main": "./Map.js"
|
||||
}
|
||||
133
src/components/Menu.js
Normal file
133
src/components/Menu.js
Normal file
@@ -0,0 +1,133 @@
|
||||
import React from 'react';
|
||||
import { auth } from '../rebase';
|
||||
import styled from 'styled-components';
|
||||
import Colours from '../Colours';
|
||||
|
||||
class Menu extends React.Component {
|
||||
state = {
|
||||
expanded: false,
|
||||
}
|
||||
|
||||
logout = () => {
|
||||
auth.signOut();
|
||||
}
|
||||
|
||||
toggleMenu = () => {
|
||||
this.setState({ expanded: !this.state.expanded });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MenuContainer expanded={this.state.expanded}>
|
||||
<MenuButton onClick={this.toggleMenu} expanded={this.state.expanded}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</MenuButton>
|
||||
<LogoutButton expanded={this.state.expanded} onClick={this.logout}>Log out</LogoutButton>
|
||||
</MenuContainer>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const MenuContainer = styled.div`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
opacity: ${props => props.expanded ? '1' : '.6'};
|
||||
min-width: ${props => props.expanded ? '140px' : '50px'};
|
||||
min-height: ${props => props.expanded ? '100%' : '42px'};
|
||||
background-color: ${Colours.darkgrey};
|
||||
overflow: hidden;
|
||||
transition: min-width .5s ease-in-out,
|
||||
min-height .5s ease-in-out,
|
||||
opacity .5s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-top: ${props => props.expanded ? `0 solid ${Colours.darkgrey}` : `32px solid ${Colours.darkgrey}`};
|
||||
border-right: ${props => props.expanded ? `0 solid ${Colours.white}` : `40px solid ${Colours.white}`};
|
||||
transition: border-top .5s ease,
|
||||
border-right .5s ease;
|
||||
}
|
||||
`
|
||||
|
||||
const MenuButton = styled.button`
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
z-index: 10;
|
||||
background: none;
|
||||
color: ${Colours.offwhite};
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transform: rotate(0deg);
|
||||
transition: .5s ease-in-out;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
border-radius: 9px;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
transition: .25s ease-in-out;
|
||||
background-color: ${props => props.expanded ? Colours.offwhite : Colours.white}
|
||||
}
|
||||
|
||||
span:nth-child(1) {
|
||||
top: ${props => props.expanded ? '9px' : '0'};
|
||||
left: ${props => props.expanded ? '50%' : '0'};
|
||||
width: ${props => props.expanded ? '0%' : '100%'};
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
top: 9px;
|
||||
transform: ${props => props.expanded ? 'rotate(45deg)' : ''};
|
||||
}
|
||||
span:nth-child(3) {
|
||||
top: 9px;
|
||||
transform: ${props => props.expanded ? 'rotate(-45deg)' : ''};
|
||||
}
|
||||
|
||||
span:nth-child(4) {
|
||||
top: ${props => props.expanded ? '9px' : '18px'};
|
||||
left: ${props => props.expanded ? '50%' : '0'};
|
||||
width: ${props => props.expanded ? '0%' : '100%'};
|
||||
}
|
||||
`
|
||||
|
||||
const LogoutButton = styled.button`
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: ${props => props.expanded ? '0' : '-100%'};
|
||||
width: 100%;
|
||||
z-index:10;
|
||||
border: 0;
|
||||
padding: 15px 0;
|
||||
background-color: ${Colours.nearblack};
|
||||
color: ${Colours.offwhite};
|
||||
cursor: pointer;
|
||||
transition: left .5s ease-in-out;
|
||||
transition-delay: ${props => props.expanded ? '.75s' : '0s'};
|
||||
`
|
||||
|
||||
export default Menu;
|
||||
@@ -1,43 +0,0 @@
|
||||
.root {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
transition: background 0.3s, ease-in;
|
||||
}
|
||||
|
||||
.navDark {
|
||||
background: rgba(60, 60, 60, 0.95);
|
||||
}
|
||||
|
||||
.container {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-block;
|
||||
padding: 8px 2% 6px;
|
||||
text-decoration: none;
|
||||
font-size: 1.125em;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: color 0.3s ease-in, border-color 0.3s ease-in;
|
||||
}
|
||||
|
||||
.link,
|
||||
.link:visited {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.active,
|
||||
.link:active,
|
||||
.link:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
border-color: #fff;
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import withStyles from 'isomorphic-style-loader/lib/withStyles';
|
||||
import s from './Navigation.css';
|
||||
import Link from '../Link';
|
||||
|
||||
class Navigation extends React.Component {
|
||||
static propTypes = {
|
||||
current: PropTypes.string,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
scrollAtTop: true,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
}
|
||||
|
||||
handleScroll = (event) => {
|
||||
const scrollTop = event.srcElement.body.scrollTop;
|
||||
this.setState({
|
||||
scrollAtTop: scrollTop < 10,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
if (!this.props.current) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
s.root,
|
||||
this.state.scrollAtTop ? null : s.navDark,
|
||||
].join(' ')}
|
||||
role="navigation"
|
||||
>
|
||||
<div className={s.container}>
|
||||
<Link className={[s.link, this.props.current === 'home' ? s.active : null].join(' ')} to="/">RSVP</Link>
|
||||
<Link className={[s.link, this.props.current === 'ceremony' ? s.active : null].join(' ')} to="/church">Church</Link>
|
||||
<Link className={[s.link, this.props.current === 'reception' ? s.active : null].join(' ')} to="/venue">Venue</Link>
|
||||
<Link className={[s.link, this.props.current === 'accomodation' ? s.active : null].join(' ')} to="/hotels">Hotels</Link>
|
||||
<Link className={[s.link, this.props.current === 'transport' ? s.active : null].join(' ')} to="/transport">Transport</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(s)(Navigation);
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Navigation",
|
||||
"version": "1.1.1",
|
||||
"private": true,
|
||||
"main": "./Navigation.js"
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
@import '../variables.css';
|
||||
|
||||
.root {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 0 0 40px;
|
||||
max-width: var(--max-content-width);
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import withStyles from 'isomorphic-style-loader/lib/withStyles';
|
||||
import s from './Page.css';
|
||||
|
||||
class Page extends React.Component {
|
||||
static propTypes = {
|
||||
title: PropTypes.string,
|
||||
html: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { title, html } = this.props;
|
||||
return (
|
||||
<div className={s.root}>
|
||||
<div className={s.container}>
|
||||
{title && <h1>{title}</h1>}
|
||||
<div dangerouslySetInnerHTML={{ __html: html }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(s)(Page);
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Page",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"main": "./Page.js"
|
||||
}
|
||||
74
src/components/Passcode.js
Normal file
74
src/components/Passcode.js
Normal file
@@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
import { auth } from '../rebase';
|
||||
import axios from 'axios';
|
||||
import style from 'styled-components';
|
||||
|
||||
const Input = style.input`
|
||||
border: 1px solid black;
|
||||
`;
|
||||
const Button = style.button`
|
||||
border: 1px solid black;
|
||||
`
|
||||
|
||||
class Passcode extends React.Component {
|
||||
componentWillMount() {
|
||||
this.props.registerAuthStateChange('passcode', (user) => {
|
||||
console.log('passcode register state change');
|
||||
if (user && !user.allowed && this.passcode.value) {
|
||||
this.postData();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
postData = () => {
|
||||
axios.post('/api/validate', {
|
||||
passcode: this.passcode.value,
|
||||
uid: this.props.user.uid,
|
||||
}).then((res) => {
|
||||
this.form.reset();
|
||||
if (res.data.valid) {
|
||||
auth.signInWithCustomToken(res.data.token)
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
} else {
|
||||
this.handleFail();
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.error(err);
|
||||
this.form.reset();
|
||||
this.handleFail();
|
||||
});
|
||||
}
|
||||
|
||||
submitForm = (e) => {
|
||||
e.preventDefault();
|
||||
if (this.props.user.uid) {
|
||||
this.postData();
|
||||
} else {
|
||||
// Create anon account
|
||||
auth.signInAnonymously();
|
||||
}
|
||||
}
|
||||
|
||||
handleSuccess = () => {
|
||||
|
||||
}
|
||||
|
||||
handleFail = () => {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<form ref={(el) => this.form = el} onSubmit={(e) => this.submitForm(e)}>
|
||||
<Input type="text" innerRef={(el) => this.passcode = el} placeholder="Passcode" />
|
||||
<Button type="submit">Go!</Button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Passcode;
|
||||
@@ -1,102 +0,0 @@
|
||||
@import '../variables.css';
|
||||
|
||||
.root {
|
||||
margin: 0 auto;
|
||||
max-width: 420px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rsvp,
|
||||
.rsvpForm {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transition: opacity ease-in-out 0.25s;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.rsvpVisible,
|
||||
.rsvpFormVisible {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.formGroup {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
left: -1000px;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 16px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
opacity: 0.75;
|
||||
outline: 0;
|
||||
border: 3px solid #fff;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
color: #616161;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 4px #fff;
|
||||
}
|
||||
|
||||
.inputInvalid {
|
||||
animation: shake 0.5s linear;
|
||||
}
|
||||
|
||||
.invalidMsg {
|
||||
display: none;
|
||||
padding: 10px 16px;
|
||||
border: 2px solid var(--colour-red);
|
||||
border-radius: 14px;
|
||||
background: var(--colour-nearblack);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
transition: opacity ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
|
||||
}
|
||||
|
||||
.invalidMsgVisible {
|
||||
display: inline-block;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
8%,
|
||||
41% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
25%,
|
||||
58% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
|
||||
92% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@@ -1,152 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import withStyles from 'isomorphic-style-loader/lib/withStyles';
|
||||
import s from './RsvpButton.css';
|
||||
import fetch from '../../core/fetch';
|
||||
import Button from '../Button';
|
||||
|
||||
class RsvpButton extends React.Component {
|
||||
static propTypes = {
|
||||
focusCallback: PropTypes.func,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
showRsvpForm = () => {
|
||||
this.setState({ showRsvpForm: true });
|
||||
setTimeout(() => {
|
||||
this.rsvpInput.focus();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
handleRsvpFocus = () => {
|
||||
if (this.props.focusCallback) {
|
||||
this.props.focusCallback(true);
|
||||
}
|
||||
this.setState({ inputError: false });
|
||||
}
|
||||
|
||||
handleRsvpBlur = () => {
|
||||
if (this.props.focusCallback) {
|
||||
this.props.focusCallback(false);
|
||||
}
|
||||
this.setState({ showRsvpForm: false });
|
||||
}
|
||||
|
||||
handleRsvpChange = () => {
|
||||
this.setState({ inputInvalidMsg: null });
|
||||
if (this.rsvpInput.value && this.rsvpInput.value.length === 4) {
|
||||
this.validateRsvp();
|
||||
}
|
||||
}
|
||||
|
||||
handleFormSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
this.validateRsvp();
|
||||
}
|
||||
|
||||
validateRsvp = () => {
|
||||
fetch(`rsvp/${this.rsvpInput.value}`, {
|
||||
method: 'get',
|
||||
credentials: 'include',
|
||||
}).then(data => {
|
||||
if (data.status === 200) {
|
||||
location.href = data.url;
|
||||
} else if (data.status === 429) {
|
||||
this.setState({
|
||||
inputInvalid: true,
|
||||
inputInvalidMsg: 'You have made too many incorrect attempts. Please try again later.',
|
||||
inputDisabled: true,
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
inputInvalid: false,
|
||||
inputDisabled: false,
|
||||
});
|
||||
}, 10 * 60 * 1000);
|
||||
} else {
|
||||
this.setState({
|
||||
inputInvalid: true,
|
||||
inputInvalidMsg: 'Sorry, that RSVP code is invalid.',
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
inputInvalid: false,
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
}).catch(() => {
|
||||
this.setState({
|
||||
inputInvalid: true,
|
||||
inputInvalidMsg: 'Sorry, there was a problem validating your RSVP code, please try again later.',
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={s.root}>
|
||||
<div
|
||||
className={[
|
||||
s.rsvp,
|
||||
!this.state.showRsvpForm ? s.rsvpVisible : null,
|
||||
].join(' ')}
|
||||
>
|
||||
<Button onClick={this.showRsvpForm}>
|
||||
RSVP
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
s.rsvpForm,
|
||||
this.state.showRsvpForm ? s.rsvpFormVisible : null,
|
||||
].join(' ')}
|
||||
>
|
||||
<form
|
||||
method="post"
|
||||
action="/rsvp"
|
||||
ref={(form) => { this.rsvpForm = form; }}
|
||||
onSubmit={this.handleFormSubmit}
|
||||
>
|
||||
<div className={s.formGroup}>
|
||||
<label className={s.label} htmlFor="code">
|
||||
Enter your RSVP code
|
||||
</label>
|
||||
<input
|
||||
className={[
|
||||
s.input,
|
||||
this.state.inputInvalid ? s.inputInvalid : null,
|
||||
].join(' ')}
|
||||
ref={(input) => { this.rsvpInput = input; }}
|
||||
onFocus={this.handleRsvpFocus}
|
||||
onBlur={this.handleRsvpBlur}
|
||||
onChange={this.handleRsvpChange}
|
||||
disabled={this.state.inputDisabled}
|
||||
id="code"
|
||||
type="text"
|
||||
name="code"
|
||||
minLength="4"
|
||||
maxLength="4"
|
||||
placeholder="Enter your RSVP code"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
className={[
|
||||
s.invalidMsg,
|
||||
this.state.inputInvalidMsg ? s.invalidMsgVisible : null,
|
||||
].join(' ')}
|
||||
role="alert"
|
||||
>
|
||||
{this.state.inputInvalidMsg}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(s)(RsvpButton);
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "RsvpButton",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"main": "./RsvpButton.js"
|
||||
}
|
||||
@@ -1,94 +0,0 @@
|
||||
@import '../variables.css';
|
||||
|
||||
.root {
|
||||
width: 100%;
|
||||
margin: 0 0 40px;
|
||||
padding: 20px;
|
||||
border: 3px solid #fff;
|
||||
border-radius: 14px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (--sm-viewport) {
|
||||
.root {
|
||||
width: 40%;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.formGroup {
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
max-width: 100%;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 16px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
opacity: 0.75;
|
||||
outline: 0;
|
||||
border: 3px solid #fff;
|
||||
border-radius: 14px;
|
||||
background-color: #fff;
|
||||
color: #616161;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
transition: border-color ease-in-out 0.3s, box-shadow ease-in-out 0.3s, background-color ease-in-out 0.3s;
|
||||
}
|
||||
|
||||
.input:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 4px #fff;
|
||||
}
|
||||
|
||||
.inputSuccess {
|
||||
background-color: var(--colour-green);
|
||||
}
|
||||
|
||||
.inputError {
|
||||
background-color: var(--colour-red);
|
||||
}
|
||||
|
||||
.rsvpDetails {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rsvpDetailsVisible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.iconContainer {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.rsvpSummary {
|
||||
opacity: 0;
|
||||
font-size: 18px;
|
||||
transition: opacity ease-in-out 0.4s;
|
||||
}
|
||||
|
||||
.rsvpSummarySuccess {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.rsvpSummaryReadOnly {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -1,294 +0,0 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import cx from 'classnames';
|
||||
import withStyles from 'isomorphic-style-loader/lib/withStyles';
|
||||
import { MdCheck, MdError } from 'react-icons/lib/md';
|
||||
import s from './RsvpCard.css';
|
||||
import { starters, mains } from '../../config';
|
||||
|
||||
class RsvpCard extends React.Component {
|
||||
static propTypes = {
|
||||
focusCallback: PropTypes.func,
|
||||
className: PropTypes.string,
|
||||
person: PropTypes.shape({
|
||||
key: PropTypes.string,
|
||||
firstname: PropTypes.string,
|
||||
lastname: PropTypes.string,
|
||||
email: PropTypes.string,
|
||||
password: PropTypes.string,
|
||||
completed: PropTypes.boolean,
|
||||
attending: PropTypes.boolean,
|
||||
ceremony: PropTypes.boolean,
|
||||
dietary: PropTypes.string,
|
||||
starter: PropTypes.string,
|
||||
main: PropTypes.string,
|
||||
}).isRequired,
|
||||
isEditable: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
detailsVisible: this.props.person.attending,
|
||||
saveAttending: this.props.person.attending ? 'saved' : null,
|
||||
saveStarter: this.props.person.starter !== '-1' ? 'saved' : null,
|
||||
saveMain: this.props.person.main !== '-1' ? 'saved' : null,
|
||||
saveDietary: this.props.person.dietary ? 'saved' : null,
|
||||
};
|
||||
|
||||
if (!this.props.isEditable) {
|
||||
this.state.summaryState = 'readonly';
|
||||
this.state.summary = 'Sorry, you can no longer change your RSVP.';
|
||||
}
|
||||
}
|
||||
|
||||
isRSVPComplete(prop, value) {
|
||||
function isOK(str) {
|
||||
return (str === 'saved' || str === 'success');
|
||||
}
|
||||
|
||||
if (prop === 'attending' && value === 'false') { return true; }
|
||||
|
||||
if (!this.props.person.ceremony) { return true; }
|
||||
|
||||
return (isOK(this.state.saveAttending) &&
|
||||
isOK(this.state.saveStarter) &&
|
||||
isOK(this.state.saveMain));
|
||||
}
|
||||
|
||||
saveData(prop, value) {
|
||||
const stateKey = `save${prop.charAt(0).toUpperCase()}${prop.slice(1)}`;
|
||||
const state = {};
|
||||
|
||||
fetch('/rsvp/save', {
|
||||
method: 'post',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
key: this.props.person.key,
|
||||
prop,
|
||||
value,
|
||||
}),
|
||||
credentials: 'include',
|
||||
}).then(res => res.json())
|
||||
.then(data => {
|
||||
state[stateKey] = data.success ? 'success' : 'error';
|
||||
this.setState(state);
|
||||
if (this.isRSVPComplete(prop, value)) {
|
||||
this.setState({
|
||||
summaryState: 'success',
|
||||
summary: `Thanks ${this.props.person.firstname}, your RSVP has been received`,
|
||||
});
|
||||
|
||||
if (!this.state.saveCompleted) {
|
||||
this.setState({ saveCompleted: true });
|
||||
this.saveData('completed', true);
|
||||
}
|
||||
}
|
||||
|
||||
state[stateKey] = data.success ? 'saved' : 'error';
|
||||
setTimeout(() => {
|
||||
this.setState(state);
|
||||
}, 1000);
|
||||
}).catch(() => {
|
||||
state[stateKey] = 'error';
|
||||
});
|
||||
}
|
||||
|
||||
handleAttendingChange = (event) => {
|
||||
this.saveData('attending', event.target.value);
|
||||
this.setState({
|
||||
detailsVisible: event.target.value === 'true',
|
||||
attendingResponse: event.target.value === 'true' ? '👍' : '☹️',
|
||||
});
|
||||
};
|
||||
|
||||
handleDietaryBlur = (event) => {
|
||||
this.saveData('dietary', event.target.value);
|
||||
};
|
||||
|
||||
handleDietaryChange = (event) => {
|
||||
const value = event.target.value;
|
||||
clearTimeout(this.dietaryChangeTimer);
|
||||
this.dietaryChangeTimer = setTimeout(() => {
|
||||
this.saveData('dietary', value);
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
handleStarterChange = (event) => {
|
||||
this.saveData('starter', event.target.value);
|
||||
};
|
||||
|
||||
handleMainChange = (event) => {
|
||||
this.saveData('main', event.target.value);
|
||||
};
|
||||
|
||||
handleFormSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={cx(s.root, this.props.className)}>
|
||||
<h2>
|
||||
{this.props.person.firstname} {this.props.person.lastname}
|
||||
<span> {this.state.attendingResponse}</span>
|
||||
</h2>
|
||||
<form onSubmit={this.handleFormSubmit}>
|
||||
<div className={s.formGroup}>
|
||||
<label className={s.label} htmlFor="attending">
|
||||
Attending:
|
||||
</label>
|
||||
{this.props.person.attending === null ?
|
||||
<select
|
||||
className={[
|
||||
s.input,
|
||||
this.state.saveAttending === 'success' ? s.inputSuccess : null,
|
||||
this.state.saveAttending === 'error' ? s.inputError : null,
|
||||
].join(' ')}
|
||||
id="attending"
|
||||
name="attending"
|
||||
defaultValue="-1"
|
||||
onChange={this.handleAttendingChange}
|
||||
onFocus={this.props.focusCallback}
|
||||
disabled={!this.props.isEditable}
|
||||
>
|
||||
<option value="-1" disabled>Will you be attending?</option>
|
||||
<option value="true">
|
||||
Yes
|
||||
</option>
|
||||
<option value="false">
|
||||
No
|
||||
</option>
|
||||
</select>
|
||||
:
|
||||
<select
|
||||
className={[
|
||||
s.input,
|
||||
this.state.saveAttending === 'success' ? s.inputSuccess : null,
|
||||
this.state.saveAttending === 'error' ? s.inputError : null,
|
||||
].join(' ')}
|
||||
id="attending"
|
||||
name="attending"
|
||||
defaultValue={this.props.person.attending === true ? 'true' : 'false'}
|
||||
onChange={this.handleAttendingChange}
|
||||
onFocus={this.props.focusCallback}
|
||||
disabled={!this.props.isEditable}
|
||||
>
|
||||
<option value="true">
|
||||
Yes
|
||||
</option>
|
||||
<option value="false">
|
||||
No
|
||||
</option>
|
||||
</select>
|
||||
}
|
||||
<div className={s.iconContainer}>
|
||||
{this.state.saveAttending === 'saved' ? <MdCheck size={30} color="green" /> : null}
|
||||
{this.state.saveAttending === 'error' ? <MdError size={30} color="red" /> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
s.rsvpDetails,
|
||||
this.state.detailsVisible && this.props.person.ceremony ? s.rsvpDetailsVisible : null,
|
||||
].join(' ')}
|
||||
>
|
||||
<div className={s.formGroup}>
|
||||
<label className={s.label} htmlFor="starter">
|
||||
Starter:
|
||||
</label>
|
||||
<select
|
||||
className={[
|
||||
s.input,
|
||||
this.state.saveStarter === 'success' ? s.inputSuccess : null,
|
||||
this.state.saveStarter === 'error' ? s.inputError : null,
|
||||
].join(' ')}
|
||||
id="starter"
|
||||
name="starter"
|
||||
defaultValue={this.props.person.starter}
|
||||
onChange={this.handleStarterChange}
|
||||
onFocus={this.props.focusCallback}
|
||||
disabled={!this.props.isEditable}
|
||||
>
|
||||
{this.props.person.starter === '-1' ? <option value="-1" disabled>Please select a starter</option> : null}
|
||||
{starters.map((starter, index) => (
|
||||
<option key={index} value={index}>{starter}</option>
|
||||
))}
|
||||
</select>
|
||||
<div className={s.iconContainer}>
|
||||
{this.state.saveStarter === 'saved' ? <MdCheck size={30} color="green" /> : null}
|
||||
{this.state.saveStarter === 'error' ? <MdError size={30} color="red" /> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.formGroup}>
|
||||
<label className={s.label} htmlFor="main">
|
||||
Main:
|
||||
</label>
|
||||
<select
|
||||
className={[
|
||||
s.input,
|
||||
this.state.saveMain === 'success' ? s.inputSuccess : null,
|
||||
this.state.saveMain === 'error' ? s.inputError : null,
|
||||
].join(' ')}
|
||||
id="main"
|
||||
name="main"
|
||||
defaultValue={this.props.person.main}
|
||||
onChange={this.handleMainChange}
|
||||
onFocus={this.props.focusCallback}
|
||||
disabled={!this.props.isEditable}
|
||||
>
|
||||
{this.props.person.main === '-1' ? <option value="-1" disabled>Please select a main course</option> : null}
|
||||
{mains.map((main, index) => (
|
||||
<option key={index} value={index}>{main}</option>
|
||||
))}
|
||||
</select>
|
||||
<div className={s.iconContainer}>
|
||||
{this.state.saveMain === 'saved' ? <MdCheck size={30} color="green" /> : null}
|
||||
{this.state.saveMain === 'error' ? <MdError size={30} color="red" /> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.formGroup}>
|
||||
<label className={s.label} htmlFor="dietary">
|
||||
Dietary requirements (if any):
|
||||
</label>
|
||||
<input
|
||||
className={[
|
||||
s.input,
|
||||
this.state.saveDietary === 'success' ? s.inputSuccess : null,
|
||||
this.state.saveDietary === 'error' ? s.inputError : null,
|
||||
].join(' ')}
|
||||
id="dietary"
|
||||
type="text"
|
||||
name="dietary"
|
||||
autoComplete="off"
|
||||
defaultValue={this.props.person.dietary}
|
||||
onChange={this.handleDietaryChange}
|
||||
onBlur={this.handleDietaryBlur}
|
||||
onFocus={this.props.focusCallback}
|
||||
disabled={!this.props.isEditable}
|
||||
placeholder="None"
|
||||
/>
|
||||
<div className={s.iconContainer}>
|
||||
{this.state.saveDietary === 'saved' ? <MdCheck size={30} color="green" /> : null}
|
||||
{this.state.saveDietary === 'error' ? <MdError size={30} color="red" /> : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
className={[
|
||||
s.rsvpSummary,
|
||||
this.state.summaryState === 'success' ? s.rsvpSummarySuccess : null,
|
||||
this.state.summaryState === 'readonly' ? s.rsvpSummaryReadOnly : null,
|
||||
].join(' ')}
|
||||
>
|
||||
{this.state.summary}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(s)(RsvpCard);
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "RsvpCard",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"main": "./RsvpCard.js"
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
:root {
|
||||
/*
|
||||
* Typography
|
||||
* ======================================================================== */
|
||||
|
||||
--font-family-base: 'Palanquin Dark', 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
|
||||
--font-family-cursive: 'Niconne', cursive;
|
||||
|
||||
/*
|
||||
* Layout
|
||||
* ======================================================================== */
|
||||
|
||||
--max-content-width: 1000px;
|
||||
|
||||
/*
|
||||
* Media queries breakpoints
|
||||
* ======================================================================== */
|
||||
|
||||
@custom-media --xs-viewport (min-width: 480px);
|
||||
@custom-media --sm-viewport (min-width: 768px);
|
||||
@custom-media --md-viewport (min-width: 992px);
|
||||
@custom-media --lg-viewport (min-width: 1200px);
|
||||
|
||||
/*
|
||||
* Colour palette
|
||||
* ======================================================================== */
|
||||
|
||||
--colour-nearblack: #282828;
|
||||
--colour-primary: #6495ed;
|
||||
--colour-secondary: #2a6feb;
|
||||
--colour-tertiary: #2a6feb;
|
||||
--colour-grey: #ccc;
|
||||
--colour-green: #87eda2;
|
||||
--colour-red: #fa7575;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import { adminUsers } from '../config';
|
||||
|
||||
export default function (email) {
|
||||
return adminUsers.indexOf(email) !== -1;
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
/* eslint-disable global-require */
|
||||
|
||||
if (module.hot || process.env.NODE_ENV !== 'production') {
|
||||
module.exports = {
|
||||
// The red box (aka red screen of death) component to display your errors
|
||||
// https://github.com/commissure/redbox-react
|
||||
ErrorReporter: require('redbox-react').default,
|
||||
|
||||
// Force-updates React component tree recursively
|
||||
// https://github.com/gaearon/react-deep-force-update
|
||||
deepForceUpdate: require('react-deep-force-update'),
|
||||
};
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
import Nodemailer from 'nodemailer';
|
||||
import { email, starters, mains, prettifyDate } from '../config';
|
||||
import Rollbar from './rollbar';
|
||||
import Settings from '../data/models/Settings';
|
||||
|
||||
const transporter = Nodemailer.createTransport({
|
||||
service: 'gmail',
|
||||
auth: {
|
||||
user: email.senderAddress,
|
||||
pass: email.password,
|
||||
},
|
||||
});
|
||||
|
||||
// Debounce sending the email to avoid spamming
|
||||
const emailTimers = {};
|
||||
|
||||
function getEmailText(person) {
|
||||
return `Dear ${person.firstname}.\n\n
|
||||
Thanks for your RSVP, ${person.attending ? 'we\'re delighted to hear you will be attending' : 'we\'re sorry to hear you will not be attending'}.\n
|
||||
${person.attending ? `Your meal choices are ${starters[person.starter]} and ${mains[person.main]}.\n` : ''}
|
||||
${person.attending && person.dietary && person.dietary.trim().length > 0 ? `Your dietary requirements are: ${person.dietary}.\n` : ''}
|
||||
You can modify your RSVP up until ${prettifyDate(person.enddate)} here: https://danielandhana.com/${person.password}.\n
|
||||
${person.attending ? 'See you at our wedding,' : 'Hope to see you soon,'}\n
|
||||
Daniel and Hana
|
||||
`;
|
||||
}
|
||||
|
||||
function getEmailHTML(person) {
|
||||
return `<p>Dear ${person.firstname}.</p>
|
||||
<p>Thanks for your RSVP, ${person.attending ? 'we\'re delighted to hear you will be attending' : 'we\'re sorry to hear you will not be attending'}.</p>
|
||||
${person.attending ? `<p>Your meal choices are <b>${starters[person.starter]}</b> and <b>${mains[person.main]}</b>.</p>` : ''}
|
||||
${person.attending && person.dietary && person.dietary.trim().length > 0 ? `<p>Your dietary requirements are: <b>${person.dietary}</b>.</p>` : ''}
|
||||
<p>You can modify your RSVP up until <b>${prettifyDate(person.enddate)}</b> <a href="https://danielandhana.com/${person.password}">here</a>.</p>
|
||||
<p>${person.attending ? 'See you at our wedding,' : 'Hope to see you soon,'}</p>
|
||||
<p>Daniel and Hana</p>
|
||||
`;
|
||||
}
|
||||
|
||||
export const sendRSVPEmail = function sendRSVPEmail(person) {
|
||||
Settings.findAll().then(data => {
|
||||
if (data[0].email && person.email) {
|
||||
const mailOptions = {
|
||||
from: `"${email.senderName}" <${email.senderAddress}>`,
|
||||
to: person.email,
|
||||
subject: 'Thank you for your RSVP',
|
||||
text: getEmailText(person),
|
||||
html: getEmailHTML(person),
|
||||
};
|
||||
// send mail with defined transport object
|
||||
transporter.sendMail(mailOptions, (error) => {
|
||||
if (error) {
|
||||
Rollbar.handleError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
Rollbar.handleError(err);
|
||||
});
|
||||
};
|
||||
|
||||
export const sendRSVPEmailWithDebounce = function sendRSVPEmailWithDebounce(person) {
|
||||
if (person.key) {
|
||||
// Stop previous email
|
||||
clearTimeout(emailTimers[person.key]);
|
||||
emailTimers[person.key] = setTimeout(() => {
|
||||
sendRSVPEmail(person);
|
||||
}, email.debounce);
|
||||
}
|
||||
};
|
||||
@@ -1,6 +0,0 @@
|
||||
import 'whatwg-fetch';
|
||||
|
||||
export default self.fetch.bind(self);
|
||||
export const Headers = self.Headers;
|
||||
export const Request = self.Request;
|
||||
export const Response = self.Response;
|
||||
@@ -1,24 +0,0 @@
|
||||
import Promise from 'bluebird';
|
||||
import fetch, { Request, Headers, Response } from 'node-fetch';
|
||||
import { host } from '../../config';
|
||||
|
||||
fetch.Promise = Promise;
|
||||
Response.Promise = Promise;
|
||||
|
||||
function localUrl(url) {
|
||||
if (url.startsWith('//')) {
|
||||
return `https:${url}`;
|
||||
}
|
||||
|
||||
if (url.startsWith('http')) {
|
||||
return url;
|
||||
}
|
||||
|
||||
return `http://${host}${url}`;
|
||||
}
|
||||
|
||||
function localFetch(url, options) {
|
||||
return fetch(localUrl(url), options);
|
||||
}
|
||||
|
||||
export { localFetch as default, Request, Headers, Response };
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "fetch",
|
||||
"main": "./fetch.server.js",
|
||||
"browser": "./fetch.client.js"
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import fetch from './fetch';
|
||||
|
||||
export default function (query, params) {
|
||||
return fetch('/graphql', {
|
||||
method: 'post',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query,
|
||||
params,
|
||||
}),
|
||||
credentials: 'include',
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
import createBrowserHistory from 'history/createBrowserHistory';
|
||||
|
||||
// Navigation manager, e.g. history.push('/home')
|
||||
// https://github.com/mjackson/history
|
||||
export default process.env.BROWSER && createBrowserHistory();
|
||||
@@ -1,121 +0,0 @@
|
||||
/**
|
||||
* Passport.js reference implementation.
|
||||
* The database schema used in this sample is available at
|
||||
* https://github.com/membership/membership.db/tree/master/postgres
|
||||
*/
|
||||
|
||||
import passport from 'passport';
|
||||
import { Strategy as FacebookStrategy } from 'passport-facebook';
|
||||
import { User, UserLogin, UserClaim, UserProfile } from '../data/models';
|
||||
import { auth as config } from '../config';
|
||||
|
||||
/**
|
||||
* Sign in with Facebook.
|
||||
*/
|
||||
passport.use(new FacebookStrategy({
|
||||
clientID: config.facebook.id,
|
||||
clientSecret: config.facebook.secret,
|
||||
callbackURL: '/login/facebook/return',
|
||||
profileFields: ['name', 'email', 'link', 'locale', 'timezone'],
|
||||
passReqToCallback: true,
|
||||
}, (req, accessToken, refreshToken, profile, done) => {
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
const loginName = 'facebook';
|
||||
const claimType = 'urn:facebook:access_token';
|
||||
const fooBar = async () => {
|
||||
if (req.user) {
|
||||
const userLogin = await UserLogin.findOne({
|
||||
attributes: ['name', 'key'],
|
||||
where: { name: loginName, key: profile.id },
|
||||
});
|
||||
if (userLogin) {
|
||||
// There is already a Facebook account that belongs to you.
|
||||
// Sign in with that account or delete it, then link it with your current account.
|
||||
done();
|
||||
} else {
|
||||
const user = await User.create({
|
||||
id: req.user.id,
|
||||
email: profile._json.email,
|
||||
logins: [
|
||||
{ name: loginName, key: profile.id },
|
||||
],
|
||||
claims: [
|
||||
{ type: claimType, value: profile.id },
|
||||
],
|
||||
profile: {
|
||||
displayName: profile.displayName,
|
||||
gender: profile._json.gender,
|
||||
picture: `https://graph.facebook.com/${profile.id}/picture?type=large`,
|
||||
},
|
||||
}, {
|
||||
include: [
|
||||
{ model: UserLogin, as: 'logins' },
|
||||
{ model: UserClaim, as: 'claims' },
|
||||
{ model: UserProfile, as: 'profile' },
|
||||
],
|
||||
});
|
||||
done(null, {
|
||||
id: user.id,
|
||||
email: user.email,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const users = await User.findAll({
|
||||
attributes: ['id', 'email'],
|
||||
where: { '$logins.name$': loginName, '$logins.key$': profile.id },
|
||||
include: [
|
||||
{
|
||||
attributes: ['name', 'key'],
|
||||
model: UserLogin,
|
||||
as: 'logins',
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
if (users.length) {
|
||||
const user = users[0];
|
||||
done(null, {
|
||||
id: user.id,
|
||||
email: user.email,
|
||||
});
|
||||
} else {
|
||||
let user = await User.findOne({ where: { email: profile._json.email } });
|
||||
if (user) {
|
||||
// There is already an account using this email address. Sign in to
|
||||
// that account and link it with Facebook manually from Account Settings.
|
||||
done(null);
|
||||
} else {
|
||||
user = await User.create({
|
||||
email: profile._json.email,
|
||||
emailConfirmed: true,
|
||||
logins: [
|
||||
{ name: loginName, key: profile.id },
|
||||
],
|
||||
claims: [
|
||||
{ type: claimType, value: accessToken },
|
||||
],
|
||||
profile: {
|
||||
displayName: profile.displayName,
|
||||
gender: profile._json.gender,
|
||||
picture: `https://graph.facebook.com/${profile.id}/picture?type=large`,
|
||||
},
|
||||
}, {
|
||||
include: [
|
||||
{ model: UserLogin, as: 'logins' },
|
||||
{ model: UserClaim, as: 'claims' },
|
||||
{ model: UserProfile, as: 'profile' },
|
||||
],
|
||||
});
|
||||
done(null, {
|
||||
id: user.id,
|
||||
email: user.email,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fooBar().catch(done);
|
||||
}));
|
||||
|
||||
export default passport;
|
||||
@@ -1,19 +0,0 @@
|
||||
import Rollbar from 'rollbar';
|
||||
import { analytics } from '../config';
|
||||
|
||||
const serverToken = analytics.rollbar.serverToken;
|
||||
|
||||
export default {
|
||||
errorHandler() {
|
||||
return Rollbar.errorHandler(serverToken);
|
||||
},
|
||||
handleError(err) {
|
||||
return Rollbar.handleError(err);
|
||||
},
|
||||
init() {
|
||||
Rollbar.init(serverToken);
|
||||
Rollbar.handleUncaughtExceptionsAndRejections(serverToken, {
|
||||
exitOnUncaughtException: true,
|
||||
});
|
||||
},
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import Slack from 'slack-node';
|
||||
import { slack as slackCfg } from '../config';
|
||||
import Rollbar from './rollbar';
|
||||
import Settings from '../data/models/Settings';
|
||||
|
||||
const slack = new Slack();
|
||||
slack.setWebhook(slackCfg.webhook);
|
||||
|
||||
// Debounce sending the slack message to avoid spamming
|
||||
const slackTimers = {};
|
||||
|
||||
export const sendSlackMsg = function sendSlackMsg(text, channel) {
|
||||
Settings.findAll().then(data => {
|
||||
if (data[0].slack) {
|
||||
slack.webhook({
|
||||
channel,
|
||||
username: 'weddingbot',
|
||||
text,
|
||||
}, err => {
|
||||
if (err) {
|
||||
Rollbar.handleError(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
Rollbar.handleError(err);
|
||||
});
|
||||
};
|
||||
|
||||
export const sendSlackMsgWithDebounce = function sendSlackMsgWithDebounce(text, channel, key) {
|
||||
if (key) {
|
||||
// Stop previous msg
|
||||
clearTimeout(slackTimers[key]);
|
||||
slackTimers[key] = setTimeout(() => {
|
||||
sendSlackMsg(text, channel);
|
||||
}, slackCfg.debounce);
|
||||
}
|
||||
};
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"rules": {
|
||||
"new-cap": 0
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
import DataType from 'sequelize';
|
||||
import Model from '../sequelize';
|
||||
|
||||
const passwordChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'm', 'n', 'p', 'q', 'r', 't', 'u',
|
||||
'w', 'x', 'y', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'M', 'N', 'P', 'Q', 'R', 'T', 'U', 'W',
|
||||
'X', 'Y', '2', '3', '4', '6', '7', '8', '9'];
|
||||
|
||||
function generatePassword() {
|
||||
let pwd = '';
|
||||
for (let i = 0; i < 4; i += 1) {
|
||||
pwd += passwordChars[Math.floor(Math.random() * passwordChars.length)];
|
||||
}
|
||||
return pwd;
|
||||
}
|
||||
|
||||
const Person = Model.define('Person', {
|
||||
key: {
|
||||
type: DataType.UUID,
|
||||
defaultValue: DataType.UUIDV1,
|
||||
primaryKey: true,
|
||||
},
|
||||
|
||||
password: {
|
||||
type: DataType.STRING(4),
|
||||
defaultValue() {
|
||||
return generatePassword();
|
||||
},
|
||||
},
|
||||
|
||||
firstname: {
|
||||
type: DataType.STRING(50),
|
||||
},
|
||||
|
||||
lastname: {
|
||||
type: DataType.STRING(50),
|
||||
},
|
||||
|
||||
email: {
|
||||
type: DataType.STRING(255),
|
||||
},
|
||||
|
||||
completed: {
|
||||
type: DataType.BOOLEAN,
|
||||
defaultValue: false,
|
||||
},
|
||||
|
||||
attending: {
|
||||
type: DataType.BOOLEAN,
|
||||
},
|
||||
|
||||
ceremony: {
|
||||
type: DataType.BOOLEAN,
|
||||
},
|
||||
|
||||
dietary: {
|
||||
type: DataType.STRING(255),
|
||||
},
|
||||
|
||||
starter: {
|
||||
type: DataType.INTEGER,
|
||||
defaultValue: -1,
|
||||
},
|
||||
|
||||
main: {
|
||||
type: DataType.INTEGER,
|
||||
defaultValue: -1,
|
||||
},
|
||||
|
||||
enddate: {
|
||||
type: DataType.DATE,
|
||||
},
|
||||
|
||||
}, {
|
||||
|
||||
indexes: [
|
||||
{ fields: ['email'] },
|
||||
],
|
||||
|
||||
});
|
||||
|
||||
export default Person;
|
||||
@@ -1,23 +0,0 @@
|
||||
import DataType from 'sequelize';
|
||||
import Model from '../sequelize';
|
||||
|
||||
const Settings = Model.define('Settings', {
|
||||
key: {
|
||||
type: DataType.UUID,
|
||||
defaultValue: DataType.UUIDV1,
|
||||
primaryKey: true,
|
||||
},
|
||||
|
||||
slack: {
|
||||
type: DataType.BOOLEAN,
|
||||
defaultValue: false,
|
||||
},
|
||||
|
||||
email: {
|
||||
type: DataType.BOOLEAN,
|
||||
defaultValue: false,
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default Settings;
|
||||
@@ -1,30 +0,0 @@
|
||||
import DataType from 'sequelize';
|
||||
import Model from '../sequelize';
|
||||
|
||||
const User = Model.define('User', {
|
||||
|
||||
id: {
|
||||
type: DataType.UUID,
|
||||
defaultValue: DataType.UUIDV1,
|
||||
primaryKey: true,
|
||||
},
|
||||
|
||||
email: {
|
||||
type: DataType.STRING(255),
|
||||
validate: { isEmail: true },
|
||||
},
|
||||
|
||||
emailConfirmed: {
|
||||
type: DataType.BOOLEAN,
|
||||
defaultValue: false,
|
||||
},
|
||||
|
||||
}, {
|
||||
|
||||
indexes: [
|
||||
{ fields: ['email'] },
|
||||
],
|
||||
|
||||
});
|
||||
|
||||
export default User;
|
||||
@@ -1,16 +0,0 @@
|
||||
import DataType from 'sequelize';
|
||||
import Model from '../sequelize';
|
||||
|
||||
const UserClaim = Model.define('UserClaim', {
|
||||
|
||||
type: {
|
||||
type: DataType.STRING,
|
||||
},
|
||||
|
||||
value: {
|
||||
type: DataType.STRING,
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default UserClaim;
|
||||
@@ -1,18 +0,0 @@
|
||||
import DataType from 'sequelize';
|
||||
import Model from '../sequelize';
|
||||
|
||||
const UserLogin = Model.define('UserLogin', {
|
||||
|
||||
name: {
|
||||
type: DataType.STRING(50),
|
||||
primaryKey: true,
|
||||
},
|
||||
|
||||
key: {
|
||||
type: DataType.STRING(100),
|
||||
primaryKey: true,
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default UserLogin;
|
||||
@@ -1,33 +0,0 @@
|
||||
import DataType from 'sequelize';
|
||||
import Model from '../sequelize';
|
||||
|
||||
const UserProfile = Model.define('UserProfile', {
|
||||
|
||||
userId: {
|
||||
type: DataType.UUID,
|
||||
primaryKey: true,
|
||||
},
|
||||
|
||||
displayName: {
|
||||
type: DataType.STRING(100),
|
||||
},
|
||||
|
||||
picture: {
|
||||
type: DataType.STRING(255),
|
||||
},
|
||||
|
||||
gender: {
|
||||
type: DataType.STRING(50),
|
||||
},
|
||||
|
||||
location: {
|
||||
type: DataType.STRING(100),
|
||||
},
|
||||
|
||||
website: {
|
||||
type: DataType.STRING(255),
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default UserProfile;
|
||||
@@ -1,34 +0,0 @@
|
||||
import sequelize from '../sequelize';
|
||||
import User from './User';
|
||||
import UserLogin from './UserLogin';
|
||||
import UserClaim from './UserClaim';
|
||||
import UserProfile from './UserProfile';
|
||||
import Person from './Person';
|
||||
|
||||
User.hasMany(UserLogin, {
|
||||
foreignKey: 'userId',
|
||||
as: 'logins',
|
||||
onUpdate: 'cascade',
|
||||
onDelete: 'cascade',
|
||||
});
|
||||
|
||||
User.hasMany(UserClaim, {
|
||||
foreignKey: 'userId',
|
||||
as: 'claims',
|
||||
onUpdate: 'cascade',
|
||||
onDelete: 'cascade',
|
||||
});
|
||||
|
||||
User.hasOne(UserProfile, {
|
||||
foreignKey: 'userId',
|
||||
as: 'profile',
|
||||
onUpdate: 'cascade',
|
||||
onDelete: 'cascade',
|
||||
});
|
||||
|
||||
function sync(...args) {
|
||||
return sequelize.sync(...args);
|
||||
}
|
||||
|
||||
export default { sync };
|
||||
export { User, UserLogin, UserClaim, UserProfile, Person };
|
||||
@@ -1,25 +0,0 @@
|
||||
import { GraphQLList as List } from 'graphql';
|
||||
import PersonItemType from '../types/PersonItemType';
|
||||
import Person from '../models/Person';
|
||||
import admin from '../../core/admin';
|
||||
|
||||
const person = {
|
||||
type: new List(PersonItemType),
|
||||
resolve({ request }) {
|
||||
const params = request.body.params;
|
||||
const user = request.user || {};
|
||||
const isAdmin = admin(user.email);
|
||||
|
||||
if (params && params.code) {
|
||||
return Person.findAll({
|
||||
where: {
|
||||
password: params.code,
|
||||
},
|
||||
});
|
||||
}
|
||||
return isAdmin && Person.findAll();
|
||||
},
|
||||
};
|
||||
|
||||
export default person;
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
import { GraphQLList as List } from 'graphql';
|
||||
import PersonItemType from '../types/PersonItemType';
|
||||
import Person from '../models/Person';
|
||||
|
||||
const getPersonByKey = {
|
||||
type: new List(PersonItemType),
|
||||
resolve({ request }) {
|
||||
const params = request.body.params;
|
||||
|
||||
if (params && params.key) {
|
||||
return Person.findAll({
|
||||
where: {
|
||||
key: params.key,
|
||||
},
|
||||
limit: 1,
|
||||
});
|
||||
}
|
||||
return false;
|
||||
},
|
||||
};
|
||||
|
||||
export default getPersonByKey;
|
||||
@@ -1,22 +0,0 @@
|
||||
import { GraphQLList as List } from 'graphql';
|
||||
import PersonItemType from '../types/PersonItemType';
|
||||
import Person from '../models/Person';
|
||||
|
||||
const getPersonsByPassword = {
|
||||
type: new List(PersonItemType),
|
||||
resolve({ request }) {
|
||||
const params = request.body.params;
|
||||
|
||||
if (params && params.password) {
|
||||
return Person.findAll({
|
||||
where: {
|
||||
password: params.password,
|
||||
},
|
||||
});
|
||||
}
|
||||
return false;
|
||||
},
|
||||
};
|
||||
|
||||
export default getPersonsByPassword;
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
import UserType from '../types/UserType';
|
||||
|
||||
const me = {
|
||||
type: UserType,
|
||||
resolve({ request }) {
|
||||
return request.user && {
|
||||
id: request.user.id,
|
||||
email: request.user.email,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
export default me;
|
||||
@@ -1,12 +0,0 @@
|
||||
import { GraphQLList as List } from 'graphql';
|
||||
import SettingsItemType from '../types/SettingsItemType';
|
||||
import Settings from '../models/Settings';
|
||||
|
||||
const settings = {
|
||||
type: new List(SettingsItemType),
|
||||
resolve() {
|
||||
return Settings.findAll();
|
||||
},
|
||||
};
|
||||
|
||||
export default settings;
|
||||
@@ -1,25 +0,0 @@
|
||||
import {
|
||||
GraphQLSchema as Schema,
|
||||
GraphQLObjectType as ObjectType,
|
||||
} from 'graphql';
|
||||
|
||||
import me from './queries/me';
|
||||
import getAllPersons from './queries/getAllPersons';
|
||||
import getPersonByKey from './queries/getPersonByKey';
|
||||
import getPersonsByPassword from './queries/getPersonsByPassword';
|
||||
import settings from './queries/settings';
|
||||
|
||||
const schema = new Schema({
|
||||
query: new ObjectType({
|
||||
name: 'Query',
|
||||
fields: {
|
||||
me,
|
||||
getAllPersons,
|
||||
getPersonByKey,
|
||||
getPersonsByPassword,
|
||||
settings,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
export default schema;
|
||||
@@ -1,12 +0,0 @@
|
||||
import Sequelize from 'sequelize';
|
||||
import { databasePath } from '../config';
|
||||
|
||||
const sequelize = new Sequelize({
|
||||
dialect: 'sqlite',
|
||||
storage: databasePath,
|
||||
define: {
|
||||
freezeTableName: true,
|
||||
},
|
||||
});
|
||||
|
||||
export default sequelize;
|
||||
@@ -1,27 +0,0 @@
|
||||
import {
|
||||
GraphQLObjectType as ObjectType,
|
||||
GraphQLID as ID,
|
||||
GraphQLString as StringType,
|
||||
GraphQLBoolean as BooleanType,
|
||||
GraphQLNonNull as NonNull,
|
||||
} from 'graphql';
|
||||
|
||||
const PersonItemType = new ObjectType({
|
||||
name: 'PersonItem',
|
||||
fields: {
|
||||
key: { type: new NonNull(ID) },
|
||||
password: { type: StringType },
|
||||
firstname: { type: StringType },
|
||||
lastname: { type: StringType },
|
||||
email: { type: StringType },
|
||||
completed: { type: BooleanType },
|
||||
attending: { type: BooleanType },
|
||||
ceremony: { type: BooleanType },
|
||||
dietary: { type: StringType },
|
||||
starter: { type: StringType },
|
||||
main: { type: StringType },
|
||||
enddate: { type: StringType },
|
||||
},
|
||||
});
|
||||
|
||||
export default PersonItemType;
|
||||
@@ -1,17 +0,0 @@
|
||||
import {
|
||||
GraphQLObjectType as ObjectType,
|
||||
GraphQLID as ID,
|
||||
GraphQLBoolean as BooleanType,
|
||||
GraphQLNonNull as NonNull,
|
||||
} from 'graphql';
|
||||
|
||||
const SettingsItemType = new ObjectType({
|
||||
name: 'SettingsItem',
|
||||
fields: {
|
||||
key: { type: new NonNull(ID) },
|
||||
slack: { type: BooleanType },
|
||||
email: { type: BooleanType },
|
||||
},
|
||||
});
|
||||
|
||||
export default SettingsItemType;
|
||||
@@ -1,16 +0,0 @@
|
||||
import {
|
||||
GraphQLObjectType as ObjectType,
|
||||
GraphQLID as ID,
|
||||
GraphQLString as StringType,
|
||||
GraphQLNonNull as NonNull,
|
||||
} from 'graphql';
|
||||
|
||||
const UserType = new ObjectType({
|
||||
name: 'User',
|
||||
fields: {
|
||||
id: { type: new NonNull(ID) },
|
||||
email: { type: StringType },
|
||||
},
|
||||
});
|
||||
|
||||
export default UserType;
|
||||
5
src/index.css
Normal file
5
src/index.css
Normal file
@@ -0,0 +1,5 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Inconsolata', monospace;
|
||||
}
|
||||
8
src/index.js
Normal file
8
src/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
registerServiceWorker();
|
||||
7
src/logo.svg
Normal file
7
src/logo.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
||||
<g fill="#61DAFB">
|
||||
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
|
||||
<circle cx="420.9" cy="296.5" r="45.7"/>
|
||||
<path d="M520.5 78.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
21
src/rebase.js
Normal file
21
src/rebase.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import Rebase from "re-base";
|
||||
import { initializeApp, database, storage } from "firebase";
|
||||
|
||||
const apiKey = "";
|
||||
const messageSenderId = "";
|
||||
const projectId = "";
|
||||
|
||||
const app = initializeApp({
|
||||
apiKey,
|
||||
projectId,
|
||||
messageSenderId,
|
||||
authDomain: "daniel-hana-wedding.firebaseapp.com",
|
||||
databaseURL: "https://daniel-hana-wedding.firebaseio.com",
|
||||
storageBucket: "daniel-hana-wedding.appspot.com",
|
||||
});
|
||||
|
||||
const auth = app.auth();
|
||||
const bucket = storage();
|
||||
const db = Rebase.createClass(database(app));
|
||||
|
||||
export { auth, bucket, db };
|
||||
108
src/registerServiceWorker.js
Normal file
108
src/registerServiceWorker.js
Normal file
@@ -0,0 +1,108 @@
|
||||
// In production, we register a service worker to serve assets from local cache.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||
// cached resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||
// This link also includes instructions on opting out of this behavior.
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
export default function register() {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (!isLocalhost) {
|
||||
// Is not local host. Just register service worker
|
||||
registerValidSW(swUrl);
|
||||
} else {
|
||||
// This is running on localhost. Lets check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the old content will have been purged and
|
||||
// the fresh content will have been added to the cache.
|
||||
// It's the perfect time to display a "New content is
|
||||
// available; please refresh." message in your web app.
|
||||
console.log('New content is available; please refresh.');
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
if (
|
||||
response.status === 404 ||
|
||||
response.headers.get('content-type').indexOf('javascript') === -1
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user