diff --git a/components/Header.js b/components/Header.js index b1105b2..86c3391 100644 --- a/components/Header.js +++ b/components/Header.js @@ -4,6 +4,7 @@ import Link from 'next/link'; import useUser from '../lib/useUser'; import WeddingStart from './WeddingStart'; import Nav from './Nav'; +import useWeddingStart from '../lib/useWeddingStart'; const HeaderStyles = styled.header` display: grid; @@ -22,6 +23,10 @@ const HeaderStyles = styled.header` const Header = () => { const { user } = useUser(); + const { timeAsDays, pastWeddingDate } = useWeddingStart({ + update: 60000, + }); + return (
@@ -30,11 +35,9 @@ const Header = () => {

Name & Name

- {user && user.isLoggedIn === true ? ( + {user && user.isLoggedIn === true && !pastWeddingDate ? ( <> -

- June 3rd, 2030 • New York, New York -

+

June 3rd, 2030 @ New York, New York

Countdown: days!

diff --git a/components/WeddingStart.js b/components/WeddingStart.js index deeea71..95bbcdf 100644 --- a/components/WeddingStart.js +++ b/components/WeddingStart.js @@ -1,17 +1,4 @@ -import { useState } from 'react'; -import useInterval from '../utils/useInterval'; - -function useWeddingStart({ update = 60000 }) { - const weddingDate = 1906736400000; - const [timeToWedding, setTime] = useState(weddingDate - Date.now()); - useInterval(() => { - setTime(weddingDate - Date.now()); - }, update); - return { - timeToWedding, - timeAsDays: Math.ceil(timeToWedding / 1000 / 60 / 60 / 24), - }; -} +import useWeddingStart from '../lib/useWeddingStart'; export default function WeddingStart() { const { timeAsDays } = useWeddingStart({ diff --git a/lib/useWeddingStart.js b/lib/useWeddingStart.js new file mode 100644 index 0000000..b1af938 --- /dev/null +++ b/lib/useWeddingStart.js @@ -0,0 +1,17 @@ +import { useState } from 'react'; +import useInterval from '../utils/useInterval'; + +export default function useWeddingStart({ update = 60000 }) { + const weddingDate = 1906736400000; + const [timeToWedding, setTime] = useState( + weddingDate - Date.now() <= 0 ? 0 : weddingDate - Date.now() + ); + useInterval(() => { + const time = weddingDate - Date.now(); + setTime(time <= 0 ? 0 : time); + }, update); + return { + timeToWedding, + timeAsDays: Math.ceil(timeToWedding / 1000 / 60 / 60 / 24), + }; +} diff --git a/package-lock.json b/package-lock.json index dee65bd..cc3351b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "cloudinary-build-url": "^0.2.4", "dotenv": "^16.0.1", "escape-html": "^1.0.3", + "html-escaper": "^3.0.3", "iron-session": "^6.1.3", "jsonwebtoken": "^8.5.1", "mongodb": "^4.7.0", @@ -6885,10 +6886,9 @@ } }, "node_modules/html-escaper": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", - "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", - "dev": true + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz", + "integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==" }, "node_modules/htmlparser2": { "version": "7.2.0", @@ -7496,6 +7496,12 @@ "node": ">=8" } }, + "node_modules/istanbul-reports/node_modules/html-escaper": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", + "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", + "dev": true + }, "node_modules/jest": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz", @@ -17485,10 +17491,9 @@ } }, "html-escaper": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", - "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", - "dev": true + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz", + "integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==" }, "htmlparser2": { "version": "7.2.0", @@ -17906,6 +17911,14 @@ "requires": { "html-escaper": "^2.0.0", "istanbul-lib-report": "^3.0.0" + }, + "dependencies": { + "html-escaper": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", + "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", + "dev": true + } } }, "jest": { diff --git a/package.json b/package.json index e33a402..5d03e2a 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "cloudinary-build-url": "^0.2.4", "dotenv": "^16.0.1", "escape-html": "^1.0.3", + "html-escaper": "^3.0.3", "iron-session": "^6.1.3", "jsonwebtoken": "^8.5.1", "mongodb": "^4.7.0", @@ -142,4 +143,4 @@ } } } -} \ No newline at end of file +} diff --git a/pages/api/group.js b/pages/api/group.js index 85dc1e8..61d8e6a 100644 --- a/pages/api/group.js +++ b/pages/api/group.js @@ -50,6 +50,7 @@ export default withSession(async (req, res) => { } response.guests = guestList; response.note = group?.note || ''; + response.statusUpdatable = group?.statusUpdatable || false; // console.log('response', response); res.status(200).json(JSON.stringify(response)); } catch (error) { diff --git a/pages/rsvp/[id].js b/pages/rsvp/[id].js index adbf847..9bea76e 100644 --- a/pages/rsvp/[id].js +++ b/pages/rsvp/[id].js @@ -1,6 +1,7 @@ import Head from 'next/head'; import { useState } from 'react'; import styled, { keyframes } from 'styled-components'; +import { unescape } from 'html-escaper'; import GuestRSVP from '../../components/GuestRSVP'; import Layout from '../../components/Layout'; import useForm from '../../lib/useForm'; @@ -139,7 +140,7 @@ const ModalContentStyles = styled.div` `; export default function SingleGroupPage({ group }) { - const { guests, note } = group; + const { guests, note, statusUpdatable } = group; const { user } = useUser({ redirectTo: '/login' }); const [errorMsg, setErrorMsg] = useState(''); const [errorCount, setErrorCount] = useState(0); @@ -274,8 +275,22 @@ export default function SingleGroupPage({ group }) { )} -
+
RSVP Invitation +

Make sure to click the "Submit RSVP" button at the bottom!

+ {statusUpdatable && ( +

+ Please accept or decline for each person in your party. You can + always update your response until the RSVP deadline. +

+ )} + {!statusUpdatable && ( +

+ This section is no longer updatable. If you need to make changes + please contact us at{' '} + name@example.com +

+ )} {group.guests.map((guest) => (