useSWR fetching logic fixes

components/layout/index.tsx

@@ -1,6 +1,5 @@
 import { Box, Container, Flex, useToast } from "@chakra-ui/react";
 import { t } from "@lingui/macro";
-import { getToastOptions } from "lib/getToastOptions";
 import { AppProps } from "next/app";
 import { SWRConfig } from "swr";
 import Footer from "./Footer";
@@ -36,10 +35,14 @@ const Layout = ({ Component, pageProps }: AppProps) => {
           }),
         revalidateOnFocus: false,
         revalidateOnReconnect: false,
-        onError: (error) => {
-          toast(
-            getToastOptions(error.message ?? t`An error occurred`, "error")
-          );
+        onError: () => {
+          toast({
+            duration: null,
+            isClosable: true,
+            position: "top-right",
+            status: "error",
+            description: t`An error occurred`,
+          });
         },
       }}
     >

components/u/ProfileModal.tsx

@@ -86,7 +86,6 @@ const ProfileModal: React.FC<Props> = ({ onClose, user }) => {
       : undefined,
   });
 
-  // FIXME: bio length show
   const watchBio = watch("bio", user.profile?.bio ?? "");
 
   const toast = useToast();
@@ -114,7 +113,8 @@ const ProfileModal: React.FC<Props> = ({ onClose, user }) => {
     }
 
     // FIXME: error handling
-    await sendData("PUT", "/api/me/profile", mutationData);
+    const success = await sendData("PUT", "/api/me/profile", mutationData);
+    if (!success) return;
 
     mutate(`/api/users/${user.id}`);
 

hooks/u.ts

@@ -6,7 +6,7 @@ export function useBuildsByUser(userId?: number) {
   const [weapon, setWeapon] = useState<string | null>(null);
 
   const { data = [] } = useSWR<GetBuildsByUserData>(
-    `/api/users/${userId}/builds`
+    userId ? `/api/users/${userId}/builds` : null
   );
 
   const weaponCounts = data.reduce((acc: [string, number][], build) => {

lib/postData.ts

@@ -1,3 +1,6 @@
+import { createStandaloneToast } from "@chakra-ui/react";
+import { t } from "@lingui/macro";
+
 export async function sendData(method = "POST", url = "", data = {}) {
   // Default options are marked with *
   const response = await fetch(url, {
@@ -9,7 +12,18 @@ export async function sendData(method = "POST", url = "", data = {}) {
   });
 
   if (response.status < 200 || response.status > 299) {
-    // FIXME: different messages for different status codes and translated
-    throw Error("Invalid request");
+    const toast = createStandaloneToast();
+
+    toast({
+      duration: null,
+      isClosable: true,
+      position: "top-right",
+      status: "error",
+      description: t`An error occurred`,
+    });
+
+    return false;
   }
+
+  return true;
 }

pages/api/me/profile.ts

@@ -34,19 +34,8 @@ const profileHandler = async (req: NextApiRequest, res: NextApiResponse) => {
       return res.status(400).end();
     }
 
-    if (argsForDb.customUrlPath) {
-      const profileWithSameCustomUrl = await prisma.profile.findOne({
-        where: {
-          customUrlPath: argsForDb.customUrlPath,
-        },
-      });
-
-      if (
-        profileWithSameCustomUrl &&
-        profileWithSameCustomUrl.userId !== user.id
-      ) {
-        return res.status(400).json({ message: "custom url already in use" });
-      }
+    if (isDuplicateCustomUrl(argsForDb.customUrlPath, user.id)) {
+      return res.status(400).json({ message: "custom url already in use" });
     }
 
     await prisma.profile.upsert({
@@ -66,4 +55,18 @@ const profileHandler = async (req: NextApiRequest, res: NextApiResponse) => {
   }
 };
 
+async function isDuplicateCustomUrl(customUrlPath: string, userId: number) {
+  if (!customUrlPath) return false;
+
+  const profileWithSameCustomUrl = await prisma.profile.findOne({
+    where: {
+      customUrlPath,
+    },
+  });
+
+  if (profileWithSameCustomUrl && profileWithSameCustomUrl.userId !== userId) {
+    return false;
+  }
+}
+
 export default profileHandler;

pages/u/[identifier].tsx

@@ -81,13 +81,9 @@ const ProfilePage = (props: Props) => {
 
   const [loggedInUser] = useUser();
   const { data: user } = useSWR<GetUserByIdentifierData>(
-    () => {
-      // no need to load user if it's not the same as currently logged in user
-      const userId = props.user?.id;
-      if (!!userId && userId === loggedInUser?.id) return null;
-
-      return `/api/users/${userId}`;
-    },
+    !!props.user?.id && props.user.id === loggedInUser?.id
+      ? `/api/users/${props.user.id}`
+      : null,
     { initialData: props.user }
   );
   const { data: builds, weaponCounts, setWeapon, buildCount } = useBuildsByUser(