Dynamic feeds WIPx

3 files changed, 57 insertions, 25 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>
+    )
 })
diff --git a/src/main/resources/templates/layouts/default.html b/src/main/resources/templates/layouts/default.html
index c3dac5d4..77bdac9b 100644
--- a/src/main/resources/templates/layouts/default.html
+++ b/src/main/resources/templates/layouts/default.html
@@ -15,24 +15,24 @@
     <meta property="fb:app_id" content="130568668304" />
     <meta property="fb:pages" content="270127573154958" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="msapplication-config" content="//i.juick.com/browserconfig.xml" />
+    <meta name="msapplication-config" content="https://i.juick.com/browserconfig.xml" />
     <meta name="msapplication-TileColor" content="#ffffff" />
-    <meta name="msapplication-TileImage" content="//i.juick.com/ms-icon-144x144.png" />
+    <meta name="msapplication-TileImage" content="https://i.juick.com/ms-icon-144x144.png" />
     <meta name="theme-color" content="#ffffff" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <link rel="apple-touch-icon" sizes="57x57" href="//i.juick.com/apple-icon-57x57.png" />
-    <link rel="apple-touch-icon" sizes="60x60" href="//i.juick.com/apple-icon-60x60.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="//i.juick.com/apple-icon-72x72.png" />
-    <link rel="apple-touch-icon" sizes="76x76" href="//i.juick.com/apple-icon-76x76.png" />
-    <link rel="apple-touch-icon" sizes="114x114" href="//i.juick.com/apple-icon-114x114.png" />
-    <link rel="apple-touch-icon" sizes="120x120" href="//i.juick.com/apple-icon-120x120.png" />
-    <link rel="apple-touch-icon" sizes="144x144" href="//i.juick.com/apple-icon-144x144.png" />
-    <link rel="apple-touch-icon" sizes="152x152" href="//i.juick.com/apple-icon-152x152.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="//i.juick.com/apple-icon-180x180.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="//i.juick.com/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="96x96" href="//i.juick.com/favicon-96x96.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="//i.juick.com/favicon-16x16.png" />
-    <link rel="manifest" href="//i.juick.com/manifest.json" />
+    <link rel="apple-touch-icon" sizes="57x57" href="https://i.juick.com/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="https://i.juick.com/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="https://i.juick.com/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="https://i.juick.com/apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="https://i.juick.com/apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="https://i.juick.com/apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="https://i.juick.com/apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="https://i.juick.com/apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="https://i.juick.com/apple-icon-180x180.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="https://i.juick.com/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="https://i.juick.com/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="https://i.juick.com/favicon-16x16.png" />
+    <link rel="manifest" href="https://i.juick.com/manifest.json" />
 </head>
 
 <body id="body" {% if visitor.uid > 0 %}data-hash="{{visitor.authHash}}"{% endif %}>
diff --git a/src/main/resources/templates/views/index.html b/src/main/resources/templates/views/index.html
index e85a3aa1..acb4685a 100644
--- a/src/main/resources/templates/views/index.html
+++ b/src/main/resources/templates/views/index.html
@@ -4,9 +4,7 @@
 {% if noindex %}
 <!--noindex-->
 {% endif %}
-{% for msg in msgs %}
-{% include "views/partial/message" %}
-{% endfor %}
+<div id="feed">...</div>
 {% if nextpage | default('') is not empty %}
 <p class="page"><a href="{{ nextpage | raw }}" rel="prev">{{ i18n("messages","messages.next") }} →</a></p>
 {% endif %}