From f8ac2f39dbce6c523a61971da804bccf28ecae8a Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Wed, 23 Aug 2023 15:44:33 +0300 Subject: Dynamic feeds WIP --- src/main/assets/scripts.js | 48 +++++++++++++++++++---- src/main/resources/templates/layouts/default.html | 30 +++++++------- src/main/resources/templates/views/index.html | 4 +- vnext/src/ui/Avatar.js | 9 ++--- vnext/src/ui/Feeds.js | 2 +- vnext/src/ui/Message.js | 31 ++++++--------- vnext/src/ui/UserInfo.js | 23 ++++++----- vnext/src/utils/embed.js | 4 +- 8 files changed, 88 insertions(+), 63 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 => {}} /> ) + } + + ) : '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', '') @@ -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( + + + + ) }) 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 @@ - + - + - - - - - - - - - - - - - + + + + + + + + + + + + + 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 %} {% endif %} -{% for msg in msgs %} -{% include "views/partial/message" %} -{% endfor %} +
...
{% if nextpage | default('') is not empty %}

{% endif %} diff --git a/vnext/src/ui/Avatar.js b/vnext/src/ui/Avatar.js index 1a8db0c3..20e4e133 100644 --- a/vnext/src/ui/Avatar.js +++ b/vnext/src/ui/Avatar.js @@ -1,5 +1,4 @@ import { memo } from 'react' -import { Link } from 'react-router-dom' import Icon from './Icon' @@ -21,19 +20,19 @@ function Avatar({ user, style, link, children }) {
{ user.uname ? - + {user.avatar ? {`${user.uname}`} : } - + : }
- + {user.uname} - + {children}
diff --git a/vnext/src/ui/Feeds.js b/vnext/src/ui/Feeds.js index 086a910e..51e0209e 100644 --- a/vnext/src/ui/Feeds.js +++ b/vnext/src/ui/Feeds.js @@ -216,7 +216,7 @@ function Feed({ query }) { } { state.msgs.map(msg => - ) + ) } { state.msgs.length >= 20 && ( diff --git a/vnext/src/ui/Message.js b/vnext/src/ui/Message.js index e4135700..ec9af46f 100644 --- a/vnext/src/ui/Message.js +++ b/vnext/src/ui/Message.js @@ -6,7 +6,6 @@ dayjs.extend(utc) import relativeTime from 'dayjs/plugin/relativeTime' dayjs.extend(relativeTime) -import { Link } from 'react-router-dom' import Icon from './Icon' import Avatar from './Avatar' import { UserLink } from './UserInfo' @@ -63,19 +62,17 @@ export default function Message({ data, isThread, onToggleSubscription, children data.user &&
- + - + { visitor.uid == data.user.uid && <>  ·  - Edit + Edit }
@@ -101,21 +98,20 @@ export default function Message({ data, isThread, onToggleSubscription, children {canComment &&