Lint TS files

.github/workflows/build-and-test.yaml

@@ -19,9 +19,12 @@ jobs:
         with:
           node-version: 18
 
-      - name: Check Formatting
+      - name: Check Formatting (Go)
         run: make format-check
 
+      - name: Check Formatting (TypeScript)
+        run: cd pkg/web && npm run lint
+
       - name: Build Binary
         run: make build
 

pkg/web/postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};

pkg/web/src/app.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

pkg/web/src/app.html

@@ -12,10 +12,10 @@
 </html>
 <style>
 	body {
-		font-family: Inter,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
+		font-family: Inter, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
 		font-size: 16px;
 		line-height: 1.4;
-		letter-spacing: -.015em;
+		letter-spacing: -0.015em;
 		text-rendering: optimizeLegibility;
 		width: 100%;
 		-webkit-font-smoothing: antialiased;
@@ -24,4 +24,4 @@
 		-webkit-tap-highlight-color: transparent;
 		overflow-y: scroll;
 	}
-</style>
+</style>

pkg/web/src/hooks.client.ts

@@ -1,40 +1,39 @@
-import {getWebInstrumentations, initializeFaro} from '@grafana/faro-web-sdk';
-import {TracingInstrumentation} from '@grafana/faro-web-tracing';
-import {PUBLIC_BACKEND_ENDPOINT} from '$env/static/public'
+import { getWebInstrumentations, initializeFaro } from '@grafana/faro-web-sdk';
+import { TracingInstrumentation } from '@grafana/faro-web-tracing';
+import { PUBLIC_BACKEND_ENDPOINT } from '$env/static/public';
 
 function setupFaro() {
-    fetch(`${PUBLIC_BACKEND_ENDPOINT}api/config`).
-    then(data => data.json()).
-    then(config => {
-        const url = config.faro_url;
-        if (!url) {
-            console.warn("Grafana faro is not configured.")
-            return
-        }
+	fetch(`${PUBLIC_BACKEND_ENDPOINT}api/config`)
+		.then((data) => data.json())
+		.then((config) => {
+			const url = config.faro_url;
+			if (!url) {
+				console.warn('Grafana faro is not configured.');
+				return;
+			}
 
-        console.log(`Initializing Grafana Faro to ${url}`)
-        initializeFaro({
-            url,
-            app: {
-                name: 'QuickPizza',
-                version: '1.0.0',
-                environment: 'production'
-            },
-            instrumentations: [
-                // Mandatory, overwriting the instrumentations array would cause the default instrumentations to be omitted
-                ...getWebInstrumentations(),
+			console.log(`Initializing Grafana Faro to ${url}`);
+			initializeFaro({
+				url,
+				app: {
+					name: 'QuickPizza',
+					version: '1.0.0',
+					environment: 'production'
+				},
+				instrumentations: [
+					// Mandatory, overwriting the instrumentations array would cause the default instrumentations to be omitted
+					...getWebInstrumentations(),
 
-                // Initialization of the tracing package.
-                // This packages is optional because it increases the bundle size noticeably. Only add it if you want tracing data.
-                new TracingInstrumentation(),
-            ],
-        });
-
-    }).
-    catch(e => {
-        console.error("Cannot read config from backend")
-        console.error(e.message)
-    });
+					// Initialization of the tracing package.
+					// This packages is optional because it increases the bundle size noticeably. Only add it if you want tracing data.
+					new TracingInstrumentation()
+				]
+			});
+		})
+		.catch((e) => {
+			console.error('Cannot read config from backend');
+			console.error(e.message);
+		});
 }
 
 setupFaro();

pkg/web/src/lib/ToggleConfetti.svelte

@@ -1,47 +1,44 @@
 <script>
-    import { tick } from 'svelte'
-  
-    export let toggleOnce = false
-    export let relative = true
-  
-    let active = false
-  
-    async function click() {
-      if (toggleOnce) {
-        active = !active
-        return
-      }
-  
-      active = false
-      await tick();
-      active = true
-    }
-  </script>
-
-
-
-  <span on:click={click} on:keypress={click} class:relative>
-    <slot name="label" />
-    {#if active}
-      <div class="confetti">
-        <slot />
-      </div>
-    {/if}
-  </span>
-
-  <style>
-    .relative {
-      position: relative;
-    }
-  
-    .relative .confetti {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-    }
-  
-    .confetti {
-      pointer-events: none;
-    }
-  </style>
-
+	import { tick } from 'svelte';
+
+	export let toggleOnce = false;
+	export let relative = true;
+
+	let active = false;
+
+	async function click() {
+		if (toggleOnce) {
+			active = !active;
+			return;
+		}
+
+		active = false;
+		await tick();
+		active = true;
+	}
+</script>
+
+<span on:click={click} on:keypress={click} class:relative>
+	<slot name="label" />
+	{#if active}
+		<div class="confetti">
+			<slot />
+		</div>
+	{/if}
+</span>
+
+<style>
+	.relative {
+		position: relative;
+	}
+
+	.relative .confetti {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+	}
+
+	.confetti {
+		pointer-events: none;
+	}
+</style>

pkg/web/src/lib/stores.ts

@@ -1,4 +1,4 @@
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
 
 export const wsVisitorIDStore = writable(0);
 export const userTokenStore = writable('');

pkg/web/src/routes/+layout.svelte

@@ -1,9 +1,9 @@
 <script>
-    import "../app.css";
+	import '../app.css';
 </script>
-
- <div class="flex justify-center">
-<div class="w-[295px] sm:w-[600px] md:w-[735px] lg:w-[900px] xl:w-[1200px] mt-6">
-    <slot />
+
+<div class="flex justify-center">
+	<div class="w-[295px] sm:w-[600px] md:w-[735px] lg:w-[900px] xl:w-[1200px] mt-6">
+		<slot />
+	</div>
 </div>
-</div>

pkg/web/src/routes/+layout.ts

@@ -1 +1 @@
-export const prerender = true
+export const prerender = true;

pkg/web/src/routes/+page.svelte

@@ -14,17 +14,17 @@
 		minNumberOfToppings: 2
 	};
 
-    // A randomly-generated integer used to track identity of WebSocket connections.
-    // Completely unrelated to users, user tokens, authentication, etc.
+	// A randomly-generated integer used to track identity of WebSocket connections.
+	// Completely unrelated to users, user tokens, authentication, etc.
 	var wsVisitorID = 0;
 
-    // A randomly-generated user token that can be used to authenticate against the QP API.
-    // Since this token is not actually stored in the database, the returned user will always
-    // be user with ID 1 (default). This is implemented like so in order to not break the
-    // way QP was set up originally (i.e. one can open the website and start creating pizzas
-    // immediately, without logging in anywhere). So technically, the user is already logged
-    // in the moment they open the page.
-    var userToken = '';
+	// A randomly-generated user token that can be used to authenticate against the QP API.
+	// Since this token is not actually stored in the database, the returned user will always
+	// be user with ID 1 (default). This is implemented like so in order to not break the
+	// way QP was set up originally (i.e. one can open the website and start creating pizzas
+	// immediately, without logging in anywhere). So technically, the user is already logged
+	// in the moment they open the page.
+	var userToken = '';
 
 	var render = false;
 	var quote = '';
@@ -42,38 +42,41 @@
 		restrictions = defaultRestrictions;
 	}
 
-    function randomToken(length) {
-        let result = '';
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        const charactersLength = characters.length;
-        let counter = 0;
-        while (counter < length) {
-            result += characters.charAt(Math.floor(Math.random() * charactersLength));
-            counter += 1;
-        }
-        return result;
-    }
-
+	function randomToken(length) {
+		let result = '';
+		const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+		const charactersLength = characters.length;
+		let counter = 0;
+		while (counter < length) {
+			result += characters.charAt(Math.floor(Math.random() * charactersLength));
+			counter += 1;
+		}
+		return result;
+	}
 
 	let socket: WebSocket;
 	onMount(async () => {
-		wsVisitorIDStore.subscribe((value) => wsVisitorID = value);
+		wsVisitorIDStore.subscribe((value) => (wsVisitorID = value));
 		if (wsVisitorID === 0) {
-            wsVisitorIDStore.set(Math.floor(100000 + Math.random() * 900000));
-        }
-        userTokenStore.subscribe((value) => userToken = value);
-        if (userToken === '') {
-            userTokenStore.set(randomToken(16));
-        }
+			wsVisitorIDStore.set(Math.floor(100000 + Math.random() * 900000));
+		}
+		userTokenStore.subscribe((value) => (userToken = value));
+		if (userToken === '') {
+			userTokenStore.set(randomToken(16));
+		}
 		const res = await fetch(`${PUBLIC_BACKEND_ENDPOINT}api/quotes`);
 		const json = await res.json();
 		quote = json.quotes[Math.floor(Math.random() * json.quotes.length)];
 
 		let wsUrl = `${PUBLIC_BACKEND_WS_ENDPOINT}`;
-		if (wsUrl === "") {
+		if (wsUrl === '') {
 			// Unlike with fetch, which understands "/" as "the window's host", for WS we need to build the URI by hand.
 			const l = window.location;
-			wsUrl = ((l.protocol === "https:") ? "wss://" : "ws://") + l.hostname + (((l.port != 80) && (l.port != 443)) ? ":" + l.port : "") + "/ws";
+			wsUrl =
+				(l.protocol === 'https:' ? 'wss://' : 'ws://') +
+				l.hostname +
+				(l.port != 80 && l.port != 443 ? ':' + l.port : '') +
+				'/ws';
 		}
 		socket = new WebSocket(wsUrl);
 		socket.addEventListener('message', function (event) {
@@ -93,17 +96,17 @@
 			method: 'POST',
 			body: JSON.stringify(restrictions),
 			headers: {
-					'Authorization': 'Token ' + userToken
+				Authorization: 'Token ' + userToken
 			}
 		});
 		const json = await res.json();
 		pizza = json;
 		if (socket.readyState <= 1) {
 			socket.send(
 				JSON.stringify({
-                    // FIXME: The 'user' key is present in order not to break
-                    // existing examples using QP WS. Remove it at some point.
-                    // It has no connection to the user auth itself.
+					// FIXME: The 'user' key is present in order not to break
+					// existing examples using QP WS. Remove it at some point.
+					// It has no connection to the user auth itself.
 					user: wsVisitorID,
 					ws_visitor_id: wsVisitorID,
 					msg: 'new_pizza'
@@ -113,10 +116,9 @@
 	}
 
 	async function getTools() {
-		const res = await fetch(`${PUBLIC_BACKEND_ENDPOINT}api/tools`,
-		{
+		const res = await fetch(`${PUBLIC_BACKEND_ENDPOINT}api/tools`, {
 			headers: {
-				'Authorization': 'Token ' + userToken
+				Authorization: 'Token ' + userToken
 			}
 		});
 		const json = await res.json();
@@ -263,8 +265,7 @@
 			<p />
 			{#if pizzaCount > 0 && !pizza['pizza']}
 				<div class="mt-4">
-					<span
-						class="bg-purple-100 text-purple-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded"
+					<span class="bg-purple-100 text-purple-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded"
 						>What are you waiting for? We have already given {pizzaCount} recommendations since you opened
 						the site!</span
 					>

pkg/web/src/routes/admin/+layout.svelte

@@ -1 +1 @@
-<slot/>
+<slot />