From 0cde78d5fea21c19edb646fb3ad53ea95b128166 Mon Sep 17 00:00:00 2001
From: Shigbeard <4262327+Shigbeard@users.noreply.github.com>
Date: Thu, 8 Aug 2024 03:41:58 +1000
Subject: [PATCH] feat: more work on the bans page.

---
 app/components/Navbar.tsx               |  16 +++-
 app/routes/{bans.tsx => bans/index.tsx} | 121 ++++++++++++++++++++----
 app/tailwind.css                        |   5 +
 package-lock.json                       |  99 +++++++++++++++++++
 package.json                            |   2 +
 sly.json                                |  11 +++
 tailwind.config.ts                      |  28 +++++-
 7 files changed, 257 insertions(+), 25 deletions(-)
 rename app/routes/{bans.tsx => bans/index.tsx} (63%)
 create mode 100644 sly.json

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 4a3a358..42522c9 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -48,17 +48,22 @@ export const Navbar: React.FC<NavbarProps> = (props) => {
 
     const handleAuth = () => {
         if (props.user) {
-            navigate('/auth/logout');
+            navigate('/dashboard');
             return;
         }
         navigate('/auth/steam');
         return
     }
 
+    const logout = () => {
+        navigate('/auth/logout');
+        return;
+    }
+
     return (
         // JSX markup for your component goes here
         <ThemeProvider specifiedTheme={theme} themeAction="/action/set-theme">
-        <nav className={`${clsx(theme)} bg-primary-foreground dark:bg-secondary-foreground border dark:border-secondary-foreground shadow`}>
+        <nav className={`${clsx(theme)} bg-primary-foreground dark:bg-secondary-foreground border dark:border-secondary-foreground shadow sticky top-0 z-50`}>
             <div className='container flex flex-wrap justify-between items-center mx-auto'>
                 <a href="/" className='flex items-center flex-grow'>
                     <span className="self-center text-xl font-semibold whitespace-nowrap text-primary dark:text-secondary">
@@ -114,6 +119,13 @@ export const Navbar: React.FC<NavbarProps> = (props) => {
                                 {props.user ? props.user.nickname : 'Login'}
                             </button>
                         </li>
+                        { props.user && (
+                        <li>
+                            <button onClick={logout} type="button" className='sm:w-full sm:text-left block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700'>
+                                Logout
+                            </button>
+                        </li>
+                    )}
                     </ul>
                 </div>
 
diff --git a/app/routes/bans.tsx b/app/routes/bans/index.tsx
similarity index 63%
rename from app/routes/bans.tsx
rename to app/routes/bans/index.tsx
index d9b0ac6..cc0f882 100644
--- a/app/routes/bans.tsx
+++ b/app/routes/bans/index.tsx
@@ -1,5 +1,5 @@
 import { useLoaderData, defer, Await, type MetaFunction, Link } from "@remix-run/react";
-import React, { Suspense } from "react";
+import { Suspense, useState } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import { Badge } from "~/components/ui/badge";
 import { Separator } from "~/components/ui/separator";
@@ -10,6 +10,8 @@ import { ThemeProvider } from "remix-themes";
 import { drizzle } from "drizzle-orm/mysql2";
 import mysql from "mysql2/promise";
 import * as schema from "~/db/sourcebans/schema";
+// import { ClientOnly } from "remix-utils/client-only";
+// import { ProgressiveClientOnly } from "~/components/ProgressiveClientOnly";
 
 
 export const meta: MetaFunction = () => {
@@ -19,7 +21,20 @@ export const meta: MetaFunction = () => {
     ];
 };
 
+const steamidConvert64 = (steamid: string) => {
+    const baseline = BigInt("76561197960265728");
+    const splitID = steamid.split(":");
+    const product = BigInt(splitID[2]) * BigInt(2);
+    const sum = product + baseline;
+    return (sum + BigInt(splitID[1])).toString();
+}
+const steamidConvert32 = (steamid: string) => {
+    const z = (BigInt(steamid) - BigInt("76561197960265728")) / BigInt(2);
+    const y = BigInt(steamid) % BigInt(2);
+    return `STEAM_0:${y.toString()}:${z.toString()}`;
+}
 export async function loader({ request }: LoaderFunctionArgs) {
+
     const { getTheme } = await themeSessionResolver(request)
     const connection = await mysql.createConnection({
         host: process.env.SOURCEBANS_DB_HOST,
@@ -37,11 +52,53 @@ export async function loader({ request }: LoaderFunctionArgs) {
         user: schema.sbAdmins.user,
     }).from(schema.sbAdmins);
     const aliases = await db.select().from(schema.sbBanlog);
+    const users = [] as {user:string, avatar:string}[];
+    const sids = [] as string[];
+    for (const ban of bans) {
+        if (ban.authid && users.filter(user => user.user == ban.authid).length == 0) {
+            users.push({user: ban.authid, avatar: ''});
+            sids.push(steamidConvert64(ban.authid));
+        }
+    }
+    while (sids.length > 0) {
+        // fetch 100 users at a time
+        const lsids = sids.filter((sid, index) => index < 50);
+        let reqstring = ''
+        lsids.forEach((v,i) => {
+            if (i == 0) {
+                reqstring += `${v}`;
+            } else {
+                reqstring += `,${v}`;
+            }
+            const index = sids.indexOf(v);
+            sids.splice(index, 1);
+        });
+        const response = await fetch(`https://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=${process.env.STEAM_API_KEY}&steamids=${reqstring}`);
+        const data = await response.json();
+        const players = data.response.players;
+        if (players.length == 0) continue;
+        for (const player of players) {
+            const sid = steamidConvert32(player.steamid);
+            // console.log(`1 - sid ${sid}`);
+            const user = users.findIndex((user) => user.user == sid);
+            // console.log(`2 - user ${user}`);
+            // console.log(`3 - player ${users[user]}`)
+            if (user !== -1) {
+                // console.log(`4 - avatar ${player.avatarfull}`)
+                users[user].avatar = player.avatarfull; // FOR SOME GOD DAMN REASON THIS IS VALID
+                // console.log(users[user]); // HERE... BUT WHEN I LATER PRINT IT...
+            }
+        }
+
+    }
+    // console.log(users); // HERE... IT DOESNT FUCKING SHOW UP
+    connection.destroy();
     return defer({
         theme: getTheme(),
         bans: bans,
         admins: admins,
         aliases: aliases,
+        avatars: users,
     });
 }
 
@@ -67,14 +124,7 @@ export interface BanProps {
 
 export default function Bans() {
     const data = useLoaderData<typeof loader>();
-    const [clickedRow, setClickedRow] = React.useState<BanProps | null>(null);
-    const steamidConvert = (steamid: string) => {
-        const baseline = BigInt("76561197960265728");
-        const splitID = steamid.split(":");
-        const product = BigInt(splitID[2]) * BigInt(2);
-        const sum = product + baseline;
-        return (sum + BigInt(splitID[1])).toString();
-    }
+    const [clickedRow, setClickedRow] = useState<BanProps | null>(null);
     const handleRowClick = (ban: BanProps) => {
         return () => {
             setClickedRow(ban);
@@ -124,8 +174,12 @@ export default function Bans() {
                                 <Suspense>
                                 <Await resolve={data.bans as BanProps[]}>
                                 {data.bans.length > 0 && data.bans.map((ban, index) => (
-                                    <TableRow key={ban.bid} onClick={handleRowClick(ban)} className={`cursor-pointer ${index % 2 === 0 ? 'bg-muted' : 'bg-background'} hover:bg-primary-foreground`}>
-                                        <TableCell className="text-primary">{timestampToDateTime(ban.created)}</TableCell>
+                                    <TableRow key={ban.bid} onClick={handleRowClick(ban)} className={`cursor-pointer ${clickedRow && ban == clickedRow ? 'bg-yellow-200 hover:bg-yellow-100' : index % 2 === 0 ? 'bg-muted hover:bg-primary-foreground' : 'bg-background hover:bg-primary-foreground'} `}>
+                                        <TableCell className="text-primary">
+                                            <Suspense fallback="Loading...">
+                                                {timestampToDateTime(ban.created)}
+                                            </Suspense>
+                                        </TableCell>
                                         <TableCell className="text-primary">{ban.name}</TableCell>
                                         <TableCell className={`${
                                             ban.removeType === null && ban.length > 0 ? 'text-yellow-500' :
@@ -144,15 +198,20 @@ export default function Bans() {
                     </div>
                     {clickedRow && (
                         <div className="w-[300px] bg-muted rounded-lg p-4 sticky top-14 h-min">
-                            <div className="flex items-center gap-2 mb-4">
-                                <Avatar>
-                                    <AvatarImage src='https://via.placeholder.com/200' alt='Player Avatar'/>
-                                    <AvatarFallback>{clickedRow.name.charAt(0).toUpperCase()}</AvatarFallback>
+                            <div className="ban-card-grid items-center gap-2 mb-4">
+                                <Avatar className="inline-block w-18 h-18 col-span-1 row-span-1">
+                                    <AvatarImage src={data.avatars.filter(a => a.user == clickedRow.authid)[0].avatar ?? 'https://via.placeholder.com/200'} alt='Player Avatar'/>
+                                    <AvatarFallback className="bg-muted-foreground">{clickedRow.name.charAt(0).toUpperCase()}</AvatarFallback>
                                 </Avatar>
-                                <div>
-                                    <div className="text-primary font-bold text-lg"><Link to={`https://steamcommunity.com/profiles/${steamidConvert(clickedRow.authid)}`} target="_blank" rel="noreferrer">{clickedRow.name}</Link></div>
-                                    <div className="text-xs text-muted-foreground">Banned by {data.admins.filter(admin => admin.aid == clickedRow.aid)[0].user}</div>
-                                    {clickedRow.removedBy && (<div className="text-xs text-muted-foreground">Unbanned by {data.admins.filter(admin => admin.aid == clickedRow.removedBy)[0].user}</div>)}
+                                <div className="inline-block col-start-2 row-start-1">
+                                    <div className="text-primary font-bold text-lg inline-block text-ellipsis text-nowrap w-full"><Link to={`https://steamcommunity.com/profiles/${steamidConvert64(clickedRow.authid)}`} target="_blank" rel="noreferrer" className="inline-block overflow-hidden text-ellipsis text-nowrap w-[100%]">{clickedRow.name}</Link></div>
+                                    <div className="text-xs text-muted-foreground">{clickedRow.authid}</div>
+                                </div>
+                                <div className="inline-block w-[80%] col-start-1 col-end-3 row-start-2 row-end-2 px-4">
+                                    <ul className="list-disc">
+                                        <li className="text-xs text-muted-foreground">Banned by {data.admins.filter(admin => admin.aid == clickedRow.aid)[0].user}</li>
+                                        {clickedRow.removedBy && (<li className="text-xs text-muted-foreground">Unbanned by {data.admins.filter(admin => admin.aid == clickedRow.removedBy)[0].user}</li>)}
+                                    </ul>
                                 </div>
                             </div>
                             <Separator className="my-4"/>
@@ -184,8 +243,8 @@ export default function Bans() {
                                 <div>
                                     <div className="text-secondary-foreground text-sm font-medium">Aliases:</div>
                                     <div className="text-secondary flex flex-wrap gap-2">
-                                        {data.aliases.filter(alias => alias.bid == clickedRow.bid).filter((alias, index, self) => index === self.findIndex((a) => a.name === alias.name)).map(alias => (
-                                            <Badge key={alias.sid} variant='outline'>{alias.name}</Badge>
+                                        {data.aliases.filter(alias => alias.bid == clickedRow.bid).filter((alias, index, self) => index === self.findIndex((a) => a.name === alias.name)).map((alias,index) => (
+                                            <Badge key={index} variant='outline'>{alias.name}</Badge>
                                         ))}
                                         {/* <Badge variant='outline'>Alias1</Badge>
                                         <Badge variant='outline'>Alias2</Badge> */}
@@ -194,6 +253,26 @@ export default function Bans() {
                                 )}
                             </div>
                         </div>
+                    ) || (
+                        <div className="w-[300px] bg-muted rounded-lg p-4 sticky top-14 h-min">
+                        <div className="flex items-center gap-2 mb-4">
+                            <Avatar>
+                                {/* <AvatarImage src='https://via.placeholder.com/200' alt='Player Avatar'/>
+                                <AvatarFallback>...</AvatarFallback> */}
+                            </Avatar>
+                            <div>
+                                <div className="text-primary font-bold text-lg">
+
+                                        Select a Ban
+
+                                </div>
+                                <div className="text-xs text-muted-foreground">
+                                    to view more details
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
                     )}
                 </div>
             </div>
diff --git a/app/tailwind.css b/app/tailwind.css
index e13982e..cfedd09 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -61,6 +61,11 @@
     }
   }
 
+.ban-card-grid {
+  display: grid;
+  grid-template: "a a" 100% "b c" 100% / 1fr 4fr;
+}
+
 .server-placeholder {
   font-size: 0 !important;
   line-height: 0 !important;
diff --git a/package-lock.json b/package-lock.json
index c5c0279..28badb4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@remix-run/node": "2.11.0",
         "@remix-run/react": "2.11.0",
         "@remix-run/serve": "2.11.0",
+        "@tanstack/react-table": "^8.20.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "drizzle-orm": "^0.32.2",
@@ -24,6 +25,7 @@
         "remix-auth": "^3.7.0",
         "remix-auth-steam": "^1.0.4",
         "remix-themes": "^1.5.0",
+        "remix-utils": "^7.6.0",
         "tailwind-merge": "^2.4.0",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -2883,6 +2885,37 @@
         "node": ">=14.16"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.20.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.1.tgz",
+      "integrity": "sha512-PJK+07qbengObe5l7c8vCdtefXm8cyR4i078acWrHbdm8JKw1ES7YpmOtVt9ALUVEEFAHscdVpGRhRgikgFMbQ==",
+      "dependencies": {
+        "@tanstack/table-core": "8.20.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.20.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.1.tgz",
+      "integrity": "sha512-5Ly5TIRHnWH7vSDell9B/OVyV380qqIJVg7H7R7jU4fPEmOD4smqAX7VRflpYI09srWR8aj5OLD2Ccs1pI5mTg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/acorn": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
@@ -11263,6 +11296,72 @@
         "@remix-run/server-runtime": ">= 1"
       }
     },
+    "node_modules/remix-utils": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/remix-utils/-/remix-utils-7.6.0.tgz",
+      "integrity": "sha512-BPhCUEy+nwrhDDDg2v3+LFSszV6tluMbeSkbffj2o4tqZxt5Kn69Y9sNpGxYLAj8gjqeYDuxjv55of+gYnnykA==",
+      "dependencies": {
+        "type-fest": "^4.3.3"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@remix-run/cloudflare": "^2.0.0",
+        "@remix-run/deno": "^2.0.0",
+        "@remix-run/node": "^2.0.0",
+        "@remix-run/react": "^2.0.0",
+        "@remix-run/router": "^1.7.2",
+        "crypto-js": "^4.1.1",
+        "intl-parse-accept-language": "^1.0.0",
+        "is-ip": "^5.0.1",
+        "react": "^18.0.0",
+        "zod": "^3.22.4"
+      },
+      "peerDependenciesMeta": {
+        "@remix-run/cloudflare": {
+          "optional": true
+        },
+        "@remix-run/deno": {
+          "optional": true
+        },
+        "@remix-run/node": {
+          "optional": true
+        },
+        "@remix-run/react": {
+          "optional": true
+        },
+        "@remix-run/router": {
+          "optional": true
+        },
+        "crypto-js": {
+          "optional": true
+        },
+        "intl-parse-accept-language": {
+          "optional": true
+        },
+        "is-ip": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/remix-utils/node_modules/type-fest": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.23.0.tgz",
+      "integrity": "sha512-ZiBujro2ohr5+Z/hZWHESLz3g08BBdrdLMieYFULJO+tWc437sn8kQsWLJoZErY8alNhxre9K4p3GURAG11n+w==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/require-like": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz",
diff --git a/package.json b/package.json
index 0ed9832..932ec4e 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@remix-run/node": "2.11.0",
     "@remix-run/react": "2.11.0",
     "@remix-run/serve": "2.11.0",
+    "@tanstack/react-table": "^8.20.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.32.2",
@@ -30,6 +31,7 @@
     "remix-auth": "^3.7.0",
     "remix-auth-steam": "^1.0.4",
     "remix-themes": "^1.5.0",
+    "remix-utils": "^7.6.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/sly.json b/sly.json
new file mode 100644
index 0000000..9ef325a
--- /dev/null
+++ b/sly.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://sly-cli.fly.dev/registry/config.json",
+  "libraries": [
+    {
+      "name": "jacobparis/ui",
+      "directory": "./app/components",
+      "postinstall": [],
+      "transformers": []
+    }
+  ]
+}
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 84287e8..ce797fe 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,7 +7,7 @@ const config = {
     './components/**/*.{ts,tsx}',
     './app/**/*.{ts,tsx}',
     './src/**/*.{ts,tsx}',
-	],
+  ],
   prefix: "",
   theme: {
     container: {
@@ -67,6 +67,30 @@ const config = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        appear: {
+          "0%, 99%": {
+            height: "0",
+            width: "0",
+            opacity: "0",
+          },
+          "100%": {
+            height: "auto",
+            width: "auto",
+            opacity: "1",
+          },
+        },
+        disappear: {
+          "0%, 99%": {
+            height: "auto",
+            width: "auto",
+            opacity: "1",
+          },
+          "100%": {
+            height: "0",
+            width: "0",
+            opacity: "0",
+          },
+        }
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
@@ -77,4 +101,4 @@ const config = {
   plugins: [require("tailwindcss-animate")],
 } satisfies Config
 
-export default config
\ No newline at end of file
+export default config