343 lines
12 KiB
TypeScript
343 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>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|