diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx index 26acbe8..bba53f4 100644 --- a/src/app/admin/page.tsx +++ b/src/app/admin/page.tsx @@ -1,6 +1,5 @@ import ImageManager from '@/components/ImageManager'; import ImageUpload from '@/components/ImageUpload'; -import { ImagesResponse, TagsResponse } from '@/interfaces/api'; import { getSession } from '@/lib/session'; import styles from '@/styles/AdminPage.module.scss'; import { redirect } from 'next/navigation'; @@ -12,33 +11,10 @@ export default async function AdminPage() { redirect('/login'); } - const fetchImages = async () => { - const apiUrl = new URL( - '/api/images?imagesPerPage=-1}', - process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000', - ); - const response = await fetch(apiUrl.toString()); - if (!response.ok) { - throw new Error(`Network response was not ok: ${response.statusText}`); - } - - return (await response.json()) as ImagesResponse; - }; - - const fetchTags = async () => { - const apiUrl = new URL('/api/tags', process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'); - const response = await fetch(apiUrl.toString()); - if (!response.ok) { - throw new Error(`Network response was not ok: ${response.statusText}`); - } - - return (await response.json()) as TagsResponse; - }; - return (
- +
); } diff --git a/src/components/ImageManager.tsx b/src/components/ImageManager.tsx index ee4eb7b..e950c82 100644 --- a/src/components/ImageManager.tsx +++ b/src/components/ImageManager.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/exhaustive-deps */ 'use client'; import Button from '@/components/Button'; @@ -5,19 +6,14 @@ import InputField from '@/components/InputField'; import { ImageMeta } from '@/interfaces/image'; import styles from '@/styles/ImageManager.module.scss'; import Image from 'next/image'; -import { redirect, useSearchParams } from 'next/navigation'; +import { useSearchParams } from 'next/navigation'; import React, { useEffect, useState } from 'react'; import Tags from './Tags'; -interface ImageManagerProps { - images: ImageMeta[]; - tags: string[]; -} - -export default function ImageManager({ images: initialImages, tags: initialTags }: ImageManagerProps) { - const [images, setImages] = useState(initialImages); +export default function ImageManager() { + const [images, setImages] = useState([]); const [error, setError] = useState(); - const [tags, setTags] = useState(initialTags); + const [tags, setTags] = useState([]); const [activeTag, setActiveTag] = useState('all'); const searchParams = useSearchParams(); @@ -92,23 +88,17 @@ export default function ImageManager({ images: initialImages, tags: initialTags }; useEffect(() => { - setActiveTag(searchParams.get('tag') ?? 'all'); - }, [searchParams, tags]); + fetchTags(); + fetchImages(); + }, []); useEffect(() => { - const filterImages = () => { - if (activeTag === 'all') { - setImages(initialImages); - return; - } else if (activeTag && !tags.includes(activeTag)) { - redirect('/admin'); - } else { - setImages(initialImages.filter((image) => image.tags.includes(activeTag))); - } - }; + fetchImages(); + }, [activeTag]); - filterImages(); - }, [activeTag, initialImages, tags]); + useEffect(() => { + setActiveTag(searchParams.get('tag') ?? 'all'); + }, [searchParams, tags]); return (