fix: add better eslint config and change event schema text (#81)

Co-authored-by: Anton Lilleby <[email protected]>
capraconsulting · Jul 22, 2024 · e45d2cb · e45d2cb
1 parent d348a6e
commit e45d2cb
Show file tree

Hide file tree

Showing 20 changed files with 929 additions and 941 deletions.
diff --git a/README.md b/README.md
@@ -118,7 +118,7 @@ vercel deploy
 
 ### Lint
 
-SvelteKit templaten [sanity-template-sveltekit-clean](https://github.com/sanity-io/sanity-template-sveltekit-clean) hadde en broken eslint konfigurasjon. Har derfor prøvd å oppgradere til eslint 9 med flatconfig fra denne [issuen](https://github.com/sveltejs/eslint-plugin-svelte/issues/732). 👷 Det er en del lint-errors som må undersøkes.
+SvelteKit templaten [sanity-template-sveltekit-clean](https://github.com/sanity-io/sanity-template-sveltekit-clean) har en eslint konfigurasjon som ikke funker. Har prøvd å oppgradere til eslint 9 med flatconfig fra denne [issuen](https://github.com/sveltejs/eslint-plugin-svelte/issues/732). 👷 Det er en del lint-errors som må undersøkes.
 
 ## Supabase
 

diff --git a/app/eslint.config.js b/app/eslint.config.js
@@ -1,43 +1,82 @@
-import eslintPluginSvelte from "eslint-plugin-svelte";
+// @ts-check
+import svelte from "eslint-plugin-svelte";
 import svelteParser from "svelte-eslint-parser";
-import typeScriptEslint from "typescript-eslint";
+import ts from "typescript-eslint";
+import globals from "globals";
 
-export default [
-  ...eslintPluginSvelte.configs["flat/recommended"],
-  ...typeScriptEslint.configs.strictTypeChecked,
-  ...eslintPluginSvelte.configs["flat/prettier"],
+/** @type {import('typescript-eslint').Config} */
+export default ts.config(
+  ...ts.configs.recommendedTypeChecked,
+  ...svelte.configs["flat/recommended"],
+  ...svelte.configs["flat/prettier"],
   {
     languageOptions: {
-      parser: typeScriptEslint.parser,
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: { ...globals.node, ...globals.browser },
       parserOptions: {
-        project: "./tsconfig.json",
-        extraFileExtensions: [".svelte"],
-        ecmaVersion: 2020,
-        sourceType: "module",
         project: true,
+        parser: ts.parser,
+        extraFileExtensions: [".svelte"],
+        tsconfigRootDir: import.meta.dirname,
       },
     },
   },
   {
-    files: ["**/*.svelte"],
+    files: ["**/*.svelte", "*.svelte"],
     languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: { ...globals.browser },
       parser: svelteParser,
       parserOptions: {
-        parser: typeScriptEslint.parser,
+        parser: ts.parser,
+        extraFileExtensions: [".svelte"],
       },
     },
+    rules: {
+      "import/no-named-as-default": "off",
+      "import/no-named-as-default-member": "off",
+      "svelte/no-target-blank": "error",
+      "svelte/no-at-debug-tags": "error",
+      "svelte/no-reactive-functions": "error",
+      "svelte/no-reactive-literals": "error",
+    },
+  },
+  {
+    rules: {
+      semi: ["warn", "always"],
+      "no-nested-ternary": "error",
+      "linebreak-style": ["error", "unix"],
+      "no-cond-assign": ["error", "always"],
+      // TODO: Fix ts linting
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-member-access": "off",
+      "@typescript-eslint/no-unsafe-call": "off",
+      "@typescript-eslint/no-unsafe-return": "off",
+      "@typescript-eslint/no-unsafe-argument": "off",
+    },
+  },
+  {
+    files: ["**/*.config.*"],
+    extends: [ts.configs.disableTypeChecked],
+  },
+  {
     ignores: [
-      ".DS_Store",
-      "node_modules",
-      "build",
-      ".svelte-kit",
-      "package",
+      "coverage",
+      "**/dist",
+      "**/build",
+      "**/package",
+      "**/.svelte-kit",
+      "**/node_modules",
       ".env",
       ".env.*",
+      "!*.cjs",
+      ".DS_Store",
       "!.env.example",
       "pnpm-lock.yaml",
       "package-lock.json",
-      "yarn.lock",
+      "**/database.model.ts",
     ],
-  },
-];
+  }
+);
diff --git a/app/package.json b/app/package.json
@@ -16,6 +16,7 @@
     "@sanity/image-url": "^1.0.2",
     "@sanity/svelte-loader": "^1.11.32",
     "@sanity/visual-editing": "^2.1.5",
+    "globals": "^15.8.0",
     "groq": "^3.48.1",
     "ical-generator": "^7.1.0",
     "kysely": "^0.27.3",

diff --git a/app/src/components/external/UnregistrationFormExternal.svelte b/app/src/components/external/UnregistrationFormExternal.svelte
@@ -16,12 +16,12 @@
   <input type="text" name="subject" id="subject" class="hidden" />
 
   <div
-    class="mb-8 flex flex-col items-start justify-center rounded-lg border p-4 sm:p-8 dark:border-gray-700 dark:bg-gray-800"
+    class="mb-8 flex flex-col items-start justify-center rounded-lg border p-4 dark:border-gray-700 dark:bg-gray-800 sm:p-8"
   >
     <div class="flex flex-col items-center gap-5">
       <div class="items-start-4 flex flex-col">
         <h4
-          class="text-2xl font-bold leading-none tracking-tight text-gray-900 sm:text-2xl dark:text-white"
+          class="text-2xl font-bold leading-none tracking-tight text-gray-900 dark:text-white sm:text-2xl"
         >
           <h2 class="pb-4 text-base font-bold sm:text-xl">Ønsker du å melde deg av?</h2>
         </h4>

diff --git a/app/src/components/shared/EventCard.svelte b/app/src/components/shared/EventCard.svelte
@@ -13,18 +13,20 @@
   href={`/event/${event._id}`}
 >
   <div class="flex h-full w-full flex-col">
-    {#if event.image}
-      <div class="max-h-[240px] min-h-[240px] sm:max-h-[300px] sm:min-h-[300px]">
+    <div class="max-h-[240px] min-h-[240px] sm:max-h-[300px] sm:min-h-[300px]">
+      {#if event.image}
         <img
           class="h-full w-full rounded-3xl object-cover"
           src={urlFor(event.image).url()}
           alt="Bilde for arrangementet: {event.title}"
         />
-      </div>
-    {/if}
+      {:else}
+        <div class="h-full w-full rounded-3xl bg-zinc-100 dark:bg-zinc-800" />
+      {/if}
+    </div>
 
     <div class="m-3 grid h-full grid-cols-1 content-between gap-2 sm:m-5">
-      <div class="flex flex-col gap-2">
+      <div class="flex flex-col gap-2 break-words">
         <h2 class="text-2xl font-semibold">
           {event.title}
         </h2>

diff --git a/app/src/components/shared/EventCategoryFilter.svelte b/app/src/components/shared/EventCategoryFilter.svelte
@@ -17,7 +17,7 @@
     { title: "Sosialt", keyword: "sosialt" },
   ];
 
-  const handleCategoryChange = (category: string) => {
+  const handleCategoryChange = async (category: string) => {
     dispatch("categoryChange", category);
 
     if (category) {
@@ -26,7 +26,7 @@
       searchParams.delete("category");
     }
 
-    goto(`?${searchParams}`, { noScroll: true });
+    await goto(`?${searchParams.toString()}`, { noScroll: true });
   };
 </script>
 

diff --git a/app/src/components/shared/EventInfoBox.svelte b/app/src/components/shared/EventInfoBox.svelte
@@ -7,39 +7,39 @@
 </script>
 
 <div
-  class="flex h-full w-full flex-col gap-1 rounded-xl bg-zinc-100 p-3 text-sm font-light dark:bg-zinc-800 sm:p-6 sm:text-base"
+  class="flex h-full w-full flex-col gap-1 hyphens-auto rounded-xl bg-zinc-100 p-3 text-sm font-light dark:bg-zinc-800 sm:p-6 sm:text-base"
 >
   <div class="flex items-center">
-    <CalendarBlank class="mr-2" />
+    <CalendarBlank class="mr-2 flex-none" />
     <span>{event.category}</span>
   </div>
 
   <div class="flex items-center">
-    <CalendarBlank class="mr-2" />
+    <CalendarBlank class="mr-2 flex-none" />
     <span
       >{formatDate(event.start)}
       {endsOnDifferentDay(event.start, event.end) ? `- ${formatDate(event.end)}` : ""}</span
     >
   </div>
 
   <div class="flex items-center">
-    <Clock class="mr-2" />
+    <Clock class="mr-2 flex-none" />
     <span>{formatTime(event.start)} - {formatTime(event.end)}</span>
   </div>
 
   <div class="flex items-center">
-    <MapPin class="mr-2" />
+    <MapPin class="mr-2 flex-none" />
     <span>{event.place}</span>
   </div>
 
   {#if event.food}
     <div class="flex items-center">
-      <ForkKnife class="mr-2" />
+      <ForkKnife class="mr-2 flex-none" />
       <span>{event.food}</span>
     </div>
   {/if}
   <div class="flex items-center">
-    <Tag class="mr-2" />
+    <Tag class="mr-2 flex-none" />
     <span>{event.openForExternals ? "Åpent for alle" : "Kun for interne"}</span>
   </div>
 </div>
diff --git a/app/src/components/shared/EventSummary.svelte b/app/src/components/shared/EventSummary.svelte
@@ -6,9 +6,17 @@
   import EventInfoBox from "$components/shared/EventInfoBox.svelte";
   import { onMount } from "svelte";
 
-  export let event: Event;
+  type Palette = {
+    dominant: { background: string };
+  };
 
-  let imageElement: HTMLImageElement;
+  interface EventWithImagePalette extends Event {
+    image?: Event["image"] & { palette?: Palette };
+  }
+
+  export let event: EventWithImagePalette;
+
+  let imageElement: HTMLImageElement | null;
   let imageLoaded = false;
 
   onMount(() => {
@@ -21,22 +29,22 @@
 <Badge rounded class="mb-4 h-6 border border-black bg-transparent dark:bg-zinc-800"
   >{event.category}</Badge
 >
-<h1 class="pb-6 text-3xl font-semibold sm:text-5xl">{event.title}</h1>
+<h1 class="break-words pb-6 text-3xl font-semibold sm:text-5xl">{event.title}</h1>
 
 {#if event.summary}
-  <p class="pb-6 text-base font-light sm:w-[60%] sm:text-xl">{event.summary}</p>
+  <p class="break-words pb-6 text-base font-light sm:w-[60%] sm:text-xl">{event.summary}</p>
 {/if}
 
-<div class="flex flex-col gap-5 pb-6 sm:h-60 sm:flex-row">
-  <div class="w-full sm:w-[40%]">
+<div class="flex min-h-[60px] flex-col gap-5 pb-6 sm:flex-row">
+  <div class="w-full sm:min-h-60 sm:w-[40%]">
     <EventInfoBox {event} />
   </div>
-  {#if event.image}
-    <div class="relative w-full sm:w-[60%]">
+  {#if event.image?.palette}
+    <div class="relative w-full sm:h-60 sm:w-[60%]">
       <div
         aria-hidden="true"
         class="absolute left-0 top-0 h-full w-full rounded-xl"
-        style="background: {event.image.palette?.darkMuted.background}"
+        style="background: {event.image.palette.dominant.background}"
       ></div>
       <img
         fetchpriority="high"

diff --git a/app/src/components/shared/Header.svelte b/app/src/components/shared/Header.svelte
@@ -22,13 +22,13 @@
   >
     <img
       fetchpriority="high"
-      class="absolute h-12 select-none opacity-100 sm:h-14 dark:opacity-5"
+      class="absolute h-12 select-none opacity-100 dark:opacity-5 sm:h-14"
       alt="Animert Capra, Fryde og Liflig-logo"
       src={hasPerformanceIssue ? logoDarkSm : logoDark}
     />
     <img
       fetchpriority="high"
-      class="absolute h-12 select-none opacity-5 sm:h-14 dark:opacity-100"
+      class="absolute h-12 select-none opacity-5 dark:opacity-100 sm:h-14"
       alt="Animert Capra, Fryde og Liflig-logo"
       src={hasPerformanceIssue ? logoLightSm : logoLight}
     />

diff --git a/app/src/components/shared/RegistrationCustomOption.svelte b/app/src/components/shared/RegistrationCustomOption.svelte
@@ -46,7 +46,7 @@
 </script>
 
 <div class="flex flex-col gap-1">
-  <span class="block text-sm font-bold text-gray-900 rtl:text-right dark:text-gray-300">
+  <span class="block text-sm font-bold text-gray-900 dark:text-gray-300 rtl:text-right">
     {optionLabel}
   </span>
   {#if inputType === "checkbox"}

diff --git a/app/src/components/shared/SignInOrOut.svelte b/app/src/components/shared/SignInOrOut.svelte
@@ -15,9 +15,9 @@
       color="dark"
       class="h-7"
       pill
-      on:click={() => {
+      on:click={async () => {
         isSigningOut = true;
-        signOut({ callbackUrl: "/" });
+        await signOut({ callbackUrl: "/" });
       }}
       disabled={isSigningOut}>Logg ut</Button
     >
@@ -27,9 +27,9 @@
     color="dark"
     class="h-7"
     pill
-    on:click={() => {
+    on:click={async () => {
       isSigningIn = true;
-      signIn("google");
+      await signIn("google");
     }}
     disabled={isSigningIn}>Logg inn</Button
   >

diff --git a/app/src/lib/actions/internal/action.ts b/app/src/lib/actions/internal/action.ts
@@ -314,7 +314,7 @@ export const submitUnregistrationInternal: Actions["submitUnregistrationInternal
   }
 
   return message(unregistrationForm, {
-    message: "Du er nå meldt av arrangementet 👋 Vi har sendt deg en bekreftelse på e-post.",
+    text: "Du er nå meldt av arrangementet 👋 Vi har sendt deg en bekreftelse på e-post.",
     success: true,
   });
 };
diff --git a/app/src/lib/server/kysley/transactions.ts b/app/src/lib/server/kysley/transactions.ts
@@ -11,7 +11,7 @@ export async function executeTransaction<T>(
 
 export const deleteEventParticipant = async (
   transaction: Transaction<KyselyDatabase>,
-  { event_id, email }: Pick<Tables<"event_participant">, "event_id" | "email">
+  { event_id, email }: Pick<Tables<"event_participant">, "email" | "event_id">
 ) => {
   return await transaction
     .deleteFrom("event_participant")
@@ -22,8 +22,10 @@ export const deleteEventParticipant = async (
 
 export const insertAndGetEventParticipant = async (
   transaction: Transaction<KyselyDatabase>,
-  participant: Pick<Tables<"event_participant">, "event_id" | "full_name" | "email"> &
-    Partial<Pick<Tables<"event_participant">, "telephone" | "firm" | "attending_digital">>
+  participant: Partial<
+    Pick<Tables<"event_participant">, "attending_digital" | "firm" | "telephone">
+  > &
+    Pick<Tables<"event_participant">, "email" | "event_id" | "full_name">
 ) => {
   return await transaction
     .insertInto("event_participant")

diff --git a/app/src/lib/server/sanity/queries.ts b/app/src/lib/server/sanity/queries.ts
@@ -7,7 +7,7 @@ export const eventQuery = groq`*[_type == "event" && _id == $id][0]{
   ...,
   'image': {
     ...image,
-      'palette': image.asset->metadata.palette
+    'palette': image.asset->metadata.palette
   }
 }`;
 

diff --git a/app/src/models/sanity.model.ts b/app/src/models/sanity.model.ts
@@ -96,7 +96,7 @@ export type Event = {
   _updatedAt: string;
   _rev: string;
   title: string;
-  image: {
+  image?: {
     asset?: {
       _ref: string;
       _type: "reference";
@@ -108,11 +108,10 @@ export type Event = {
     _type: "image";
   };
   summary?: string;
+  body?: BlockContent;
   start: string;
   end: string;
   deadline: string;
-  body?: BlockContent;
-  maxParticipant?: number;
   category: Category;
   place: string;
   organisers: Array<string>;
@@ -121,6 +120,7 @@ export type Event = {
   openForExternals: boolean;
   foodPreference: boolean;
   food?: string;
+  maxParticipant?: number;
   customOptions?: Array<{
     fieldOption: string;
     fieldType: "radio" | "checkbox" | "input";