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

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

@ -1,17 +1,19 @@
"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 [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(() => {
@ -163,10 +165,15 @@ export default function Shop() {
function handlePay() {
setError("");
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,6 +186,9 @@ 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
@ -205,6 +215,7 @@ export default function Shop() {
handlePay();
}}
>
{!user ? (
<input
className="w-full mb-2 px-3 py-2 border rounded"
placeholder="Email Address"
@ -214,6 +225,7 @@ export default function Shop() {
required
autoFocus
/>
) : null}
<input
className="w-full mb-2 px-3 py-2 border rounded"
placeholder="Cardholder Name"
@ -305,11 +317,13 @@ 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) => (
{currentArtefacts
.filter((x) => !hiddenArtefactIds.includes(x.id))
.map((artefact) => (
<ArtefactCard key={artefact.id} artefact={artefact} />
))}
</div>
@ -354,4 +368,5 @@ export default function Shop() {
</div>
)}
</div>
);
);
}