updated backend

src/general.ts

@@ -6,3 +6,11 @@ export function overrideTailwindClasses(
 ) {
     return otc(classNamesString, optionsArgs).trim()
 }
+
+export function plural(
+    n: number,
+    singular: string,
+    plural: string = singular + 's'
+) {
+    return n === 1 ? singular : plural
+}

src/pages/Bots.tsx

@@ -3,15 +3,18 @@ import { Link } from "react-router-dom"
 import { authFetch, useAuthFetchRepeat } from "../authorization"
 import { SVGPlus, SVGx } from "../components/Icons"
 import { Button, InputPassword } from "../components/Inputs"
-import { overrideTailwindClasses } from "../general"
+import { overrideTailwindClasses, plural } from "../general"
 
 interface DiscordBot {
-    id: string
-    username: string
-    discriminator: string
-    avatar: string
-    bot: boolean
-    verified: boolean
+    user: {
+        id: string
+        username: string
+        discriminator: string
+        avatar: string
+        bot: boolean
+        verified: boolean
+    }
+    token_count: number
 }
 
 function BotContainer({ children, ...props }: { children: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>) {
@@ -37,18 +40,19 @@ function BotContainer({ children, ...props }: { children: React.ReactNode } & Re
 
 function Bot({ bot }: { bot: DiscordBot }) {
     console.log(bot)
+    const { user, token_count } = bot
     return (
-        <Link to={`/bot/${bot.id}`}>
+        <Link to={`/bot/${user.id}`}>
             <BotContainer>
                 <img
-                    src={`https://cdn.discordapp.com/avatars/${bot.id}/${bot.avatar}.png`}
+                    src={`https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`}
                     className="w-full" />
                 <div className="text-2xl flex-grow inline-flex justify-center items-center">
-                    <span className="text-gray-300">{bot.username}</span>
-                    <span className="text-gray-300">#{bot.discriminator}</span>
+                    <span className="text-gray-300">{user.username}</span>
+                    <span className="text-gray-300">#{user.discriminator}</span>
                 </div>
                 <div className="text-l flex-grow inline-flex justify-center items-center">
-                    <span className="text-gray-400">X Assigned tokens</span>
+                    <span className="text-gray-400">{token_count} Assigned {plural(token_count, 'Token')}</span>
                 </div>
             </BotContainer>
         </Link>

src/pages/settings/LoginTokensMini.tsx

@@ -1,4 +1,5 @@
 import { useAuthFetch } from "../../authorization"
+import { plural } from "../../general"
 
 interface LoginToken {
     id: string
@@ -24,7 +25,7 @@ export function LoginTokensMini() {
     return tokens && (
         <div>
             <span>
-                {tokens.length} Login Token{tokens.length === 1 ? "" : "s"}
+                {tokens.length} Login {plural(tokens.length, 'Token')}
             </span>
         </div>
     )