From 12ed207b83152f60468147e98b40e9cd484d26c8 Mon Sep 17 00:00:00 2001
From: F-park <52167622+F-park@users.noreply.github.com>
Date: Sat, 27 Jan 2024 11:51:08 +0800
Subject: [PATCH 1/4] refactor homepage random button

---
 templates/index.html | 16 +++++++++++++++-
 tests/test_api.py    | 10 ----------
 views/challenge.py   |  6 ------
 views/views.py       | 15 +--------------
 4 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 4703f3d..fd40eab 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -82,7 +82,21 @@ <h1 class="title">Welcome to Python Type Challenges!</h1>
         {% include 'components/challenge_card.html' with context %}
       {% endfor%}
     </div>
-    <div class="random-button"><a href="/random" title="Pick a random challenge">Random Challenge 🔀</a></div>
+    <div class="random-button"><a title="Pick a random challenge">Random Challenge 🔀</a></div>
   </div>
+  <script>
+    const challengesGroupbyLevel = {{ challenges_groupby_level | tojson }};
+    const levels = Object.keys(challengesGroupbyLevel);
+
+    let index = Math.floor(Math.random() * levels.length);
+    const level = levels[index];
+    const challengeNames = challengesGroupbyLevel[level];
+
+    index = Math.floor(Math.random() * levels.length);
+    const challengeName = challengeNames[index];
+
+    const randomButtonA = document.querySelector('.random-button>a');
+    randomButtonA.setAttribute('href', `/${level}/${challengeName}`);
+  </script>
 
 {% endblock %}
diff --git a/tests/test_api.py b/tests/test_api.py
index d85db2b..4984457 100644
--- a/tests/test_api.py
+++ b/tests/test_api.py
@@ -2,8 +2,6 @@
 
 from flask.testing import FlaskClient
 
-from views.challenge import ChallengeKey, Level, challenge_manager
-
 
 def test_get_challenge(test_client: FlaskClient, question_file: Path):
     level, challenge_name = question_file.parent.name.split("-", maxsplit=1)
@@ -33,11 +31,3 @@ def test_invalid_challenge_redirect_to_homepage(test_client: FlaskClient):
     response = test_client.get("/foo/bar")
     assert response.status_code == 302
     assert response.location == "/"
-
-
-def test_get_random_challenge(test_client: FlaskClient):
-    response = test_client.get("/random")
-    assert response.status_code == 302
-    level, challenge_name = response.location[1:].split("/")
-    assert Level.is_valid_level(level)
-    assert challenge_manager.has_challenge(ChallengeKey(Level(level), challenge_name))
diff --git a/views/challenge.py b/views/challenge.py
index ba4a14e..1533a63 100644
--- a/views/challenge.py
+++ b/views/challenge.py
@@ -1,5 +1,4 @@
 import io
-import random
 import re
 import subprocess
 import tempfile
@@ -98,11 +97,6 @@ def run_challenge(self, key: ChallengeKey, user_code: str) -> TypeCheckResult:
         # Make sure user code ends with a new line to avoid issue #63.
         return self._type_check_with_pyright(user_code + "\n", challenge.test_code)
 
-    def get_random_challenge(self) -> dict[str, str]:
-        level = random.choice(list(self.challenges_groupby_level.keys()))
-        name = random.choice(self.challenges_groupby_level[level])
-        return {"level": level, "name": name}
-
     @staticmethod
     def _load_challenges(root_dir: Path) -> dict[ChallengeKey, Challenge]:
         challenges = {}
diff --git a/views/views.py b/views/views.py
index cf54522..e9c8e24 100644
--- a/views/views.py
+++ b/views/views.py
@@ -2,14 +2,7 @@
 import platform
 from functools import wraps
 
-from flask import (
-    abort,
-    Blueprint,
-    jsonify,
-    redirect,
-    render_template,
-    request,
-)
+from flask import Blueprint, abort, jsonify, render_template, request
 from flask_htmx import HTMX
 
 from .challenge import ChallengeKey, Level, challenge_manager
@@ -95,9 +88,3 @@ def run_challenge(level: str, name: str):
     return jsonify(
         {"passed": False, "message": error_message, "debug_info": result.debug_info}
     )
-
-
-@app_views.route("/random", methods=["GET"])
-def run_random_challenge():
-    challenge = challenge_manager.get_random_challenge()
-    return redirect(f"/{challenge['level']}/{challenge['name']}")

From 30bf66ceff52dd57ee7e9c3bb39bf15888401491 Mon Sep 17 00:00:00 2001
From: F-park <52167622+F-park@users.noreply.github.com>
Date: Sat, 27 Jan 2024 21:16:29 +0800
Subject: [PATCH 2/4] adjust refactoring

---
 templates/index.html | 16 +---------------
 views/challenge.py   |  6 ++++++
 views/views.py       |  1 +
 3 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index fd40eab..e6ac432 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -82,21 +82,7 @@ <h1 class="title">Welcome to Python Type Challenges!</h1>
         {% include 'components/challenge_card.html' with context %}
       {% endfor%}
     </div>
-    <div class="random-button"><a title="Pick a random challenge">Random Challenge 🔀</a></div>
+    <div class="random-button"><a href="{{pathname}}" title="Pick a random challenge">Random Challenge 🔀</a></div>
   </div>
-  <script>
-    const challengesGroupbyLevel = {{ challenges_groupby_level | tojson }};
-    const levels = Object.keys(challengesGroupbyLevel);
-
-    let index = Math.floor(Math.random() * levels.length);
-    const level = levels[index];
-    const challengeNames = challengesGroupbyLevel[level];
-
-    index = Math.floor(Math.random() * levels.length);
-    const challengeName = challengeNames[index];
-
-    const randomButtonA = document.querySelector('.random-button>a');
-    randomButtonA.setAttribute('href', `/${level}/${challengeName}`);
-  </script>
 
 {% endblock %}
diff --git a/views/challenge.py b/views/challenge.py
index 1533a63..e4795d4 100644
--- a/views/challenge.py
+++ b/views/challenge.py
@@ -1,4 +1,5 @@
 import io
+import random
 import re
 import subprocess
 import tempfile
@@ -97,6 +98,11 @@ def run_challenge(self, key: ChallengeKey, user_code: str) -> TypeCheckResult:
         # Make sure user code ends with a new line to avoid issue #63.
         return self._type_check_with_pyright(user_code + "\n", challenge.test_code)
 
+    def get_random_challenge_pathname(self) -> str:
+        level = random.choice(list(self.challenges_groupby_level.keys()))
+        name = random.choice(self.challenges_groupby_level[level])
+        return f"/{level}/{name}"
+
     @staticmethod
     def _load_challenges(root_dir: Path) -> dict[ChallengeKey, Challenge]:
         challenges = {}
diff --git a/views/views.py b/views/views.py
index e9c8e24..01e5ad7 100644
--- a/views/views.py
+++ b/views/views.py
@@ -31,6 +31,7 @@ def index():
     return render_template(
         "index.html",
         challenges_groupby_level=challenge_manager.challenges_groupby_level,
+        pathname=challenge_manager.get_random_challenge_pathname(),
     )
 
 

From 3f69ea7857d66fd39f8aad214476f4d57eb62cb1 Mon Sep 17 00:00:00 2001
From: F-park <52167622+F-park@users.noreply.github.com>
Date: Sun, 28 Jan 2024 11:54:12 +0800
Subject: [PATCH 3/4] refactor sidebar random button

---
 templates/challenge.html                 |  4 +++-
 templates/components/challenge_area.html |  2 +-
 templates/components/randomizer.html     |  3 ++-
 tests/test_api.py                        | 10 ++++++++++
 views/views.py                           | 15 ++++++++++++++-
 5 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/templates/challenge.html b/templates/challenge.html
index 7401e83..06933e5 100644
--- a/templates/challenge.html
+++ b/templates/challenge.html
@@ -259,7 +259,9 @@
       <div class="sidebar-actions">
         {% include 'components/github_icon.html' %}
         {% include 'components/darkmode.html' %}
-        {% include 'components/randomizer.html' %}
+        <div id="sidebar-actions-random">
+          {% include 'components/randomizer.html' %}
+        </div>
       </div>
     </div>
 
diff --git a/templates/components/challenge_area.html b/templates/components/challenge_area.html
index c1916c4..66e4f72 100644
--- a/templates/components/challenge_area.html
+++ b/templates/components/challenge_area.html
@@ -19,7 +19,7 @@
   </div>
 </div>
 
-<div class="challenge-main">
+<div class="challenge-main" hx-get="/random" hx-target="#sidebar-actions-random" hx-trigger="load">
   <div class="codemirror-container">
     <div id="editor">
       <a id="playground-link" target="_blank" rel="noopener noreferrer">
diff --git a/templates/components/randomizer.html b/templates/components/randomizer.html
index b4682d0..d44f3c9 100644
--- a/templates/components/randomizer.html
+++ b/templates/components/randomizer.html
@@ -9,7 +9,8 @@
   }
 </style>
 
-<a href="/random" class="icon" title="Pick a random challenge">
+<a hx-get="{{pathname}}" hx-target=".challenge-area" hx-push-url="true" onclick="removeHighlight(event)"
+   class="icon" title="Pick a random challenge">
   <!-- SVG from https://icons.getbootstrap.com/icons/shuffle/ -->
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shuffle" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.624 9.624 0 0 0 7.556 8a9.624 9.624 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.595 10.595 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.624 9.624 0 0 0 6.444 8a9.624 9.624 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5"/>
diff --git a/tests/test_api.py b/tests/test_api.py
index 4984457..d85db2b 100644
--- a/tests/test_api.py
+++ b/tests/test_api.py
@@ -2,6 +2,8 @@
 
 from flask.testing import FlaskClient
 
+from views.challenge import ChallengeKey, Level, challenge_manager
+
 
 def test_get_challenge(test_client: FlaskClient, question_file: Path):
     level, challenge_name = question_file.parent.name.split("-", maxsplit=1)
@@ -31,3 +33,11 @@ def test_invalid_challenge_redirect_to_homepage(test_client: FlaskClient):
     response = test_client.get("/foo/bar")
     assert response.status_code == 302
     assert response.location == "/"
+
+
+def test_get_random_challenge(test_client: FlaskClient):
+    response = test_client.get("/random")
+    assert response.status_code == 302
+    level, challenge_name = response.location[1:].split("/")
+    assert Level.is_valid_level(level)
+    assert challenge_manager.has_challenge(ChallengeKey(Level(level), challenge_name))
diff --git a/views/views.py b/views/views.py
index 01e5ad7..81cf0b6 100644
--- a/views/views.py
+++ b/views/views.py
@@ -2,7 +2,7 @@
 import platform
 from functools import wraps
 
-from flask import Blueprint, abort, jsonify, render_template, request
+from flask import Blueprint, abort, jsonify, redirect, render_template, request
 from flask_htmx import HTMX
 
 from .challenge import ChallengeKey, Level, challenge_manager
@@ -89,3 +89,16 @@ def run_challenge(level: str, name: str):
     return jsonify(
         {"passed": False, "message": error_message, "debug_info": result.debug_info}
     )
+
+
+@app_views.route("/random", methods=["GET"])
+def get_random():
+    pathname = challenge_manager.get_random_challenge_pathname()
+
+    if htmx:
+        return render_template(
+            "components/randomizer.html",
+            pathname=pathname,
+        )
+
+    return redirect(pathname)

From 248d52c7b37a1d1bc258ca690623228e47744f56 Mon Sep 17 00:00:00 2001
From: F-park <52167622+F-park@users.noreply.github.com>
Date: Mon, 29 Jan 2024 10:49:59 +0800
Subject: [PATCH 4/4] add challenge_main_htmx param

---
 templates/components/challenge_area.html | 2 +-
 views/views.py                           | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/templates/components/challenge_area.html b/templates/components/challenge_area.html
index 66e4f72..5bbb772 100644
--- a/templates/components/challenge_area.html
+++ b/templates/components/challenge_area.html
@@ -19,7 +19,7 @@
   </div>
 </div>
 
-<div class="challenge-main" hx-get="/random" hx-target="#sidebar-actions-random" hx-trigger="load">
+<div class="challenge-main" {{challenge_main_htmx}}>
   <div class="codemirror-container">
     <div id="editor">
       <a id="playground-link" target="_blank" rel="noopener noreferrer">
diff --git a/views/views.py b/views/views.py
index 81cf0b6..bdcf8b3 100644
--- a/views/views.py
+++ b/views/views.py
@@ -60,7 +60,12 @@ def get_challenge(level: str, name: str):
     if htmx:
         # In this case, challenges_groupby_level is transferred, since it's not
         # used in challenge_area.html
+        params[
+            "challenge_main_htmx"
+        ] = "hx-get=/random hx-target=#sidebar-actions-random hx-trigger=load"
         return render_template("components/challenge_area.html", **params)
+
+    params["pathname"] = challenge_manager.get_random_challenge_pathname()
     return render_template("challenge.html", **params)