Fix logo

backend/src/extensions/users-permissions/strapi-server.js

@@ -6,12 +6,10 @@ const {
   validateCallbackBody,
   validateRegisterBody,
   validateSendEmailConfirmationBody,
-} = require("../../../node_modules/@strapi/plugin-users-permissions/server/controllers/validation/auth");
+} = require("@strapi/plugin-users-permissions/server/controllers/validation/auth");
 
 const utils = require("@strapi/utils");
-const {
-  getService,
-} = require("../../../node_modules/@strapi/plugin-users-permissions/server/utils");
+const { getService } = require("@strapi/plugin-users-permissions/server/utils");
 
 const { getAbsoluteAdminUrl, getAbsoluteServerUrl, sanitize } = utils;
 const { ApplicationError, ValidationError } = utils.errors;

frontend/src/lib/stores/auth.ts

@@ -0,0 +1,17 @@
+import { getContext, hasContext, setContext } from 'svelte';
+import { readable, writable } from 'svelte/store';
+
+export const useSharedStore = <T, A>(name: string, fn: (value?: A) => T, defaultValue?: A) => {
+	if (hasContext(name)) {
+		return getContext<T>(name);
+	}
+	const _value = fn(defaultValue);
+	setContext(name, _value);
+	return _value;
+};
+
+export const useWritable = <T>(name: string, value: T) => useSharedStore(name, writable, value);
+
+export const useReadable = <T>(name: string, value: T) => useSharedStore(name, readable, value);
+
+export const useAuth = () => useWritable('auth', null);

frontend/src/routes/+layout.svelte

@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import '../global.sass';
-	import * as cookie from 'cookie';
+	import logo from '$lib/assets/transparent.svg';
 
 	const socialLinks = [
 		{ name: 'Facebook', url: 'https://www.facebook.com/' },
@@ -18,7 +18,7 @@
 
 <header>
 	<a class="title" href="/">
-		<img src="transparent.svg" alt="logo" />
+		<img src={logo} alt="logo" />
 		<h1>BidWave</h1>
 	</a>
 	{#if $page.url.pathname === '/'}

frontend/src/routes/home/[id=int]/+page.server.ts

@@ -2,17 +2,17 @@ import { error } from '@sveltejs/kit';
 import type { Product } from '../+layout.server';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ params, parent }) => {
+export const load: PageServerLoad = async ({ params, parent, cookies }) => {
 	const id = Number.parseInt(params.id);
 	const parentData: { products: Product[] } = await parent();
 
-	const filtered = parentData.products.filter((e) => e.id === id);
+	const filtered: Product[] = parentData.products.filter((e) => e.id === id);
 
 	if (filtered.length === 0) {
 		throw error(500, { message: 'The product does not exist!' });
 	} else {
 		const data = filtered[0];
 
-		return data;
+		return { product: data, token: cookies.get('sessionjwt') };
 	}
 };

frontend/src/routes/home/[id=int]/+page.svelte

@@ -1,8 +1,22 @@
 <script lang="ts">
+	import { preloadData } from '$app/navigation';
+	import Button from '$lib/components/Button.svelte';
+	import { CMS_URL } from '$lib/constants.js';
 	import moment, { type Duration } from 'moment';
+	import socketIOClient from 'socket.io-client';
 	export let data;
 
-	const time = moment.parseZone(data.auctionEnd, moment.ISO_8601);
+	let product = data.product;
+
+	let serverTime: any;
+
+	const socket = socketIOClient(CMS_URL, { query: { token: data.token } });
+
+	socket.emit('loadBids', { id: product.id }).on('loadBids', (data) => {
+		console.log(data);
+	});
+
+	const time = moment.parseZone(product.auctionEnd, moment.ISO_8601);
 	const now = moment();
 	let remaining = moment.duration(time.diff(now));
 
@@ -16,18 +30,26 @@
 		const seconds = remaining.seconds();
 	};
 
+	const makeBid = () => {
+		socket.emit('makeBid', {
+			bidValue: product.bidPrice,
+			product: product.id
+			// user: user.id, TODO:
+		});
+	};
+
 	setInterval(calcTime, 1000);
 </script>
 
 <svelte:head>
-	<title>{data.name} | BidWave</title>
+	<title>{product.name} | BidWave</title>
 </svelte:head>
 
 <section>
-	<h1>{data.name}</h1>
-	<img src={data.image.url} id="img" alt={data.image.alt} />
+	<h1>{product.name}</h1>
+	<img src={product.image.url} id="img" alt={product.image.alt} />
 	<div class="details">
-		<h2 class="price">${data.bidPrice}</h2>
+		<h2 class="price">${product.bidPrice}</h2>
 		<div class="timer">
 			<span>
 				{remaining.days()} days
@@ -40,8 +62,10 @@
 			<span class="__timer-label">sec</span>
 		</div>
 		<h4>Product Details</h4>
-		<span>{data.description}</span>
+		<span>{product.description}</span>
 	</div>
+	<input type="number" />
+	<Button id="bid-btn" text="Make Bid" func={makeBid} />
 </section>
 
 <style lang="sass">