From 5194308f7cc307d74027252fb26a6974a9795763 Mon Sep 17 00:00:00 2001 From: mategery Date: Mon, 20 Oct 2025 17:26:27 +0200 Subject: [PATCH] deckkezeles, es deckek eltarolasa --- SerpentRace_Frontend/src/api/deckApi.js | 10 ++++ .../components/Landingpage/DeckManager.jsx | 60 +++++++++++++------ .../src/components/PopUp/DeckInfoPopUp.jsx | 28 +++++++-- 3 files changed, 74 insertions(+), 24 deletions(-) diff --git a/SerpentRace_Frontend/src/api/deckApi.js b/SerpentRace_Frontend/src/api/deckApi.js index b322caab..f67cd22f 100644 --- a/SerpentRace_Frontend/src/api/deckApi.js +++ b/SerpentRace_Frontend/src/api/deckApi.js @@ -10,6 +10,16 @@ export const createDeck = async (deck) => { } } +// Get paginated decks (authenticated) +export const getDecksPage = async (from = 0, to = 49) => { + try { + const response = await apiClient.get(`/decks/page/${from}/${to}`) + return response.data + } catch (err) { + throw err + } +} + export default { createDeck } diff --git a/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx b/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx index 0961de73..835a925f 100644 --- a/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx +++ b/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react" +import React, { useState, useEffect } from "react" import { useNavigate } from "react-router-dom" import { FaPlus, @@ -20,19 +20,7 @@ const deckTypes = [ { label: "Fun", color: "var(--color-fun)" }, ] -const mockDecks = [ - // Just for visual mockup - { id: 1, name: "Party Luck", type: "Luck", created: "2025-07-01", origin: "Vállalati" }, - { id: 2, name: "Quiz Night", type: "Question", created: "2025-07-02", origin: "Saját" }, - { id: 3, name: "Fun Times", type: "Fun", created: "2025-07-03", origin: "Vállalati" }, - { id: 4, name: "Corporate Challenge", type: "Question", created: "2025-07-04", origin: "Vállalati" }, - { id: 5, name: "Randomizer", type: "Luck", created: "2025-07-05", origin: "Saját" }, - { id: 6, name: "Afterwork luck", type: "Luck", created: "2025-07-06", origin: "Saját" }, - { id: 7, name: "Serpent Quiz", type: "Question", created: "2025-07-07", origin: "Vállalati" }, - { id: 8, name: "Green Fortune", type: "Luck", created: "2025-07-08", origin: "Vállalati" }, - { id: 9, name: "Team Builder", type: "Fun", created: "2025-07-09", origin: "Saját" }, - { id: 10, name: "Knowledge Race", type: "Question", created: "2025-07-10", origin: "Saját" }, -] +// initial state will be fetched from backend const origins = ["Mind", "Vállalati", "Saját"] @@ -82,9 +70,39 @@ const DeckManager = () => { const [search, setSearch] = useState("") const [showSortHelp, setShowSortHelp] = useState(false) const [selectedDeck, setSelectedDeck] = useState(null) + const [decks, setDecks] = useState([]) + const [loading, setLoading] = useState(false) - // Filter logic (mock) - let filteredDecks = mockDecks.filter((deck) => { + useEffect(() => { + let mounted = true + const load = async () => { + setLoading(true) + try { + const result = await import('../../api/deckApi').then(m => m.getDecksPage(0, 49)) + if (!mounted) return + // map backend deck shape to UI shape + const mapped = result.decks.map(d => ({ + id: d.id, + name: d.name, + type: d.type === 2 ? 'Question' : d.type === 1 ? 'Joker' : 'Luck', + created: d.creationdate ? new Date(d.creationdate).toLocaleDateString() : '', + origin: d.ctype === 2 ? 'Vállalati' : d.ctype === 0 ? 'Mind' : 'Saját', + raw: d + })) + setDecks(mapped) + } catch (err) { + console.error('Failed to load decks', err) + } finally { + setLoading(false) + } + } + load() + return () => { mounted = false } + }, []) + + // Filter logic + const sourceDecks = decks + let filteredDecks = sourceDecks.filter((deck) => { const typeMatch = selectedType === "All" || deck.type === selectedType const originMatch = selectedOrigin === "Mind" || deck.origin === selectedOrigin const searchMatch = !search || deck.name.toLowerCase().includes(search.toLowerCase()) @@ -255,8 +273,14 @@ const DeckManager = () => { Új pakli létrehozása - {/* Existing Decks (Mockup) */} - {filteredDecks.map((deck) => { + {/* Existing Decks (from backend) */} + {loading && ( +
Betöltés...
+ )} + {!loading && filteredDecks.length === 0 && ( +
Nincsenek mentett paklik.
+ )} + {!loading && filteredDecks.map((deck) => { const deckType = deckTypes.find((t) => t.label === deck.type) const borderColor = deckType ? deckType.color : "var(--color-success)" return ( diff --git a/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx b/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx index 1b895407..9d5ed97f 100644 --- a/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx +++ b/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx @@ -14,6 +14,10 @@ import { export default function DeckInfoPopUp({ deck, onClose }) { if (!deck) return null + // Debug: Log the deck structure to see what we're working with + console.log('Deck in popup:', deck) + console.log('Cards:', deck.cards) + // Scroll blokkolás amikor a popup nyitva van useEffect(() => { // Scroll letiltása @@ -33,13 +37,25 @@ export default function DeckInfoPopUp({ deck, onClose }) { const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" } - // Mock data - ezeket majd a backend adatokra cseréljük + // Use real deck data with safe fallbacks + const creator = deck.creatorName || deck.creator || (deck.user && deck.user.name) || "Ismeretlen" + const privacy = deck.origin === "Vállalati" || deck.ctype === 1 || deck.privacy === 'public' ? "Publikus" : "Privát" + + // Get data from raw if available + const rawData = deck.raw || deck + + // Use played number from raw data for answers count + const questionsCount = rawData.cardCount || 0 + const answersCount = rawData.playedNumber || 0 + + console.log('Calculated counts:', { questionsCount, answersCount, rawData }) + const mockData = { - creator: "John Doe", - privacy: deck.origin === "Vállalati" ? "Publikus" : "Privát", - questionsCount: Math.floor(Math.random() * 50) + 10, - answersCount: Math.floor(Math.random() * 200) + 50, - ...deck + ...deck, + creator, + privacy, + questionsCount, + answersCount } const formatDate = (dateString) => {