Merge pull request #42 from aaronpo97/react-toast

React toast updates and refactor

next.config.js

@@ -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);

package-lock.json

@@ -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==",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
-      "devOptional": true
     },
     "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==",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA=="
-      "devOptional": true
     },
     "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",

package.json

@@ -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",

src/components/Account/AccountInfo.tsx

@@ -1,24 +1,23 @@
-import validateEmail from '@/requests/valdiateEmail';
+import validateEmailRequest from '@/requests/User/validateEmailRequest';
-import validateUsername from '@/requests/validateUsername';
+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, useContext, useState } from 'react';
-import { FC, 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 {
+const AccountInfo: FC = () => {
-  user: z.infer<typeof GetUserSchema>;
+  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;
+          if (user!.email === email) return true;
-          return validateEmail(email);
+          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;
+          if (user!.username === username) return true;
-          return validateUsername(username);
+          return validateUsernameRequest(username);
         },
         { message: 'Username is already taken.' },
       ),
@@ -53,29 +52,29 @@ const AccountInfo: FC<AccountInfoProps> = ({ user }) => {
   >({
     resolver: zodResolver(EditUserSchema),
     defaultValues: {
-      username: user.username,
+      username: user!.username,
-      email: user.email,
+      email: user!.email,
-      firstName: user.firstName,
+      firstName: user!.firstName,
-      lastName: user.lastName,
+      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`, {
+    const loadingToast = toast.loading('Submitting edits...');
-      body: JSON.stringify(data),
+    try {
-      method: 'PUT',
+      await sendEditUserRequest({ user: user!, data });
-      headers: { 'Content-Type': 'application/json' },
+      await mutate!();
-    });
+      setInEditMode(false);
-
+      toast.remove(loadingToast);
-    if (!response.ok) {
+      toast.success('Edits submitted successfully.');
-      throw new Error('Something went wrong.');
+    } catch (error) {
+      setInEditMode(false);
+      toast.remove(loadingToast);
+      createErrorToast(error);
+      await mutate!();
     }
-
-    await response.json();
-
-    router.reload();
   };
 
   return (

src/components/BeerBreweryComments/CommentContentBody.tsx

@@ -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';

src/components/BeerBreweryComments/EditCommentBody.tsx

@@ -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, isSubmitting } = formState;
-  const { errors } = formState;
 
   const [isDeleting, setIsDeleting] = useState(false);
 
   const onDelete = async () => {
+    const loadingToast = toast.loading('Deleting comment...');
     setIsDeleting(true);
+    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,
   ) => {
+    const loadingToast = toast.loading('Submitting comment edits...');
+
+    try {
       setInEditMode(true);
       await handleEditRequest(comment.id, data);
       await mutate();
-    toast.success('Submitted edits');
+      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}
+                    disabled={isSubmitting || isDeleting}
-                    aria-disabled={formState.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

src/components/BeerById/BeerCommentForm.tsx

@@ -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,
   ) => {
+    const loadingToast = toast.loading('Posting a new comment...');
+    try {
       await sendCreateBeerCommentRequest({
         content: data.content,
         rating: data.rating,
         beerPostId: beerPost.id,
       });
-    await mutate();
       reset();
+      toast.remove(loadingToast);
+      toast.success('Comment posted successfully.');
+      await mutate();
+    } catch (error) {
+      await mutate();
+      toast.remove(loadingToast);
+      createErrorToast(error);
+      reset();
+    }
   };
 
   return (

src/components/BeerById/BeerPostCommentsSection.tsx

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

src/components/BeerById/BeerPostLikeButton.tsx

@@ -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<{

src/components/BeerById/BeerRecommendations.tsx

@@ -19,8 +19,8 @@ const BeerRecommendationsSection: FC<{
 
   const { ref: penultimateBeerPostRef } = useInView({
     /**
-     * When the last beer post comes into view, call setSize from useBeerPostsByBrewery to
+     * When the last beer post comes into view, call setSize from
-     * load more beer posts.
+     * 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
+                 * Attach a ref to the second last beer post in the list.
-                 * into view, the component will call setSize to load more beer posts.
+                 * 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
+             * If there are more beer posts to load, show a loading component
-             * skeleton loader and a loading spinner.
+             * with a skeleton loader and a loading spinner.
              */
             !!isLoadingMore && !isAtEnd && (
               <BeerRecommendationLoadingComponent length={PAGE_SIZE} />

src/components/BreweryById/BreweryBeerSection.tsx

@@ -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
+     * When the last beer post comes into view, call setSize from
-     * load more beer posts.
+     * 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
+                 * Attach a ref to the second last beer post in the list.
-                 * into view, the component will call setSize to load more beer posts.
+                 * 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
+             * If there are more beer posts to load, show a loading component
-             * skeleton loader and a loading spinner.
+             * with a skeleton loader and a loading spinner.
              */
             !!isLoadingMore && !isAtEnd && (
               <BeerRecommendationLoadingComponent length={PAGE_SIZE} />

src/components/BreweryById/BreweryCommentForm.tsx

@@ -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;

src/components/BreweryById/BreweryCommentsSection.tsx

@@ -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);
 

src/components/BreweryIndex/BreweryPostLikeButton.tsx

@@ -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';
 

src/components/CreateBeerPostForm.tsx

@@ -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 sendUploadBeerImagesRequest from '@/requests/BeerImage/sendUploadBeerImageRequest';
-import ErrorAlert from './ui/alerts/ErrorAlert';
+
+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)) {
+      const errorMessage = e instanceof Error ? e.message : 'Something went wrong.';
-        setError('Something went wrong');
+
-        return;
+      toast.error(errorMessage);
-      }
-      setError(e.message);
     }
   };
 
   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>

src/components/EditBeerPostForm.tsx

@@ -1,12 +1,14 @@
-import sendEditBeerPostRequest from '@/requests/sendEditBeerPostRequest';
+import { FC } from 'react';
-import EditBeerPostValidationSchema from '@/services/BeerPost/schema/EditBeerPostValidationSchema';
-import { zodResolver } from '@hookform/resolvers/zod';
 
 import { useRouter } from 'next/router';
-import { FC, useState } from 'react';
+import toast from 'react-hot-toast';
-import { useForm, SubmitHandler } from 'react-hook-form';
 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 {
+  const { register, handleSubmit, formState } = useForm<EditBeerPostSchema>({
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<EditBeerPostSchema>({
     resolver: zodResolver(EditBeerPostValidationSchema),
     defaultValues: previousValues,
   });
 
-  const [error, setError] = useState('');
+  const { isSubmitting, errors } = formState;
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
   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);
+      const errorMessage = e instanceof Error ? e.message : 'Something went wrong.';
-      if (!(e instanceof Error)) {
+      toast.error(errorMessage);
-        setError('Something went wrong');
+      await router.push(`/beers/${data.id}`);
-        return;
-      }
-      setError(e.message);
     }
   };
 
   const onDelete = async () => {
     try {
-      const response = await fetch(`/api/beers/${previousValues.id}`, {
+      await deleteBeerPostRequest(previousValues.id);
-        method: 'DELETE',
+      await router.push('/beers');
-      });
-      if (response.status === 200) {
-        router.push('/beers');
-      }
     } catch (e) {
-      if (!(e instanceof Error)) {
+      const errorMessage = e instanceof Error ? e.message : 'Something went wrong.';
-        setError('Something went wrong');
+      toast.error(errorMessage);
-        return;
+      await router.push(`/beers`);
-      }
-      setError(e.message);
     }
   };
   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>

src/components/Login/LoginForm.tsx

@@ -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 toast from 'react-hot-toast';
-import ErrorAlert from '../ui/alerts/ErrorAlert';
+
+import createErrorToast from '@/util/createErrorToast';
 import FormError from '../ui/forms/FormError';
 import FormInfo from '../ui/forms/FormInfo';
 import FormLabel from '../ui/forms/FormLabel';
@@ -28,24 +29,21 @@ 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) {
+      toast.remove(loadingToast);
-        setResponseError(error.message);
+      createErrorToast(error);
       reset();
     }
-    }
   };
 
   return (
@@ -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

src/components/RegisterUserForm.tsx

@@ -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(
+      createErrorToast({
-        error instanceof Error
+        toast,
-          ? error.message
+        error,
-          : 'Something went wrong. We could not register your account.',
+      });
-      );
     }
   };
   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%]">

src/components/ui/CommentsComponent.tsx

@@ -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
+             * Attach a ref to the last comment in the list. When it comes
-             * component will call setSize to load more comments.
+             * 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
+             * If there are more comments to load, show a loading component
-             * skeleton loader and a loading spinner.
+             * 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
+             * If the user has scrolled to the end of the comments, show a
-             * will scroll them back to the top of the comments section.
+             * 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">

src/components/ui/CustomToast.tsx

@@ -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`}
+              className={`alert ${alertType} w-11/12 flex-row items-center shadow-lg animate-in fade-in duration-200 lg:w-6/12`}
             >
-                <div>{resolveValue(t.message, t)}</div>
+              <p>{resolveValue(t.message, t)}</p>
+              {t.type !== 'loading' && (
+                <div>
                   <button
-                  className="btn-ghost btn-circle btn"
+                    className="btn-ghost btn-xs btn-circle btn"
                     onClick={() => toast.dismiss(t.id)}
                   >
                     <FaTimes />
                   </button>
                 </div>
+              )}
             </div>
           );
         }}
       </Toaster>
       {children}
-    </ToastContext.Provider>
+    </>
   );
 };
 export default CustomToast;

src/components/ui/alerts/ErrorAlert.tsx

@@ -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;

src/contexts/ToastContext.ts

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

src/hooks/utilities/useMediaQuery.ts

@@ -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
+   * Initialize the matches state variable to false. This is updated whenever the
-   * size changes (i.e. when the component is mounted and when the window is resized)
+   * 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
+     * Add a resize event listener to the window object, and update the `matches`
-     * variable whenever the viewport size changes.
+     * state variable whenever the viewport size changes.
      */
     const listener = () => setMatches(media.matches);
     window.addEventListener('resize', listener);

src/pages/account/index.tsx

@@ -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 {
+const AccountPage: NextPage = () => {
-  user: z.infer<typeof GetUserSchema>;
+  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) => {
+export const getServerSideProps = withPageAuthRequired();
-  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)),
-    },
-  };
-});

src/requests/BeerPost/deleteBeerPostRequest.ts

@@ -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;

src/requests/BreweryComment/sendCreateBreweryCommentRequest.ts

@@ -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;

src/requests/User/sendEditUserRequest.ts

@@ -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;

src/requests/User/validateEmailRequest.ts

@@ -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;

src/requests/validateUsernameRequest.ts

@@ -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;

src/services/BeerPost/schema/BeerRecommendationQueryResult.ts

@@ -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;

src/services/User/schema/CreateUserValidationSchemas.ts

@@ -1,5 +1,5 @@
-import validateEmail from '@/requests/valdiateEmail';
+import validateEmailRequest from '@/requests/User/validateEmailRequest';
-import validateUsername from '@/requests/validateUsername';
+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, {

src/util/createErrorToast.ts

@@ -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;