Dynamic feeds WIPx

1 files changed, 41 insertions, 7 deletions

diff --git a/src/main/assets/scripts.js b/src/main/assets/scripts.js
index 94f79424..2acc5502 100644
--- a/src/main/assets/scripts.js
+++ b/src/main/assets/scripts.js
@@ -6,6 +6,12 @@ import 'core-js/stable'
 import { embedLinksToX, embedAll, format } from '../../../vnext/src/utils/embed'
 import renderIcons from './icon'
 import svg4everybody from 'svg4everybody'
+import { createRoot } from 'react-dom/client'
+import { useState, useEffect } from 'react'
+
+import Message from '../../../vnext/src/ui/Message'
+import { VisitorProvider } from '../../../vnext/src/ui/VisitorContext'
+import { CookiesProvider } from 'react-cookie'
 
 /**
  * Autosize textarea
@@ -590,6 +596,31 @@ function notificationsCheckPermissions(button) {
     }
 }
 
+const Feed = () => {
+    const [messages, setMessages] = useState(/** @type { import('../../../vnext/src/api').Message[]? } */ (null))
+    useEffect(() => {
+        let url = new URL(window.location.href)
+        fetch(url, {
+            headers: {
+                'Accept': 'application/json'
+            },
+            credentials: 'same-origin'
+        })
+        .then(response => response.json())
+        .then(json => {
+            setMessages(json)
+        })
+        .catch(console.error)
+    }, [])
+    return messages ? (
+        <>
+            {
+                messages.map(message => <Message key={message.mid} data={message} isThread={false} onToggleSubscription={() => {}} /> )
+            }
+        </>
+     ) : 'Loading...'
+}
+
 /******************************************************************************/
 
 function ready(fn) {
@@ -601,12 +632,6 @@ function ready(fn) {
 }
 
 ready(() => {
-    elementClosest(window)
-    Array.from(document.querySelectorAll('textarea')).forEach((ta) => {
-        autosize(ta)
-    })
-    svg4everybody()
-    renderIcons()
     var insertPMButtons = function(e) {
         e.target.classList.add('narrowpm')
         e.target.parentNode.insertAdjacentHTML('afterend', '<input type="submit" class="Button" value="OK"/>')
@@ -629,6 +654,10 @@ ready(() => {
     if (content) {
         var pageMID = +content.getAttribute('data-mid')
         if (pageMID > 0) {
+            embedAll()
+            Array.from(document.querySelectorAll('textarea')).forEach((ta) => {
+                autosize(ta)
+            })
             Array.from(document.querySelectorAll('li.msg')).forEach(li => {
                 let showReplyFormBtn = li.querySelector('.a-thread-comment')
                 if (showReplyFormBtn) {
@@ -823,7 +852,6 @@ ready(() => {
             es.close()
         }
     })
-    embedAll()
     const button = document.getElementById('notifications_toggle')
     if (button) {
         button.addEventListener('click', () => {
@@ -831,4 +859,10 @@ ready(() => {
         })
         notificationsCheckPermissions(button)
     }
+    let root = document.getElementById('feed')
+    createRoot(root).render(
+        <VisitorProvider>
+            <Feed />
+        </VisitorProvider>
+    )
 })