add cache info buttons

package.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
@@ -24,7 +25,7 @@
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.0",
     "lucide-react": "^0.372.0",
-    "mcutils-library": "^1.2.4",
+    "mcutils-library": "^1.2.6",
     "moment": "^2.30.1",
     "next": "14.2.2",
     "next-themes": "^0.3.0",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   '@radix-ui/react-label':
     specifier: ^2.0.2
     version: 2.0.2(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-popover':
+    specifier: ^1.0.7
+    version: 1.0.7(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0)(react@18.2.0)
   '@radix-ui/react-select':
     specifier: ^2.0.0
     version: 2.0.0(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0)(react@18.2.0)
@@ -51,8 +54,8 @@ dependencies:
     specifier: ^0.372.0
     version: 0.372.0(react@18.2.0)
   mcutils-library:
-    specifier: ^1.2.4
+    specifier: ^1.2.6
-    version: 1.2.5(@babel/core@7.24.4)(@types/node@20.12.7)
+    version: 1.2.6(@babel/core@7.24.4)(@types/node@20.12.7)
   moment:
     specifier: ^2.30.1
     version: 2.30.1
@@ -1276,6 +1279,41 @@ packages:
       react-remove-scroll: 2.5.5(@types/react@18.2.79)(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-popover@1.0.7(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.4
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.79)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.79)(react@18.2.0)
+      '@types/react': 18.2.79
+      '@types/react-dom': 18.2.25
+      aria-hidden: 1.2.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.79)(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-popper@1.1.3(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
     peerDependencies:
@@ -4364,8 +4402,8 @@ packages:
       tmpl: 1.0.5
     dev: false
 
-  /mcutils-library@1.2.5(@babel/core@7.24.4)(@types/node@20.12.7):
+  /mcutils-library@1.2.6(@babel/core@7.24.4)(@types/node@20.12.7):
-    resolution: {integrity: sha512-z7zBMblMExtdMIftz5eqlFkWmUI4gppnoEwfEzrgMAYtvJdV2qRXMphjgactoXQaXJ8laL8LRm959ipHoUlHLA==}
+    resolution: {integrity: sha512-uRN+6k/wA+4AGVY58jv3UP0YPdIMzd9UTQ2ThoxtcxzaOln5B+RMMN5x6WuqcWh+vhv40v3UboKqJLFUXsSYLg==}
     dependencies:
       jest: 29.7.0(@types/node@20.12.7)(ts-node@10.9.2)
       ts-jest: 29.1.2(@babel/core@7.24.4)(jest@29.7.0)(typescript@5.4.5)

src/app/(pages)/mojang/status/page.tsx

@@ -11,7 +11,7 @@ import { Colors } from "@/common/colors";
 /**
  * Force the page to be dynamic, so it will be regenerated on every request
  */
-export const dynamic = "force-dynamic";
+export const revalidate = 0;
 
 /**
  * Gets the color of the status

src/app/(pages)/player/[[...id]]/page.tsx

@@ -12,6 +12,11 @@ import { CachedPlayer, getPlayer, McUtilsAPIError } from "mcutils-library";
 import { Metadata, Viewport } from "next";
 import { ReactElement } from "react";
 
+/**
+ * Force the page to be dynamic, so it will be regenerated on every request
+ */
+export const revalidate = 0;
+
 type Params = {
   params: {
     id: string;

src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx

@@ -19,6 +19,11 @@ import {
 import { Metadata, Viewport } from "next";
 import { ReactElement } from "react";
 
+/**
+ * Force the page to be dynamic, so it will be regenerated on every request
+ */
+export const revalidate = 0;
+
 type Params = {
   params: {
     platform: ServerPlatform;

src/app/components/cache-information.tsx

@@ -0,0 +1,24 @@
+import { Cache } from "mcutils-library";
+import React, { ReactElement, ReactNode } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/app/components/ui/popover";
+import moment from "moment";
+
+type CacheInformationProps = {
+  cache: Cache;
+  children?: ReactNode;
+};
+
+export function CacheInformation({ cache, children }: CacheInformationProps): ReactElement {
+  const isCached = cache.cached;
+  const cacheTime = cache.cachedTime;
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent>
+        <p className={isCached ? "text-green-400" : "text-red-400"}>{isCached ? "Cached" : "Not Cached"}</p>
+        {cacheTime !== -1 && <p>{moment(cacheTime).calendar()}</p>}
+      </PopoverContent>
+    </Popover>
+  );
+}

src/app/components/player/player-view.tsx

@@ -6,6 +6,7 @@ import { CodeDialog } from "../code-dialog";
 import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
 import { SkinPartImage } from "./skin-part-image";
+import { CacheInformation } from "@/app/components/cache-information";
 
 type PlayerViewProps = {
   /**
@@ -44,7 +45,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
           </div>
         </div>
       </Card>
-      <div className="8xl:top-0 xs:bottom-0">
+      <div className="flex gap-2">
         <CodeDialog
           title="Player Data"
           description="The player's data from the API"
@@ -52,6 +53,9 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
         >
           <Button>View as JSON</Button>
         </CodeDialog>
+        <CacheInformation cache={player.cache}>
+          <Button>Cache Information</Button>
+        </CacheInformation>
       </div>
     </div>
   );

src/app/components/server/server-view.tsx

@@ -7,6 +7,8 @@ import { Button } from "../ui/button";
 import config from "@root/config.json";
 import { cn } from "@/common/utils";
 import { minecraft } from "@/app/font/fonts";
+import { CacheInformation } from "@/app/components/cache-information";
+import { Cache } from "mcutils-library";
 
 type ServerViewProps = {
   /**
@@ -55,14 +57,17 @@ export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
           </div>
         </div>
       </Card>
-      <div className="8xl:top-0 xs:bottom-0">
+      <div className="flex gap-2">
         <CodeDialog
           title="Server Data"
-          description="The server's data from the API"
+          description="The servers's data from the API"
           code={JSON.stringify(server, undefined, 2)}
         >
           <Button>View as JSON</Button>
         </CodeDialog>
+        <CacheInformation cache={server.cache}>
+          <Button>Cache Information</Button>
+        </CacheInformation>
       </div>
     </div>
   );

src/app/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/common/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }