add loading animation to the player and server page when clicking search
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m29s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m29s
This commit is contained in:
parent
428a95c54d
commit
49de624a88
@ -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",
|
||||
|
13
pnpm-lock.yaml
generated
13
pnpm-lock.yaml
generated
@ -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'}
|
||||
|
@ -69,7 +69,7 @@ export default async function Page({ params: { id } }: Params): Promise<ReactEle
|
||||
<h1 className="text-xl">Lookup a Player</h1>
|
||||
<p>You can enter a players uuid or username to get information about the player.</p>
|
||||
|
||||
<LookupPlayer />
|
||||
<LookupPlayer currentPlayer={id[0]} />
|
||||
</div>
|
||||
|
||||
{error && <ErrorCard message={error} />}
|
||||
|
@ -124,7 +124,7 @@ export default async function Page({ params: { platform, hostname } }: Params):
|
||||
<h1 className="text-xl">Lookup a {invalidPlatform ? "" : capitalizeFirstLetter(platform)} Server</h1>
|
||||
<p>You can enter a server hostname to get information about the server.</p>
|
||||
|
||||
<LookupServer currentPlatform={platform.toLocaleLowerCase()} />
|
||||
<LookupServer currentPlatform={platform.toLowerCase()} currentServer={hostname[0]} />
|
||||
</div>
|
||||
|
||||
{error && <ErrorCard message={error} />}
|
||||
|
@ -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<boolean>(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 {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit">Search</Button>
|
||||
<Button type="submit" className="flex gap-2">
|
||||
{loading && <ScaleLoader width={1} height={20} radius={2} />}
|
||||
Search
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
@ -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<boolean>(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
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit">Search</Button>
|
||||
<Button type="submit" className="flex gap-2">
|
||||
{loading && <ScaleLoader width={1} height={20} radius={2} />}
|
||||
Search
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
@ -1,3 +1,6 @@
|
||||
/**
|
||||
* Re-useable colors.
|
||||
*/
|
||||
export const Colors = {
|
||||
green: "#0FFF50",
|
||||
red: "#8B0000",
|
||||
|
@ -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;
|
||||
};
|
||||
|
||||
/**
|
||||
|
Loading…
Reference in New Issue
Block a user