342 lines
12 KiB
TypeScript
342 lines
12 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState, useMemo } from "react";
|
||
import { useSearchParams } from "next/navigation";
|
||
import Link from "next/link";
|
||
import Image from "next/image";
|
||
|
||
interface Entry {
|
||
id: number;
|
||
product_make: string;
|
||
product_model: string;
|
||
product_price?: string;
|
||
review_overview_text?: string;
|
||
bg_entry_sub_cat?: number;
|
||
bg_entry_cat?: number;
|
||
index?: {
|
||
id: string;
|
||
filename_disk?: string;
|
||
type?: string;
|
||
};
|
||
header?: {
|
||
id: string;
|
||
filename_disk?: string;
|
||
type?: string;
|
||
};
|
||
}
|
||
|
||
interface SubCategory {
|
||
id: number;
|
||
name: string;
|
||
bg_entry_cat?: number;
|
||
}
|
||
|
||
interface Category {
|
||
id: number;
|
||
name: string;
|
||
}
|
||
|
||
export default function BuyingGuidePage() {
|
||
const searchParams = useSearchParams();
|
||
const initialQuery = searchParams.get("query") || "";
|
||
|
||
const [query, setQuery] = useState(initialQuery);
|
||
const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
|
||
const [entries, setEntries] = useState<Entry[]>([]);
|
||
const [categories, setCategories] = useState<Category[]>([]);
|
||
const [subcategories, setSubcategories] = useState<SubCategory[]>([]);
|
||
const [selectedCat, setSelectedCat] = useState("");
|
||
const [selectedSubCat, setSelectedSubCat] = useState("");
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => setDebouncedQuery(query), 300);
|
||
return () => clearTimeout(timer);
|
||
}, [query]);
|
||
|
||
useEffect(() => {
|
||
const fetchData = async () => {
|
||
try {
|
||
const [entriesRes, catRes, subCatRes] = await Promise.all([
|
||
fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/bg_entries?fields=id,index.id,index.filename_disk,index.type,header.id,header.filename_disk,product_make,product_model,product_price,review_overview_text,bg_entry_cat,bg_entry_sub_cat&limit=-1&sort[]=sort`),
|
||
fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/bg_cat?fields=id,name&limit=-1`),
|
||
fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/bg_sub_cat?fields=id,name,bg_entry_cat&limit=-1`),
|
||
]);
|
||
|
||
const [entriesData, catData, subCatData] = await Promise.all([
|
||
entriesRes.json(),
|
||
catRes.json(),
|
||
subCatRes.json(),
|
||
]);
|
||
|
||
setEntries(entriesData?.data || []);
|
||
setCategories(catData?.data || []);
|
||
setSubcategories(subCatData?.data || []);
|
||
setLoading(false);
|
||
} catch (err) {
|
||
console.error("Error fetching data:", err);
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
fetchData();
|
||
}, []);
|
||
|
||
const normalize = (str: string) => str?.toLowerCase().replace(/[_\s]/g, "");
|
||
|
||
const filtered = useMemo(() => {
|
||
const q = normalize(debouncedQuery);
|
||
return entries.filter((entry) => {
|
||
const catMatch = selectedCat ? entry.bg_entry_cat === parseInt(selectedCat) : true;
|
||
const subCatMatch = selectedSubCat ? entry.bg_entry_sub_cat === parseInt(selectedSubCat) : true;
|
||
const searchMatch = q
|
||
? [entry.product_make, entry.product_model, entry.review_overview_text].some((field) =>
|
||
normalize(field || "").includes(q)
|
||
)
|
||
: true;
|
||
return catMatch && subCatMatch && searchMatch;
|
||
});
|
||
}, [entries, debouncedQuery, selectedCat, selectedSubCat]);
|
||
|
||
const filteredSubcategories = useMemo(() => {
|
||
return selectedCat
|
||
? subcategories.filter((sub) => sub.bg_entry_cat === parseInt(selectedCat))
|
||
: subcategories;
|
||
}, [subcategories, selectedCat]);
|
||
|
||
const featuredEntry = useMemo(() => {
|
||
if (!entries.length) return null;
|
||
const randomIndex = Math.floor(Math.random() * entries.length);
|
||
return entries[randomIndex];
|
||
}, [entries]);
|
||
|
||
const secondFeaturedEntry = useMemo(() => {
|
||
if (entries.length < 2) return null;
|
||
let secondIndex = Math.floor(Math.random() * entries.length);
|
||
while (entries[secondIndex].id === featuredEntry?.id) {
|
||
secondIndex = Math.floor(Math.random() * entries.length);
|
||
}
|
||
return entries[secondIndex];
|
||
}, [entries, featuredEntry]);
|
||
|
||
return (
|
||
<div className="p-6 max-w-7xl mx-auto">
|
||
<style jsx global>{`
|
||
mark {
|
||
background: #ffde59;
|
||
color: #242424;
|
||
padding: 0 2px;
|
||
border-radius: 2px;
|
||
}
|
||
.card-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
.entry-card {
|
||
display: flex;
|
||
background-color: #242424;
|
||
color: var(--card-foreground);
|
||
border: 1px solid var(--border);
|
||
border-radius: 0.5rem;
|
||
overflow: hidden;
|
||
height: 150px;
|
||
}
|
||
.entry-image {
|
||
width: 150px;
|
||
height: 150px;
|
||
object-fit: cover;
|
||
}
|
||
.entry-content {
|
||
padding: 0.75rem;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
.truncate-title {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
`}</style>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
|
||
<div className="card bg-card text-card-foreground p-4">
|
||
<h1 className="text-2xl font-bold mb-2">Buying Guide</h1>
|
||
<select
|
||
className="w-full border rounded px-3 py-2 mb-2"
|
||
value={selectedCat}
|
||
onChange={(e) => {
|
||
setSelectedCat(e.target.value);
|
||
setSelectedSubCat("");
|
||
}}
|
||
>
|
||
<option value="">All Categories</option>
|
||
{categories.map((cat) => (
|
||
<option key={cat.id} value={cat.id.toString()}>
|
||
{cat.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<select
|
||
className="w-full border rounded px-3 py-2 mb-2"
|
||
value={selectedSubCat}
|
||
onChange={(e) => setSelectedSubCat(e.target.value)}
|
||
>
|
||
<option value="">All Subcategories</option>
|
||
{filteredSubcategories.map((sub) => (
|
||
<option key={sub.id} value={sub.id.toString()}>
|
||
{sub.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<input
|
||
type="search"
|
||
value={query}
|
||
onChange={(e) => setQuery(e.target.value)}
|
||
placeholder="Search products by make, model, etc..."
|
||
className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
|
||
/>
|
||
<p className="text-sm text-muted-foreground mb-2">
|
||
Discover reviewed laser products and accessories.
|
||
</p>
|
||
<a
|
||
href="/"
|
||
className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
|
||
>
|
||
← Back to Main Menu
|
||
</a>
|
||
</div>
|
||
|
||
{[featuredEntry, secondFeaturedEntry].map((entry, idx) => (
|
||
entry && (
|
||
<div key={idx} className="card bg-card text-card-foreground p-4">
|
||
<h2 className="text-md font-semibold mb-2">Featured Product</h2>
|
||
{entry.header?.filename_disk ? (
|
||
<Image
|
||
src={`https://forms.lasereverything.net/assets/${entry.header.filename_disk}`}
|
||
alt="Header image"
|
||
width={800}
|
||
height={100}
|
||
className="w-full h-[100px] object-cover mb-2 rounded-md"
|
||
unoptimized
|
||
/>
|
||
) : (
|
||
<div className="w-full h-[100px] bg-zinc-800 flex items-center justify-center text-zinc-400 text-sm rounded-md mb-2">
|
||
No Header
|
||
</div>
|
||
)}
|
||
<Link
|
||
href={`/buying-guide/product/${entry.id}`}
|
||
className="text-accent font-semibold text-lg hover:underline"
|
||
>
|
||
{entry.product_make} {entry.product_model}
|
||
</Link>
|
||
{entry.product_price && (
|
||
<p className="text-sm text-white">Starting at {entry.product_price}</p>
|
||
)}
|
||
<p className="text-sm text-muted-foreground mt-1">
|
||
{entry.review_overview_text?.slice(0, 140)}...
|
||
</p>
|
||
</div>
|
||
)
|
||
))}
|
||
|
||
<div className="card bg-card text-card-foreground p-4">
|
||
<h2 className="text-md font-semibold mb-2">Popular Categories</h2>
|
||
<ul className="text-sm space-y-1">
|
||
{categories.slice(0, 5).map((cat) => (
|
||
<li key={cat.id}>
|
||
<button
|
||
onClick={() => {
|
||
setSelectedCat(cat.id.toString());
|
||
setSelectedSubCat("");
|
||
}}
|
||
className="text-accent hover:underline"
|
||
>
|
||
{cat.name}
|
||
</button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="card bg-card text-card-foreground p-4">
|
||
<h2 className="text-md font-semibold mb-2">Recently Added</h2>
|
||
<ul className="text-sm space-y-1">
|
||
{entries.slice(0, 3).map((e) => (
|
||
<li key={e.id}>
|
||
<Link href={`/buying-guide/product/${e.id}`} className="text-accent hover:underline">
|
||
{e.product_make} {e.product_model}
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="card bg-card text-card-foreground p-4">
|
||
<h2 className="text-md font-semibold mb-2">What Is This?</h2>
|
||
<p className="text-sm text-muted-foreground">
|
||
This Buying Guide helps you compare laser-related gear with hands-on reviews, scores, and recommendations. Use the filters and search to find what you’re looking for!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<hr className="my-8 border-border" />
|
||
|
||
{loading ? (
|
||
<p className="text-muted">Loading entries...</p>
|
||
) : filtered.length === 0 ? (
|
||
<p className="text-muted">No entries found.</p>
|
||
) : (
|
||
<div className="card-grid">
|
||
{filtered.map((entry) => {
|
||
const filename = entry.index?.filename_disk;
|
||
return (
|
||
<div key={entry.id} className="entry-card">
|
||
{filename ? (
|
||
<Image
|
||
src={`https://forms.lasereverything.net/assets/${filename}`}
|
||
alt={`${entry.product_make} ${entry.product_model}`}
|
||
width={150}
|
||
height={150}
|
||
className="entry-image"
|
||
unoptimized
|
||
/>
|
||
) : (
|
||
<div className="entry-image bg-zinc-800 flex items-center justify-center text-zinc-400">
|
||
No Image
|
||
</div>
|
||
)}
|
||
<div className="entry-content">
|
||
<div>
|
||
<p className="text-sm font-medium text-muted-foreground truncate-title">
|
||
{entry.product_make}
|
||
</p>
|
||
<Link
|
||
href={`/buying-guide/product/${entry.id}`}
|
||
className="text-lg font-semibold text-accent underline truncate-title"
|
||
title={entry.product_model}
|
||
>
|
||
{entry.product_model}
|
||
</Link>
|
||
{entry.product_price !== undefined && (
|
||
<p className="text-sm text-foreground mt-1 font-medium">
|
||
Starting at {entry.product_price}
|
||
</p>
|
||
)}
|
||
<p className="text-xs text-muted-foreground mt-1">
|
||
{entry.review_overview_text?.slice(0, 120)}...
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|