From 49de624a886ff05b859c943fbecb260a83aabd6a Mon Sep 17 00:00:00 2001 From: Liam Date: Thu, 18 Apr 2024 07:28:59 +0100 Subject: [PATCH] add loading animation to the player and server page when clicking search --- package.json | 1 + pnpm-lock.yaml | 13 +++++++++ src/app/(pages)/player/[[...id]]/page.tsx | 2 +- .../[platform]/[[...hostname]]/page.tsx | 2 +- src/app/components/player/lookup-player.tsx | 26 +++++++++++++++-- src/app/components/server/lookup-server.tsx | 29 +++++++++++++++---- src/common/colors.ts | 3 ++ src/common/embed.ts | 13 ++++++++- 8 files changed, 78 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index c3aa97e..6ec41da 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "react-countup": "^6.5.3", "react-dom": "^18", "react-hook-form": "^7.51.3", + "react-spinners": "^0.13.8", "react-syntax-highlighter": "^15.5.0", "react-use-websocket": "3.0.0", "tailwind-merge": "^2.2.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 42ca846..980b53d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,6 +74,9 @@ dependencies: react-hook-form: specifier: ^7.51.3 version: 7.51.3(react@18.2.0) + react-spinners: + specifier: ^0.13.8 + version: 0.13.8(react-dom@18.2.0)(react@18.2.0) react-syntax-highlighter: specifier: ^15.5.0 version: 15.5.0(react@18.2.0) @@ -4976,6 +4979,16 @@ packages: use-sidecar: 1.1.2(@types/react@18.2.78)(react@18.2.0) dev: false + /react-spinners@0.13.8(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==} + peerDependencies: + react: ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /react-style-singleton@2.2.1(@types/react@18.2.78)(react@18.2.0): resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==} engines: {node: '>=10'} diff --git a/src/app/(pages)/player/[[...id]]/page.tsx b/src/app/(pages)/player/[[...id]]/page.tsx index 128115d..e1a9f9b 100644 --- a/src/app/(pages)/player/[[...id]]/page.tsx +++ b/src/app/(pages)/player/[[...id]]/page.tsx @@ -69,7 +69,7 @@ export default async function Page({ params: { id } }: Params): PromiseLookup a Player

You can enter a players uuid or username to get information about the player.

- + {error && } diff --git a/src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx b/src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx index dbe8ffc..1cbf39e 100644 --- a/src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx +++ b/src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx @@ -124,7 +124,7 @@ export default async function Page({ params: { platform, hostname } }: Params):

Lookup a {invalidPlatform ? "" : capitalizeFirstLetter(platform)} Server

You can enter a server hostname to get information about the server.

- + {error && } diff --git a/src/app/components/player/lookup-player.tsx b/src/app/components/player/lookup-player.tsx index 55f67bc..6c7a5b2 100644 --- a/src/app/components/player/lookup-player.tsx +++ b/src/app/components/player/lookup-player.tsx @@ -3,14 +3,24 @@ import { useToast } from "@/common/use-toast"; import { getPlayer } from "mcutils-library"; import { useRouter } from "next/navigation"; -import { ReactElement } from "react"; +import { ReactElement, useState } from "react"; +import ScaleLoader from "react-spinners/ScaleLoader"; import { Button } from "../ui/button"; import { Input } from "../ui/input"; import { Label } from "../ui/label"; -export function LookupPlayer(): ReactElement { +type PlayerLookupProps = { + /** + * The last displayed player. + */ + currentPlayer: string; +}; + +export function LookupPlayer({ currentPlayer }: PlayerLookupProps): ReactElement { + console.log(currentPlayer); const router = useRouter(); const { toast } = useToast(); + const [loading, setLoading] = useState(false); /** * Lookup a server based on the platform @@ -23,8 +33,15 @@ export function LookupPlayer(): ReactElement { return; } + // Ignore the same player + if (query.toLowerCase() == currentPlayer.toLowerCase()) { + return; + } + try { + setLoading(true); const player = await getPlayer(query); + router.push(`/player/${player.username}`); } catch (err) { toast({ @@ -51,7 +68,10 @@ export function LookupPlayer(): ReactElement { - + ); } diff --git a/src/app/components/server/lookup-server.tsx b/src/app/components/server/lookup-server.tsx index faac24f..471a239 100644 --- a/src/app/components/server/lookup-server.tsx +++ b/src/app/components/server/lookup-server.tsx @@ -4,7 +4,8 @@ import { capitalizeFirstLetter } from "@/common/string-utils"; import { useToast } from "@/common/use-toast"; import { ServerPlatform, getServer } from "mcutils-library"; import { useRouter } from "next/navigation"; -import { ReactElement } from "react"; +import { ReactElement, useState } from "react"; +import ScaleLoader from "react-spinners/ScaleLoader"; import { Button } from "../ui/button"; import { Input } from "../ui/input"; import { Label } from "../ui/label"; @@ -12,14 +13,21 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ". type LookupServerProps = { /** - * The current platform. + * The last displayed platform. */ - currentPlatform: string; + currentPlatform: string | undefined; + + /** + * The last displayed server. + */ + currentServer: string | undefined; }; -export function LookupServer({ currentPlatform }: LookupServerProps): ReactElement { +export function LookupServer({ currentPlatform, currentServer }: LookupServerProps): ReactElement { + console.log(currentPlatform, currentServer); const router = useRouter(); const { toast } = useToast(); + const [loading, setLoading] = useState(false); /** * Lookup a server based on the platform @@ -33,7 +41,15 @@ export function LookupServer({ currentPlatform }: LookupServerProps): ReactEleme } try { + setLoading(true); const server = await getServer(platform, query); + + // Ignore the same server + if (currentServer !== undefined && server.hostname == currentServer.toLowerCase()) { + setLoading(false); + return; + } + router.push(`/server/${platform}/${server.hostname}`); } catch (err) { toast({ @@ -78,7 +94,10 @@ export function LookupServer({ currentPlatform }: LookupServerProps): ReactEleme - + ); } diff --git a/src/common/colors.ts b/src/common/colors.ts index 11f8464..4c1f761 100644 --- a/src/common/colors.ts +++ b/src/common/colors.ts @@ -1,3 +1,6 @@ +/** + * Re-useable colors. + */ export const Colors = { green: "#0FFF50", red: "#8B0000", diff --git a/src/common/embed.ts b/src/common/embed.ts index b366105..3b235c9 100644 --- a/src/common/embed.ts +++ b/src/common/embed.ts @@ -1,9 +1,20 @@ import { Metadata } from "next"; type Embed = { + /** + * The title of the embed. + */ title: string; + + /** + * The description of the embed. + */ description: string; - image?: string | null; + + /** + * The image to show as the thumbmail. + */ + image?: string; }; /**