Ability to update url without page refresh.

Author: adamghill

django_unicorn/components.py

@@ -44,6 +44,12 @@ def __init__(self, hash):
         self.hash = hash
 
 
+class LocationUpdate:
+    def __init__(self, redirect, title=None):
+        self.redirect = redirect
+        self.title = title
+
+
 class ComponentLoadError(Exception):
     pass
 

django_unicorn/static/js/messageSender.js

@@ -61,11 +61,18 @@ export function send(component, callback) {
       // TODO: For turbolinks support look at https://github.com/livewire/livewire/blob/f2ba1977d73429911f81b3f6363ee8f8fea5abff/js/component/index.js#L330-L336
       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 (responseJson.redirect.refresh) {
+            if (responseJson.redirect.title) {
+              component.window.document.title = responseJson.redirect.title;
+            }
+
+            component.window.history.pushState(
+              {},
+              "",
+              responseJson.redirect.url
+            );
+          } else {
+            component.window.location.href = responseJson.redirect.url;
           }
         } 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 HashUpdate, UnicornField, UnicornView
+from .components import HashUpdate, LocationUpdate, UnicornField, UnicornView
 from .errors import UnicornViewError
 from .serializer import dumps
 from .utils import generate_checksum
@@ -398,6 +398,12 @@ def message(request: HttpRequest, component_name: str = None) -> JsonResponse:
             redirect_data = {
                 "hash": return_value.hash,
             }
+        elif isinstance(return_value, LocationUpdate):
+            redirect_data = {
+                "url": return_value.redirect.url,
+                "refresh": True,
+                "title": return_value.title,
+            }
         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 HashUpdate, UnicornView
+from django_unicorn.components import HashUpdate, LocationUpdate, UnicornView
 from django_unicorn.db import DbModel
 from django_unicorn.decorators import db_model
 
@@ -33,7 +33,8 @@ def add_instance_flavor(self):
         id = self.instance_flavor.id
         self.reset()
 
-        return HashUpdate(f"#createdId={id}")
+        # return HashUpdate(f"#createdId={id}")
+        return LocationUpdate(redirect(f"/models?createdId={id}"), title="new title")
 
     def add_class_flavor(self):
         self.class_flavor.save()

tests/js/component/messageSender.test.js

@@ -3,7 +3,7 @@ import fetchMock from "fetch-mock";
 import { getComponent } from "../utils.js";
 import { send } from "../../../django_unicorn/static/js/messageSender.js";
 
-test.cb("click on internal element", (t) => {
+test.cb("call_method redirect", (t) => {
   const html = `
 <input type="hidden" name="csrfmiddlewaretoken" value="asdf">
 <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
@@ -41,3 +41,88 @@ test.cb("click on internal element", (t) => {
     t.end();
   });
 });
+
+test.cb("call_method refresh redirect", (t) => {
+  const html = `
+<input type="hidden" name="csrfmiddlewaretoken" value="asdf">
+<div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+    <input unicorn:model='name'></input>
+    <button unicorn:click='test()'><span id="clicker">Click</span></button>
+</div>
+  `;
+
+  const component = getComponent(html);
+
+  t.is(component.attachedEventTypes.length, 1);
+  t.is(component.actionEvents.click.length, 1);
+
+  component.actionEvents.click[0].element.el.click();
+
+  t.is(component.actionQueue.length, 1);
+
+  // mock the fetch
+  const res = {
+    id: "aQzrrRoG",
+    dom: "",
+    data: {
+      name: "World",
+    },
+    errors: {},
+    redirect: {
+      url: "/test/text-inputs?some=query",
+      refresh: true,
+      title: "new title",
+    },
+    return: {},
+  };
+  global.fetch = fetchMock.sandbox().mock().post("/test/text-inputs", res);
+
+  send(component, (a, b, err) => {
+    t.not(err);
+    t.is(component.window.history.get(), "/test/text-inputs?some=query");
+    t.is(component.window.document.title, "new title");
+    fetchMock.reset();
+    t.end();
+  });
+});
+
+test.cb("call_method hash", (t) => {
+  const html = `
+<input type="hidden" name="csrfmiddlewaretoken" value="asdf">
+<div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+    <input unicorn:model='name'></input>
+    <button unicorn:click='test()'><span id="clicker">Click</span></button>
+</div>
+  `;
+
+  const component = getComponent(html);
+
+  t.is(component.attachedEventTypes.length, 1);
+  t.is(component.actionEvents.click.length, 1);
+
+  component.actionEvents.click[0].element.el.click();
+
+  t.is(component.actionQueue.length, 1);
+
+  // mock the fetch
+  const res = {
+    id: "aQzrrRoG",
+    dom: "",
+    data: {
+      name: "World",
+    },
+    errors: {},
+    redirect: {
+      hash: "#somehash",
+    },
+    return: {},
+  };
+  global.fetch = fetchMock.sandbox().mock().post("/test/text-inputs", res);
+
+  send(component, (a, b, err) => {
+    t.not(err);
+    t.is(component.window.location.hash, "#somehash");
+    fetchMock.reset();
+    t.end();
+  });
+});

tests/js/utils.js

@@ -88,14 +88,26 @@ export function getComponent(html, id, name, data) {
 
   const document = getDocument(html);
 
+  const mockHistory = { urls: [] };
+  mockHistory.pushState = (state, title, url) => {
+    mockHistory.urls.push(url);
+  };
+  mockHistory.get = () => {
+    return mockHistory.urls[0];
+  };
+
   const component = new Component({
     id,
     name,
     data,
     document,
     messageUrl: "test",
     walker: walkDOM,
-    window: { location: { href: "" } },
+    window: {
+      document: { title: "" },
+      history: mockHistory,
+      location: { href: "" },
+    },
   });
 
   const res = {

tests/views/fake_components.py

@@ -3,7 +3,7 @@
 from django import forms
 from django.shortcuts import redirect
 
-from django_unicorn.components import HashUpdate, UnicornView
+from django_unicorn.components import HashUpdate, LocationUpdate, 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_refresh_redirect(self):
+        return LocationUpdate(redirect("/something-here"), title="new title")
+
     def test_hash_update(self):
         return HashUpdate("#test=1")
 

tests/views/message/test_call_method.py

@@ -41,7 +41,35 @@ def test_message_call_method_redirect(client):
     body = orjson.loads(response.content)
 
     assert "redirect" in body
-    assert body["redirect"].get("url") == "/something-here"
+    redirect = body["redirect"]
+    assert redirect.get("url") == "/something-here"
+    assert redirect.get("refresh", False) == False
+
+
+def test_message_call_method_refresh_redirect(client):
+    data = {}
+    message = {
+        "actionQueue": [
+            {"payload": {"name": "test_refresh_redirect"}, "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
+    redirect = body["redirect"]
+    assert redirect.get("url") == "/something-here"
+    assert redirect.get("refresh")
+    assert redirect.get("title") == "new title"
 
 
 def test_message_call_method_hash_update(client):