Update just the url hash from a component instead of a complete redirect.

Author: adamghill

django_unicorn/components.py

@@ -32,14 +32,18 @@
 
 class UnicornField:
     """
-    Can be used to provide a way to serialize a class quickly.
-    Probably not a good idea in lots of cases.
+    Base class to provide a way to serialize a component field quickly.
     """
 
     def to_json(self):
         return self.__dict__
 
 
+class HashUpdate:
+    def __init__(self, hash):
+        self.hash = hash
+
+
 class ComponentLoadError(Exception):
     pass
 

django_unicorn/static/js/messageSender.js

@@ -59,11 +59,16 @@ export function send(component, callback) {
 
       // Redirect to the specified url if it is set
       // TODO: For turbolinks support look at https://github.com/livewire/livewire/blob/f2ba1977d73429911f81b3f6363ee8f8fea5abff/js/component/index.js#L330-L336
-      if (responseJson.redirect && responseJson.redirect.url) {
-        component.window.location.href = responseJson.redirect.url;
+      if (responseJson.redirect) {
+        if (responseJson.redirect.url) {
+          // TODO: Use config to potentially use `component.window.history.pushState()`
+          component.window.location.href = responseJson.redirect.url;
 
-        if (isFunction(callback)) {
-          callback([], null, null);
+          if (isFunction(callback)) {
+            callback([], null, null);
+          }
+        } else if (responseJson.redirect.hash) {
+          component.window.location.hash = responseJson.redirect.hash;
         }
       }
 

django_unicorn/views.py

@@ -11,7 +11,7 @@
 import orjson
 
 from .call_method_parser import InvalidKwarg, parse_call_method_name, parse_kwarg
-from .components import UnicornField, UnicornView
+from .components import HashUpdate, UnicornField, UnicornView
 from .errors import UnicornViewError
 from .serializer import dumps
 from .utils import generate_checksum
@@ -386,11 +386,18 @@ def message(request: HttpRequest, component_name: str = None) -> JsonResponse:
     return_data = {}
     redirect_data = {}
 
+    # TODO: Support a tuple/list return_value which could contain a redirect and value(s).
+    # `return (redirect(...), 1)` -> { return: { 1 } }, redirect: { url: "..." } }
+    # easier for `HashUpdate`, would need to handle setting last return value after new component loaded
     if return_value is not None:
         if isinstance(return_value, HttpResponseRedirect):
             redirect_data = {
                 "url": return_value.url,
             }
+        elif isinstance(return_value, HashUpdate):
+            redirect_data = {
+                "hash": return_value.hash,
+            }
         else:
             try:
                 return_data = orjson.loads(dumps(return_value))

example/unicorn/components/models.py

@@ -3,7 +3,7 @@
 
 from coffee.models import Flavor
 
-from django_unicorn.components import UnicornView
+from django_unicorn.components import HashUpdate, UnicornView
 from django_unicorn.db import DbModel
 from django_unicorn.decorators import db_model
 
@@ -30,13 +30,18 @@ def hydrate(self):
 
     def add_instance_flavor(self):
         self.instance_flavor.save()
+        id = self.instance_flavor.id
+        self.reset()
 
-        return redirect(f"/models?createdId={self.instance_flavor.id}")
+        return HashUpdate(f"#createdId={id}")
 
     def add_class_flavor(self):
         self.class_flavor.save()
+        id = self.class_flavor.id
         self.reset()
 
+        return redirect(f"/models?createdId={id}")
+
     @db_model
     def delete(self, model):
         model.delete()

tests/views/fake_components.py

@@ -3,7 +3,7 @@
 from django import forms
 from django.shortcuts import redirect
 
-from django_unicorn.components import UnicornView
+from django_unicorn.components import HashUpdate, UnicornView
 from example.coffee.models import Flavor
 
 
@@ -28,6 +28,9 @@ def test_method_string_param(self, param):
     def test_redirect(self):
         return redirect("/something-here")
 
+    def test_hash_update(self):
+        return HashUpdate("#test=1")
+
     def test_return_value(self):
         return "booya"
 

tests/views/message/test_call_method.py

@@ -44,6 +44,29 @@ def test_message_call_method_redirect(client):
     assert body["redirect"].get("url") == "/something-here"
 
 
+def test_message_call_method_hash_update(client):
+    data = {}
+    message = {
+        "actionQueue": [
+            {"payload": {"name": "test_hash_update"}, "type": "callMethod",}
+        ],
+        "data": data,
+        "checksum": generate_checksum(orjson.dumps(data)),
+        "id": "FDHcbzGf",
+    }
+
+    response = client.post(
+        "/message/tests.views.fake_components.FakeComponent",
+        message,
+        content_type="application/json",
+    )
+
+    body = orjson.loads(response.content)
+
+    assert "redirect" in body
+    assert body["redirect"].get("hash") == "#test=1"
+
+
 def test_message_call_method_return_value(client):
     data = {}
     message = {