fix(web): dates in the /profiles endpoint

beat-forge · Jan 29, 2024 · c8e2377 · c8e2377
1 parent 527130b
commit c8e2377
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 29 deletions.
diff --git a/apps/web/src/lib/components/ModListItem.svelte b/apps/web/src/lib/components/ModListItem.svelte
@@ -19,9 +19,13 @@
 	export let updatedAt: number
 	export let icon: string;
 
+    $: {
+        console.log(updatedAt)
+    }
+
     let updatedAtProper: string;
     try {
-        updatedAtProper = Sugar.Date.relative(new Date(updatedAt * 1000)).toString();
+        updatedAtProper = Sugar.Date.relative(new Date(updatedAt)).toString();
     } catch (e) {
         updatedAtProper = Sugar.Date.relative(new Date(Date.parse(updatedAt * 1000))).toString();
     }

diff --git a/apps/web/src/routes/discover/+page.svelte b/apps/web/src/routes/discover/+page.svelte
@@ -311,9 +311,10 @@
 					description={mod.description}
 					category={mod.category}
 					downloads={mod.stats.downloads}
-					updatedAt={mod.updatedAt}
+					updatedAt={mod.updatedAt * 1000} 
 					icon={mod.icon}
 				/>
+				<!-- Date is * 1000 due to meilisearch using a diffrent date format - niko -->
 			{/each}
 		{:else}
 			<p class="text-center text-primary-300">No mods found</p>

diff --git a/apps/web/src/routes/profile/[id]/+page.svelte b/apps/web/src/routes/profile/[id]/+page.svelte
@@ -3,10 +3,17 @@
 	// @ts-nocheck
 	import type { PageData } from './$types';
 	export let data: PageData;
-    export let userData = data.body.data;
+	export let userData = data.body.data;
 	import Sugar from 'sugar';
-    import { CalendarIcon, AtSymbolIcon } from 'ui/icons';
+	import { CalendarIcon, AtSymbolIcon } from 'ui/icons';
 	import ModListItem from '$lib/components/ModListItem.svelte';
+	import { getContextClient, gql, queryStore } from '@urql/svelte';
+	import { user } from '$lib/stores/user';
+
+	let sugarDate: string;
+	$: {
+		sugarDate = Sugar.Date.relative(new Date(Date.parse(userData.createdAt)));
+	}
 </script>
 
 <div class="h-full w-full">
@@ -29,27 +36,40 @@
 			<div class="flex -mt-4 p-4 pb-8 bg-primary-850 rounded-b-md">
 				<div class="sm:ml-12 overflow-hidden">
 					<div class="flex">
-						<h1 class="text-4xl mt-2 font-black leading-[1.25] tracking-wide">{userData.displayName ? userData.displayName : userData.username}</h1>
+						<h1 class="text-4xl mt-2 font-black leading-[1.25] tracking-wide">
+							{userData.displayName ? userData.displayName : userData.username}
+						</h1>
 					</div>
-                    <p class="text-white-100 text-sm font-semibold py-3 opacity-70 max-w-[68ch]">
+					<p class="text-white-100 text-sm font-semibold py-3 opacity-70 max-w-[68ch]">
 						{userData.bio}
 					</p>
 					<div class="flex mt-5 gap-4 overflow-x-auto flex-wrap">
-                        <Pill label={`${userData.username}`}>
-                            <AtSymbolIcon customClasses="w-5 h-5" />
-                        </Pill>
-                        <Pill label={`Joined ${Sugar.Date.relative(new Date(userData.createdAt))}`}>
-                            <CalendarIcon customClasses="w-5 h-5" />
-                        </Pill>
+						<Pill label={`${userData.username}`}>
+							<AtSymbolIcon customClasses="w-5 h-5" />
+						</Pill>
+						<Pill label={`Joined ${sugarDate ?? ""}`}>
+							<CalendarIcon customClasses="w-5 h-5" />
+						</Pill>
 					</div>
 				</div>
 			</div>
-				
+
 			<div class="sm:p-8 bg-primary-850 rounded-md sm:pl-16 px-3 py-4 w-full">
-				<h2 class="text-white-100 text-lg font-bold mb-4">Mods by {userData.displayName ? userData.displayName : userData.username}</h2>
+				<h2 class="text-white-100 text-lg font-bold mb-4">
+					Mods by {userData.displayName ? userData.displayName : userData.username}
+				</h2>
 				<div class="overflow-hidden rounded-lg">
 					{#each userData.mods as mod}
-						<ModListItem name={mod.name} slug={mod.slug} author={mod.author.username} description={mod.description} category={mod.category.name} downloads={mod.stats.downloads} updatedAt={mod.updatedAt} icon={mod.icon} />
+						<ModListItem
+							name={mod.name}
+							slug={mod.slug}
+							author={mod.author.username}
+							description={mod.description}
+							category={mod.category.name}
+							downloads={mod.stats.downloads}
+							updatedAt={Date.parse(mod.updatedAt)}
+							icon={mod.icon}
+						/>
 					{/each}
 				</div>
 				<div class="mt-4 font-black text-xs text-primary-300">
@@ -58,4 +78,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</div>
diff --git a/apps/web/src/routes/profile/[id]/+page.ts b/apps/web/src/routes/profile/[id]/+page.ts
@@ -1,6 +1,6 @@
 import type { PageLoad } from './$types';
 
-export const load = (async ({ params, fetch }) => {
+export const load = (async ({ params }) => {
 	const id = params.id;
 	try {
 		const response = await fetch(`${import.meta.env.API_URL}/graphql`, {
@@ -10,7 +10,7 @@ export const load = (async ({ params, fetch }) => {
 			},
 			body: JSON.stringify({
 				query: `
-                    query($user: Uuid!, $auth: String) {
+                    query($user: UUID!, $auth: String) {
                         userById(id: $user, auth: $auth) {
                             username
                             displayName
@@ -60,12 +60,17 @@ export const load = (async ({ params, fetch }) => {
 				data: data.data.userById
 			}
 		};
-	} catch (error) {
+	} catch (error: any) {
+        console.log(error);
+
 		return {
 			status: 500,
 			body: {
 				error: error.message
 			}
 		};
 	}
+    // return {
+    //     id: id
+    // }
 }) satisfies PageLoad;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml