feat: update dashboard to use NextAuth session, show user name, fix avatar component usage
This commit is contained in:
Carlos
+88
-53
@@ -1,15 +1,24 @@
|
||||
import { useSession, signOut } from "next-auth/react"
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/router"
|
||||
import { useState, useEffect } from "react"
|
||||
import { useSession, signOut } from "next-auth/react"
|
||||
import AvatarSelector from "../components/AvatarSelector"
|
||||
import CategoryMenu from "../components/CategoryMenu"
|
||||
|
||||
// Apps organizados por categoria
|
||||
export default function Dashboard() {
|
||||
const { data: session } = useSession()
|
||||
const router = useRouter()
|
||||
const [selectedAvatar, setSelectedAvatar] = useState("😀")
|
||||
const [selectedCategory, setSelectedCategory] = useState("all")
|
||||
const [favorites, setFavorites] = useState([])
|
||||
const [confirmPassword, setConfirmPassword] = useState("")
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
// Apps organized by category
|
||||
const ALL_APPS = [
|
||||
// Produtividade
|
||||
{ id: 1, name: "Tendências Semanais", desc: "Notícias em alta • Top 100", path: "/apps/trendsnews", icon: "📈", category: "produtividade", favorite: false },
|
||||
{ id: 2, name: "Conversor", desc: "Conversão de unidades", path: "/apps/converter", icon: "🔄", category: "produtividade", favorite: false },
|
||||
{ id: 3, name: "Calculadora", desc: "Calculos rápidos", path: "/apps/calculator", icon: "🧮", category: "produtividade", favorite: false },
|
||||
{ id: 3, name: "Calculadora", desc: "Cálculos rápidos", path: "/apps/calculator", icon: "🧮", category: "produtividade", favorite: false },
|
||||
|
||||
// Utilidades
|
||||
{ id: 4, name: "Relógio", desc: "Relógio mundial", path: "/apps/clock", icon: "⏰", category: "utilidades", favorite: false },
|
||||
@@ -19,10 +28,10 @@ const ALL_APPS = [
|
||||
|
||||
// Games
|
||||
{ id: 8, name: "Jogo da Velha", desc: "Jogo da velha clássico 2 jogadores", path: "/apps/tictactoe", icon: "⭕", category: "games", favorite: false },
|
||||
{ id: 14, name: "Expedição Gold", path: "/apps/expedicao", icon: "🗺️", category: "games", desc: "Expedições para conquistar ouro" },
|
||||
{ id: 15, name: "Human City", path: "/apps/humancity", icon: "🏙️", category: "games", desc: "Simulação de cidade estilo Sims" },
|
||||
{ id: 16, name: "Aurea", path: "/apps/aurea", icon: "👑", category: "games", desc: "Simulador de vida e riqueza" },
|
||||
{ id: 17, name: "TerraVerse", path: "/apps/terraverse", icon: "🌍", category: "games", desc: "Game de realidade aumentada" },
|
||||
{ id: 14, name: "Expedição Gold", desc: "Expedições para conquistar ouro", path: "/apps/expedicao", icon: "🗺️", category: "games", favorite: false },
|
||||
{ id: 15, name: "Human City", desc: "Simulação de cidade estilo Sims", path: "/apps/humancity", icon: "🏙️", category: "games", favorite: false },
|
||||
{ id: 16, name: "Aurea", desc: "Simulador de vida e riqueza", path: "/apps/aurea", icon: "👑", category: "games", favorite: false },
|
||||
{ id: 17, name: "TerraVerse", desc: "Game de realidade aumentada", path: "/apps/terraverse", icon: "🌍", category: "games", favorite: false },
|
||||
|
||||
// Ferramentas
|
||||
{ id: 9, name: "Editor Texto", desc: "Texto simples", path: "/apps/text-editor", icon: "📝", category: "ferramentas", favorite: false },
|
||||
@@ -36,36 +45,34 @@ const ALL_APPS = [
|
||||
{ id: 13, name: "Copa do Mundo 2026", desc: "Tabela, grupos, notícias", path: "/apps/worldcup2026", icon: "⚽", category: "esportes", favorite: false }
|
||||
]
|
||||
|
||||
export default function Dashboard() {
|
||||
const { data: session } = useSession()
|
||||
const router = useRouter()
|
||||
const [selectedAvatar, setSelectedAvatar] = useState("😀")
|
||||
const [selectedCategory, setSelectedCategory] = useState("all")
|
||||
const [favorites, setFavorites] = useState([])
|
||||
const [apps, setApps] = useState(ALL_APPS)
|
||||
|
||||
// Carregar favoritos do localStorage
|
||||
useEffect(() => {
|
||||
const savedFavorites = localStorage.getItem("favorites")
|
||||
const savedAvatar = localStorage.getItem("selectedAvatar")
|
||||
if (savedFavorites) {
|
||||
setFavorites(JSON.parse(savedFavorites))
|
||||
React.useEffect(() => {
|
||||
const saved = localStorage.getItem("favorites")
|
||||
if (saved) {
|
||||
try {
|
||||
setFavorites(JSON.parse(saved))
|
||||
} catch (e) {
|
||||
console.warn("Failed to parse favorites from localStorage", e)
|
||||
}
|
||||
if (savedAvatar) {
|
||||
setSelectedAvatar(savedAvatar)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Salvar favoritos no localStorage
|
||||
useEffect(() => {
|
||||
React.useEffect(() => {
|
||||
localStorage.setItem("favorites", JSON.stringify(favorites))
|
||||
}, [favorites])
|
||||
|
||||
// Salvar avatar no localStorage
|
||||
useEffect(() => {
|
||||
React.useEffect(() => {
|
||||
localStorage.setItem("selectedAvatar", selectedAvatar)
|
||||
}, [selectedAvatar])
|
||||
|
||||
// Carregar avatar do localStorage
|
||||
React.useEffect(() => {
|
||||
const saved = localStorage.getItem("selectedAvatar")
|
||||
if (saved) setSelectedAvatar(saved)
|
||||
}, [])
|
||||
|
||||
const toggleFavorite = (appId) => {
|
||||
setFavorites(prev =>
|
||||
prev.includes(appId)
|
||||
@@ -76,11 +83,11 @@ export default function Dashboard() {
|
||||
|
||||
// Filtrar apps
|
||||
const filteredApps = selectedCategory === "all"
|
||||
? apps
|
||||
: apps.filter(app => app.category === selectedCategory)
|
||||
? ALL_APPS
|
||||
: ALL_APPS.filter(app => app.category === selectedCategory)
|
||||
|
||||
// Apps favoritos
|
||||
const favoriteApps = apps.filter(app => favorites.includes(app.id))
|
||||
const favoriteApps = ALL_APPS.filter(app => favorites.includes(app.id))
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
@@ -88,12 +95,24 @@ export default function Dashboard() {
|
||||
<nav className="bg-white shadow-lg p-4 flex justify-between items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-2xl font-bold">1000Apps</h1>
|
||||
<span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full font-semibold">FREE</span>
|
||||
<span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full font-semibold">
|
||||
FREE
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<AvatarSelector selectedAvatar={selectedAvatar} onSelect={setSelectedAvatar} />
|
||||
<span className="text-gray-600">Olá, {session?.user?.name || session?.user?.username || "usuário"}!</span>
|
||||
<button onClick={() => signOut()} className="text-red-600 hover:underline font-medium">Sair</button>
|
||||
<AvatarSelector
|
||||
selectedAvatar={selectedAvatar}
|
||||
onSelect={setSelectedAvatar}
|
||||
/>
|
||||
<span className="text-gray-600">
|
||||
Olá, {session?.user?.name || session?.user?.username || "usuário"}!
|
||||
</span>
|
||||
<button
|
||||
onClick={() => signOut({ callbackUrl: "/" })}
|
||||
className="text-red-600 hover:underline font-medium"
|
||||
>
|
||||
Sair
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -105,45 +124,67 @@ export default function Dashboard() {
|
||||
<span>⭐</span> Favoritos
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{favoriteApps.map(app => (
|
||||
{favorites.map((favId) => {
|
||||
const app = ALL_APPS.find((a) => a.id === favId)
|
||||
if (!app) return null
|
||||
return (
|
||||
<div key={app.id} className="relative">
|
||||
<button
|
||||
key={app.id}
|
||||
onClick={() => router.push(app.path)}
|
||||
className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all text-left hover:scale-105 cursor-pointer border-2 border-yellow-200"
|
||||
className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all text-left hover:scale-105 cursor-pointer w-full"
|
||||
>
|
||||
<div className="text-3xl mb-2">{app.icon}</div>
|
||||
<h3 className="font-semibold text-gray-800 text-sm">{app.name}</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">{app.desc}</p>
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={() => toggleFavorite(app.id)}
|
||||
className="absolute top-2 right-2 text-lg"
|
||||
title={favorites.includes(favId) ? "Remover dos favoritos" : "Adicionar aos favoritos"}
|
||||
>
|
||||
{favorites.includes(favId) ? "⭐" : "☆"}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Category Filter */}
|
||||
<CategoryMenu selectedCategory={selectedCategory} onSelect={setSelectedCategory} />
|
||||
<CategoryMenu
|
||||
selectedCategory={selectedCategory}
|
||||
onSelect={setSelectedCategory}
|
||||
/>
|
||||
|
||||
{/* Apps Grid */}
|
||||
<div className="mb-6">
|
||||
<h2 className="text-3xl font-bold text-gray-800 mb-2">
|
||||
{selectedCategory === "all" ? "Todos os Apps" :
|
||||
selectedCategory === "produtividade" ? "Produtividade" :
|
||||
selectedCategory === "utilidades" ? "Utilidades" :
|
||||
selectedCategory === "games" ? "Games" :
|
||||
selectedCategory === "ferramentas" ? "Ferramentas" :
|
||||
selectedCategory === "educacao" ? "Educação" :
|
||||
selectedCategory === "entretenimento" ? "Entretenimento" :
|
||||
selectedCategory === "esportes" ? "Esportes" : "Apps"}
|
||||
{selectedCategory === "all"
|
||||
? "Todos os Apps"
|
||||
: selectedCategory === "produtividade"
|
||||
? "Produtividade"
|
||||
: selectedCategory === "utilidades"
|
||||
? "Utilidades"
|
||||
: selectedCategory === "games"
|
||||
? "Games"
|
||||
: selectedCategory === "ferramentas"
|
||||
? "Ferramentas"
|
||||
: selectedCategory === "educacao"
|
||||
? "Educação"
|
||||
: selectedCategory === "esportes"
|
||||
? "Esportes"
|
||||
: "Apps"}
|
||||
</h2>
|
||||
<p className="text-gray-500">
|
||||
{selectedCategory === "all"
|
||||
? `${apps.length} apps disponíveis`
|
||||
? `${ALL_APPS.length} apps disponíveis`
|
||||
: `${filteredApps.length} apps nesta categoria`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{filteredApps.map(app => (
|
||||
{filteredApps.map((app) => (
|
||||
<div key={app.id} className="relative">
|
||||
<button
|
||||
onClick={() => router.push(app.path)}
|
||||
@@ -167,9 +208,3 @@ export default function Dashboard() {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getServerSideProps() {
|
||||
return {
|
||||
props: {},
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user