c4/1000apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update dashboard to use NextAuth session, show user name, fix avatar component usage

Browse Source
This commit is contained in:
Carlos
2026-07-10 21:59:55 +02:00
parent 71da57088f
commit 8884e28ed7
1 changed files with 119 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/dashboard.jsx
+90 -55
View File
@@ -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
const ALL_APPS = [
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 },
@@ -34,38 +43,36 @@ const ALL_APPS = [
// Esportes
{ 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: {},
}
}