Add error for not monitored user

pages/api/[...id].ts

@@ -7,6 +7,7 @@ import { isSnowflake } from "../../src/snowflake";
 type Data = {
     id?: string | string[];
     error?: any;
+    code?: string;
 };
 
 type Parameters = {
@@ -32,6 +33,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
     try {
         getUser = await axios(`https://api.lanyard.rest/v1/users/${userId}`);
     } catch (error: any) {
+        if (error.response.data && error.response.data.error.message)
+            return res
+                .status(404)
+                .send({ error: error.response.data.error.message, code: error.response.data.error.code });
+
         if (error.response.status === 404) return res.status(404).send({ error: "Invalid user!" });
 
         console.log(error); // Only console log the error if its not a 404

pages/index.tsx

@@ -6,6 +6,7 @@ import axios from "axios";
 export default function Home() {
     const [userCount, setUserCount] = useState<null | number>(null);
     const [userId, setUserId] = useState<null | string>(null);
+    const [userError, setUserError] = useState<string>();
     const [copyState, setCopyState] = useState("Copy");
     const copy = () => {
         navigator.clipboard.writeText(`[![Discord Presence](https://lanyard.cnrad.dev/api/${userId}
@@ -22,6 +23,19 @@ export default function Home() {
         })();
     }, []);
 
+    useEffect(() => {
+        (async () => {
+            try {
+                await axios.get(`/api/${userId}`);
+                setUserError(undefined);
+            } catch (error: any) {
+                console.log(error.response);
+                if (error.response.status === 404 && error.response.data.code == "user_not_monitored")
+                    setUserError(`User not monitored by Lanyard, click to join the discord`);
+            }
+        })();
+    }, [userId]);
+
     return (
         <>
             <GlobalStyle />
@@ -63,11 +77,18 @@ export default function Home() {
                             >
                                 <Options>Options</Options>
                             </a>
-                            <Example
-                                src={`/api/${userId}`}
-                                alt="[Please provide a valid user ID!]"
-                                style={{ color: "#ff8787" }}
-                            />
+                            <a
+                                style={{ textDecoration: "none" }}
+                                target="_blank"
+                                href={userError && "https://discord.gg/lanyard"}
+                                rel="noreferrer"
+                            >
+                                <Example
+                                    src={`/api/${userId}`}
+                                    alt={`[${userError || "Please provide a valid user ID!"}]`}
+                                    style={{ color: "#ff8787" }}
+                                />
+                            </a>
                         </>
                     ) : null}
                 </Container>