Remove ESLint configuration file and update type imports across components: Deleted eslint.config.js to streamline project setup. Updated type imports in layout, login, register, and other components to use direct imports for improved clarity and consistency. Enhanced error handling in various components and replaced apostrophes with HTML entities for better rendering.

Update ESLint configuration and dependencies: Change lint script in package.json to use eslint directly with TypeScript extensions. Add new ESLint dependencies including @eslint/js, @typescript-eslint/eslint-plugin, and @typescript-eslint/parser to enhance code quality and maintainability. Update pnpm-lock.yaml to reflect these changes and ensure consistent package management.
2025-12-10 06:01:34 +01:00 · 2025-12-10 06:00:04 +01:00
14 changed files with 2930 additions and 76 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import type { ReactNode } from "react";
 import { Orbitron, Rajdhani } from "next/font/google";
 import "./globals.css";
 import SessionProvider from "@/components/SessionProvider";
@@ -23,7 +24,7 @@ export const metadata: Metadata = {
 export default function RootLayout({
  children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: ReactNode;
 }>) {
  return (
    <html lang="fr" className={`${orbitron.variable} ${rajdhani.variable}`}>
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState } from "react";
+import { useState, type FormEvent } from "react";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
@@ -13,7 +13,7 @@ export default function LoginPage() {
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);
@@ -128,7 +128,7 @@ export default function LoginPage() {
                  href="/register"
                  className="text-pixel-gold hover:text-orange-400 transition"
                >
-                  S'inscrire
+                  S&apos;inscrire
                </Link>
              </p>
            </div>
@@ -138,4 +138,3 @@ export default function LoginPage() {
    </main>
  );
 }
-
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState, useRef } from "react";
+import { useState, useRef, type ChangeEvent, type FormEvent } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import Navigation from "@/components/Navigation";
@@ -24,7 +24,7 @@ export default function RegisterPage() {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setFormData({
      ...formData,
@@ -32,7 +32,7 @@ export default function RegisterPage() {
    });
  };

-  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleAvatarUpload = async (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

@@ -110,14 +110,14 @@ export default function RegisterPage() {

      setUserId(data.userId);
      setStep(2);
-    } catch (err) {
+    } catch {
      setError("Une erreur est survenue");
    } finally {
      setLoading(false);
    }
  };

-  const handleStep2Submit = async (e: React.FormEvent) => {
+  const handleStep2Submit = async (e: FormEvent) => {
    e.preventDefault();
    setError("");

@@ -245,7 +245,7 @@ export default function RegisterPage() {
                    htmlFor="username"
                    className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
                  >
-                    Nom d'utilisateur
+                    Nom d&apos;utilisateur
                  </label>
                  <input
                    id="username"
@@ -413,7 +413,7 @@ export default function RegisterPage() {
                    htmlFor="username-step2"
                    className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
                  >
-                    Nom d'utilisateur
+                    Nom d&apos;utilisateur
                  </label>
                  <input
                    id="username-step2"
--- a/components/AdminPanel.tsx
+++ b/components/AdminPanel.tsx
@@ -122,7 +122,7 @@ export default function AdminPanel({ initialPreferences }: AdminPanelProps) {
                      Images de fond du site
                    </h3>
                    <p className="text-gray-400 text-sm">
-                      Ces préférences s'appliquent à tous les utilisateurs
+                      Ces préférences s&apos;appliquent à tous les utilisateurs
                    </p>
                  </div>
                  {!isEditing && (
@@ -278,4 +278,3 @@ export default function AdminPanel({ initialPreferences }: AdminPanelProps) {
    </section>
  );
 }
-
--- a/components/EventsPageSection.tsx
+++ b/components/EventsPageSection.tsx
@@ -533,7 +533,7 @@ export default function EventsPageSection({
        ...prev,
        [eventId]: true,
      }));
-    } catch (err) {
+    } catch {
      setError("Une erreur est survenue");
    } finally {
      setLoading((prev) => ({ ...prev, [eventId]: false }));
@@ -559,7 +559,7 @@ export default function EventsPageSection({
        ...prev,
        [eventId]: false,
      }));
-    } catch (err) {
+    } catch {
      setError("Une erreur est survenue");
    } finally {
      setLoading((prev) => ({ ...prev, [eventId]: false }));
@@ -600,7 +600,7 @@ export default function EventsPageSection({
          </div>
          <p className="text-gray-400 text-sm max-w-2xl mx-auto">
            Rejoignez-nous pour des événements tech passionnants, des
-            compétitions et des célébrations tout au long de l'année
+            compétitions et des célébrations tout au long de l&apos;année
          </p>
        </div>

--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -100,11 +100,11 @@ export default function HeroSection() {

        {/* Description */}
        <p className="text-white text-base md:text-lg max-w-3xl mx-auto mb-12 leading-relaxed px-4">
-          Dans un monde numérique de technologie de pointe, où les systèmes d'IA
-          évoluent et où d'anciens codes attendent d'être découverts. Partez
-          pour un voyage épique pour forger des alliances, conquérir des défis
-          et raconter votre histoire d'innovation au sein d'une communauté de
-          gaming tech florissante.
+          Dans un monde numérique de technologie de pointe, où les systèmes
+          d&apos;IA évoluent et où d&apos;anciens codes attendent d&apos;être
+          découverts. Partez pour un voyage épique pour forger des alliances,
+          conquérir des défis et raconter votre histoire d&apos;innovation au
+          sein d&apos;une communauté de gaming tech florissante.
        </p>

        {/* Call-to-Action Buttons */}
--- a/components/ImageSelector.tsx
+++ b/components/ImageSelector.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, type ChangeEvent } from "react";

 interface ImageSelectorProps {
  value: string;
@@ -14,7 +14,6 @@ export default function ImageSelector({
  label,
 }: ImageSelectorProps) {
  const [availableImages, setAvailableImages] = useState<string[]>([]);
-  const [loading, setLoading] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [urlInput, setUrlInput] = useState("");
  const [showGallery, setShowGallery] = useState(false);
@@ -36,7 +35,7 @@ export default function ImageSelector({
    }
  };

-  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileUpload = async (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

@@ -153,9 +152,7 @@ export default function ImageSelector({
          </div>

          {/* Chemin de l'image */}
-          {value && (
-            <p className="text-xs text-gray-400 truncate">{value}</p>
-          )}
+          {value && <p className="text-xs text-gray-400 truncate">{value}</p>}
        </div>
      </div>

@@ -204,4 +201,3 @@ export default function ImageSelector({
    </div>
  );
 }
-
--- a/components/PlayerStats.tsx
+++ b/components/PlayerStats.tsx
@@ -51,6 +51,8 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
        .then((res) => res.json())
        .then((data) => {
          if (data) {
+            // Utiliser requestAnimationFrame pour éviter les cascades de rendu
+            requestAnimationFrame(() => {
              setUserData({
                username: data.username || "Guest",
                avatar: data.avatar,
@@ -60,10 +62,12 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
                maxXp: data.maxXp || 5000,
                level: data.level || 1,
              });
+            });
          }
        })
        .catch(() => {
          // Utiliser les données de session si l'API échoue
+          requestAnimationFrame(() => {
            setUserData({
              username: session.user.username || "Guest",
              avatar: null,
@@ -74,8 +78,12 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
              level: 1,
            });
          });
-    } else {
+        });
+    } else if (!initialUserData) {
+      // Utiliser requestAnimationFrame pour éviter les cascades de rendu
+      requestAnimationFrame(() => {
        setUserData(defaultUserData);
+      });
    }
  }, [session, initialUserData]);

@@ -109,11 +117,13 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
        clearTimeout(hpTimer);
        clearTimeout(xpTimer);
      };
-    } else {
+    }
    // Sinon, mettre à jour directement (pour les pages Client Components)
+    // Utiliser requestAnimationFrame pour éviter les cascades de rendu
+    requestAnimationFrame(() => {
      setHpPercentage(targetHpPercentage);
      setXpPercentage(targetXpPercentage);
-    }
+    });
  }, [targetHpPercentage, targetXpPercentage, initialUserData]);

  const hpColor =
@@ -126,7 +136,10 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
  return (
    <div className="flex items-center gap-3">
      {/* Avatar */}
-      <Link href="/profile" className="cursor-pointer hover:opacity-80 transition-opacity">
+      <Link
+        href="/profile"
+        className="cursor-pointer hover:opacity-80 transition-opacity"
+      >
        <div className="w-10 h-10 rounded-full border border-pixel-gold/20 overflow-hidden bg-gray-900 flex items-center justify-center">
          {avatar ? (
            <img
@@ -146,7 +159,10 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
      <div className="flex flex-col gap-1.5 min-w-[200px]">
        {/* Username & Level */}
        <div className="flex items-center gap-2">
-          <Link href="/profile" className="cursor-pointer hover:text-pixel-gold/80 transition-colors">
+          <Link
+            href="/profile"
+            className="cursor-pointer hover:text-pixel-gold/80 transition-colors"
+          >
            <div className="text-pixel-gold font-gaming font-bold text-sm tracking-wider">
              {username}
            </div>
@@ -210,4 +226,3 @@ export default function PlayerStats({ initialUserData }: PlayerStatsProps) {
    </div>
  );
 }
-
--- a/components/ProfileForm.tsx
+++ b/components/ProfileForm.tsx
@@ -1,7 +1,6 @@
 "use client";

-import { useState, useRef } from "react";
-import { useRouter } from "next/navigation";
+import { useState, useRef, type ChangeEvent } from "react";

 type CharacterClass =
  | "WARRIOR"
@@ -45,7 +44,6 @@ export default function ProfileForm({
  initialProfile,
  backgroundImage,
 }: ProfileFormProps) {
-  const router = useRouter();
  const [profile, setProfile] = useState<UserProfile>(initialProfile);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
@@ -67,7 +65,7 @@ export default function ProfileForm({
  const [confirmPassword, setConfirmPassword] = useState("");
  const [changingPassword, setChangingPassword] = useState(false);

-  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleAvatarUpload = async (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

@@ -325,7 +323,7 @@ export default function ProfileForm({
            {/* Username Field */}
            <div>
              <label className="block text-pixel-gold text-sm uppercase tracking-widest mb-2">
-                Nom d'utilisateur
+                Nom d&apos;utilisateur
              </label>
              <input
                type="text"
--- a/components/SessionProvider.tsx
+++ b/components/SessionProvider.tsx
@@ -1,16 +1,12 @@
 "use client";

+import { type ReactNode } from "react";
 import { SessionProvider as NextAuthSessionProvider } from "next-auth/react";

-export default function SessionProvider({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function SessionProvider({ children }: { children: ReactNode }) {
  return (
    <NextAuthSessionProvider basePath="/api/auth">
      {children}
    </NextAuthSessionProvider>
  );
 }
-
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,63 @@
+import js from '@eslint/js';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsparser from '@typescript-eslint/parser';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import globals from 'globals';
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+        React: 'readonly',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      react,
+      'react-hooks': reactHooks,
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      'react/no-unescaped-entities': 'warn',
+      'react/no-unknown-property': ['error', { ignore: ['jsx'] }],
+      'react-hooks/set-state-in-effect': 'warn',
+      '@typescript-eslint/triple-slash-reference': 'off',
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  {
+    ignores: [
+      'node_modules/**',
+      '.next/**',
+      'out/**',
+      'build/**',
+      'dist/**',
+      '*.config.js',
+      'prisma/generated/**',
+    ],
+  },
+];
+
--- a/hooks/usePreferences.ts
+++ b/hooks/usePreferences.ts
@@ -48,7 +48,10 @@ export function useBackgroundImage(
    if (preferences) {
      const imageKey = `${page}Background` as keyof Preferences;
      const customImage = preferences[imageKey];
+      // Utiliser requestAnimationFrame pour éviter les cascades de rendu
+      requestAnimationFrame(() => {
        setBackgroundImage(customImage || defaultImage);
+      });
    }
  }, [preferences, page, defaultImage]);

--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint . --ext .ts,.tsx",
    "db:seed": "tsx prisma/seed.ts"
  },
  "prisma": {
@@ -23,12 +23,20 @@
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
+    "@eslint/js": "^9.39.1",
    "@types/bcryptjs": "^3.0.0",
    "@types/better-sqlite3": "^7.6.13",
    "@types/node": "^22.0.0",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/parser": "^8.49.0",
    "autoprefixer": "^10.4.19",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "^16.0.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^16.5.0",
    "postcss": "^8.4.40",
    "prisma": "^7.1.0",
    "tailwindcss": "^3.4.7",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
Julien Froidefond	44be5d2e98	Remove ESLint configuration file and update type imports across components: Deleted eslint.config.js to streamline project setup. Updated type imports in layout, login, register, and other components to use direct imports for improved clarity and consistency. Enhanced error handling in various components and replaced apostrophes with HTML entities for better rendering.	2025-12-10 06:01:34 +01:00
Julien Froidefond	13b8971cc7	Update ESLint configuration and dependencies: Change lint script in package.json to use eslint directly with TypeScript extensions. Add new ESLint dependencies including @eslint/js, @typescript-eslint/eslint-plugin, and @typescript-eslint/parser to enhance code quality and maintainability. Update pnpm-lock.yaml to reflect these changes and ensure consistent package management.	2025-12-10 06:00:04 +01:00