thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove item from shop after purchase

Browse Source
This commit is contained in:
Emily Neighbour 2025-05-30 14:05:56 +01:00
parent 183a53b178
commit 17672177c6
1 changed files with 73 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/app/shop/page.tsx
View File

@ -1,48 +1,50 @@
"use client";
import Image from "next/image";
import { Dispatch, SetStateAction, useCallback, useState, useEffect } from "react";
import BottomFooter from "@components/BottomFooter";
import { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react";
import { ExtendedArtefact } from "@appTypes/ApiTypes";
import { Currency } from "@appTypes/StoreModel";
import BottomFooter from "@components/BottomFooter";
import { useStoreState } from "@hooks/store";
// todo hide from shop after purchase
export default function Shop() {
const [artefacts, setArtefacts] = useState<ExtendedArtefact[]>([]);
const [loading, setLoading] = useState(true);
const [artefacts, setArtefacts] = useState<ExtendedArtefact[]>([]);
const [hiddenArtefactIds, setHiddenArtefactIds] = useState<number[]>([]);
const [loading, setLoading] = useState(true);
const user = useStoreState((state) => state.user);
// 3. Fetch from your API route and map data to fit your existing fields
useEffect(() => {
async function fetchArtefacts() {
setLoading(true);
try {
// todo only show only non-required artefacts
const res = await fetch("/api/artefacts");
const data = await res.json();
// 3. Fetch from your API route and map data to fit your existing fields
useEffect(() => {
async function fetchArtefacts() {
setLoading(true);
try {
// todo only show only non-required artefacts
const res = await fetch("/api/artefacts");
const data = await res.json();
const transformed = data.artefact.map((a: any) => ({
id: a.id,
name: a.name,
description: a.description,
location: a.warehouseArea, // your database
earthquakeID: a.earthquakeId?.toString() ?? "",
observatory: a.type ?? "", // if you want to display type
dateReleased: a.createdAt ? new Date(a.createdAt).toLocaleDateString() : "",
image: "/artefactImages/" + (a.imageName || "NoImageFound.PNG"),
price: a.shopPrice ?? 100, // fallback price if not in DB
}));
setArtefacts(transformed);
} catch (e) {
// Optionally handle error
console.error("Failed to fetch artefacts", e);
} finally {
setLoading(false);
}
}
fetchArtefacts();
}, []);
const transformed = data.artefact.map((a: any) => ({
id: a.id,
name: a.name,
description: a.description,
location: a.warehouseArea, // your database
earthquakeID: a.earthquakeId?.toString() ?? "",
observatory: a.type ?? "", // if you want to display type
dateReleased: a.createdAt ? new Date(a.createdAt).toLocaleDateString() : "",
image: "/artefactImages/" + (a.imageName || "NoImageFound.PNG"),
price: a.shopPrice ?? 100, // fallback price if not in DB
}));
setArtefacts(transformed);
} catch (e) {
// Optionally handle error
console.error("Failed to fetch artefacts", e);
} finally {
setLoading(false);
}
}
fetchArtefacts();
}, []);
const [currentPage, setCurrentPage] = useState(1);
const [selectedArtefact, setSelectedArtefact] = useState<Artefact | null>(null);
@ -163,10 +165,15 @@ export default function Shop() {
function handlePay() {
setError("");
if (!validateEmail(email)) {
setError("Please enter a valid email ending");
if (email || user?.email) {
if (!validateEmail(email)) {
setError("Please enter a valid email ending");
return;
}
} else {
return;
}
if (!validateCardNumber(cardNumber)) {
setError("Card number must be 12-19 digits.");
return;
@ -179,10 +186,13 @@ export default function Shop() {
setError("CVC must be 3 or 4 digits.");
return;
}
setHiddenArtefactIds((ids) => [...ids, artefact.id]);
// todo create receiving api route
// todo handle sending to api route
// todo only ask for email if the user is not signed in
// todo (optional) add create account button to auto-fill email in sign-up modal
// todo only ask for email if the user is not signed in
// todo (optional) add create account button to auto-fill email in sign-up modal
const genOrder = () => "#" + Math.random().toString(36).substring(2, 10).toUpperCase();
setOrderNumber(genOrder());
onClose();
@ -205,15 +215,17 @@ export default function Shop() {
handlePay();
}}
>
<input
className="w-full mb-2 px-3 py-2 border rounded"
placeholder="Email Address"
value={email}
onChange={(e) => setEmail(e.target.value)}
type="email"
required
autoFocus
/>
{!user ? (
<input
className="w-full mb-2 px-3 py-2 border rounded"
placeholder="Email Address"
value={email}
onChange={(e) => setEmail(e.target.value)}
type="email"
required
autoFocus
/>
) : null}
<input
className="w-full mb-2 px-3 py-2 border rounded"
placeholder="Cardholder Name"
@ -305,13 +317,15 @@ export default function Shop() {
Artefact Shop
</h1>
<p className="text-lg md:text-xl text-center text-white mb-10 drop-shadow-md max-w-2xl">
Discover extraordinary artefacts and collectibles from major seismic events from around the world - Previously studied by our scientists, now
available for purchase.
Discover extraordinary artefacts and collectibles from major seismic events from around the world - Previously studied
by our scientists, now available for purchase.
</p>
<div className="w-full max-w-7xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 p-2">
{currentArtefacts.map((artefact) => (
<ArtefactCard key={artefact.id} artefact={artefact} />
))}
{currentArtefacts
.filter((x) => !hiddenArtefactIds.includes(x.id))
.map((artefact) => (
<ArtefactCard key={artefact.id} artefact={artefact} />
))}
</div>
<footer className="mt-10 bg-white bg-opacity-90 border-neutral-300 py-3 text-center flex justify-center items-center w-100 max-w-7xl rounded-lg">
<button
@ -348,10 +362,11 @@ export default function Shop() {
{showThankYouModal && orderNumber && (
<ThankYouModal orderNumber={orderNumber} onClose={() => setShowThankYouModal(false)} />
)}
{!selectedArtefact && !showPaymentModal && !showThankYouModal && (
<div className="relative z-50">
<BottomFooter />
</div>
)}
</div>
);
{!selectedArtefact && !showPaymentModal && !showThankYouModal && (
<div className="relative z-50">
<BottomFooter />
</div>
)}
</div>
);
}