style: clean up code formatting and remove trailing whitespace
refactor: reorganize imports and fix type imports
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
d3704602fd
commit
47c04de6fe
232 files changed
+7140
-4798
No files matched your search
@@ -1,8 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Grid, List, Search, SortAsc, SortDesc, X } from "lucide-react";
|
||||
import { useLocale } from "next-intl";
|
||||
import { useEffect, useState } from "react";
|
||||
import { AdCard } from "@/components/marketplace/AdCard";
|
||||
import { CreateAdModal } from "@/components/marketplace/CreateAdModal";
|
||||
import { MyAdsPanel } from "@/components/marketplace/MyAdsPanel";
|
||||
import { MyPurchaseIntentionsPanel } from "@/components/marketplace/MyPurchaseIntentionsPanel";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -11,19 +17,13 @@ import {
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Search, SortAsc, SortDesc, Filter, X, Grid, List } from "lucide-react";
|
||||
import { useMarketTelemetry } from "@/lib/hooks/use-telemetry";
|
||||
import { AdCard } from "@/components/marketplace/AdCard";
|
||||
import { CreateAdModal } from "@/components/marketplace/CreateAdModal";
|
||||
import { MyAdsPanel } from "@/components/marketplace/MyAdsPanel";
|
||||
import { MyPurchaseIntentionsPanel } from "@/components/marketplace/MyPurchaseIntentionsPanel";
|
||||
import { useSession } from "@/lib/hooks/use-session";
|
||||
import { useListings, useInvalidateListings } from "@/lib/hooks/use-listings";
|
||||
import { useInvalidateListings, useListings } from "@/lib/hooks/use-listings";
|
||||
import { useMyPurchaseIntentions } from "@/lib/hooks/use-purchase-intentions";
|
||||
import { useLocale } from "next-intl";
|
||||
import { useSession } from "@/lib/hooks/use-session";
|
||||
import { useMarketTelemetry } from "@/lib/hooks/use-telemetry";
|
||||
|
||||
interface Listing {
|
||||
listing_id: number;
|
||||
@@ -57,7 +57,7 @@ export default function MarketClient({ initial }: { initial: InitialData }) {
|
||||
const { trackSearch, trackFilter, trackPageView } = useMarketTelemetry();
|
||||
const invalidateListings = useInvalidateListings();
|
||||
const locale = useLocale();
|
||||
|
||||
|
||||
const [page, setPage] = useState<number>(initial.page || 1);
|
||||
const [pageSize] = useState<number>(initial.pageSize || 20);
|
||||
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
|
||||
@@ -73,7 +73,12 @@ export default function MarketClient({ initial }: { initial: InitialData }) {
|
||||
const [activeTab, setActiveTab] = useState<string>("explore");
|
||||
|
||||
// Usar React Query para buscar listings com atualização automática
|
||||
const { listings, total, totalPages, isLoading: loading } = useListings({
|
||||
const {
|
||||
listings,
|
||||
total,
|
||||
totalPages,
|
||||
isLoading: loading,
|
||||
} = useListings({
|
||||
search: searchQuery || undefined,
|
||||
server_name: serverName || undefined,
|
||||
price_min: priceMin || undefined,
|
||||
@@ -144,7 +149,7 @@ export default function MarketClient({ initial }: { initial: InitialData }) {
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Marketplace</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
{activeTab === "explore"
|
||||
{activeTab === "explore"
|
||||
? `${total} ${total === 1 ? "anúncio" : "anúncios"} disponíveis`
|
||||
: "Gerencie seus anúncios"}
|
||||
</p>
|
||||
@@ -161,226 +166,238 @@ export default function MarketClient({ initial }: { initial: InitialData }) {
|
||||
<TabsList>
|
||||
<TabsTrigger value="explore">Explorar</TabsTrigger>
|
||||
{user && <TabsTrigger value="my-ads">Meus Anúncios</TabsTrigger>}
|
||||
{user && (
|
||||
<MyPurchaseIntentionsTabTrigger />
|
||||
)}
|
||||
{user && <MyPurchaseIntentionsTabTrigger />}
|
||||
</TabsList>
|
||||
|
||||
{/* Aba: Explorar Anúncios */}
|
||||
<TabsContent value="explore" className="space-y-6 mt-6">
|
||||
|
||||
{/* Barra de busca */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Buscar anúncios por item ou descrição..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
className="pl-10 pr-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filtros e controles */}
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
{/* Filtro por servidor */}
|
||||
<Input
|
||||
placeholder="Filtrar por servidor"
|
||||
value={serverName}
|
||||
onChange={(e) => {
|
||||
setServerName(e.target.value);
|
||||
handleFilter({ server: e.target.value });
|
||||
}}
|
||||
className="w-48"
|
||||
/>
|
||||
|
||||
{/* Filtro por preço mínimo */}
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Preço min"
|
||||
value={priceMin}
|
||||
onChange={(e) => {
|
||||
setPriceMin(e.target.value);
|
||||
handleFilter({ priceMin: e.target.value ? parseFloat(e.target.value) : undefined });
|
||||
}}
|
||||
className="w-32"
|
||||
/>
|
||||
|
||||
{/* Filtro por preço máximo */}
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Preço max"
|
||||
value={priceMax}
|
||||
onChange={(e) => {
|
||||
setPriceMax(e.target.value);
|
||||
handleFilter({ priceMax: e.target.value ? parseFloat(e.target.value) : undefined });
|
||||
}}
|
||||
className="w-32"
|
||||
/>
|
||||
|
||||
{/* Ordenação */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" className="gap-2">
|
||||
{(() => {
|
||||
const selectedOption = sortOptions.find((opt) => opt.value === sortBy);
|
||||
const Icon = selectedOption?.icon;
|
||||
return Icon ? <Icon className="h-4 w-4" /> : null;
|
||||
})()}
|
||||
{sortOptions.find((opt) => opt.value === sortBy)?.label || "Ordenar"}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-48">
|
||||
<DropdownMenuLabel>Ordenar por</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{sortOptions.map((option) => {
|
||||
const Icon = option.icon;
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={option.value}
|
||||
onClick={() => handleSort(option.value)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
<span>{option.label}</span>
|
||||
{sortBy === option.value && (
|
||||
<div className="w-2 h-2 bg-primary rounded-full ml-auto" />
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Toggle de visualização */}
|
||||
<div className="flex items-center gap-1 border rounded-md p-1">
|
||||
<Button
|
||||
variant={viewMode === "grid" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("grid")}
|
||||
>
|
||||
<Grid className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === "list" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("list")}
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Limpar filtros */}
|
||||
{activeFiltersCount > 0 && (
|
||||
<Button variant="ghost" onClick={clearFilters} className="gap-2">
|
||||
<X className="h-4 w-4" />
|
||||
Limpar Filtros
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Badges de filtros ativos */}
|
||||
{activeFiltersCount > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{searchQuery && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
Busca: {searchQuery}
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer"
|
||||
onClick={() => {
|
||||
setSearchQuery("");
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
</Badge>
|
||||
)}
|
||||
{serverName && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
Servidor: {serverName}
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer"
|
||||
onClick={() => {
|
||||
setServerName("");
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
</Badge>
|
||||
)}
|
||||
{(priceMin || priceMax) && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
Preço: {priceMin || "0"} - {priceMax || "∞"}
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer"
|
||||
onClick={() => {
|
||||
setPriceMin("");
|
||||
setPriceMax("");
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Listagem de anúncios */}
|
||||
{loading ? (
|
||||
<div
|
||||
className={
|
||||
viewMode === "grid"
|
||||
? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
||||
: "space-y-4"
|
||||
}
|
||||
>
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-64 w-full" />
|
||||
))}
|
||||
</div>
|
||||
) : listings.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-muted-foreground text-lg">
|
||||
Nenhum anúncio encontrado
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm mt-2">
|
||||
Tente ajustar os filtros ou criar um novo anúncio
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
viewMode === "grid"
|
||||
? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
||||
: "space-y-4"
|
||||
}
|
||||
>
|
||||
{listings.map((listing) => (
|
||||
<AdCard key={listing.listing_id} listing={listing} viewMode={viewMode} />
|
||||
))}
|
||||
{/* Barra de busca */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Buscar anúncios por item ou descrição..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
className="pl-10 pr-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Paginação */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
{/* Filtros e controles */}
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
{/* Filtro por servidor */}
|
||||
<Input
|
||||
placeholder="Filtrar por servidor"
|
||||
value={serverName}
|
||||
onChange={(e) => {
|
||||
setServerName(e.target.value);
|
||||
handleFilter({ server: e.target.value });
|
||||
}}
|
||||
className="w-48"
|
||||
/>
|
||||
|
||||
{/* Filtro por preço mínimo */}
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Preço min"
|
||||
value={priceMin}
|
||||
onChange={(e) => {
|
||||
setPriceMin(e.target.value);
|
||||
handleFilter({
|
||||
priceMin: e.target.value
|
||||
? parseFloat(e.target.value)
|
||||
: undefined,
|
||||
});
|
||||
}}
|
||||
className="w-32"
|
||||
/>
|
||||
|
||||
{/* Filtro por preço máximo */}
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Preço max"
|
||||
value={priceMax}
|
||||
onChange={(e) => {
|
||||
setPriceMax(e.target.value);
|
||||
handleFilter({
|
||||
priceMax: e.target.value
|
||||
? parseFloat(e.target.value)
|
||||
: undefined,
|
||||
});
|
||||
}}
|
||||
className="w-32"
|
||||
/>
|
||||
|
||||
{/* Ordenação */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" className="gap-2">
|
||||
{(() => {
|
||||
const selectedOption = sortOptions.find(
|
||||
(opt) => opt.value === sortBy,
|
||||
);
|
||||
const Icon = selectedOption?.icon;
|
||||
return Icon ? <Icon className="h-4 w-4" /> : null;
|
||||
})()}
|
||||
{sortOptions.find((opt) => opt.value === sortBy)?.label ||
|
||||
"Ordenar"}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-48">
|
||||
<DropdownMenuLabel>Ordenar por</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{sortOptions.map((option) => {
|
||||
const Icon = option.icon;
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={option.value}
|
||||
onClick={() => handleSort(option.value)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
<span>{option.label}</span>
|
||||
{sortBy === option.value && (
|
||||
<div className="w-2 h-2 bg-primary rounded-full ml-auto" />
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Toggle de visualização */}
|
||||
<div className="flex items-center gap-1 border rounded-md p-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
variant={viewMode === "grid" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("grid")}
|
||||
>
|
||||
Anterior
|
||||
<Grid className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Página {page} de {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={page === totalPages}
|
||||
variant={viewMode === "list" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("list")}
|
||||
>
|
||||
Próxima
|
||||
<List className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Limpar filtros */}
|
||||
{activeFiltersCount > 0 && (
|
||||
<Button variant="ghost" onClick={clearFilters} className="gap-2">
|
||||
<X className="h-4 w-4" />
|
||||
Limpar Filtros
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Badges de filtros ativos */}
|
||||
{activeFiltersCount > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{searchQuery && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
Busca: {searchQuery}
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer"
|
||||
onClick={() => {
|
||||
setSearchQuery("");
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
</Badge>
|
||||
)}
|
||||
{serverName && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
Servidor: {serverName}
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer"
|
||||
onClick={() => {
|
||||
setServerName("");
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
</Badge>
|
||||
)}
|
||||
{(priceMin || priceMax) && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
Preço: {priceMin || "0"} - {priceMax || "∞"}
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer"
|
||||
onClick={() => {
|
||||
setPriceMin("");
|
||||
setPriceMax("");
|
||||
setPage(1);
|
||||
}}
|
||||
/>
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Listagem de anúncios */}
|
||||
{loading ? (
|
||||
<div
|
||||
className={
|
||||
viewMode === "grid"
|
||||
? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
||||
: "space-y-4"
|
||||
}
|
||||
>
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-64 w-full" />
|
||||
))}
|
||||
</div>
|
||||
) : listings.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-muted-foreground text-lg">
|
||||
Nenhum anúncio encontrado
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm mt-2">
|
||||
Tente ajustar os filtros ou criar um novo anúncio
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
viewMode === "grid"
|
||||
? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
||||
: "space-y-4"
|
||||
}
|
||||
>
|
||||
{listings.map((listing) => (
|
||||
<AdCard
|
||||
key={listing.listing_id}
|
||||
listing={listing}
|
||||
viewMode={viewMode}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Paginação */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
>
|
||||
Anterior
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Página {page} de {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={page === totalPages}
|
||||
>
|
||||
Próxima
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Modal de criação de anúncio */}
|
||||
{showCreateModal && (
|
||||
@@ -437,4 +454,3 @@ function MyPurchaseIntentionsTabTrigger() {
|
||||
</TabsTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user