feat: toaster errors (#25)

package.json

@@ -25,7 +25,8 @@
         "next-auth-guilded": "1.0.1",
         "node-fetch": "^3.2.4",
         "react": "18.1.0",
-        "react-dom": "18.1.0"
+        "react-dom": "18.1.0",
+        "react-toastify": "^9.0.2"
     },
     "devDependencies": {
         "@types/node": "17.0.31",

pages/_app.tsx

@@ -4,6 +4,9 @@ import { SessionProvider } from "next-auth/react";
 import Layout from "./layout";
 import Head from "next/head";
 
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
 function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
     return (
         <>
@@ -17,6 +20,17 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
             <SessionProvider session={session}>
                 <Layout>
                     <Component {...pageProps} />
+                    <ToastContainer
+                        position="top-center"
+                        autoClose={5000}
+                        hideProgressBar={false}
+                        newestOnTop={false}
+                        closeOnClick
+                        rtl={false}
+                        pauseOnFocusLoss
+                        draggable
+                        pauseOnHover
+                    />
                 </Layout>
             </SessionProvider>
         </>

pages/api/users/[userId]/bios/[bioId].tsx

@@ -7,7 +7,7 @@ import { BadRequest, InternalError, NoContent, Ok, Unauthenticated, Unauthorized
 const BioRoute = async (req: NextApiRequest, res: NextApiResponse) => {
     const session = await getSession({ req });
     if (!session?.user) return Unauthenticated(res);
-    
+
     const bioId = Number(req.query.bioId);
     if (Number.isNaN(bioId)) return BadRequest(res, "Invalid bio ID.");
 

pages/settings.tsx

@@ -9,6 +9,7 @@ import { fetchUser } from "../lib/api";
 import { GuildedUser, BadgeName, badgeMap } from "../types/user";
 import Button from "../components/button";
 import { DeNullishFilter } from "../utility/utils";
+import { toast } from "react-toastify";
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
     const user = (await getSession({ req: context.req }))?.user as ModifiedSession | undefined;
@@ -30,11 +31,11 @@ type Props = {
 };
 
 function isGuildedUser(object: any): object is GuildedUser {
-    return 'profilePicture' in object;
+    return "profilePicture" in object;
 }
 
 const SettingsPage: NextPage<Props> = ({ user }) => {
-    let profilePicture = 'https://img.guildedcdn.com/asset/DefaultUserAvatars/profile_1.png';
+    let profilePicture = "https://img.guildedcdn.com/asset/DefaultUserAvatars/profile_1.png";
     let badges: any[] = [];
     if (isGuildedUser(user)) {
         profilePicture = user.profilePicture ?? profilePicture;
@@ -82,7 +83,7 @@ const SettingsPage: NextPage<Props> = ({ user }) => {
 
                             if (!response.ok) {
                                 const data = await response.json();
-                                return alert(`Error: ${data.error.message}`);
+                                return toast.error(data.error.message);
                             }
                             signOut({ callbackUrl: "/" });
                         }}

pages/users/[id].tsx

@@ -15,6 +15,7 @@ import { DeNullishFilter } from "../../utility/utils";
 import { UserFlairs } from "../../components/profile/flairs";
 import { useRouter } from "next/router";
 import Link from "next/link";
+import { toast } from "react-toastify";
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
     const { id } = ctx.params as { id: string };
@@ -68,7 +69,7 @@ const UserPage: NextPage<Props> = ({ user, bio }) => {
                     message: "Unparseable.",
                 },
             }))) as { error: { message: string } };
-            return alert(`Error!: ${data.error.message}`);
+            return toast.error(data.error.message);
         }
         const data = (await response.json()) as { bio: Bio };
         if (!bio) router.reload();

yarn.lock

@@ -546,6 +546,11 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
@@ -2048,6 +2053,13 @@ react-is@^16.13.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-toastify@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.0.2.tgz#f7934b52ac30eb0c4de452920494b45d65957026"
+  integrity sha512-IknOvdh7LNzeLKmZTn7EXYC4kaSM0VdUvRuNdBJs/F/NMgRW9kFXbzAUb8rpQxIH+p1YJ3KVbfmL5ThCPH6o0A==
+  dependencies:
+    clsx "^1.1.1"
+
 [email protected]:
   version "18.1.0"
   resolved "https://registry.npmjs.org/react/-/react-18.1.0.tgz"