feat: normalize profile mentions (#604)

* feat: normalize profile mentions * chore: implement suggestions * fix: qr reader * fix: remove includes
cesium · Jan 16, 2024 · ee42771 · ee42771
1 parent f8f1da6
commit ee42771
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 21 deletions.
diff --git a/layout/Attendee/Wheel/Wheel.tsx b/layout/Attendee/Wheel/Wheel.tsx
@@ -79,7 +79,6 @@ function WheelPage() {
       .then((response) => updateLatestWins(response.data))
       .catch((_) => updateError(true));
   };
-
   useEffect(requestAllInfo, []);
 
   const canSpin = () => {
@@ -176,7 +175,8 @@ function WheelPage() {
   const latestWinsComponents = latestWins.map((entry, id) => (
     <ListItem3Cols
       key={id}
-      user={entry.attendee_name}
+      user_name={entry.attendee_name}
+      user_nickname={entry.attendee_nickname}
       prize={entry.prize}
       when={displayTimeSince(entry.date)}
       isLast={id == latestWins.length - 1}

diff --git a/layout/Attendee/Wheel/components/ListItem3Cols/index.tsx b/layout/Attendee/Wheel/components/ListItem3Cols/index.tsx
@@ -1,5 +1,8 @@
+import Link from "next/link";
+
 export default function ListItem3Cols({
-  user,
+  user_name,
+  user_nickname,
   prize,
   when,
   isLast = false,
@@ -13,7 +16,9 @@ export default function ListItem3Cols({
   return (
     <div className={`mb-5 w-full pb-3 ${border} grid grid-cols-5 items-center`}>
       <div className="text-left">
-        <p className="font-ibold">{user}</p>
+        <Link href={`/attendees/${user_nickname}`}>
+          <p className="font-ibold">{user_name}</p>
+        </Link>
       </div>
       <div className="select-none justify-self-end">
         <img src={prize.avatar} className="w-10" />

diff --git a/layout/Attendees/Attendees.tsx b/layout/Attendees/Attendees.tsx
@@ -7,7 +7,7 @@ import BadgeFilter from "@components/BadgeFilter";
 
 import Layout from "@components/Layout";
 import Heading from "@components/Heading";
-import { getAttendee, isAttendeeRegistered } from "@lib/api";
+import { getAttendeeByID, getAttendeeByUsername } from "@lib/api";
 
 function Profile() {
   const [attendee, updateAttendee] = useState(null);
@@ -17,14 +17,26 @@ function Profile() {
   const [filter, updateFilter] = useState(null);
 
   useEffect(() => {
-    getAttendee(uuid)
-      .then((response) => {
+    const fetchData = async () => {
+      try {
+        const response = await getAttendeeByID(uuid);
         updateAttendee(response.data);
-      })
-      .catch((error) => {
-        router.replace("/404");
-      });
-  }, []);
+      } catch (error) {
+        if (error.response && error.response.status === 400) {
+          try {
+            const response = await getAttendeeByUsername(uuid);
+            updateAttendee(response.data);
+          } catch (usernameError) {
+            router.replace("/404");
+          }
+        } else {
+          router.replace("/404");
+        }
+      }
+    };
+
+    fetchData();
+  }, [uuid, router, updateAttendee]);
 
   if (!attendee) return null;
   return (

diff --git a/layout/Badge/Badge.tsx b/layout/Badge/Badge.tsx
@@ -50,8 +50,6 @@ const BadgeSlug: React.FC = () => {
       .catch((_) => router.replace("/404"));
   }, [slug]);
 
-  console.log(badge);
-
   return (
     <Layout
       title={`${badge?.name} Badge`}

diff --git a/layout/Staff/Identifier/Identifier.tsx b/layout/Staff/Identifier/Identifier.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from "react";
 
-import { getAttendee } from "@lib/api";
+import { getAttendeeByID } from "@lib/api";
 
 import { withAuth } from "@context/Auth";
 
@@ -36,7 +36,7 @@ function Identifier() {
   }, [feedback]);
 
   const handleUUID = (uuid) => {
-    getAttendee(uuid)
+    getAttendeeByID(uuid)
       .then((response) => {
         setText(`${response.data.name} | ${response.data.email}`);
         setFeedback(FEEDBACK.SUCCESS);

diff --git a/layout/shared/Leaderboard/components/Table/index.tsx b/layout/shared/Leaderboard/components/Table/index.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 
 export default function Table({ list, user, maxUsersToShow }) {
   const toShow = list.slice(0, Math.min(maxUsersToShow, list.length));
+
   const rows = toShow.map((entry, id) => (
     <div key={id} className=" flex h-auto border-t-2 border-t-slate-300 p-4">
       <div
@@ -16,7 +17,7 @@ export default function Table({ list, user, maxUsersToShow }) {
           entry.id == user ? "text-quinary" : ""
         }`}
       >
-        <Link href={`/attendees/${entry.id}`}>{entry.name}</Link>
+        <Link href={`/attendees/${entry.nickname}`}>{entry.name}</Link>
       </div>
       <div
         className={`w-1/3 text-right font-iregular ${

diff --git a/lib/api.js b/lib/api.js
@@ -137,8 +137,22 @@ export async function sendResetEmail({ email }) {
   return response.data;
 }
 
-export async function getAttendee(id) {
-  const response = await API.get(`/api/attendees/${id}`);
+export async function getAttendeeByID(id) {
+  const response = await API.get(`/api/attendees/${id}`, {
+    params: {
+      id,
+    },
+  });
+
+  return response.data;
+}
+
+export async function getAttendeeByUsername(username) {
+  const response = await API.get(`/api/attendees/${username}`, {
+    params: {
+      username,
+    },
+  });
 
   return response.data;
 }
@@ -203,8 +217,11 @@ export async function getCurrentUser() {
         const { data: attendee } = await API.get("/api/attendee");
         const {
           data: { data: extras },
-        } = await API.get(`/api/attendees/${attendee.id}`);
-
+        } = await API.get(`/api/attendees/${attendee.id}`, {
+          params: {
+            id: attendee.id,
+          },
+        });
         return { ...attendee, ...extras, type };
       case USER.ROLES.STAFF:
         return response.data;