✨ Handle user not found

frontend/src/components/GQLError.module.css

@@ -0,0 +1,9 @@
+.errorMessage {
+  font-family: Rocket Rinder, monospace;
+  font-size: 3rem;
+  font-style: italic;
+  color: var(--brand);
+  text-align: center;
+  width: 100%;
+  margin-top: 30vh;
+}

frontend/src/components/GQLError.tsx

@@ -0,0 +1,23 @@
+import { ApolloError } from "@apollo/client";
+import React from "react";
+
+import styles from "./GQLError.module.css";
+
+const formatModel = (text: string) => {
+  const withSpaces = text
+    .replace(/([A-Z])/g, " $1")
+    .toLocaleLowerCase()
+    .trim();
+  return withSpaces.charAt(0).toUpperCase() + withSpaces.slice(1);
+};
+
+export const GQLError = ({ error }: { error: ApolloError }) => {
+  if (error?.graphQLErrors?.length == 1) {
+    const single = error?.graphQLErrors[0];
+    if (single?.extensions?.code === "NOT_FOUND") {
+      const modelPretty = formatModel(single?.extensions?.model as string);
+      return <div className={styles.errorMessage}>{`${modelPretty} not found`}</div>;
+    }
+  }
+  return <div className={styles.errorMessage}>Error...</div>;
+};

frontend/src/features/users/UserDetail.tsx

@@ -3,16 +3,19 @@ import { Line } from "@nivo/line";
 import React from "react";
 import { useParams } from "react-router-dom";
 
+import { GQLError } from "../../components/GQLError";
 import { User, UserDetailDocument, UserProfile } from "../../types";
 import { formatMonth, formatTime } from "../../utils/time";
 import styles from "./UserDetail.module.css";
 
 const UserDetail = () => {
   const { userId } = useParams();
-  const { data, loading } = useQuery(UserDetailDocument, { variables: { userId: userId || "" }, skip: !userId });
+  const { data, loading, error } = useQuery(UserDetailDocument, { variables: { userId: userId || "" }, skip: !userId });
 
   if (loading) return <div>Loading...</div>;
 
+  if (error) return <GQLError error={error} />;
+
   const user = data?.user as User;
   const profile = user?.profile as UserProfile;
   // FIXME: types