Some minor adjustments to the chat so that it works properly

.gitignore

@@ -154,4 +154,5 @@ dmypy.json
 node_modules
 /static
 /core/static/dist
+django-sockpuppet
 .env/

app/settings.py

@@ -130,3 +130,45 @@
 }
 ASGI_APPLICATION = 'sockpuppet.routing.application'
 WSGI_APPLICATION = 'app.wsgi.application'
+
+logging_debug = 'DEBUG' if DEBUG else 'INFO'
+LOGGING = {
+    'version': 1,
+    'disable_existing_loggers': False,
+    'root': {
+        'handlers': ['console'],
+        'level': 'DEBUG'
+    },
+    'handlers': {
+        'console': {
+            'level': os.getenv('DJANGO_LOG_LEVEL', 'INFO'),
+            'class': 'logging.StreamHandler',
+            'formatter': 'simple'
+        },
+        'sockpuppet': {
+            'level': 'DEBUG',
+            'class': 'logging.StreamHandler',
+            'formatter': 'simple'
+        }
+    },
+    'formatters': {
+        'verbose': {
+            'format': "[%(asctime)s] %(levelname)s [%(name)s:%(lineno)s] %(message)s",
+            'datefmt': "%d/%b/%Y %H:%M:%S"
+        },
+        'simple': {
+            'format': '%(levelname)s %(message)s'
+        },
+    },
+    'loggers': {
+        'django.db.backends': {
+            # uncomment to see all queries
+            # 'level': 'DEBUG',
+            'handlers': ['console'],
+        },
+        'sockpuppet': {
+            'level': logging_debug,
+            'handlers': ['sockpuppet']
+        }
+    }
+}

core/javascript/controllers/application_controller.js

@@ -8,7 +8,7 @@ export default class extends Controller {
   }
 
   beforeReflex (element, reflex) {
-      console.log("beforeReflex")
+    console.log("beforeReflex")
     document
       .querySelectorAll('[data-activity-indicator]')
       .forEach(el => (el.hidden = false))

core/javascript/controllers/chat_controller.js

@@ -45,6 +45,7 @@ export default class extends ApplicationController {
   }
 
   reload (event) {
+    if (!event.detail) return
     const { messageId } = event.detail
     if (messageId === lastMessageId) return
     debouncedReload(this)

core/reflexes/chat_reflex.py

@@ -9,13 +9,13 @@ def post(self, color, message, message_id):
         chats = cache.get("chats", [])
         chats.append({
             'message': message,
-            'message_id': message_id,
+            'messageId': message_id,
             'created_at': timezone.now()
         })
         cache.set("chats", chats)
-        channel = Channel("chat")
+        channel = Channel("ChatChannel")
         channel.dispatch_event({
             'name': 'chats:added',
-            'detail': {'messagre_id': message_id}
+            'detail': {'messageId': message_id}
         })
         channel.broadcast()

core/static/css/styles.css

@@ -27,8 +27,6 @@ footer {
 footer,
 header,
 main {
-    margin: 0 auto;
-    max-width: var(--width-content);
     padding: 0rem 2rem;
 }
 

core/templates/_chat_demo.html

@@ -1,12 +1,14 @@
 
 <article id="red"
-    data-controller="chat" 
-    data-action="chats:added@document->chat#reload cable-ready:after-morph@document->chat#scroll">
-    <span data-target="chat.list">
+    data-controller="chat"
+    data-action="chats:added@document->chat#reload cable-ready:after-morph@document->chat#scroll"
+    data-reflex-root="#chat-container"
+    >
+    <span id="chat-container" data-target="chat.list">
       {% for chat in chats  %}
         <aside class="message" style="min-height:auto; margin-top: 15px;">
           <p>
-          {{chat.message}} <sup>{{chat.created_at|timesince}} ago </sup>
+          {{ chat.message }} <sup>{{ chat.created_at|timesince }} ago </sup>
           </p>
         </aside>
       {% endfor %}

core/templates/base.html

@@ -48,7 +48,7 @@ <h2> {% block subtitle %}Django Sockpuppet{% endblock subtitle %}</h2>
     <a href="https://github.com/zodman/django-sockpuppet-expo">
       <img src="https://img.shields.io/static/v1?label=github&message=django-sockpuppet-expo&logo=github">
     </a>
-    <a href="https://github.com/zodman/django-socketpuppet-expo"> 
+    <a href="https://github.com/zodman/django-socketpuppet-expo">
       <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/zodman/django-socketpuppet-expo?style=social">
     </a>
   </footer>

yarn.lock

@@ -9,7 +9,7 @@
 
 "@rails/ujs@^6.0.3-4":
   version "6.0.3-4"
-  resolved "https://nexus.gcds.coke.com/repository/npm-group/@rails/ujs/-/ujs-6.0.3-4.tgz#8dafc84178080f9c4f21076953ea1d0dc0bfe0fc"
+  resolved "https://registry.yarnpkg.com/@rails/ujs/-/ujs-6.0.3-4.tgz#8dafc84178080f9c4f21076953ea1d0dc0bfe0fc"
   integrity sha512-pNEEndJYNMCYEZG79MkoMc40AYKBfm0md8pawJ/SUu/1aIhToJcKu+9hHT/7WMLudsakOgC/C8KKFuZOs4QTgw==
 
 "@stimulus/core@^1.1.1":