chore: fix all linting issues and optimize components

2026-02-11 10:40:57 +01:00
parent a12759d507
commit c111efae1a
23 changed files with 275 additions and 59 deletions
--- a/components/CMSConnectivityNotice.tsx
+++ b/components/CMSConnectivityNotice.tsx
@@ -1,11 +1,11 @@
 'use client';

 import React, { useEffect, useState } from 'react';
-import { AlertCircle, RefreshCw, Database } from 'lucide-react';
+import { AlertCircle, RefreshCw } from 'lucide-react';
 import { config } from '../lib/config';

 export default function CMSConnectivityNotice() {
-  const [status, setStatus] = useState<'checking' | 'ok' | 'error'>('checking');
+  const [, setStatus] = useState<'checking' | 'ok' | 'error'>('checking');
  const [errorMsg, setErrorMsg] = useState('');
  const [isVisible, setIsVisible] = useState(false);

@@ -32,7 +32,7 @@ export default function CMSConnectivityNotice() {
          setStatus('ok');
          setIsVisible(false);
        }
-      } catch (err) {
+      } catch {
        // If it's a connection error, only show if we are really debugging
        if (isDebug || isLocal) {
          setStatus('error');
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -30,13 +30,6 @@ export default function Header() {
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

-  // Close mobile menu on route change
-  useEffect(() => {
-    if (isMobileMenuOpen) {
-      setIsMobileMenuOpen(false);
-    }
-  }, [pathname, isMobileMenuOpen]);
-
  // Prevent scroll when mobile menu is open
  useEffect(() => {
    if (isMobileMenuOpen) {
@@ -113,10 +106,11 @@ export default function Header() {
            }}
          >
            <motion.nav className="hidden lg:flex items-center space-x-10" variants={navVariants}>
-              {menuItems.map((item, idx) => (
+              {menuItems.map((item, _idx) => (
                <motion.div key={item.href} variants={navLinkVariants}>
                  <Link
                    href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                    onClick={() => setIsMobileMenuOpen(false)}
                    className={cn(
                      textColorClass,
                      'hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5',
@@ -281,6 +275,7 @@ export default function Header() {
              >
                <Link
                  href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                  onClick={() => setIsMobileMenuOpen(false)}
                  className="text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4"
                >
                  {item.label}
--- a/components/Lightbox.tsx
+++ b/components/Lightbox.tsx
@@ -21,7 +21,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
-    setMounted(true);
+    setMounted(true); // eslint-disable-line react-hooks/set-state-in-effect
    return () => setMounted(false);
  }, []);

@@ -59,7 +59,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
    if (photoParam !== null) {
      const index = parseInt(photoParam, 10);
      if (!isNaN(index) && index >= 0 && index < images.length) {
-        setCurrentIndex(index);
+        setCurrentIndex(index); // eslint-disable-line react-hooks/set-state-in-effect
      }
    }
  }, [searchParams, images.length]);
--- a/components/OGImageTemplate.tsx
+++ b/components/OGImageTemplate.tsx
@@ -46,6 +46,7 @@ export function OGImageTemplate({
            display: 'flex',
          }}
        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={image}
            alt=""
@@ -182,4 +183,3 @@ export function OGImageTemplate({
    </div>
  );
 }
-
--- a/components/home/GallerySection.tsx
+++ b/components/home/GallerySection.tsx
@@ -1,6 +1,5 @@
 'use client';
-
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { Section, Container, Heading } from '../../components/ui';
@@ -19,19 +18,9 @@ export default function GallerySection() {
    '/uploads/2024/12/DSC07768-Large.webp',
  ];

-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
-
-  useEffect(() => {
-    const photoParam = searchParams.get('photo');
-    if (photoParam !== null) {
-      const index = parseInt(photoParam, 10);
-      if (!isNaN(index) && index >= 0 && index < images.length) {
-        if (lightboxIndex !== index) setLightboxIndex(index);
-        if (!lightboxOpen) setLightboxOpen(true);
-      }
-    }
-  }, [searchParams, images.length, lightboxIndex, lightboxOpen]);
+  const photoParam = searchParams.get('photo');
+  const lightboxOpen = photoParam !== null;
+  const lightboxIndex = photoParam ? parseInt(photoParam, 10) : 0;

  return (
    <Section className="bg-white text-white py-32">
@@ -45,8 +34,10 @@ export default function GallerySection() {
            <button
              key={idx}
              onClick={() => {
-                setLightboxIndex(idx);
-                setLightboxOpen(true);
+                const params = new URLSearchParams(searchParams.toString());
+                params.set('photo', idx.toString());
+                window.history.replaceState(null, '', `?${params.toString()}`);
+                // Since we're using derive-from-url, the component will re-render with the new value
              }}
              className="relative aspect-[4/3] overflow-hidden rounded-3xl group shadow-lg hover:shadow-2xl transition-all duration-700 cursor-pointer"
            >
@@ -68,7 +59,11 @@ export default function GallerySection() {
        isOpen={lightboxOpen}
        images={images}
        initialIndex={lightboxIndex}
-        onClose={() => setLightboxOpen(false)}
+        onClose={() => {
+          const params = new URLSearchParams(searchParams.toString());
+          params.delete('photo');
+          window.history.replaceState(null, '', `?${params.toString()}`);
+        }}
      />
    </Section>
  );
--- a/components/home/RecentPosts.tsx
+++ b/components/home/RecentPosts.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { getAllPosts } from '@/lib/blog';
 import { getTranslations } from 'next-intl/server';
@@ -22,8 +23,11 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
          <Heading level={2} subtitle={t('latestNews')} className="mb-0 text-primary">
            {t('allArticles')}
          </Heading>
-          <Link href={`/${locale}/blog`} className="group flex items-center text-primary font-bold text-base md:text-lg touch-target">
-            {t('allArticles')} 
+          <Link
+            href={`/${locale}/blog`}
+            className="group flex items-center text-primary font-bold text-base md:text-lg touch-target"
+          >
+            {t('allArticles')}
            <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
          </Link>
        </div>
@@ -34,10 +38,12 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
              <Card className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl">
                {post.frontmatter.featuredImage && (
                  <div className="relative h-64 overflow-hidden">
-                    <img 
-                      src={post.frontmatter.featuredImage} 
+                    <Image
+                      src={post.frontmatter.featuredImage}
                      alt={post.frontmatter.title}
+                      fill
                      className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                      unoptimized
                    />
                    <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                    {post.frontmatter.category && (
@@ -53,7 +59,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                    {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                      year: 'numeric',
                      month: 'long',
-                      day: 'numeric'
+                      day: 'numeric',
                    })}
                  </div>
                  <h3 className="text-lg md:text-xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
@@ -61,8 +67,18 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                  </h3>
                  <div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">
                    {t('readMore')}
-                    <svg className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                    <svg
+                      className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-2"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M17 8l4 4m0 0l-4 4m4-4H3"
+                      />
                    </svg>
                  </div>
                </div>