Implement win message and checkout to payment

dhzdhd · Nov 4, 2023 · e1feaba · e1feaba
1 parent 87b3077
commit e1feaba
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 40 deletions.
diff --git a/frontend/src/routes/auth/+page.server.ts b/frontend/src/routes/auth/+page.server.ts
@@ -28,7 +28,7 @@ export const actions = {
 
 			cookies.set('sessionjwt', data.jwt);
 			cookies.set('userid', data.user.id);
-			return { success: true };
+			return { success: true, id: data.user.id };
 		} catch (err) {
 			console.log(err);
 			return fail(500, { message: 'Failed to login!' });
@@ -58,7 +58,7 @@ export const actions = {
 
 			cookies.set('sessionjwt', data.jwt);
 			cookies.set('userid', data.user.id);
-			return { success: true };
+			return { success: true, id: data.user.id };
 		} catch (err) {
 			console.log(err);
 			return fail(500, { message: 'Failed to register!' });

diff --git a/frontend/src/routes/auth/+page.svelte b/frontend/src/routes/auth/+page.svelte
@@ -1,14 +1,26 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
+	import { applyAction, enhance } from '$app/forms';
 	import { page } from '$app/stores';
 	import { fade, fly } from 'svelte/transition';
+	import type { ActionData } from './$types';
+	import { writable } from 'svelte/store';
+	import { useWritable } from '$lib/stores/auth';
+	import { browser } from '$app/environment';
 
 	let isSignIn = true;
 	let email = '';
 	let password = '';
 	let name = '';
 	let showPopup = false;
 
+	export let form: ActionData;
+
+	const updateUser = () => {
+		if (browser) {
+			window.localStorage.setItem('user', form?.id);
+		}
+	};
+
 	$: if ($page.status !== 200) {
 		showPopup = true;
 
@@ -26,7 +38,17 @@
 
 <div in:fly|local={{ y: 200 }} class="container" id="container">
 	<div class="form-container {isSignIn ? 'sign-in-container' : 'sign-up-container'}">
-		<form method="POST" action={isSignIn ? '?/login' : '?/register'} use:enhance>
+		<form
+			method="POST"
+			action={isSignIn ? '?/login' : '?/register'}
+			use:enhance={() => {
+				return async ({ result, update }) => {
+					// await applyAction(result);
+					update();
+					updateUser();
+				};
+			}}
+		>
 			<h1>{isSignIn ? 'Sign In' : 'Create Account'}</h1>
 			{#if !isSignIn}
 				<input bind:value={name} name="name" type="text" placeholder="Name" />

diff --git a/frontend/src/routes/home/+layout.server.ts b/frontend/src/routes/home/+layout.server.ts
@@ -48,28 +48,30 @@ export const load: LayoutServerLoad = async ({ cookies }) => {
 	}
 
 	return {
-		products: productJson.data.map((e: any) => {
-			const rawImage = e['attributes']['image']['data'][0]['attributes'];
+		products: productJson.data
+			.map((e: any) => {
+				const rawImage = e['attributes']['image']['data'][0]['attributes'];
 
-			return {
-				id: e['id'],
-				name: e['attributes']['name'],
-				auctionEnd: e['attributes']['auction_end'],
-				auctionStart: e['attributes']['auction_start'],
-				price: e['attributes']['price'],
-				bidPrice: e['attributes']['bid_price'],
-				description: e['attributes']['description'],
-				available: e['attributes']['available'],
-				category: e['attributes']['category']['data']['attributes']['name'],
-				image: {
-					alt: rawImage['name'],
-					width: rawImage['width'],
-					height: rawImage['height'],
-					mime: rawImage['mime'],
-					url: `${url}${rawImage['url']}`
-				} satisfies Image
-			} satisfies Product;
-		}),
+				return {
+					id: e['id'],
+					name: e['attributes']['name'],
+					auctionEnd: e['attributes']['auction_end'],
+					auctionStart: e['attributes']['auction_start'],
+					price: e['attributes']['price'],
+					bidPrice: e['attributes']['bid_price'],
+					description: e['attributes']['description'],
+					available: e['attributes']['available'],
+					category: e['attributes']['category']['data']['attributes']['name'],
+					image: {
+						alt: rawImage['name'],
+						width: rawImage['width'],
+						height: rawImage['height'],
+						mime: rawImage['mime'],
+						url: `${url}${rawImage['url']}`
+					} satisfies Image
+				} satisfies Product;
+			})
+			.filter((e: Product) => e.available),
 		categories: categoryJson.data.map((e: any) => {
 			return e['attributes']['name'];
 		})

diff --git a/frontend/src/routes/home/[id=int]/+page.svelte b/frontend/src/routes/home/[id=int]/+page.svelte
@@ -4,7 +4,9 @@
 	import moment from 'moment';
 	import socketIOClient, { Socket } from 'socket.io-client';
 	import { onMount } from 'svelte';
-	import type { Product } from '../+layout.server.js';
+	import type { Product } from '../+layout.server';
+	import { browser } from '$app/environment';
+	import { goto } from '$app/navigation';
 	export let data;
 
 	let product = data.product;
@@ -30,7 +32,6 @@
 		remaining = moment.duration(time.diff(now));
 
 		if (now.isSameOrAfter(time)) {
-			socket.disconnect();
 			product.available = false;
 		}
 	};
@@ -55,8 +56,10 @@
 		});
 
 		socket.on('loadBids', (data: any) => {
-			isWinner = Number(data.user) === 0;
-			// TODO: Get user id from writable made in login page
+			if (browser) {
+				const user = window.localStorage.getItem('user');
+				isWinner = Number(data.user) === Number(user);
+			}
 		});
 	});
 
@@ -72,17 +75,19 @@
 	<img src={product.image.url} id="img" alt={product.image.alt} />
 	<div class="details">
 		<h2 class="price">${product.bidPrice}</h2>
-		<div class="timer">
-			<span>
-				{remaining.days()} days
-			</span>
-			<span class="__timer" id="hours">{remaining.hours()}</span>
-			<span class="__timer-label">hr</span>
-			<span class="__timer" id="minutes">{remaining.minutes()}</span>
-			<span class="__timer-label">min</span>
-			<span class="__timer" id="seconds">{remaining.seconds()}</span>
-			<span class="__timer-label">sec</span>
-		</div>
+		{#if product.available}
+			<div class="timer">
+				<span>
+					{remaining.days()} days
+				</span>
+				<span class="__timer" id="hours">{remaining.hours()}</span>
+				<span class="__timer-label">hr</span>
+				<span class="__timer" id="minutes">{remaining.minutes()}</span>
+				<span class="__timer-label">min</span>
+				<span class="__timer" id="seconds">{remaining.seconds()}</span>
+				<span class="__timer-label">sec</span>
+			</div>
+		{/if}
 		<h4>Product Details</h4>
 		<span>{product.description}</span>
 	</div>
@@ -92,6 +97,15 @@
 	{#if !product.available}
 		<h1>Auction ended!</h1>
 	{/if}
+
+	{#if isWinner && !product.available}
+		<h1>You won the auction!</h1>
+		<Button
+			id="payment-btn"
+			text="Proceed to payment"
+			func={() => goto(`/home/payment?id=${product.id}`)}
+		/>
+	{/if}
 </section>
 
 <style lang="sass">