AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 10:42:08 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Merge pull request #42 from aaronpo97/react-toast

Browse Source 
React toast updates and refactor
This commit is contained in:
Aaron Po
2023-05-22 22:52:41 -04:00
committed by GitHub
parent 10bba6ab02 4c30af27b6
commit d06415c924
40 changed files with 577 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
next.config.js
View File

@@ -5,5 +5,8 @@ const nextConfig = {
domains: ['picsum.photos', 'res.cloudinary.com'],
},
};
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = nextConfig;
module.exports = withBundleAnalyzer(nextConfig);

208
package-lock.json generated
View File

@@ -13,6 +13,7 @@
"@headlessui/tailwindcss": "^0.1.3",
"@hookform/resolvers": "^3.1.0",
"@mapbox/mapbox-sdk": "^0.15.1",
"@next/bundle-analyzer": "^13.4.3",
"@prisma/client": "^4.13.0",
"@react-email/components": "^0.0.6",
"@react-email/render": "^0.0.7",
@@ -996,6 +997,14 @@
"node": ">=6.0.0"
}
},
"node_modules/@next/bundle-analyzer": {
"version": "13.4.3",
"resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-13.4.3.tgz",
"integrity": "sha512-jzWk6eaCFaIXfIswyQQWnR6FN22HpWoSWe3nLa3JCNkNd2ksriJgn86oQyZRxgAPaEbVKQXBp8GZi8e5DrhVJg==",
"dependencies": {
"webpack-bundle-analyzer": "4.7.0"
}
},
"node_modules/@next/env": {
"version": "13.3.4",
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.3.4.tgz",
@@ -1352,6 +1361,11 @@
"url": "https://opencollective.com/unts"
}
},
"node_modules/@polka/url": {
"version": "1.0.0-next.21",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g=="
},
"node_modules/@prisma/client": {
"version": "4.13.0",
"resolved": "https://registry.npmjs.org/@prisma/client/-/client-4.13.0.tgz",
@@ -2382,7 +2396,6 @@
"version": "8.8.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
"integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
"devOptional": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -2432,7 +2445,6 @@
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
"integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
"devOptional": true,
"engines": {
"node": ">=0.4.0"
}
@@ -4162,6 +4174,11 @@
"node": ">=12"
}
},
"node_modules/duplexer": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
},
"node_modules/duplexer2": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
@@ -5779,6 +5796,20 @@
"resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
"integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
},
"node_modules/gzip-size": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
"integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
"dependencies": {
"duplexer": "^0.1.2"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/har-schema": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -7807,6 +7838,14 @@
"node": ">=4"
}
},
"node_modules/mrmime": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
"integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
"engines": {
"node": ">=10"
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -8281,6 +8320,14 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/opener": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
"bin": {
"opener": "bin/opener-bin.js"
}
},
"node_modules/optionator": {
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -10032,6 +10079,19 @@
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
},
"node_modules/sirv": {
"version": "1.0.19",
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
"integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
"dependencies": {
"@polka/url": "^1.0.0-next.20",
"mrmime": "^1.0.0",
"totalist": "^1.0.0"
},
"engines": {
"node": ">= 10"
}
},
"node_modules/slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -10648,6 +10708,14 @@
"node": ">=0.6"
}
},
"node_modules/totalist": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
"integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
"engines": {
"node": ">=6"
}
},
"node_modules/tough-cookie": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -11294,6 +11362,36 @@
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
},
"node_modules/webpack-bundle-analyzer": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.7.0.tgz",
"integrity": "sha512-j9b8ynpJS4K+zfO5GGwsAcQX4ZHpWV+yRiHDiL+bE0XHJ8NiPYLTNVQdlFYWxtpg9lfAQNlwJg16J9AJtFSXRg==",
"dependencies": {
"acorn": "^8.0.4",
"acorn-walk": "^8.0.0",
"chalk": "^4.1.0",
"commander": "^7.2.0",
"gzip-size": "^6.0.0",
"lodash": "^4.17.20",
"opener": "^1.5.2",
"sirv": "^1.0.7",
"ws": "^7.3.1"
},
"bin": {
"webpack-bundle-analyzer": "lib/bin/analyzer.js"
},
"engines": {
"node": ">= 10.13.0"
}
},
"node_modules/webpack-bundle-analyzer/node_modules/commander": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
"engines": {
"node": ">= 10"
}
},
"node_modules/whatwg-url": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -11390,6 +11488,26 @@
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
},
"node_modules/ws": {
"version": "7.5.9",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
"engines": {
"node": ">=8.3.0"
},
"peerDependencies": {
"bufferutil": "^4.0.1",
"utf-8-validate": "^5.0.2"
},
"peerDependenciesMeta": {
"bufferutil": {
"optional": true
},
"utf-8-validate": {
"optional": true
}
}
},
"node_modules/xregexp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/xregexp/-/xregexp-2.0.0.tgz",
@@ -12050,6 +12168,14 @@
"resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
"integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
},
"@next/bundle-analyzer": {
"version": "13.4.3",
"resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-13.4.3.tgz",
"integrity": "sha512-jzWk6eaCFaIXfIswyQQWnR6FN22HpWoSWe3nLa3JCNkNd2ksriJgn86oQyZRxgAPaEbVKQXBp8GZi8e5DrhVJg==",
"requires": {
"webpack-bundle-analyzer": "4.7.0"
}
},
"@next/env": {
"version": "13.3.4",
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.3.4.tgz",
@@ -12272,6 +12398,11 @@
"tslib": "^2.5.0"
}
},
"@polka/url": {
"version": "1.0.0-next.21",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g=="
},
"@prisma/client": {
"version": "4.13.0",
"resolved": "https://registry.npmjs.org/@prisma/client/-/client-4.13.0.tgz",
@@ -13113,8 +13244,7 @@
"acorn": {
"version": "8.8.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
"integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
"devOptional": true
"integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
},
"acorn-jsx": {
"version": "5.3.2",
@@ -13148,8 +13278,7 @@
"acorn-walk": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
"integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
"devOptional": true
"integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA=="
},
"agent-base": {
"version": "6.0.2",
@@ -14373,6 +14502,11 @@
"integrity": "sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==",
"dev": true
},
"duplexer": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
},
"duplexer2": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
@@ -15628,6 +15762,14 @@
"resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
"integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
},
"gzip-size": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
"integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
"requires": {
"duplexer": "^0.1.2"
}
},
"har-schema": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -17009,6 +17151,11 @@
"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
"dev": true
},
"mrmime": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
"integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw=="
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -17328,6 +17475,11 @@
"is-wsl": "^2.2.0"
}
},
"opener": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A=="
},
"optionator": {
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -18528,6 +18680,16 @@
}
}
},
"sirv": {
"version": "1.0.19",
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
"integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
"requires": {
"@polka/url": "^1.0.0-next.20",
"mrmime": "^1.0.0",
"totalist": "^1.0.0"
}
},
"slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -18995,6 +19157,11 @@
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
"optional": true
},
"totalist": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
"integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g=="
},
"tough-cookie": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -19457,6 +19624,29 @@
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
},
"webpack-bundle-analyzer": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.7.0.tgz",
"integrity": "sha512-j9b8ynpJS4K+zfO5GGwsAcQX4ZHpWV+yRiHDiL+bE0XHJ8NiPYLTNVQdlFYWxtpg9lfAQNlwJg16J9AJtFSXRg==",
"requires": {
"acorn": "^8.0.4",
"acorn-walk": "^8.0.0",
"chalk": "^4.1.0",
"commander": "^7.2.0",
"gzip-size": "^6.0.0",
"lodash": "^4.17.20",
"opener": "^1.5.2",
"sirv": "^1.0.7",
"ws": "^7.3.1"
},
"dependencies": {
"commander": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
}
}
},
"whatwg-url": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -19532,6 +19722,12 @@
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
},
"ws": {
"version": "7.5.9",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
"requires": {}
},
"xregexp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/xregexp/-/xregexp-2.0.0.tgz",

1
package.json
View File

@@ -16,6 +16,7 @@
"@headlessui/tailwindcss": "^0.1.3",
"@hookform/resolvers": "^3.1.0",
"@mapbox/mapbox-sdk": "^0.15.1",
"@next/bundle-analyzer": "^13.4.3",
"@prisma/client": "^4.13.0",
"@react-email/components": "^0.0.6",
"@react-email/render": "^0.0.7",

59
src/components/Account/AccountInfo.tsx
View File

@@ -1,24 +1,23 @@
import validateEmail from '@/requests/valdiateEmail';
import validateUsername from '@/requests/validateUsername';
import validateEmailRequest from '@/requests/User/validateEmailRequest';
import validateUsernameRequest from '@/requests/validateUsernameRequest';
import { BaseCreateUserSchema } from '@/services/User/schema/CreateUserValidationSchemas';
import GetUserSchema from '@/services/User/schema/GetUserSchema';
import { Switch } from '@headlessui/react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/router';
import { FC, useState } from 'react';
import { FC, useContext, useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import UserContext from '@/contexts/UserContext';
import sendEditUserRequest from '@/requests/User/sendEditUserRequest';
import createErrorToast from '@/util/createErrorToast';
import { toast } from 'react-hot-toast';
import FormError from '../ui/forms/FormError';
import FormInfo from '../ui/forms/FormInfo';
import FormLabel from '../ui/forms/FormLabel';
import FormTextInput from '../ui/forms/FormTextInput';
interface AccountInfoProps {
user: z.infer<typeof GetUserSchema>;
}
const AccountInfo: FC = () => {
const { user, mutate } = useContext(UserContext);
const AccountInfo: FC<AccountInfoProps> = ({ user }) => {
const router = useRouter();
const EditUserSchema = BaseCreateUserSchema.pick({
username: true,
email: true,
@@ -30,8 +29,8 @@ const AccountInfo: FC<AccountInfoProps> = ({ user }) => {
.email({ message: 'Email must be a valid email address.' })
.refine(
async (email) => {
if (user.email === email) return true;
return validateEmail(email);
if (user!.email === email) return true;
return validateEmailRequest(email);
},
{ message: 'Email is already taken.' },
),
@@ -41,8 +40,8 @@ const AccountInfo: FC<AccountInfoProps> = ({ user }) => {
.max(20, { message: 'Username must be less than 20 characters.' })
.refine(
async (username) => {
if (user.username === username) return true;
return validateUsername(username);
if (user!.username === username) return true;
return validateUsernameRequest(username);
},
{ message: 'Username is already taken.' },
),
@@ -53,29 +52,29 @@ const AccountInfo: FC<AccountInfoProps> = ({ user }) => {
>({
resolver: zodResolver(EditUserSchema),
defaultValues: {
username: user.username,
email: user.email,
firstName: user.firstName,
lastName: user.lastName,
username: user!.username,
email: user!.email,
firstName: user!.firstName,
lastName: user!.lastName,
},
});
const [inEditMode, setInEditMode] = useState(false);
const onSubmit = async (data: z.infer<typeof EditUserSchema>) => {
const response = await fetch(`/api/users/${user.id}/edit`, {
body: JSON.stringify(data),
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
});
if (!response.ok) {
throw new Error('Something went wrong.');
const loadingToast = toast.loading('Submitting edits...');
try {
await sendEditUserRequest({ user: user!, data });
await mutate!();
setInEditMode(false);
toast.remove(loadingToast);
toast.success('Edits submitted successfully.');
} catch (error) {
setInEditMode(false);
toast.remove(loadingToast);
createErrorToast(error);
await mutate!();
}
await response.json();
router.reload();
};
return (

3
src/components/BeerBreweryComments/CommentContentBody.tsx
View File

@@ -2,7 +2,8 @@ import UserContext from '@/contexts/UserContext';
import useTimeDistance from '@/hooks/utilities/useTimeDistance';
import { format } from 'date-fns';
import { Dispatch, FC, SetStateAction, useContext } from 'react';
import { Link, Rating } from 'react-daisyui';
import { Rating } from 'react-daisyui';
import Link from 'next/link';
import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResult';
import { z } from 'zod';

50
src/components/BeerBreweryComments/EditCommentBody.tsx
View File

@@ -1,5 +1,5 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { FC, useState, Dispatch, SetStateAction, useContext } from 'react';
import { FC, useState, Dispatch, SetStateAction } from 'react';
import { Rating } from 'react-daisyui';
import { useForm, SubmitHandler } from 'react-hook-form';
import { z } from 'zod';
@@ -7,7 +7,8 @@ import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPost
import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResult';
import CreateCommentValidationSchema from '@/services/types/CommentSchema/CreateCommentValidationSchema';
import useBreweryPostComments from '@/hooks/data-fetching/brewery-comments/useBreweryPostComments';
import ToastContext from '@/contexts/ToastContext';
import toast from 'react-hot-toast';
import createErrorToast from '@/util/createErrorToast';
import FormError from '../ui/forms/FormError';
import FormInfo from '../ui/forms/FormInfo';
import FormLabel from '../ui/forms/FormLabel';
@@ -31,7 +32,6 @@ interface EditCommentBodyProps {
const EditCommentBody: FC<EditCommentBodyProps> = ({
comment,
setInEditMode,
mutate,
handleDeleteRequest,
handleEditRequest,
@@ -43,25 +43,41 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
resolver: zodResolver(CreateCommentValidationSchema),
});
const { toast } = useContext(ToastContext);
const { errors } = formState;
const { errors, isSubmitting } = formState;
const [isDeleting, setIsDeleting] = useState(false);
const onDelete = async () => {
const loadingToast = toast.loading('Deleting comment...');
setIsDeleting(true);
await handleDeleteRequest(comment.id);
await mutate();
try {
await handleDeleteRequest(comment.id);
await mutate();
toast.remove(loadingToast);
toast.success('Deleted comment.');
} catch (error) {
toast.remove(loadingToast);
createErrorToast(error);
}
};
const onEdit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
data,
) => {
setInEditMode(true);
await handleEditRequest(comment.id, data);
await mutate();
toast.success('Submitted edits');
setInEditMode(false);
const loadingToast = toast.loading('Submitting comment edits...');
try {
setInEditMode(true);
await handleEditRequest(comment.id, data);
await mutate();
toast.remove(loadingToast);
toast.success('Comment edits submitted successfully.');
setInEditMode(false);
} catch (error) {
toast.remove(loadingToast);
createErrorToast(error);
setInEditMode(false);
}
};
return (
@@ -79,7 +95,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
placeholder="Comment"
rows={2}
error={!!errors.content?.message}
disabled={formState.isSubmitting || isDeleting}
disabled={isSubmitting || isDeleting}
/>
</FormSegment>
<div className="flex flex-row items-center justify-between">
@@ -98,8 +114,8 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
<Rating.Item
name="rating-1"
className="mask mask-star cursor-default"
disabled={formState.isSubmitting || isDeleting}
aria-disabled={formState.isSubmitting || isDeleting}
disabled={isSubmitting || isDeleting}
aria-disabled={isSubmitting || isDeleting}
key={index}
/>
))}
@@ -109,7 +125,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
<button
type="button"
className="btn-xs btn lg:btn-sm"
disabled={formState.isSubmitting || isDeleting}
disabled={isSubmitting || isDeleting}
onClick={() => {
setInEditMode(false);
}}
@@ -118,7 +134,7 @@ const EditCommentBody: FC<EditCommentBodyProps> = ({
</button>
<button
type="submit"
disabled={formState.isSubmitting || isDeleting}
disabled={isSubmitting || isDeleting}
className="btn-xs btn lg:btn-sm"
>
Save

28
src/components/BeerById/BeerCommentForm.tsx
View File

@@ -1,4 +1,4 @@
import sendCreateBeerCommentRequest from '@/requests/sendCreateBeerCommentRequest';
import sendCreateBeerCommentRequest from '@/requests/BeerComment/sendCreateBeerCommentRequest';
import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
import { zodResolver } from '@hookform/resolvers/zod';
@@ -9,6 +9,8 @@ import { z } from 'zod';
import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPostComments';
import CreateCommentValidationSchema from '@/services/types/CommentSchema/CreateCommentValidationSchema';
import toast from 'react-hot-toast';
import createErrorToast from '@/util/createErrorToast';
import CommentForm from '../ui/CommentForm';
interface BeerCommentFormProps {
@@ -30,13 +32,23 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
data,
) => {
await sendCreateBeerCommentRequest({
content: data.content,
rating: data.rating,
beerPostId: beerPost.id,
});
await mutate();
reset();
const loadingToast = toast.loading('Posting a new comment...');
try {
await sendCreateBeerCommentRequest({
content: data.content,
rating: data.rating,
beerPostId: beerPost.id,
});
reset();
toast.remove(loadingToast);
toast.success('Comment posted successfully.');
await mutate();
} catch (error) {
await mutate();
toast.remove(loadingToast);
createErrorToast(error);
reset();
}
};
return (

4
src/components/BeerById/BeerPostCommentsSection.tsx
View File

@@ -67,8 +67,8 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
{
/**
* If the comments are loading, show a loading component. Otherwise, show the
* comments.
* If the comments are loading, show a loading component. Otherwise, show
* the comments.
*/
isLoading ? (
<div className="card bg-base-300 pb-6">

3
src/components/BeerById/BeerPostLikeButton.tsx
View File

@@ -1,8 +1,9 @@
import useCheckIfUserLikesBeerPost from '@/hooks/data-fetching/beer-likes/useCheckIfUserLikesBeerPost';
import sendBeerPostLikeRequest from '@/requests/sendBeerPostLikeRequest';
import { FC, useEffect, useState } from 'react';
import useGetBeerPostLikeCount from '@/hooks/data-fetching/beer-likes/useBeerPostLikeCount';
import sendBeerPostLikeRequest from '@/requests/BeerPost/sendBeerPostLikeRequest';
import LikeButton from '../ui/LikeButton';
const BeerPostLikeButton: FC<{

13
src/components/BeerById/BeerRecommendations.tsx
View File

@@ -19,8 +19,8 @@ const BeerRecommendationsSection: FC<{
const { ref: penultimateBeerPostRef } = useInView({
/**
* When the last beer post comes into view, call setSize from useBeerPostsByBrewery to
* load more beer posts.
* When the last beer post comes into view, call setSize from
* useBeerPostsByBrewery to load more beer posts.
*/
onChange: (visible) => {
if (!visible || isAtEnd) return;
@@ -46,8 +46,9 @@ const BeerRecommendationsSection: FC<{
const isPenultimateBeerPost = index === beerPosts.length - 2;
/**
* Attach a ref to the second last beer post in the list. When it comes
* into view, the component will call setSize to load more beer posts.
* Attach a ref to the second last beer post in the list.
* When it comes into view, the component will call
* setSize to load more beer posts.
*/
return (
@@ -85,8 +86,8 @@ const BeerRecommendationsSection: FC<{
{
/**
* If there are more beer posts to load, show a loading component with a
* skeleton loader and a loading spinner.
* If there are more beer posts to load, show a loading component
* with a skeleton loader and a loading spinner.
*/
!!isLoadingMore && !isAtEnd && (
<BeerRecommendationLoadingComponent length={PAGE_SIZE} />

13
src/components/BreweryById/BreweryBeerSection.tsx
View File

@@ -22,8 +22,8 @@ const BreweryBeersSection: FC<BreweryCommentsSectionProps> = ({ breweryPost }) =
});
const { ref: penultimateBeerPostRef } = useInView({
/**
* When the last beer post comes into view, call setSize from useBeerPostsByBrewery to
* load more beer posts.
* When the last beer post comes into view, call setSize from
* useBeerPostsByBrewery to load more beer posts.
*/
onChange: (visible) => {
if (!visible || isAtEnd) return;
@@ -60,8 +60,9 @@ const BreweryBeersSection: FC<BreweryCommentsSectionProps> = ({ breweryPost }) =
const isPenultimateBeerPost = index === beerPosts.length - 2;
/**
* Attach a ref to the second last beer post in the list. When it comes
* into view, the component will call setSize to load more beer posts.
* Attach a ref to the second last beer post in the list.
* When it comes into view, the component will call
* setSize to load more beer posts.
*/
return (
@@ -90,8 +91,8 @@ const BreweryBeersSection: FC<BreweryCommentsSectionProps> = ({ breweryPost }) =
{
/**
* If there are more beer posts to load, show a loading component with a
* skeleton loader and a loading spinner.
* If there are more beer posts to load, show a loading component
* with a skeleton loader and a loading spinner.
*/
!!isLoadingMore && !isAtEnd && (
<BeerRecommendationLoadingComponent length={PAGE_SIZE} />

60
src/components/BreweryById/BreweryCommentForm.tsx Normal file
View File

@@ -0,0 +1,60 @@
import useBreweryPostComments from '@/hooks/data-fetching/brewery-comments/useBreweryPostComments';
import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
import CreateCommentValidationSchema from '@/services/types/CommentSchema/CreateCommentValidationSchema';
import { zodResolver } from '@hookform/resolvers/zod';
import { FC } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import toast from 'react-hot-toast';
import { z } from 'zod';
import sendCreateBreweryCommentRequest from '@/requests/BreweryComment/sendCreateBreweryCommentRequest';
import createErrorToast from '@/util/createErrorToast';
import CommentForm from '../ui/CommentForm';
interface BreweryCommentFormProps {
breweryPost: z.infer<typeof BreweryPostQueryResult>;
mutate: ReturnType<typeof useBreweryPostComments>['mutate'];
}
const BreweryCommentForm: FC<BreweryCommentFormProps> = ({ breweryPost, mutate }) => {
const { register, handleSubmit, formState, watch, reset, setValue } = useForm<
z.infer<typeof CreateCommentValidationSchema>
>({
defaultValues: { rating: 0 },
resolver: zodResolver(CreateCommentValidationSchema),
});
const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
data,
) => {
const loadingToast = toast.loading('Posting a new comment...');
try {
await sendCreateBreweryCommentRequest({
content: data.content,
rating: data.rating,
breweryPostId: breweryPost.id,
});
reset();
toast.remove(loadingToast);
toast.success('Comment posted successfully.');
await mutate();
} catch (error) {
await mutate();
toast.remove(loadingToast);
createErrorToast(error);
reset();
}
};
return (
<CommentForm
handleSubmit={handleSubmit}
onSubmit={onSubmit}
watch={watch}
setValue={setValue}
formState={formState}
register={register}
/>
);
};
export default BreweryCommentForm;

79
src/components/BreweryById/BreweryCommentsSection.tsx
View File

@@ -3,93 +3,16 @@ import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQuer
import { FC, MutableRefObject, useContext, useRef } from 'react';
import { z } from 'zod';
import CreateCommentValidationSchema from '@/services/types/CommentSchema/CreateCommentValidationSchema';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm, SubmitHandler } from 'react-hook-form';
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResult';
import useBreweryPostComments from '@/hooks/data-fetching/brewery-comments/useBreweryPostComments';
import ToastContext from '@/contexts/ToastContext';
import LoadingComponent from '../BeerById/LoadingComponent';
import CommentsComponent from '../ui/CommentsComponent';
import CommentForm from '../ui/CommentForm';
import BreweryCommentForm from './BreweryCommentForm';
interface BreweryBeerSectionProps {
breweryPost: z.infer<typeof BreweryPostQueryResult>;
}
interface BreweryCommentFormProps {
breweryPost: z.infer<typeof BreweryPostQueryResult>;
mutate: ReturnType<typeof useBreweryPostComments>['mutate'];
}
const BreweryCommentValidationSchemaWithId = CreateCommentValidationSchema.extend({
breweryPostId: z.string(),
});
const sendCreateBreweryCommentRequest = async ({
content,
rating,
breweryPostId,
}: z.infer<typeof BreweryCommentValidationSchemaWithId>) => {
const response = await fetch(`/api/breweries/${breweryPostId}/comments`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content, rating }),
});
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
const parsedResponse = APIResponseValidationSchema.safeParse(data);
if (!parsedResponse.success) {
throw new Error('Invalid API response');
}
const parsedPayload = CommentQueryResult.safeParse(parsedResponse.data.payload);
if (!parsedPayload.success) {
throw new Error('Invalid API response payload');
}
return parsedPayload.data;
};
const BreweryCommentForm: FC<BreweryCommentFormProps> = ({ breweryPost, mutate }) => {
const { register, handleSubmit, formState, watch, reset, setValue } = useForm<
z.infer<typeof CreateCommentValidationSchema>
>({
defaultValues: { rating: 0 },
resolver: zodResolver(CreateCommentValidationSchema),
});
const { toast } = useContext(ToastContext);
const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
data,
) => {
await sendCreateBreweryCommentRequest({
content: data.content,
rating: data.rating,
breweryPostId: breweryPost.id,
});
await mutate();
toast.loading('Created new comment.');
reset();
};
return (
<CommentForm
handleSubmit={handleSubmit}
onSubmit={onSubmit}
watch={watch}
setValue={setValue}
formState={formState}
register={register}
/>
);
};
const BreweryCommentsSection: FC<BreweryBeerSectionProps> = ({ breweryPost }) => {
const { user } = useContext(UserContext);

2
src/components/BreweryIndex/BreweryPostLikeButton.tsx
View File

@@ -1,6 +1,6 @@
import useCheckIfUserLikesBreweryPost from '@/hooks/data-fetching/brewery-likes/useCheckIfUserLikesBreweryPost';
import useGetBreweryPostLikeCount from '@/hooks/data-fetching/brewery-likes/useGetBreweryPostLikeCount';
import sendBreweryPostLikeRequest from '@/requests/sendBreweryPostLikeRequest';
import sendBreweryPostLikeRequest from '@/requests/BreweryPostLike/sendBreweryPostLikeRequest';
import { FC, useState } from 'react';
import LikeButton from '../ui/LikeButton';

23
src/components/CreateBeerPostForm.tsx
View File

@@ -1,15 +1,17 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { BeerType } from '@prisma/client';
import router from 'next/router';
import { FunctionComponent, useState } from 'react';
import { FunctionComponent } from 'react';
import { useForm, SubmitHandler, FieldError } from 'react-hook-form';
import { z } from 'zod';
import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
import CreateBeerPostValidationSchema from '@/services/BeerPost/schema/CreateBeerPostValidationSchema';
import sendCreateBeerPostRequest from '@/requests/sendCreateBeerPostRequest';
import sendCreateBeerPostRequest from '@/requests/BeerPost/sendCreateBeerPostRequest';
import UploadImageValidationSchema from '@/services/types/ImageSchema/UploadImageValidationSchema';
import sendUploadBeerImagesRequest from '@/requests/sendUploadBeerImageRequest';
import ErrorAlert from './ui/alerts/ErrorAlert';
import sendUploadBeerImagesRequest from '@/requests/BeerImage/sendUploadBeerImageRequest';
import toast from 'react-hot-toast';
import Button from './ui/forms/Button';
import FormError from './ui/forms/FormError';
import FormInfo from './ui/forms/FormInfo';
@@ -40,7 +42,6 @@ const CreateBeerPostForm: FunctionComponent<BeerFormProps> = ({
});
const { errors, isSubmitting } = formState;
const [error, setError] = useState('');
const onSubmit: SubmitHandler<
z.infer<typeof CreateBeerPostWithImagesValidationSchema>
@@ -52,19 +53,17 @@ const CreateBeerPostForm: FunctionComponent<BeerFormProps> = ({
try {
const response = await sendCreateBeerPostRequest(data);
await sendUploadBeerImagesRequest({ beerPost: response, images: data.images });
router.push(`/beers/${response.id}`);
await router.push(`/beers/${response.id}`);
toast.success('Created beer post.');
} catch (e) {
if (!(e instanceof Error)) {
setError('Something went wrong');
return;
}
setError(e.message);
const errorMessage = e instanceof Error ? e.message : 'Something went wrong.';
toast.error(errorMessage);
}
};
return (
<form className="form-control" onSubmit={handleSubmit(onSubmit)}>
<div>{error && <ErrorAlert error={error} setError={setError} />}</div>
<FormInfo>
<FormLabel htmlFor="name">Name</FormLabel>
<FormError>{errors.name?.message}</FormError>

56
src/components/EditBeerPostForm.tsx
View File

@@ -1,12 +1,14 @@
import sendEditBeerPostRequest from '@/requests/sendEditBeerPostRequest';
import EditBeerPostValidationSchema from '@/services/BeerPost/schema/EditBeerPostValidationSchema';
import { zodResolver } from '@hookform/resolvers/zod';
import { FC } from 'react';
import { useRouter } from 'next/router';
import { FC, useState } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import toast from 'react-hot-toast';
import { z } from 'zod';
import ErrorAlert from './ui/alerts/ErrorAlert';
import { useForm, SubmitHandler } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import deleteBeerPostRequest from '@/requests/BeerPost/deleteBeerPostRequest';
import EditBeerPostValidationSchema from '@/services/BeerPost/schema/EditBeerPostValidationSchema';
import sendEditBeerPostRequest from '@/requests/BeerPost/sendEditBeerPostRequest';
import Button from './ui/forms/Button';
import FormError from './ui/forms/FormError';
import FormInfo from './ui/forms/FormInfo';
@@ -23,54 +25,36 @@ interface EditBeerPostFormProps {
const EditBeerPostForm: FC<EditBeerPostFormProps> = ({ previousValues }) => {
const router = useRouter();
const {
register,
handleSubmit,
formState: { errors },
} = useForm<EditBeerPostSchema>({
const { register, handleSubmit, formState } = useForm<EditBeerPostSchema>({
resolver: zodResolver(EditBeerPostValidationSchema),
defaultValues: previousValues,
});
const [error, setError] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const { isSubmitting, errors } = formState;
const onSubmit: SubmitHandler<EditBeerPostSchema> = async (data) => {
try {
setIsSubmitting(true);
await sendEditBeerPostRequest(data);
router.push(`/beers/${data.id}`);
await router.push(`/beers/${data.id}`);
toast.success('Edited beer post.');
} catch (e) {
setIsSubmitting(false);
if (!(e instanceof Error)) {
setError('Something went wrong');
return;
}
setError(e.message);
const errorMessage = e instanceof Error ? e.message : 'Something went wrong.';
toast.error(errorMessage);
await router.push(`/beers/${data.id}`);
}
};
const onDelete = async () => {
try {
const response = await fetch(`/api/beers/${previousValues.id}`, {
method: 'DELETE',
});
if (response.status === 200) {
router.push('/beers');
}
await deleteBeerPostRequest(previousValues.id);
await router.push('/beers');
} catch (e) {
if (!(e instanceof Error)) {
setError('Something went wrong');
return;
}
setError(e.message);
const errorMessage = e instanceof Error ? e.message : 'Something went wrong.';
toast.error(errorMessage);
await router.push(`/beers`);
}
};
return (
<form className="form-control" onSubmit={handleSubmit(onSubmit)}>
<div className="mb-5">
{error && <ErrorAlert error={error} setError={setError} />}
</div>
<FormInfo>
<FormLabel htmlFor="name">Name</FormLabel>
<FormError>{errors.name?.message}</FormError>

25
src/components/Login/LoginForm.tsx
View File

@@ -1,13 +1,14 @@
import sendLoginUserRequest from '@/requests/sendLoginUserRequest';
import sendLoginUserRequest from '@/requests/User/sendLoginUserRequest';
import LoginValidationSchema from '@/services/User/schema/LoginValidationSchema';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/router';
import { useContext, useState } from 'react';
import { useContext } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { z } from 'zod';
import UserContext from '@/contexts/UserContext';
import ToastContext from '@/contexts/ToastContext';
import ErrorAlert from '../ui/alerts/ErrorAlert';
import toast from 'react-hot-toast';
import createErrorToast from '@/util/createErrorToast';
import FormError from '../ui/forms/FormError';
import FormInfo from '../ui/forms/FormInfo';
import FormLabel from '../ui/forms/FormLabel';
@@ -28,23 +29,20 @@ const LoginForm = () => {
const { errors } = formState;
const [responseError, setResponseError] = useState<string>('');
const { mutate } = useContext(UserContext);
const { toast } = useContext(ToastContext);
const onSubmit: SubmitHandler<LoginT> = async (data) => {
const loadingToast = toast.loading('Logging in...');
try {
const id = toast.loading('Logging in.');
await sendLoginUserRequest(data);
await mutate!();
toast.remove(loadingToast);
toast.success('Logged in!');
await router.push(`/user/current`);
toast.remove(id);
} catch (error) {
if (error instanceof Error) {
setResponseError(error.message);
reset();
}
toast.remove(loadingToast);
createErrorToast(error);
reset();
}
};
@@ -82,7 +80,6 @@ const LoginForm = () => {
</FormSegment>
</div>
{responseError && <ErrorAlert error={responseError} setError={setResponseError} />}
<div className="w-full">
<Button type="submit" isSubmitting={formState.isSubmitting}>
Login

23
src/components/RegisterUserForm.tsx
View File

@@ -1,12 +1,14 @@
import sendRegisterUserRequest from '@/requests/sendRegisterUserRequest';
import sendRegisterUserRequest from '@/requests/User/sendRegisterUserRequest';
import { CreateUserValidationSchemaWithUsernameAndEmailCheck } from '@/services/User/schema/CreateUserValidationSchemas';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/router';
import { FC, useState } from 'react';
import { FC } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import ErrorAlert from './ui/alerts/ErrorAlert';
import createErrorToast from '@/util/createErrorToast';
import toast from 'react-hot-toast';
import Button from './ui/forms/Button';
import FormError from './ui/forms/FormError';
import FormInfo from './ui/forms/FormInfo';
@@ -21,7 +23,6 @@ const RegisterUserForm: FC = () => {
>({ resolver: zodResolver(CreateUserValidationSchemaWithUsernameAndEmailCheck) });
const { errors } = formState;
const [serverResponseError, setServerResponseError] = useState('');
const onSubmit = async (
data: z.infer<typeof CreateUserValidationSchemaWithUsernameAndEmailCheck>,
@@ -31,11 +32,10 @@ const RegisterUserForm: FC = () => {
reset();
router.push('/', undefined, { shallow: true });
} catch (error) {
setServerResponseError(
error instanceof Error
? error.message
: 'Something went wrong. We could not register your account.',
);
createErrorToast({
toast,
error,
});
}
};
return (
@@ -44,11 +44,6 @@ const RegisterUserForm: FC = () => {
noValidate
onSubmit={handleSubmit(onSubmit)}
>
<div>
{serverResponseError && (
<ErrorAlert error={serverResponseError} setError={setServerResponseError} />
)}
</div>
<div>
<div className="flex flex-col lg:flex-row lg:space-x-3">
<div className="lg:w-[50%]">

14
src/components/ui/CommentsComponent.tsx
View File

@@ -68,8 +68,9 @@ const CommentsComponent: FC<CommentsComponentProps> = ({
const isLastComment = index === comments.length - 1;
/**
* Attach a ref to the last comment in the list. When it comes into view, the
* component will call setSize to load more comments.
* Attach a ref to the last comment in the list. When it comes
* into view, the component will call setSize to load more
* comments.
*/
return (
<div
@@ -88,16 +89,17 @@ const CommentsComponent: FC<CommentsComponentProps> = ({
{
/**
* If there are more comments to load, show a loading component with a
* skeleton loader and a loading spinner.
* If there are more comments to load, show a loading component
* with a skeleton loader and a loading spinner.
*/
!!isLoadingMore && <LoadingComponent length={pageSize} />
}
{
/**
* If the user has scrolled to the end of the comments, show a button that
* will scroll them back to the top of the comments section.
* If the user has scrolled to the end of the comments, show a
* button that will scroll them back to the top of the comments
* section.
*/
!!isAtEnd && (
<div className="flex h-20 items-center justify-center text-center">

33
src/components/ui/CustomToast.tsx
View File

@@ -1,4 +1,3 @@
import ToastContext from '@/contexts/ToastContext';
import { FC, ReactNode } from 'react';
import toast, { Toast, Toaster, resolveValue } from 'react-hot-toast';
import { FaTimes } from 'react-icons/fa';
@@ -22,29 +21,31 @@ const toastToClassName = (toastType: Toast['type']) => {
const CustomToast: FC<{ children: ReactNode }> = ({ children }) => {
return (
<ToastContext.Provider value={{ toast }}>
<Toaster>
<>
<Toaster position="bottom-center">
{(t) => {
const alertType = toastToClassName(t.type);
return (
<div className="flex w-full items-center justify-center">
<div
className={`alert ${alertType} w-11/12 flex-row items-center py-[0.5rem] shadow-lg animate-in fade-in duration-200 lg:w-6/12`}
>
<div>{resolveValue(t.message, t)}</div>
<button
className="btn-ghost btn-circle btn"
onClick={() => toast.dismiss(t.id)}
>
<FaTimes />
</button>
</div>
<div
className={`alert ${alertType} w-11/12 flex-row items-center shadow-lg animate-in fade-in duration-200 lg:w-6/12`}
>
<p>{resolveValue(t.message, t)}</p>
{t.type !== 'loading' && (
<div>
<button
className="btn-ghost btn-xs btn-circle btn"
onClick={() => toast.dismiss(t.id)}
>
<FaTimes />
</button>
</div>
)}
</div>
);
}}
</Toaster>
{children}
</ToastContext.Provider>
</>
);
};
export default CustomToast;

32
src/components/ui/alerts/ErrorAlert.tsx
View File

@@ -1,32 +0,0 @@
import { Dispatch, FC, SetStateAction } from 'react';
import { FiAlertTriangle } from 'react-icons/fi';
interface ErrorAlertProps {
error: string;
setError: Dispatch<SetStateAction<string>>;
}
const ErrorAlert: FC<ErrorAlertProps> = ({ error, setError }) => {
return (
<div className="alert alert-error flex-row shadow-lg">
<div className="space-x-1">
<FiAlertTriangle className="h-6 w-6" />
<span>{error}</span>
</div>
<div className="flex-none">
<button
className="btn-ghost btn-sm btn"
type="button"
onClick={() => {
setError('');
}}
>
OK
</button>
</div>
</div>
);
};
export default ErrorAlert;

8
src/contexts/ToastContext.ts
View File

@@ -1,8 +0,0 @@
import { createContext } from 'react';
import toast from 'react-hot-toast';
const ToastContext = createContext<{
toast: typeof toast;
}>({ toast });
export default ToastContext;

9
src/hooks/utilities/useMediaQuery.ts
View File

@@ -18,8 +18,9 @@ import { useState, useEffect } from 'react';
*/
const useMediaQuery = (query: `(${string})`) => {
/**
* Initialize the matches state variable to false. This is updated whenever the viewport
* size changes (i.e. when the component is mounted and when the window is resized)
* Initialize the matches state variable to false. This is updated whenever the
* viewport size changes (i.e. when the component is mounted and when the window is
* resized)
*/
const [matches, setMatches] = useState(false);
@@ -34,8 +35,8 @@ const useMediaQuery = (query: `(${string})`) => {
}
/**
* Add a resize event listener to the window object, and update the `matches` state
* variable whenever the viewport size changes.
* Add a resize event listener to the window object, and update the `matches`
* state variable whenever the viewport size changes.
*/
const listener = () => setMatches(media.matches);
window.addEventListener('resize', listener);

44
src/pages/account/index.tsx
View File

@@ -3,16 +3,14 @@ import { NextPage } from 'next';
import { Tab } from '@headlessui/react';
import Head from 'next/head';
import GetUserSchema from '@/services/User/schema/GetUserSchema';
import { z } from 'zod';
import DBClient from '@/prisma/DBClient';
import AccountInfo from '@/components/Account/AccountInfo';
import { useContext } from 'react';
import UserContext from '@/contexts/UserContext';
interface AccountPageProps {
user: z.infer<typeof GetUserSchema>;
}
const AccountPage: NextPage = () => {
const { user } = useContext(UserContext);
if (!user) return null;
const AccountPage: NextPage<AccountPageProps> = ({ user }) => {
return (
<>
<Head>
@@ -30,7 +28,7 @@ const AccountPage: NextPage<AccountPageProps> = ({ user }) => {
</div>
<div className="flex flex-col items-center space-y-1">
<p className="text-3xl font-bold">Hello, {user.username}!</p>
<p className="text-3xl font-bold">Hello, {user!.username}!</p>
<p className="text-lg">Welcome to your account page.</p>
</div>
</div>
@@ -50,7 +48,7 @@ const AccountPage: NextPage<AccountPageProps> = ({ user }) => {
</Tab.List>
<Tab.Panels>
<Tab.Panel>
<AccountInfo user={user} />
<AccountInfo />
</Tab.Panel>
<Tab.Panel>Content 3</Tab.Panel>
</Tab.Panels>
@@ -64,30 +62,4 @@ const AccountPage: NextPage<AccountPageProps> = ({ user }) => {
export default AccountPage;
export const getServerSideProps = withPageAuthRequired(async (context, session) => {
const { id } = session;
const user: z.infer<typeof GetUserSchema> | null =
await DBClient.instance.user.findUnique({
where: { id },
select: {
username: true,
email: true,
accountIsVerified: true,
firstName: true,
lastName: true,
dateOfBirth: true,
id: true,
createdAt: true,
},
});
if (!user) {
return { redirect: { destination: '/login', permanent: false } };
}
return {
props: {
user: JSON.parse(JSON.stringify(user)),
},
};
});
export const getServerSideProps = withPageAuthRequired();

0
src/requests/sendCreateBeerCommentRequest.ts → src/requests/BeerComment/sendCreateBeerCommentRequest.ts
View File

0
src/requests/sendUploadBeerImageRequest.ts → src/requests/BeerImage/sendUploadBeerImageRequest.ts
View File

22
src/requests/BeerPost/deleteBeerPostRequest.ts Normal file
View File

@@ -0,0 +1,22 @@
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
const deleteBeerPostRequest = async (id: string) => {
const response = await fetch(`/api/beers/${id}`, {
method: 'DELETE',
});
if (!response.ok) {
throw new Error(response.statusText);
}
const json = await response.json();
const parsed = APIResponseValidationSchema.safeParse(json);
if (!parsed.success) {
throw new Error('Could not successfully parse the response.');
}
return parsed;
};
export default deleteBeerPostRequest;

0
src/requests/sendBeerPostLikeRequest.ts → src/requests/BeerPost/sendBeerPostLikeRequest.ts
View File

0
src/requests/sendCreateBeerPostRequest.ts → src/requests/BeerPost/sendCreateBeerPostRequest.ts
View File

0
src/requests/sendEditBeerPostRequest.ts → src/requests/BeerPost/sendEditBeerPostRequest.ts
View File

39
src/requests/BreweryComment/sendCreateBreweryCommentRequest.ts Normal file
View File

@@ -0,0 +1,39 @@
import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResult';
import CreateCommentValidationSchema from '@/services/types/CommentSchema/CreateCommentValidationSchema';
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
import { z } from 'zod';
const BreweryCommentValidationSchemaWithId = CreateCommentValidationSchema.extend({
breweryPostId: z.string(),
});
const sendCreateBreweryCommentRequest = async ({
content,
rating,
breweryPostId,
}: z.infer<typeof BreweryCommentValidationSchemaWithId>) => {
const response = await fetch(`/api/breweries/${breweryPostId}/comments`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content, rating }),
});
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
const parsedResponse = APIResponseValidationSchema.safeParse(data);
if (!parsedResponse.success) {
throw new Error('Invalid API response');
}
const parsedPayload = CommentQueryResult.safeParse(parsedResponse.data.payload);
if (!parsedPayload.success) {
throw new Error('Invalid API response payload');
}
return parsedPayload.data;
};
export default sendCreateBreweryCommentRequest;

0
src/requests/sendBreweryPostLikeRequest.ts → src/requests/BreweryPostLike/sendBreweryPostLikeRequest.ts
View File

35
src/requests/User/sendEditUserRequest.ts Normal file
View File

@@ -0,0 +1,35 @@
import GetUserSchema from '@/services/User/schema/GetUserSchema';
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
import { z } from 'zod';
interface SendEditUserRequestArgs {
user: z.infer<typeof GetUserSchema>;
data: {
username: string;
email: string;
firstName: string;
lastName: string;
};
}
const sendEditUserRequest = async ({ user, data }: SendEditUserRequestArgs) => {
const response = await fetch(`/api/users/${user!.id}/edit`, {
body: JSON.stringify(data),
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
});
if (!response.ok) {
throw new Error(response.statusText);
}
const json = await response.json();
const parsed = APIResponseValidationSchema.safeParse(json);
if (!parsed.success) {
throw new Error('API response validation failed.');
}
return parsed;
};
export default sendEditUserRequest;

0
src/requests/sendLoginUserRequest.ts → src/requests/User/sendLoginUserRequest.ts
View File

0
src/requests/sendRegisterUserRequest.ts → src/requests/User/sendRegisterUserRequest.ts
View File

4
src/requests/valdiateEmail.ts → src/requests/User/validateEmailRequest.ts
View File

@@ -1,7 +1,7 @@
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
import { z } from 'zod';
const validateEmail = async (email: string) => {
const validateEmailRequest = async (email: string) => {
const response = await fetch(`/api/users/check-email?email=${email}`);
const json = await response.json();
@@ -22,4 +22,4 @@ const validateEmail = async (email: string) => {
return !parsedPayload.data.emailIsTaken;
};
export default validateEmail;
export default validateEmailRequest;

4
src/requests/validateUsername.ts → src/requests/validateUsernameRequest.ts
View File

@@ -1,7 +1,7 @@
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
import { z } from 'zod';
const validateUsername = async (username: string) => {
const validateUsernameRequest = async (username: string) => {
const response = await fetch(`/api/users/check-username?username=${username}`);
const json = await response.json();
@@ -22,4 +22,4 @@ const validateUsername = async (username: string) => {
return !parsedPayload.data.usernameIsTaken;
};
export default validateUsername;
export default validateUsernameRequest;

15
src/services/BeerPost/schema/BeerRecommendationQueryResult.ts
View File

@@ -1,15 +0,0 @@
import { BeerPost } from '@prisma/client';
type BeerRecommendationQueryResult = BeerPost & {
brewery: {
id: string;
name: string;
};
beerImages: {
id: string;
alt: string;
url: string;
}[];
};
export default BeerRecommendationQueryResult;

8
src/services/User/schema/CreateUserValidationSchemas.ts
View File

@@ -1,5 +1,5 @@
import validateEmail from '@/requests/valdiateEmail';
import validateUsername from '@/requests/validateUsername';
import validateEmailRequest from '@/requests/User/validateEmailRequest';
import validateUsernameRequest from '@/requests/validateUsernameRequest';
import sub from 'date-fns/sub';
import { z } from 'zod';
@@ -55,14 +55,14 @@ export const CreateUserValidationSchemaWithUsernameAndEmailCheck =
email: z
.string()
.email({ message: 'Email must be a valid email address.' })
.refine(async (email) => validateEmail(email), {
.refine(async (email) => validateEmailRequest(email), {
message: 'Email is already taken.',
}),
username: z
.string()
.min(1, { message: 'Username must not be empty.' })
.max(20, { message: 'Username must be less than 20 characters.' })
.refine(async (username) => validateUsername(username), {
.refine(async (username) => validateUsernameRequest(username), {
message: 'Username is already taken.',
}),
}).refine((data) => data.password === data.confirmPassword, {

13
src/util/createErrorToast.ts Normal file
View File

@@ -0,0 +1,13 @@
import toast from 'react-hot-toast';
/**
* @param error - The error to display.
*
* Creates a toast message with the error message.
*/
const createErrorToast = (error: unknown) => {
const errorMessage = error instanceof Error ? error.message : 'Something went wrong.';
toast.error(errorMessage);
};
export default createErrorToast;