From 73840c91c4403ab3adf13f7dccf10b0c7f3c8bd7 Mon Sep 17 00:00:00 2001
From: Toni Kangas <toni.ar.kangas@gmail.com>
Date: Sun, 4 May 2025 15:55:38 +0300
Subject: [PATCH 1/5] Use state for current path

---
 front-end/src/App.svelte         | 147 ++++++++++++++++++-------------
 front-end/src/lib/Link.svelte    |  19 ++++
 front-end/src/lib/path.svelte.ts |  39 ++++++++
 3 files changed, 142 insertions(+), 63 deletions(-)
 create mode 100644 front-end/src/lib/Link.svelte
 create mode 100644 front-end/src/lib/path.svelte.ts

diff --git a/front-end/src/App.svelte b/front-end/src/App.svelte
index af777ef..1381d87 100644
--- a/front-end/src/App.svelte
+++ b/front-end/src/App.svelte
@@ -23,87 +23,87 @@
   import BarChart from "./lib/BarChart.svelte";
   import Footer from "./lib/Footer.svelte";
   import Share from "./views/Share.svelte";
+  import { initializePath, navigate, parsePath } from "./lib/path.svelte";
+  import Link from "./lib/Link.svelte";
 
   let loading = $state(true);
-  let view = $state<string>("form");
+  let view = $derived.by(() => parsePath().view);
   let error = $state<Problem | null>(null);
   let question = $state<Question | null>(null);
   let answer = $state<Answer | null>(null);
   let summary = $state<Summary | null>(null);
 
-  onMount(() => {
-    const initAnswer = async () => {
-      try {
-        // Wait until the server has started.
-        await waitUntilLive();
-
-        // Parse the question key from URL path or URL query parameters.
-        const pathComponents = window.location.pathname.split("/").slice(1);
-        const query = new URLSearchParams(window.location.search);
-
-        const key = pathComponents[0] || query.get("key");
-        // Replace path if query parameter is used. This is for backwards compatibility.
-        if (key && !pathComponents[0]) {
-          window.history.replaceState({}, "", `/${key}`);
-        }
-        if (!key) {
-          error = {
-            status: 404,
-            title: "Question not found",
-          };
-          return;
-        }
+  const initAnswer = async () => {
+    try {
+      // Wait until the server has started.
+      await waitUntilLive();
 
-        view = pathComponents[1] || "form";
-        if (["form", "share", "summary"].includes(view) === false) {
-          error = {
-            status: 404,
-            title: "Page not found",
-          };
-          return;
-        }
+      const { key, view, id } = parsePath();
+      if (!key) {
+        error = {
+          status: 404,
+          title: "Question not found",
+        };
+        return;
+      }
 
-        // Fetch the question using the key.
-        const qr = await getQuestion(key);
-        if (qr.error) {
-          error = qr.error;
+      if (["form", "share", "summary"].includes(view) === false) {
+        error = {
+          status: 404,
+          title: "Page not found",
+        };
+        return;
+      }
+
+      // Fetch the question using the key.
+      const qr = await getQuestion(key);
+      if (qr.error) {
+        error = qr.error;
+        return;
+      }
+      question = qr.data;
+
+      // Initialize new answer or get existings answer.
+      if (view === "form") {
+        const ar = id ? await getAnswer(id) : await createAnswer(key);
+        if (ar.error) {
+          error = ar.error;
           return;
         }
-        question = qr.data;
-
-        // Initialize new answer or get existings answer.
-        const id = query.get("id");
-        if (view === "form") {
-          const ar = id ? await getAnswer(id) : await createAnswer(key);
-          if (ar.error) {
-            error = ar.error;
-            return;
-          }
-          answer = ar.data;
-          window.history.replaceState({}, "", `/${key}?id=${answer.id}`);
-        }
+        answer = ar.data;
+        navigate(`/${key}?id=${answer.id}`, true);
+      }
 
-        // Fetch the summary.
-        if (view === "summary") {
-          fetchSummary(key);
-        }
-      } catch (err) {
-        error = {
-          status: 500,
-          title: "Failed to initialize feedback form.",
-        };
-      } finally {
-        loading = false;
+      // Fetch the summary.
+      if (view === "summary") {
+        fetchSummary(key);
       }
-    };
+    } catch (err) {
+      error = {
+        status: 500,
+        title: "Failed to initialize feedback form.",
+      };
+    } finally {
+      loading = false;
+    }
+  };
 
-    window.addEventListener("popstate", (event) => {
+  onMount(() => {
+    initializePath();
+
+    window.addEventListener("popstate", () => {
       initAnswer();
     });
 
     initAnswer();
   });
 
+  $effect(() => {
+    if (view === "form" && answer === null) {
+      initAnswer();
+    }
+  });
+
   const handleChange = async (payload: UpdateAnswerPayload) => {
     if (!answer) {
       return;
@@ -146,9 +146,9 @@
   const handleSubmit = async () => {
     loading = true;
     await handleChange({ submit: true });
-    view = "summary";
-    window.history.pushState({ id: answer?.id }, "", `/${answer?.key}/summary`);
+    navigate(`/${answer?.key}/summary`);
     await fetchSummary(answer?.key);
+    answer = null;
     loading = false;
   };
 </script>
@@ -192,6 +192,19 @@
   {:else if question && view === "share"}
     <Share {question} />
   {/if}
+  {#if question}
+    <div class="links">
+      {#if view !== "form"}
+        <Link target={`/${question.key}`}>Submit an answer</Link>
+      {/if}
+      {#if view !== "share"}
+        <Link target={`/${question.key}/share`}>Share the URL</Link>
+      {/if}
+      {#if view !== "summary"}
+        <Link target={`/${question.key}/summary`}>View answer summary</Link>
+      {/if}
+    </div>
+  {/if}
 </main>
 <Footer />
 
@@ -240,4 +253,12 @@
     margin: 1rem 0;
     padding: 0;
   }
+
+  .links {
+    display: flex;
+    gap: 1rem;
+    margin: 2rem 0;
+    /* Disable margins from collapsing */
+    padding-top: 0.05px;
+  }
 </style>
diff --git a/front-end/src/lib/Link.svelte b/front-end/src/lib/Link.svelte
new file mode 100644
index 0000000..a23c3c3
--- /dev/null
+++ b/front-end/src/lib/Link.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { navigate } from "./path.svelte";
+
+  interface Props {
+    children: Snippet;
+    target: string;
+  }
+
+  let { children, target }: Props = $props();
+</script>
+
+<a
+  href={target}
+  onclick={(event) => {
+    navigate(target);
+    event.preventDefault();
+  }}>{@render children?.()}</a
+>
diff --git a/front-end/src/lib/path.svelte.ts b/front-end/src/lib/path.svelte.ts
new file mode 100644
index 0000000..2165beb
--- /dev/null
+++ b/front-end/src/lib/path.svelte.ts
@@ -0,0 +1,39 @@
+export interface QuestionPath {
+  key: string;
+  view: string;
+  id?: string;
+}
+
+let path = $state<string>("");
+
+export const initializePath = () => {
+  path = window.location.pathname;
+  const { key } = parsePath();
+
+  // Replace path if key is given as query parameter instead of path parameter. This is for backwards compatibility.
+  const query = new URLSearchParams(window.location.search);
+  const queryKey = query.get("key");
+  if (queryKey && !key) {
+    navigate(`/${queryKey}`, true);
+  }
+}
+
+export const parsePath = (): QuestionPath => {
+  const pathComponents = path.split("/").slice(1);
+  const query = new URLSearchParams(window.location.search);
+
+  const key = pathComponents[0] ?? "";
+  const view = pathComponents[1] || "form";
+  const id = query.get("id") ?? undefined;
+
+  return { key, view, id };
+}
+
+export const navigate = (next: string, replace = false) => {
+  if (replace) {
+    window.history.replaceState({}, "", next);
+  } else {
+    window.history.pushState({}, "", next);
+  }
+  path = next;
+}

From 012f221794f81e1613fb9250b6ba78ed7e48188f Mon Sep 17 00:00:00 2001
From: Toni Kangas <toni.ar.kangas@gmail.com>
Date: Sun, 4 May 2025 16:24:54 +0300
Subject: [PATCH 2/5] Use component for summary

---
 front-end/src/App.svelte           | 73 +++++++++---------------------
 front-end/src/lib/status.svelte.ts | 23 ++++++++++
 front-end/src/views/Share.svelte   |  2 +-
 front-end/src/views/Summary.svelte | 57 +++++++++++++++++++++++
 4 files changed, 102 insertions(+), 53 deletions(-)
 create mode 100644 front-end/src/lib/status.svelte.ts
 create mode 100644 front-end/src/views/Summary.svelte

diff --git a/front-end/src/App.svelte b/front-end/src/App.svelte
index 1381d87..6c26d59 100644
--- a/front-end/src/App.svelte
+++ b/front-end/src/App.svelte
@@ -7,31 +7,27 @@
     createAnswer,
     getAnswer,
     getQuestion,
-    getSummary,
     updateAnswer,
     waitUntilLive,
     type Answer,
-    type Problem,
     type Question,
-    type Summary,
     type UpdateAnswerPayload,
   } from "./lib/api";
   import Loading from "./lib/Loading.svelte";
   import Error from "./lib/Error.svelte";
   import Submit from "./lib/Submit.svelte";
   import Comment from "./lib/Comment.svelte";
-  import BarChart from "./lib/BarChart.svelte";
   import Footer from "./lib/Footer.svelte";
   import Share from "./views/Share.svelte";
   import { initializePath, navigate, parsePath } from "./lib/path.svelte";
   import Link from "./lib/Link.svelte";
+  import { getStatus, setError, setLoading } from "./lib/status.svelte";
+  import Summary from "./views/Summary.svelte";
 
-  let loading = $state(true);
+  let { loading, error } = $derived.by(getStatus);
   let view = $derived.by(() => parsePath().view);
-  let error = $state<Problem | null>(null);
   let question = $state<Question | null>(null);
   let answer = $state<Answer | null>(null);
-  let summary = $state<Summary | null>(null);
 
   const initAnswer = async () => {
     try {
@@ -40,25 +36,25 @@
 
       const { key, view, id } = parsePath();
       if (!key) {
-        error = {
+        setError({
           status: 404,
           title: "Question not found",
-        };
+        });
         return;
       }
 
       if (["form", "share", "summary"].includes(view) === false) {
-        error = {
+        setError({
           status: 404,
           title: "Page not found",
-        };
+        });
         return;
       }
 
       // Fetch the question using the key.
       const qr = await getQuestion(key);
       if (qr.error) {
-        error = qr.error;
+        setError(qr.error);
         return;
       }
       question = qr.data;
@@ -67,24 +63,19 @@
       if (view === "form") {
         const ar = id ? await getAnswer(id) : await createAnswer(key);
         if (ar.error) {
-          error = ar.error;
+          setError(ar.error);
           return;
         }
         answer = ar.data;
         navigate(`/${key}?id=${answer.id}`, true);
       }
-
-      // Fetch the summary.
-      if (view === "summary") {
-        fetchSummary(key);
-      }
     } catch (err) {
-      error = {
+      setError({
         status: 500,
         title: "Failed to initialize feedback form.",
-      };
+      });
     } finally {
-      loading = false;
+      setLoading(false);
     }
   };
 
@@ -112,44 +103,24 @@
     try {
       const ar = await updateAnswer(answer?.id, payload);
       if (ar.error) {
-        error = ar.error;
+        setError(ar.error);
         return;
       }
       answer = ar.data;
     } catch (_) {
-      error = {
+      setError({
         status: 500,
         title: "Failed to update feedback.",
-      };
-    }
-  };
-
-  const fetchSummary = async (key?: string) => {
-    loading = true;
-    try {
-      const sr = await getSummary(key ?? "");
-      if (sr.error) {
-        error = sr.error;
-        return;
-      }
-      summary = sr.data;
-    } catch (_) {
-      error = {
-        status: 500,
-        title: "Failed to fetch summary.",
-      };
-    } finally {
-      loading = false;
+      });
     }
   };
 
   const handleSubmit = async () => {
-    loading = true;
+    setLoading(true);
     await handleChange({ submit: true });
     navigate(`/${answer?.key}/summary`);
-    await fetchSummary(answer?.key);
     answer = null;
-    loading = false;
+    setLoading(false);
   };
 </script>
 
@@ -184,11 +155,9 @@
       {/if}
       <Submit onSubmit={handleSubmit} />
     {/if}
-  {:else if question && view === "summary" && summary}
-    <div class="summary">
-      <p>Thank you for your feedback!</p>
-      <BarChart choices={question.choices} {summary} />
-    </div>
+  {/if}
+  {#if question && view === "summary"}
+    <Summary {question} />
   {:else if question && view === "share"}
     <Share {question} />
   {/if}
@@ -257,7 +226,7 @@
   .links {
     display: flex;
     gap: 1rem;
-    margin: 2rem 0;
+    margin: 3rem 0 2rem;
     /* Disable margins from collapsing */
     padding-top: 0.05px;
   }
diff --git a/front-end/src/lib/status.svelte.ts b/front-end/src/lib/status.svelte.ts
new file mode 100644
index 0000000..3a3cdbc
--- /dev/null
+++ b/front-end/src/lib/status.svelte.ts
@@ -0,0 +1,23 @@
+import type { Problem } from "./api";
+
+export interface Status {
+    loading: boolean;
+    error: Problem | null;
+}
+
+let status = $state<Status>({
+    loading: true,
+    error: null,
+});
+
+export const setLoading = (loading: boolean) => {
+    status.loading = loading;
+};
+
+export const setError = (error: Problem | null) => {
+    status.error = error;
+};
+
+export const getStatus = () => {
+    return JSON.parse(JSON.stringify(status));
+}
diff --git a/front-end/src/views/Share.svelte b/front-end/src/views/Share.svelte
index 87322bb..9f37352 100644
--- a/front-end/src/views/Share.svelte
+++ b/front-end/src/views/Share.svelte
@@ -34,6 +34,6 @@
 
 <style>
   canvas {
-    margin: 2rem 0;
+    margin: 2rem 0 0;
   }
 </style>
diff --git a/front-end/src/views/Summary.svelte b/front-end/src/views/Summary.svelte
new file mode 100644
index 0000000..2b1db2d
--- /dev/null
+++ b/front-end/src/views/Summary.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import { getSummary, type Question, type Summary } from "../lib/api";
+  import BarChart from "../lib/BarChart.svelte";
+  import { setError, setLoading } from "../lib/status.svelte";
+
+  interface Props {
+    question: Question;
+  }
+
+  let { question }: Props = $props();
+
+  let summary = $state<Summary | null>(null);
+
+  const fetchSummary = async (key?: string) => {
+    if (summary === null) {
+      setLoading(true);
+    }
+
+    try {
+      const sr = await getSummary(key ?? "");
+      if (sr.error) {
+        setError(sr.error);
+        return;
+      }
+      summary = sr.data;
+    } catch (_) {
+      setError({
+        status: 500,
+        title: "Failed to fetch summary.",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  onMount(() => {
+    fetchSummary(question.key);
+
+    // Refresh the summary every 5 seconds.
+    const interval = setInterval(() => {
+      fetchSummary(question.key);
+    }, 5000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  });
+</script>
+
+{#if summary}
+  <div class="summary">
+    <p>Thank you for your feedback!</p>
+    <BarChart choices={question.choices} {summary} />
+  </div>
+{/if}

From c54b63455796a86b098a1ef1fb599cf7446a2ccc Mon Sep 17 00:00:00 2001
From: Toni Kangas <toni.ar.kangas@gmail.com>
Date: Sun, 4 May 2025 16:59:07 +0300
Subject: [PATCH 3/5] Use component for form

---
 front-end/src/App.svelte           | 118 +++++---------------------
 front-end/src/lib/BarChart.svelte  |   4 -
 front-end/src/lib/Submit.svelte    |   1 -
 front-end/src/lib/path.svelte.ts   |   6 +-
 front-end/src/views/Form.svelte    | 130 +++++++++++++++++++++++++++++
 front-end/src/views/Share.svelte   |   6 +-
 front-end/src/views/Summary.svelte |  17 ++--
 7 files changed, 168 insertions(+), 114 deletions(-)
 create mode 100644 front-end/src/views/Form.svelte

diff --git a/front-end/src/App.svelte b/front-end/src/App.svelte
index 6c26d59..2a3c7f6 100644
--- a/front-end/src/App.svelte
+++ b/front-end/src/App.svelte
@@ -2,39 +2,35 @@
   import { onMount } from "svelte";
 
   import logo from "/logo.svg";
-  import RadioGroup from "./lib/RadioGroup.svelte";
   import {
-    createAnswer,
-    getAnswer,
     getQuestion,
-    updateAnswer,
     waitUntilLive,
-    type Answer,
     type Question,
-    type UpdateAnswerPayload,
   } from "./lib/api";
   import Loading from "./lib/Loading.svelte";
   import Error from "./lib/Error.svelte";
-  import Submit from "./lib/Submit.svelte";
-  import Comment from "./lib/Comment.svelte";
   import Footer from "./lib/Footer.svelte";
   import Share from "./views/Share.svelte";
-  import { initializePath, navigate, parsePath } from "./lib/path.svelte";
+  import {
+    initializePath,
+    parsePath,
+    updatePath,
+  } from "./lib/path.svelte";
   import Link from "./lib/Link.svelte";
   import { getStatus, setError, setLoading } from "./lib/status.svelte";
   import Summary from "./views/Summary.svelte";
+  import Form from "./views/Form.svelte";
 
   let { loading, error } = $derived.by(getStatus);
   let view = $derived.by(() => parsePath().view);
   let question = $state<Question | null>(null);
-  let answer = $state<Answer | null>(null);
 
-  const initAnswer = async () => {
+  const initializeQuestion = async () => {
     try {
       // Wait until the server has started.
       await waitUntilLive();
 
-      const { key, view, id } = parsePath();
+      const { key } = parsePath();
       if (!key) {
         setError({
           status: 404,
@@ -43,14 +39,6 @@
         return;
       }
 
-      if (["form", "share", "summary"].includes(view) === false) {
-        setError({
-          status: 404,
-          title: "Page not found",
-        });
-        return;
-      }
-
       // Fetch the question using the key.
       const qr = await getQuestion(key);
       if (qr.error) {
@@ -58,21 +46,10 @@
         return;
       }
       question = qr.data;
-
-      // Initialize new answer or get existings answer.
-      if (view === "form") {
-        const ar = id ? await getAnswer(id) : await createAnswer(key);
-        if (ar.error) {
-          setError(ar.error);
-          return;
-        }
-        answer = ar.data;
-        navigate(`/${key}?id=${answer.id}`, true);
-      }
     } catch (err) {
       setError({
         status: 500,
-        title: "Failed to initialize feedback form.",
+        title: "Failed to initialize feedback application.",
       });
     } finally {
       setLoading(false);
@@ -81,47 +58,22 @@
 
   onMount(() => {
     initializePath();
+    initializeQuestion();
 
     window.addEventListener("popstate", () => {
-      initAnswer();
+      updatePath();
     });
-
-    initAnswer();
   });
 
   $effect(() => {
-    if (view === "form" && answer === null) {
-      initAnswer();
-    }
-  });
-
-  const handleChange = async (payload: UpdateAnswerPayload) => {
-    if (!answer) {
-      return;
-    }
-
-    try {
-      const ar = await updateAnswer(answer?.id, payload);
-      if (ar.error) {
-        setError(ar.error);
-        return;
-      }
-      answer = ar.data;
-    } catch (_) {
+    if (["form", "share", "summary"].includes(view) === false) {
       setError({
-        status: 500,
-        title: "Failed to update feedback.",
+        status: 404,
+        title: "Page not found",
       });
+      return;
     }
-  };
-
-  const handleSubmit = async () => {
-    setLoading(true);
-    await handleChange({ submit: true });
-    navigate(`/${answer?.key}/summary`);
-    answer = null;
-    setLoading(false);
-  };
+  });
 </script>
 
 <header>
@@ -135,28 +87,10 @@
     <Loading />
   {:else if error}
     <Error {error} />
-  {:else if question && view === "form"}
-    <fieldset>
-      <legend>{question.choice_text}</legend>
-      <RadioGroup
-        items={question.choices}
-        name={question.type}
-        onChange={(value) => handleChange({ value })}
-        value={answer?.value}
-      />
-    </fieldset>
-    {#if answer?.value != undefined}
-      {#if question?.with_comment}
-        <Comment
-          label={question?.comment_text}
-          onChange={(comment) => handleChange({ comment })}
-          value={answer?.comment}
-        />
-      {/if}
-      <Submit onSubmit={handleSubmit} />
-    {/if}
   {/if}
-  {#if question && view === "summary"}
+  {#if question && view === "form"}
+    <Form {question} />
+  {:else if question && view === "summary"}
     <Summary {question} />
   {:else if question && view === "share"}
     <Share {question} />
@@ -210,20 +144,8 @@
     flex: 1;
   }
 
-  fieldset {
-    appearance: none;
-    border: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  legend {
-    appearance: none;
-    margin: 1rem 0;
-    padding: 0;
-  }
-
   .links {
+    color: var(--color-secondary);
     display: flex;
     gap: 1rem;
     margin: 3rem 0 2rem;
diff --git a/front-end/src/lib/BarChart.svelte b/front-end/src/lib/BarChart.svelte
index c03673b..ee1deb7 100644
--- a/front-end/src/lib/BarChart.svelte
+++ b/front-end/src/lib/BarChart.svelte
@@ -21,10 +21,6 @@
 </div>
 
 <style>
-  .bar-chart {
-    margin: 2rem 0;
-  }
-
   .row {
     display: flex;
     align-items: center;
diff --git a/front-end/src/lib/Submit.svelte b/front-end/src/lib/Submit.svelte
index 4b67975..3cc9944 100644
--- a/front-end/src/lib/Submit.svelte
+++ b/front-end/src/lib/Submit.svelte
@@ -18,7 +18,6 @@
     color: var(--color-fg);
     font-weight: 500;
     letter-spacing: 0.5px;
-    margin: 2rem 0;
     padding: 0.5rem 1rem;
 
     transition:
diff --git a/front-end/src/lib/path.svelte.ts b/front-end/src/lib/path.svelte.ts
index 2165beb..d8035d8 100644
--- a/front-end/src/lib/path.svelte.ts
+++ b/front-end/src/lib/path.svelte.ts
@@ -6,8 +6,12 @@ export interface QuestionPath {
 
 let path = $state<string>("");
 
-export const initializePath = () => {
+export const updatePath = () => {
   path = window.location.pathname;
+}
+
+export const initializePath = () => {
+  updatePath();
   const { key } = parsePath();
 
   // Replace path if key is given as query parameter instead of path parameter. This is for backwards compatibility.
diff --git a/front-end/src/views/Form.svelte b/front-end/src/views/Form.svelte
new file mode 100644
index 0000000..2d40219
--- /dev/null
+++ b/front-end/src/views/Form.svelte
@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import RadioGroup from "../lib/RadioGroup.svelte";
+  import {
+    createAnswer,
+    getAnswer,
+    updateAnswer,
+    type Answer,
+    type Question,
+    type UpdateAnswerPayload,
+  } from "../lib/api";
+  import Submit from "../lib/Submit.svelte";
+  import Comment from "../lib/Comment.svelte";
+  import { navigate, parsePath } from "../lib/path.svelte";
+  import { getStatus, setError, setLoading } from "../lib/status.svelte";
+
+  interface Props {
+    question: Question;
+  }
+
+  let { question }: Props = $props();
+
+  let answer = $state<Answer | null>(null);
+  let { loading, error } = $derived.by(getStatus);
+
+  const initAnswer = async () => {
+    try {
+      const { key, id } = parsePath();
+      if (!key) {
+        setError({
+          status: 404,
+          title: "Question not found",
+        });
+        return;
+      }
+
+      // Initialize new answer or get existings answer.
+      const ar = id ? await getAnswer(id) : await createAnswer(key);
+      if (ar.error) {
+        setError(ar.error);
+        return;
+      }
+      answer = ar.data;
+      navigate(`/${key}?id=${answer.id}`, true);
+    } catch (err) {
+      setError({
+        status: 500,
+        title: "Failed to initialize feedback form.",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  onMount(() => {
+    initAnswer();
+  });
+
+  const handleChange = async (payload: UpdateAnswerPayload) => {
+    if (!answer) {
+      return;
+    }
+
+    try {
+      const ar = await updateAnswer(answer?.id, payload);
+      if (ar.error) {
+        setError(ar.error);
+        return;
+      }
+      answer = ar.data;
+    } catch (_) {
+      setError({
+        status: 500,
+        title: "Failed to update feedback.",
+      });
+    }
+  };
+
+  const handleSubmit = async () => {
+    setLoading(true);
+    await handleChange({ submit: true });
+    navigate(`/${answer?.key}/summary`);
+    answer = null;
+    setLoading(false);
+  };
+</script>
+
+{#if !loading && !error}
+  <fieldset>
+    <legend>{question.choice_text}</legend>
+    <RadioGroup
+      items={question.choices}
+      name={question.type}
+      onChange={(value) => handleChange({ value })}
+      value={answer?.value}
+    />
+  </fieldset>
+  {#if answer?.value != undefined}
+    {#if question?.with_comment}
+      <Comment
+        label={question?.comment_text}
+        onChange={(comment) => handleChange({ comment })}
+        value={answer?.comment}
+      />
+    {/if}
+    <div class="submit">
+      <Submit onSubmit={handleSubmit} />
+    </div>
+  {/if}
+{/if}
+
+<style>
+  fieldset {
+    appearance: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  legend {
+    appearance: none;
+    margin: 1rem 0;
+    padding: 0;
+  }
+
+  .submit {
+    margin: 2rem 0 0;
+  }
+</style>
diff --git a/front-end/src/views/Share.svelte b/front-end/src/views/Share.svelte
index 9f37352..dcde955 100644
--- a/front-end/src/views/Share.svelte
+++ b/front-end/src/views/Share.svelte
@@ -27,10 +27,8 @@
   });
 </script>
 
-<div class="share">
-  <p>{question.choice_text} Scan the QR code to open the feedback form.</p>
-  <canvas id="qrcode"></canvas>
-</div>
+<p>{question.choice_text} Scan the QR code to open the feedback form.</p>
+<canvas id="qrcode"></canvas>
 
 <style>
   canvas {
diff --git a/front-end/src/views/Summary.svelte b/front-end/src/views/Summary.svelte
index 2b1db2d..37a7f7e 100644
--- a/front-end/src/views/Summary.svelte
+++ b/front-end/src/views/Summary.svelte
@@ -3,7 +3,7 @@
 
   import { getSummary, type Question, type Summary } from "../lib/api";
   import BarChart from "../lib/BarChart.svelte";
-  import { setError, setLoading } from "../lib/status.svelte";
+  import { getStatus, setError, setLoading } from "../lib/status.svelte";
 
   interface Props {
     question: Question;
@@ -12,6 +12,7 @@
   let { question }: Props = $props();
 
   let summary = $state<Summary | null>(null);
+  let { loading, error } = $derived.by(getStatus);
 
   const fetchSummary = async (key?: string) => {
     if (summary === null) {
@@ -49,9 +50,13 @@
   });
 </script>
 
-{#if summary}
-  <div class="summary">
-    <p>Thank you for your feedback!</p>
-    <BarChart choices={question.choices} {summary} />
-  </div>
+{#if !loading && !error && summary}
+  <p>Thank you for your feedback!</p>
+  <BarChart choices={question.choices} {summary} />
 {/if}
+
+<style>
+  p {
+    margin: 1rem 0 2rem;
+  }
+</style>

From cdc2877cf9ae3b17ac06d913c6c5ff84d55a19d5 Mon Sep 17 00:00:00 2001
From: Toni Kangas <toni.ar.kangas@gmail.com>
Date: Sun, 4 May 2025 17:24:46 +0300
Subject: [PATCH 4/5] Include summary in the share view

---
 front-end/src/App.svelte            | 18 +++++++----------
 front-end/src/lib/BarChart.svelte   |  2 ++
 front-end/src/lib/summary.svelte.ts | 30 ++++++++++++++++++++++++++++
 front-end/src/views/Form.svelte     |  2 +-
 front-end/src/views/Share.svelte    | 10 +++++++++-
 front-end/src/views/Summary.svelte  | 31 +++++------------------------
 6 files changed, 54 insertions(+), 39 deletions(-)
 create mode 100644 front-end/src/lib/summary.svelte.ts

diff --git a/front-end/src/App.svelte b/front-end/src/App.svelte
index 2a3c7f6..2b1097a 100644
--- a/front-end/src/App.svelte
+++ b/front-end/src/App.svelte
@@ -2,20 +2,12 @@
   import { onMount } from "svelte";
 
   import logo from "/logo.svg";
-  import {
-    getQuestion,
-    waitUntilLive,
-    type Question,
-  } from "./lib/api";
+  import { getQuestion, waitUntilLive, type Question } from "./lib/api";
   import Loading from "./lib/Loading.svelte";
   import Error from "./lib/Error.svelte";
   import Footer from "./lib/Footer.svelte";
   import Share from "./views/Share.svelte";
-  import {
-    initializePath,
-    parsePath,
-    updatePath,
-  } from "./lib/path.svelte";
+  import { initializePath, parsePath, updatePath } from "./lib/path.svelte";
   import Link from "./lib/Link.svelte";
   import { getStatus, setError, setLoading } from "./lib/status.svelte";
   import Summary from "./views/Summary.svelte";
@@ -104,7 +96,11 @@
         <Link target={`/${question.key}/share`}>Share the URL</Link>
       {/if}
       {#if view !== "summary"}
-        <Link target={`/${question.key}/summary`}>View answer summary</Link>
+        {#if view === "share"}
+          <Link target={`/${question.key}/summary`}>Hide the QR code</Link>
+        {:else}
+          <Link target={`/${question.key}/summary`}>View answer summary</Link>
+        {/if}
       {/if}
     </div>
   {/if}
diff --git a/front-end/src/lib/BarChart.svelte b/front-end/src/lib/BarChart.svelte
index ee1deb7..c96a6c7 100644
--- a/front-end/src/lib/BarChart.svelte
+++ b/front-end/src/lib/BarChart.svelte
@@ -33,5 +33,7 @@
     border-radius: var(--border-radius);
     height: 0.5rem;
     min-width: 1rem;
+
+    transition: width 0.2s ease-in-out;
   }
 </style>
diff --git a/front-end/src/lib/summary.svelte.ts b/front-end/src/lib/summary.svelte.ts
new file mode 100644
index 0000000..781e643
--- /dev/null
+++ b/front-end/src/lib/summary.svelte.ts
@@ -0,0 +1,30 @@
+import { getSummary as _getSummary, type Summary } from "./api";
+import { setError, setLoading } from "./status.svelte";
+
+let summary = $state<Summary | null>(null);
+
+export const fetchSummary = async (key?: string) => {
+  if (summary === null) {
+    setLoading(true);
+  }
+
+  try {
+    const sr = await _getSummary(key ?? "");
+    if (sr.error) {
+      setError(sr.error);
+      return;
+    }
+    summary = sr.data;
+  } catch (_) {
+    setError({
+      status: 500,
+      title: "Failed to fetch summary.",
+    });
+  } finally {
+    setLoading(false);
+  }
+};
+
+export const getSummary = () => {
+  return summary;
+}
diff --git a/front-end/src/views/Form.svelte b/front-end/src/views/Form.svelte
index 2d40219..dd8f013 100644
--- a/front-end/src/views/Form.svelte
+++ b/front-end/src/views/Form.svelte
@@ -82,7 +82,7 @@
     await handleChange({ submit: true });
     navigate(`/${answer?.key}/summary`);
     answer = null;
-    setLoading(false);
+    // Summary view will set loading to false after updating the summary.
   };
 </script>
 
diff --git a/front-end/src/views/Share.svelte b/front-end/src/views/Share.svelte
index dcde955..dd827f4 100644
--- a/front-end/src/views/Share.svelte
+++ b/front-end/src/views/Share.svelte
@@ -2,6 +2,7 @@
   import QRCode from "qrcode";
 
   import type { Question } from "../lib/api";
+  import Summary from "./Summary.svelte";
 
   interface Props {
     question: Question;
@@ -27,10 +28,17 @@
   });
 </script>
 
-<p>{question.choice_text} Scan the QR code to open the feedback form.</p>
+<Summary {question} />
+<div class="divider"></div>
+<p>Scan the QR code to open the feedback form.</p>
 <canvas id="qrcode"></canvas>
 
 <style>
+  .divider {
+    border: 1px solid var(--color-border);
+    margin: 3rem 0 2rem;
+  }
+
   canvas {
     margin: 2rem 0 0;
   }
diff --git a/front-end/src/views/Summary.svelte b/front-end/src/views/Summary.svelte
index 37a7f7e..1f095bf 100644
--- a/front-end/src/views/Summary.svelte
+++ b/front-end/src/views/Summary.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import { onMount } from "svelte";
 
-  import { getSummary, type Question, type Summary } from "../lib/api";
+  import { type Question } from "../lib/api";
   import BarChart from "../lib/BarChart.svelte";
-  import { getStatus, setError, setLoading } from "../lib/status.svelte";
+  import { getStatus } from "../lib/status.svelte";
+  import { getSummary, fetchSummary } from "../lib/summary.svelte";
 
   interface Props {
     question: Question;
@@ -11,30 +12,8 @@
 
   let { question }: Props = $props();
 
-  let summary = $state<Summary | null>(null);
   let { loading, error } = $derived.by(getStatus);
-
-  const fetchSummary = async (key?: string) => {
-    if (summary === null) {
-      setLoading(true);
-    }
-
-    try {
-      const sr = await getSummary(key ?? "");
-      if (sr.error) {
-        setError(sr.error);
-        return;
-      }
-      summary = sr.data;
-    } catch (_) {
-      setError({
-        status: 500,
-        title: "Failed to fetch summary.",
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
+  let summary = $derived.by(getSummary);
 
   onMount(() => {
     fetchSummary(question.key);
@@ -51,7 +30,7 @@
 </script>
 
 {#if !loading && !error && summary}
-  <p>Thank you for your feedback!</p>
+  <p>{question.choice_text}</p>
   <BarChart choices={question.choices} {summary} />
 {/if}
 

From c9a4ae78da8559e1265de20e8885b764e886c5ff Mon Sep 17 00:00:00 2001
From: Toni Kangas <toni.ar.kangas@gmail.com>
Date: Sun, 4 May 2025 17:28:08 +0300
Subject: [PATCH 5/5] Run `prettier . --write`

---
 front-end/src/lib/path.svelte.ts    |  8 ++++----
 front-end/src/lib/status.svelte.ts  | 16 ++++++++--------
 front-end/src/lib/summary.svelte.ts |  2 +-
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/front-end/src/lib/path.svelte.ts b/front-end/src/lib/path.svelte.ts
index d8035d8..2d75ca8 100644
--- a/front-end/src/lib/path.svelte.ts
+++ b/front-end/src/lib/path.svelte.ts
@@ -8,7 +8,7 @@ let path = $state<string>("");
 
 export const updatePath = () => {
   path = window.location.pathname;
-}
+};
 
 export const initializePath = () => {
   updatePath();
@@ -20,7 +20,7 @@ export const initializePath = () => {
   if (queryKey && !key) {
     navigate(`/${queryKey}`, true);
   }
-}
+};
 
 export const parsePath = (): QuestionPath => {
   const pathComponents = path.split("/").slice(1);
@@ -31,7 +31,7 @@ export const parsePath = (): QuestionPath => {
   const id = query.get("id") ?? undefined;
 
   return { key, view, id };
-}
+};
 
 export const navigate = (next: string, replace = false) => {
   if (replace) {
@@ -40,4 +40,4 @@ export const navigate = (next: string, replace = false) => {
     window.history.pushState({}, "", next);
   }
   path = next;
-}
+};
diff --git a/front-end/src/lib/status.svelte.ts b/front-end/src/lib/status.svelte.ts
index 3a3cdbc..43f275c 100644
--- a/front-end/src/lib/status.svelte.ts
+++ b/front-end/src/lib/status.svelte.ts
@@ -1,23 +1,23 @@
 import type { Problem } from "./api";
 
 export interface Status {
-    loading: boolean;
-    error: Problem | null;
+  loading: boolean;
+  error: Problem | null;
 }
 
 let status = $state<Status>({
-    loading: true,
-    error: null,
+  loading: true,
+  error: null,
 });
 
 export const setLoading = (loading: boolean) => {
-    status.loading = loading;
+  status.loading = loading;
 };
 
 export const setError = (error: Problem | null) => {
-    status.error = error;
+  status.error = error;
 };
 
 export const getStatus = () => {
-    return JSON.parse(JSON.stringify(status));
-}
+  return JSON.parse(JSON.stringify(status));
+};
diff --git a/front-end/src/lib/summary.svelte.ts b/front-end/src/lib/summary.svelte.ts
index 781e643..93c6290 100644
--- a/front-end/src/lib/summary.svelte.ts
+++ b/front-end/src/lib/summary.svelte.ts
@@ -27,4 +27,4 @@ export const fetchSummary = async (key?: string) => {
 
 export const getSummary = () => {
   return summary;
-}
+};