Migrate website to App directory

.eslintrc.js

@@ -0,0 +1,56 @@
+module.exports = {
+    root: true,
+    extends: [
+        "next/core-web-vitals",
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:jsx-a11y/strict",
+    ],
+    parser: "@typescript-eslint/parser",
+    plugins: [
+        "@typescript-eslint",
+        "jsx-a11y",
+        "sort-imports-es6-autofix",
+        "prettier",
+    ],
+    settings: {
+        next: {
+            rootDir: ["app/", "packages/*/"],
+        },
+    },
+    rules: {
+        "no-console": "error",
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": [
+            "error",
+            {
+                argsIgnorePattern: "^_",
+                varsIgnorePattern: "^_",
+            },
+        ],
+        "prettier/prettier": "error",
+        "no-var": "error",
+        "sort-imports-es6-autofix/sort-imports-es6": [
+            "error",
+            {
+                ignoreCase: false,
+                ignoreMemberSort: false,
+                memberSyntaxSortOrder: ["none", "all", "multiple", "single"],
+            },
+        ],
+        "@typescript-eslint/consistent-type-imports": [
+            "error",
+            {
+                prefer: "type-imports",
+                fixStyle: "inline-type-imports",
+            },
+        ],
+        "object-shorthand": [
+            2,
+            "always",
+            {
+                avoidExplicitReturnArrows: true,
+            },
+        ],
+    },
+}

.github/workflows/codeqa-analysis.yml

@@ -8,12 +8,12 @@ jobs:
             fail-fast: false
             matrix:
                 include:
-                    - name: Lint
+                    - name: Check Lint
                       action: pnpm ci:lint
                     - name: Check Types
                       action: pnpm ts:check
                     - name: Check Deadcode
-                      action: pnpm ci:deadcode
+                      action: pnpm deadcode
         steps:
             - uses: actions/checkout@v3
             - uses: pnpm/action-setup@v2

.gitignore

@@ -11,12 +11,14 @@ coverage
 
 # next.js
 .next/
+.vercel/
 out/
 build
 
 # misc
 .DS_Store
 *.pem
+.trash/
 
 # debug
 npm-debug.log*
@@ -38,3 +40,9 @@ yarn-error.log*
 
 # typescript
 tsconfig.tsbuildinfo
+
+# Obsidian
+.obsidian/*
+.obsidian-git-data
+Untitled*
+null*

.prettierrc

@@ -3,4 +3,4 @@
     "printWidth": 80,
     "trailingComma": "all",
     "tabWidth": 4
-}
+}

app/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# pnpm
+.pnpm-store

app/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "printWidth": 80,
+  "tabWidth": 4,
+  "trailingComma": "all"
+}

app/README.md

@@ -1,23 +1,37 @@
-<p align="center">
-  <a href="https://corehalla.com">
-    <img src="./public/images/Corehalla_Logo.gif" height="128">
-    <h1 align="center">Corehalla</h1>
-  </a>
-  <p align="center">
-  View official rankings, player and clan stats, or find a community, and join the fight!
-  </p>
-</p>
-<p align="center">
-    <a aria-label="Corehalla Website" href="https://corehalla.com" target="_blank">
-        <img alt="" src="https://img.shields.io/website.svg?url=http%3A%2F%2Fcorehalla.com&style=for-the-badge&labelColor=202020&label=Corehalla">
-    </a>
-    <a aria-label="License" href="https://github.com/djobbo/corehalla/blob/master/LICENSE.md" target="_blank">
-        <img alt="" src="https://img.shields.io/github/license/djobbo/corehalla.svg?style=for-the-badge&labelColor=202020">
-    </a>
-    <a aria-label="Corehalla Discord" href="https://discord.com/invite/eD248ez" target="_blank">
-        <img alt="" src="https://img.shields.io/badge/Join%20the%20discord-5865F2.svg?style=for-the-badge&logo=Discord&labelColor=202020&logoWidth=20&logoColor=white">
-    </a>
-    <a aria-label="Corehalla Twitter" href="https://twitter.com/Corehalla" target="_blank">
-        <img alt="" src="https://img.shields.io/badge/Follow-1DA1F2.svg?style=for-the-badge&logo=Twitter&labelColor=202020&logoWidth=20&logoColor=white">
-    </a>
-</p>
+# Corehalla Web App
+
+## Pages -> App Dir Migration
+
+- [x] new app with nextjs appdir
+    - [x] me
+        - [x] favorites
+    - [x] rankings
+        - [x] 1v1
+        - [x] 2v2
+        - [x] clans
+        - [x] global (legends/weapons...)
+        - [ ] power
+    - [x] stats
+        - [x] clan [clanId] + tabs
+        - [x] player [playerId] + tabs
+- [x] seo metadata
+- [x] clean "replays" from copy paste
+- [x] check deadcode
+- [ ] Error handling
+    - [ ] 404
+    - [ ] 500
+    - [ ] all pages
+- [ ] validate bhapi with zod
+- [ ] rename all zod "validators" to "schemas"
+- [ ] reduce usage of 'use client' in components
+- [ ] trpc
+- [ ] replace prisma with drizzle
+- [ ] change components to shadcn
+- [ ] readd adsense
+- [ ] rename favorites to bookmarks
+- [ ] add up to 5 localstorage favorites?
+- [ ] history?
+- [ ] migrate providers to zustand
+- [ ] sitemap
+- [ ] replace icons with lucide.dev icons
+- [x] remove axios

app/app/[locale]/(rankings)/BracketSelection.tsx

@@ -0,0 +1,73 @@
+import { Paginator } from "ui/base/Paginator"
+import { type ReactNode } from "react"
+
+const getRankedPages = (region?: string, isRanked?: boolean) => {
+    const showRegion = isRanked && !!region && region !== "all"
+    const regionSuffix = showRegion ? `/${region}` : ""
+
+    return [
+        {
+            id: "1v1",
+            href: `/ranked/1v1${regionSuffix}`,
+        },
+        {
+            id: "2v2",
+            href: `/ranked/2v2${regionSuffix}`,
+        },
+        {
+            id: "rotating",
+            href: `/ranked/rotating${regionSuffix}`,
+            label: "Rotating",
+        },
+    ]
+}
+
+const getPowerPages = (region?: string, isPower?: boolean) => {
+    const showRegion = isPower && !!region
+    const regionSuffix = showRegion ? `/${region}` : "/na"
+
+    return [
+        {
+            id: "power1v1",
+            href: `/power-rankings/1v1${regionSuffix}`,
+            label: "Power 1v1",
+        },
+        {
+            id: "power2v2",
+            href: `/power-rankings/2v2${regionSuffix}`,
+            label: "Power 2v2",
+        },
+    ]
+}
+
+type BracketSelectionProps = {
+    isRanked?: boolean
+    isPower?: boolean
+    region?: string
+    children?: ReactNode
+}
+
+export const BracketSelection = ({
+    isRanked,
+    isPower,
+    region,
+    children,
+}: BracketSelectionProps) => {
+    return (
+        <div className="w-full flex flex-row sm:flex-col items-center justify-center gap-2">
+            <Paginator
+                pages={[
+                    ...getRankedPages(region, isRanked),
+                    {
+                        id: "clans",
+                        href: `/clans`,
+                        label: "Clans",
+                    },
+                    ...getPowerPages(region, isPower),
+                ]}
+                responsive
+            />
+            {children}
+        </div>
+    )
+}

app/app/[locale]/(rankings)/RankingsPagination.tsx

@@ -0,0 +1,20 @@
+import { Pagination } from "ui/base/Pagination"
+
+type RankingsPaginationProps = {
+    page: number
+    baseHref: string
+}
+
+export const RankingsPagination = ({
+    page,
+    baseHref,
+}: RankingsPaginationProps) => {
+    return (
+        <Pagination
+            baseHref={baseHref}
+            currentPage={page}
+            firstPage={1}
+            className="mt-4 justify-end"
+        />
+    )
+}

app/components/stats/RankingsTableItem.tsx → app/app/[locale]/(rankings)/RankingsTableItem.tsx

@@ -1,7 +1,7 @@
-import { Image } from "@components/Image"
+import { Image } from "@/components/Image"
 import { Progress } from "ui/base/Progress"
 import { calculateWinrate } from "bhapi/helpers/calculateWinrate"
-import { cn } from "common/helpers/classnames"
+import { cn } from "@/lib/utils"
 import type { Ranking } from "bhapi/types"
 import type { ReactNode } from "react"