Merge pull request lugvitc#16 from KreativeThinker/main

Error messages and Error Notifications
KreativeThinker · Apr 13, 2024 · 8dcb4a8 · 8dcb4a8
2 parents 7963cd6 + 535184c
commit 8dcb4a8
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 41 deletions.
diff --git a/src/app.html b/src/app.html
@@ -1,15 +1,13 @@
 <!doctype html>
 <html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/logo.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
 
-<head>
-	<meta charset="utf-8" />
-	<link rel="icon" href="%sveltekit.assets%/logo.png" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	%sveltekit.head%
-</head>
-
-<body data-sveltekit-preload-data="hover" class="bg-black text-foreground">
-	<div style="display: contents">%sveltekit.body%</div>
-</body>
-
+	<body data-sveltekit-preload-data="hover" class="bg-black text-foreground">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
 </html>
diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
@@ -45,7 +45,7 @@
 				.select();
 
 			if (error) {
-				console.log('Error casting vote:', error);
+				console.log('Error Casting Vote:', error.message);
 			} else {
 				voted = !voted;
 			}

diff --git a/src/lib/components/NewIdea.svelte b/src/lib/components/NewIdea.svelte
@@ -27,7 +27,7 @@
 			.eq('team', $user.team)
 			.maybeSingle();
 		if (error) {
-			console.log('Error retrieving idea', error.message);
+			console.log('Error Retrieving Idea:', error.message);
 			return;
 		}
 		if (data) {
@@ -57,7 +57,7 @@
 				})
 				.eq('team', $user.team)
 				.select('*');
-			console.log(error?.message);
+			if (error) console.log('Error Updating Ideas', error.message);
 			if (!error) location.replace('/ideas');
 		} else {
 			const { data, error } = await supabase
@@ -71,7 +71,7 @@
 					}
 				])
 				.select();
-			console.log(error?.message);
+			if (error) console.log('Error Creating Ideas:', error.message);
 			if (!error) location.replace('/ideas');
 		}
 	}

diff --git a/src/lib/components/Onboard.svelte b/src/lib/components/Onboard.svelte
@@ -22,7 +22,7 @@
 			}
 		]);
 
-		if (error) return console.error(error);
+		if (error) console.log('Error Joining Team:', error.message);
 
 		if (create) {
 			let team_id = crypto.randomUUID();
@@ -33,13 +33,12 @@
 				}
 			]);
 
-			if (error) return console.error(error);
+			if (error) console.log('Error Creating Team:', error.message);
 
 			await supabase.from('users').update({ team: team_id }).eq('id', $auth_user.id);
 		}
 
 		if (!error) location.replace('/dashboard');
-		else console.log(error);
 	}
 
 	function toggle(e: Event) {

diff --git a/src/lib/supabase.ts b/src/lib/supabase.ts
@@ -1,8 +1,8 @@
-import { createClient } from "@supabase/supabase-js";
+import { createClient } from '@supabase/supabase-js';
 
-const PROJECT_URL = "https://snytdulgbjatdmtotpmk.supabase.co";
+const PROJECT_URL = 'https://snytdulgbjatdmtotpmk.supabase.co';
 const ANON_KEY =
-  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InNueXRkdWxnYmphdGRtdG90cG1rIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDk5NzcwOTksImV4cCI6MjAyNTU1MzA5OX0.gBKmnpJAqnxkPHx9ARvbJLXmorcBwmdIRbkuNduebAM";
+	'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InNueXRkdWxnYmphdGRtdG90cG1rIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDk5NzcwOTksImV4cCI6MjAyNTU1MzA5OX0.gBKmnpJAqnxkPHx9ARvbJLXmorcBwmdIRbkuNduebAM';
 
 const supabase = createClient(PROJECT_URL, ANON_KEY);
 export default supabase;
diff --git a/src/routes/(protected)/dashboard/+page.svelte b/src/routes/(protected)/dashboard/+page.svelte
@@ -35,7 +35,7 @@
 				}, 2000);
 			})
 			.catch((error) => {
-				console.error('Error copying to clipboard:', error);
+				console.log('Error copying to clipboard:', error);
 			});
 	}
 
@@ -50,24 +50,21 @@
 			.update({ id: $user.id, team: null })
 			.eq('id', $user.id);
 		if (error) {
-			console.log('Error abandoning friends:', error);
+			console.log('Error Leaving Team:', error.message);
 		}
 		if (!error) location.replace('/dashboard');
 	}
 	async function joinTeam(e: SubmitEvent) {
 		const formData = new FormData(e.target as HTMLFormElement);
 
 		let team_id = formData.get('team_id') || null;
-		console.log(team_id);
 
 		const { data, error } = await supabase
 			.from('users')
 			.update({ team: team_id })
 			.eq('id', $user.id)
 			.select();
-		if (error) {
-			console.log(error);
-		}
+		if (error) console.log('Error Joining Team:', error.message);
 		if (!error) location.replace('/dashboard');
 	}
 
@@ -80,7 +77,7 @@
 				.single();
 
 			if (error) {
-				console.error('Error fetching teams:', error.message);
+				console.log('Error Fetching Teams:', error.message);
 				return;
 			}
 

diff --git a/src/routes/(protected)/ideas/+page.svelte b/src/routes/(protected)/ideas/+page.svelte
@@ -25,7 +25,7 @@
 			await supabase.from('ideas').select('team').eq('team', $user.team).maybeSingle()
 		).data;
 		if (error) {
-			console.log('Error retrieving data', error);
+			console.log('Error retrieving data:', error);
 		}
 	});
 </script>

diff --git a/src/routes/(protected)/projects/+page.svelte b/src/routes/(protected)/projects/+page.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-	import Section from '$lib/components/Section.svelte';
 	import { onMount } from 'svelte';
 	import supabase from '$lib/supabase';
+	import { user } from '$lib/stores';
+	import Section from '$lib/components/Section.svelte';
 	import Glass from '$lib/components/Glass.svelte';
 	import Tag from '$lib/components/Tag.svelte';
 	import Markdown from '$lib/components/Markdown.svelte';
+	import Input from '$lib/components/Input.svelte';
 
 	interface Label {
 		name: string;
@@ -31,10 +33,12 @@
 	}
 
 	let projects: Project[] = [];
+	let add: boolean = false;
+
 	onMount(async () => {
 		const { data, error } = await supabase.from('projects').select('*');
 		if (error) {
-			console.log('Error retrieving projects', error.message);
+			console.log('Error Retrieving Projects:', error.message);
 			return;
 		}
 		if (data) {
@@ -50,18 +54,39 @@
 	let focused = 0;
 	let viewReadme: boolean = true;
 
+	async function save(e: SubmitEvent) {
+		const formData = new FormData(e.target as HTMLFormElement);
+		let url = formData.get('url') as string;
+		const urlPattern: RegExp = /^https:\/\/github\.com\/([^/]+)\/([^/]+)$/;
+		const match: RegExpMatchArray | null = url.match(urlPattern);
+
+		if (match) {
+			const { data, error } = await supabase.from('project_submissions').insert([
+				{
+					url: url,
+					team: $user.team as string
+				}
+			]);
+
+			if (error) console.log('Error Saving Submission:', error.message);
+			if (!error) add = false;
+		} else {
+			console.log('URL does not match the pattern.');
+		}
+	}
+
 	function toggle(e: Event) {
 		viewReadme = e.target.getAttribute('data-create') == 'false';
 	}
 </script>
 
 {#if view}
 	<Glass
-		class="!fixed left-0 top-0 z-10 flex h-screen w-screen flex-col justify-between overflow-y-scroll rounded-[0] border-[0] {view}"
+		class="!fixed left-0 top-0 z-10 flex h-screen w-screen flex-col justify-between overflow-y-scroll rounded-[0] border-[0]"
 	>
 		<div class="m-auto w-full max-w-3xl">
 			<button
-				class="absolute right-4 top-4 border-0 p-4 text-3xl text-zinc-400 hover:bg-negative hover:text-foreground"
+				class="absolute right-4 top-4 h-16 w-16 border-0 p-4 text-3xl text-zinc-400 hover:bg-negative hover:text-foreground"
 				on:click={() => {
 					$: view = false;
 				}}>X</button
@@ -140,4 +165,49 @@
 			</Glass>
 		{/each}
 	</div>
+	<div class="fixed bottom-0 right-0 z-10 p-5">
+		<button
+			data-primary
+			class="relative z-10 flex h-12 w-12 items-center justify-center overflow-hidden rounded-2xl bg-foreground text-3xl text-background"
+			on:click={() => {
+				add = true;
+			}}
+			>+
+		</button>
+	</div>
 </Section>
+
+{#if add}
+	<Glass
+		class="!fixed left-0 top-0 z-10 flex h-screen w-screen flex-col justify-center overflow-y-scroll rounded-[0] border-[0] align-middle"
+	>
+		<div class="m-auto w-full max-w-3xl">
+			<button
+				class="absolute right-4 top-4 h-16 w-16 border-0 p-4 text-3xl text-zinc-400 hover:bg-negative hover:text-foreground"
+				on:click={() => {
+					$: add = false;
+				}}>X</button
+			>
+		</div>
+		<Glass class="m-auto max-w-3xl -translate-y-1/3">
+			<form class="flex flex-col justify-center" on:submit|preventDefault={save}>
+				<h3 class="mb-10 text-center font-bold text-foreground">Add Project</h3>
+				<div class="flex flex-col space-y-8">
+					<Input
+						title="Github Link"
+						class="w-full"
+						type="url"
+						name="url"
+						pattern="^https://github\.com(?:/\S*)?$"
+						placeholder="https://github.com/<userame>/<repository>"
+					/>
+					<input
+						type="submit"
+						class="cursor-pointer rounded-2xl border-[1px] border-foreground bg-foreground px-12 py-3 text-center text-background"
+						value="Submit Project"
+					/>
+				</div>
+			</form>
+		</Glass>
+	</Glass>
+{/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,22 +1,56 @@
-<script>
+<script lang="ts">
 	import '../app.css';
 	import { base } from '$app/paths';
 	import Navbar from '$lib/components/Navbar.svelte';
 	import { onMount } from 'svelte';
+	import Glass from '$lib/components/Glass.svelte';
+	import { slide } from 'svelte/transition';
+
+	let showError: boolean = false;
+	let errorMessage: string;
+
+	async function handleError(event: ErrorEvent) {
+		const error = event.error;
+		errorMessage = error ? error.message : 'Unknown Error: Find it and Fix it!';
+		showError = true;
+		console.log(errorMessage);
+	}
 
-	// onerror = (e) => {
-	// 	console.log('error', 'Error: ' + e);
-	// };
 	onMount(() => {
-		onunhandledrejection = (e) => {
-			console.log(e.reason.message);
+		console.log = (e) => {
+			errorMessage = e;
+			showError = true;
+			setTimeout(() => {
+				showError = false;
+			}, 2000);
+		};
+		console.error = (e) => {
+			errorMessage = e;
+			showError = true;
+			setTimeout(() => {
+				showError = false;
+			}, 2000);
 		};
 	});
 </script>
 
 <svelte:head>
 	<link rel="stylesheet" href="{base}/assets/robit/font.css" />
 </svelte:head>
+<svelte:window
+	on:error={() => {
+		handleError;
+	}}
+/>
 
 <Navbar></Navbar>
 <slot />
+
+{#if showError}
+	<div
+		class="fixed right-5 top-5 z-[1000] mx-5 w-fit rounded-3xl bg-negative p-4 text-background md:w-72"
+		transition:slide
+	>
+		<p class="text-sm text-background">{errorMessage}</p>
+	</div>
+{/if}
diff --git a/src/routes/leaderboard/+page.svelte b/src/routes/leaderboard/+page.svelte
@@ -16,15 +16,15 @@
 	async function loadTeams() {
 		// loading = true;
 		const { data, error } = await supabase.from('leaderboard').select('name, points');
-		if (error) console.log(error);
+		if (error) console.log('Error Fetching Teams:', error.message);
 		if (data.length) leaderboard = data;
 		loading = false;
 	}
 
 	async function loadIdeas() {
 		loading = true;
 		const { data, error } = await supabase.from('ideas').select('title, votes, url');
-		if (error) console.log(error);
+		if (error) console.log('Error Fetching Ideas:', error.message);
 		if (data.length) leaderboard = data;
 		loading = false;
 	}