Use path parameters for key and active view

Author: kangasta

back-end/feedback/views.py

@@ -75,14 +75,17 @@ def question_answers(request: HttpRequest, key: str):
 
 @_feedback_error_as_json
 def answer(request: HttpRequest, id_: str):
-    if request.method != "PATCH":
+    if request.method not in ["GET", "PATCH"]:
         raise FeedbackError("Method not allowed", 405)
 
     try:
         a = Answer.objects.get(id=id_)
     except Answer.DoesNotExist:
         raise FeedbackError("Answer not found", 404)
 
+    if request.method == "GET":
+        return JsonResponse(a.json)
+
     data = _parse_json_body(request)
     if data.pop("submit", None):
         a.submitted_at = datetime.now(timezone.utc)

front-end/default.conf.template

@@ -6,7 +6,7 @@ server {
 
     location / {
         root   /usr/share/nginx/html;
-        index  index.html index.htm;
+        try_files $uri $uri/ /index.html /index.htm;
     }
 
     location /static/ {

front-end/src/App.svelte

@@ -5,6 +5,7 @@
   import RadioGroup from "./lib/RadioGroup.svelte";
   import {
     createAnswer,
+    getAnswer,
     getQuestion,
     getSummary,
     updateAnswer,
@@ -23,6 +24,7 @@
   import Footer from "./lib/Footer.svelte";
 
   let loading = $state(true);
+  let view = $state<string>("form");
   let error = $state<Problem | null>(null);
   let question = $state<Question | null>(null);
   let answer = $state<Answer | null>(null);
@@ -34,9 +36,15 @@
         // Wait until the server has started.
         await waitUntilLive();
 
-        // Parse the question key from URL query parameters.
+        // 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 = query.get("key");
+
+        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,
@@ -45,6 +53,15 @@
           return;
         }
 
+        view = pathComponents[1] || "form";
+        if (["form", "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) {
@@ -53,13 +70,22 @@
         }
         question = qr.data;
 
-        // Initialize the answer.
-        const ar = await createAnswer(key);
-        if (ar.error) {
-          error = ar.error;
-          return;
+        // 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}`);
+        }
+
+        // Fetch the summary.
+        if (view === "summary") {
+          fetchSummary(key);
         }
-        answer = ar.data;
       } catch (err) {
         error = {
           status: 500,
@@ -70,6 +96,10 @@
       }
     };
 
+    window.addEventListener("popstate", (event) => {
+      initAnswer();
+    });
+
     initAnswer();
   });
 
@@ -79,7 +109,7 @@
     }
 
     try {
-      const ar = await updateAnswer(answer?.key, answer?.id, payload);
+      const ar = await updateAnswer(answer?.id, payload);
       if (ar.error) {
         error = ar.error;
         return;
@@ -93,11 +123,10 @@
     }
   };
 
-  const handleSubmit = async () => {
+  const fetchSummary = async (key?: string) => {
     loading = true;
-    await handleChange({ submit: true });
     try {
-      const sr = await getSummary(answer?.key ?? "");
+      const sr = await getSummary(key ?? "");
       if (sr.error) {
         error = sr.error;
         return;
@@ -112,6 +141,15 @@
       loading = false;
     }
   };
+
+  const handleSubmit = async () => {
+    loading = true;
+    await handleChange({ submit: true });
+    view = "summary";
+    window.history.pushState({id: answer?.id}, "", `/${answer?.key}/summary`);
+    await fetchSummary(answer?.key);
+    loading = false;
+  };
 </script>
 
 <header>
@@ -125,7 +163,7 @@
     <Loading />
   {:else if error}
     <Error {error} />
-  {:else if question && !answer?.submitted_at}
+  {:else if question && view === "form"}
     <fieldset>
       <legend>{question.choice_text}</legend>
       <RadioGroup
@@ -145,7 +183,7 @@
       {/if}
       <Submit onSubmit={handleSubmit} />
     {/if}
-  {:else if question && answer?.submitted_at && summary}
+  {:else if question && view === "summary" && summary}
     <div class="summary">
       <p>Thank you for your feedback!</p>
       <BarChart choices={question.choices} {summary} />

front-end/src/lib/api.ts

@@ -68,6 +68,11 @@ export const getQuestion = async (
   return buildResponse<Question>(response);
 };
 
+export const getAnswer = async (id: string): Promise<APIResponse<Answer>> => {
+  const response = await fetch(`${baseUrl()}/answer/${id}`);
+  return buildResponse<Answer>(response);
+};
+
 export const createAnswer = async (
   key: string,
 ): Promise<APIResponse<Answer>> => {
@@ -82,7 +87,6 @@ export const createAnswer = async (
 };
 
 export const updateAnswer = async (
-  key: string,
   id: string,
   payload: UpdateAnswerPayload,
 ): Promise<APIResponse<Answer>> => {