add count logging w redis + display on main page

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

@@ -2,6 +2,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import axios from "axios";
 import renderCard from "../../src/renderCard";
 import { isSnowflake } from "../../src/snowflake";
+import redis from "../../src/redis";
 
 type Data = {
     id?: string | string[];
@@ -30,7 +31,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
 
     try {
         getUser = await axios(`https://api.lanyard.rest/v1/users/${userId}`);
-    } catch (error) {
+    } catch (error: any) {
         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
@@ -40,6 +41,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
         });
     }
 
+    let user = await redis.hget("users", userId);
+    if (!user) await redis.hset("users", userId, "true");
+
     res.setHeader("Content-Type", "image/svg+xml; charset=utf-8");
     res.setHeader("content-security-policy", "default-src 'none'; img-src * data:; style-src 'unsafe-inline'");
 

pages/api/getUserCount.ts

@@ -0,0 +1,9 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import redis from "../../src/redis";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    let users = await redis.hgetall("users");
+    let count = Object.keys(users);
+
+    res.status(200).send({ count: count.length });
+}

pages/index.tsx

@@ -1,8 +1,10 @@
 import Head from "next/head";
 import styled, { createGlobalStyle } from "styled-components";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import axios from "axios";
 
 export default function Home() {
+    const [userCount, setUserCount] = useState<null | number>(null);
     const [userId, setUserId] = useState<null | string>(null);
     const [copyState, setCopyState] = useState("Copy");
     const copy = () => {
@@ -13,6 +15,13 @@ export default function Home() {
         setTimeout(() => setCopyState("Copy"), 1500);
     };
 
+    useEffect(() => {
+        (async () => {
+            let userCount = await axios.get("/api/getUserCount").then(res => res.data);
+            setUserCount(userCount.count);
+        })();
+    }, []);
+
     return (
         <>
             <GlobalStyle />
@@ -47,7 +56,13 @@ export default function Home() {
                                 )](https://discord.com/users/{userId})
                             </Output>
                             <Copy onClick={copy}>{copyState}</Copy>
-                            <a href='https://github.com/cnrad/lanyard-profile-readme#options' target="_blank" rel="noreferrer"><Options>Options</Options></a>
+                            <a
+                                href="https://github.com/cnrad/lanyard-profile-readme#options"
+                                target="_blank"
+                                rel="noreferrer"
+                            >
+                                <Options>Options</Options>
+                            </a>
                             <Example
                                 src={`/api/${userId}`}
                                 alt="[Please provide a valid user ID!]"
@@ -57,6 +72,9 @@ export default function Home() {
                     ) : null}
                 </Container>
             </Main>
+            <FooterStat>
+                Lanyard Profile Readme has <b>{userCount}</b> recorded users!
+            </FooterStat>
         </>
     );
 }
@@ -85,6 +103,7 @@ const GlobalStyle = createGlobalStyle`
 
 const Main = styled.div`
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: 0;
@@ -212,3 +231,15 @@ const Example = styled.img`
     width: 100%;
     filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.2));
 `;
+
+const FooterStat = styled.div`
+    position: absolute;
+    line-height: 1rem;
+    bottom: 1rem;
+    left: 50%;
+    transform: translate(-50%, 0);
+    background: rgba(0, 0, 0, 0.5);
+    padding: 1rem 1.25rem;
+    color: #fff;
+    border-radius: 0.5rem;
+`;