Use eslint formatter (@richardscull/eslint-config) instead of prettier

.github/workflows/build.yml

@@ -13,15 +13,19 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies
         run: |
           npm install
 
+      - name: Run Linter
+        run: |
+          npm run lint:check
+
       - name: Build project
         run: |
           npm run build

app/(admin)/admin/beatmaps/[id]/page.tsx

@@ -1,11 +1,12 @@
 "use client";
+import { Music2 } from "lucide-react";
+import Image from "next/image";
 import { use } from "react";
+
+import PrettyHeader from "@/components/General/PrettyHeader";
+import RoundedContent from "@/components/General/RoundedContent";
 import Spinner from "@/components/Spinner";
 import { useBeatmap } from "@/lib/hooks/api/beatmap/useBeatmap";
-import RoundedContent from "@/components/General/RoundedContent";
-import Image from "next/image";
-import PrettyHeader from "@/components/General/PrettyHeader";
-import { Music2 } from "lucide-react";
 import { tryParseNumber } from "@/lib/utils/type.util";
 
 interface BeatmapsProps {
@@ -25,9 +26,9 @@ export default function BeatmapsRedirect(props: BeatmapsProps) {
     const errorMessage = beatmapQuery.error?.message ?? "Beatmapset not found";
 
     return (
-      <div className="flex flex-col w-full space-y-4">
+      <div className="flex w-full flex-col space-y-4">
         <PrettyHeader text="Beatmaps ranking" roundBottom icon={<Music2 />} />
-        <RoundedContent className="rounded-l flex flex-col md:flex-row justify-between items-center md:items-start gap-8 ">
+        <RoundedContent className="flex flex-col items-center justify-between gap-8 rounded-l md:flex-row md:items-start ">
           <div className="flex flex-col space-y-2">
             <h1 className="text-4xl">{errorMessage}</h1>
             <p className="text-muted-foreground">
@@ -48,9 +49,9 @@ export default function BeatmapsRedirect(props: BeatmapsProps) {
   }
 
   return (
-    <div className="flex flex-col w-full space-y-4">
+    <div className="flex w-full flex-col space-y-4">
       <PrettyHeader text="Beatmaps ranking" roundBottom icon={<Music2 />} />
-      <div className="flex justify-center items-center h-full min-h-96">
+      <div className="flex h-full min-h-96 items-center justify-center">
         <Spinner size="lg" />
       </div>
     </div>

app/(admin)/admin/beatmaps/requests/layout.tsx

@@ -1,4 +1,5 @@
-import { Metadata } from "next";
+import type { Metadata } from "next";
+
 import Page from "./page";
 
 export const metadata: Metadata = {

app/(admin)/admin/beatmaps/requests/page.tsx

@@ -1,48 +1,43 @@
 "use client";
 
-import type React from "react";
-
+import { ChevronDown, ChevronsUp } from "lucide-react";
+import type * as React from "react";
 import { useState } from "react";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Search, Filter, ChevronDown, Rocket, ChevronsUp } from "lucide-react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
-import { BeatmapsSearchFilters } from "@/components/Beatmaps/Search/BeatmapsSearchFilters";
-import { BeatmapSetCard } from "@/components/Beatmaps/BeatmapSetCard";
-import { twMerge } from "tailwind-merge";
 import BeatmapSetOverview from "@/app/(website)/user/[id]/components/BeatmapSetOverview";
-import useDebounce from "@/lib/hooks/useDebounce";
+import { BeatmapSetCard } from "@/components/Beatmaps/BeatmapSetCard";
+import PrettyHeader from "@/components/General/PrettyHeader";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useBeatmapSetGetHypedSets } from "@/lib/hooks/api/beatmap/useBeatmapSetHypedSets";
-import PrettyHeader from "@/components/General/PrettyHeader";
 
 export default function Page() {
   const [viewMode, setViewMode] = useState("grid");
 
   const { data, setSize, size, isLoading } = useBeatmapSetGetHypedSets();
 
-  const beatmapsets = data?.flatMap((item) => item.sets);
-  const totalCount =
-    data?.find((item) => item.total_count !== undefined)?.total_count ?? 0;
+  const beatmapsets = data?.flatMap(item => item.sets);
+  const totalCount
+    = data?.find(item => item.total_count !== undefined)?.total_count ?? 0;
 
-  const isLoadingMore =
-    isLoading || (size > 0 && data && typeof data[size - 1] === "undefined");
+  const isLoadingMore
+    = isLoading || (size > 0 && data && data[size - 1] === undefined);
 
   const handleShowMore = () => {
     setSize(size + 1);
   };
 
   return (
-    <div className="flex flex-col w-full space-y-4">
+    <div className="flex w-full flex-col space-y-4">
       <PrettyHeader
         icon={<ChevronsUp />}
         text="Beatmap requests"
         roundBottom={true}
       />
       <div className="space-y-2">
-        <div className="flex place-content-between items-centerflex-row">
-          <div className="px-3 py-1 font-medium items-center flex bg-card shadow rounded-lg text-sm">
+        <div className="items-centerflex-row flex place-content-between">
+          <div className="flex items-center rounded-lg bg-card px-3 py-1 text-sm font-medium shadow">
             Total requests: {totalCount}
           </div>
           <div className="flex items-center space-x-2">
@@ -52,7 +47,7 @@ export default function Page() {
               onValueChange={setViewMode}
               className="h-9 "
             >
-              <TabsList className="grid bg-card h-9 w-[120px] shadow grid-cols-2">
+              <TabsList className="grid h-9 w-[120px] grid-cols-2 bg-card shadow">
                 <TabsTrigger value="grid">Grid</TabsTrigger>
                 <TabsTrigger value="list">List</TabsTrigger>
               </TabsList>
@@ -64,26 +59,26 @@ export default function Page() {
           <Tabs value={viewMode}>
             <TabsContent value="grid" className="m-0">
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-                {beatmapsets?.map((beatmapSet, i) => (
-                  <BeatmapSetCard key={i} beatmapSet={beatmapSet} />
+                {beatmapsets?.map(beatmapSet => (
+                  <BeatmapSetCard key={`beatmap-set-card-${beatmapSet.id}`} beatmapSet={beatmapSet} />
                 ))}
               </div>
             </TabsContent>
             <TabsContent value="list" className="m-0">
               <Card className="p-4">
-                <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2 p-0">
-                  {beatmapsets?.map((beatmapSet, i) => (
-                    <BeatmapSetOverview key={i} beatmapSet={beatmapSet} />
+                <CardContent className="grid grid-cols-1 gap-4 p-0 sm:grid-cols-2">
+                  {beatmapsets?.map(beatmapSet => (
+                    <BeatmapSetOverview key={`beatmap-set-overview-${beatmapSet.id}`} beatmapSet={beatmapSet} />
                   ))}
                 </CardContent>
               </Card>
             </TabsContent>
           </Tabs>
           {beatmapsets && beatmapsets?.length < totalCount && (
-            <div className="flex justify-center mt-4">
+            <div className="mt-4 flex justify-center">
               <Button
                 onClick={handleShowMore}
-                className="w-full md:w-1/2 flex items-center justify-center"
+                className="flex w-full items-center justify-center md:w-1/2"
                 isLoading={isLoadingMore}
                 variant="secondary"
               >

app/(admin)/admin/beatmaps/search/layout.tsx

@@ -1,4 +1,5 @@
-import { Metadata } from "next";
+import type { Metadata } from "next";
+
 import Page from "./page";
 
 export const metadata: Metadata = {

app/(admin)/admin/beatmaps/search/page.tsx

@@ -1,10 +1,11 @@
+import { Music2 } from "lucide-react";
+
 import BeatmapsSearch from "@/components/Beatmaps/Search/BeatmapsSearch";
 import PrettyHeader from "@/components/General/PrettyHeader";
-import { Music2, Search } from "lucide-react";
 
 export default function Page() {
   return (
-    <div className="flex flex-col w-full space-y-4">
+    <div className="flex w-full flex-col space-y-4">
       <PrettyHeader text="Beatmaps ranking" roundBottom icon={<Music2 />} />
       <BeatmapsSearch />
     </div>

app/(admin)/admin/beatmapsets/[id]/layout.tsx

@@ -1,20 +1,24 @@
-import { Metadata } from "next";
-import Page, { BeatmapsetProps } from "./page";
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
-import { getBeatmapStarRating } from "@/lib/utils/getBeatmapStarRating";
+
 import fetcher from "@/lib/services/fetcher";
-import { BeatmapSetResponse } from "@/lib/types/api";
+import type { BeatmapSetResponse } from "@/lib/types/api";
+import { getBeatmapStarRating } from "@/lib/utils/getBeatmapStarRating";
+
+import type { BeatmapsetProps } from "./page";
+import Page from "./page";
 
 export async function generateMetadata(
-  props: BeatmapsetProps
+  props: BeatmapsetProps,
 ): Promise<Metadata> {
   const params = await props.params;
   const beatmapSetId = params.id;
 
-  if (!beatmapSetId || isNaN(beatmapSetId as any)) return notFound();
+  if (!beatmapSetId || Number.isNaN(beatmapSetId as any))
+    return notFound();
 
   const beatmapSet = await fetcher<BeatmapSetResponse>(
-    `beatmapset/${beatmapSetId}`
+    `beatmapset/${beatmapSetId}`,
   );
 
   if (!beatmapSet) {