add cache info buttons

2024-04-19 21:19:14 +01:00 · 2024-04-19 21:19:14 +01:00 · 97c1b88370
commit 97c1b88370
parent 2b6d8964b3
9 changed files with 122 additions and 9 deletions
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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
-    version: 1.2.5(@babel/core@7.24.4)(@types/node@20.12.7)
+    specifier: ^1.2.6
+    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):
-    resolution: {integrity: sha512-z7zBMblMExtdMIftz5eqlFkWmUI4gppnoEwfEzrgMAYtvJdV2qRXMphjgactoXQaXJ8laL8LRm959ipHoUlHLA==}
+  /mcutils-library@1.2.6(@babel/core@7.24.4)(@types/node@20.12.7):
+    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)
--- a/src/app/(pages)/mojang/status/page.tsx
+++ b/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
--- a/src/app/(pages)/player/[[...id]]/page.tsx
+++ b/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;
--- a/src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx
+++ b/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;
--- a/src/app/components/cache-information.tsx
+++ b/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>
+  );
+}
--- a/src/app/components/player/player-view.tsx
+++ b/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>
  );
--- a/src/app/components/server/server-view.tsx
+++ b/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>
  );
--- a/src/app/components/ui/popover.tsx
+++ b/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 }