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

---
 vnext/src/ui/Avatar.js   |  9 ++++-----
 vnext/src/ui/Feeds.js    |  2 +-
 vnext/src/ui/Message.js  | 31 +++++++++++++------------------
 vnext/src/ui/UserInfo.js | 23 +++++++++++------------
 4 files changed, 29 insertions(+), 36 deletions(-)

(limited to 'vnext/src/ui')

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 }) {
             <div className="msg-avatar">
                 {
                     user.uname ?
-                        <Link to={{ pathname: link || `/${user.uname}/` }}>
+                        <a href={ link || `/${user.uname}/` }>
                             {user.avatar ?
                                 <img src={user.avatar} alt={`${user.uname}`} />
                                 : <Icon name="ei-spinner" size="m" />}
-                        </Link>
+                        </a>
                         : <Icon name="ei-spinner" size="m" />
                 }
             </div>
             <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                 <span>
-                    <Link to={{ pathname: link || `/${user.uname}/` }}>
+                    <a href={ link || `/${user.uname}/` }>
                         <span>{user.uname}</span>
-                    </Link>
+                    </a>
                 </span>
                 {children}
             </div>
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 =>
-          <Message key={msg.mid} data={msg} visitor={visitor} />)
+          <Message key={msg.mid} data={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 &&
                     <Avatar user={data.user}>
                         <div className="msg-ts">
-                            <Link to={`/${data.user.uname}/${data.mid}`} state={{ data: data }}>
+                            <a href={`/${data.user.uname}/${data.mid}`}>
                                 <time dateTime={data.timestamp}
                                     title={dayjs.utc(data.timestamp).local().format('lll')}>
                                     {dayjs.utc(data.timestamp).fromNow()}
                                 </time>
-                            </Link>
+                            </a>
                             {
                                 visitor.uid == data.user.uid &&
                                 <>
                                     <span>&nbsp;&middot;&nbsp;</span>
-                                    <Link to={{
-                                        pathname: '/post',
-                                    }} state={{ data: data }}>Edit</Link>
+                                    <a href={'/post'}>Edit</a>
                                 </>
                             }
                         </div>
@@ -101,21 +98,20 @@ export default function Message({ data, isThread, onToggleSubscription, children
             {canComment &&
                 <nav className="l">
                     {data.user && visitor.uid === data.user.uid ? (
-                        <Link to={`/${data.user.uname}/${data.mid}`} className="a-like msg-button"
-                            state={{ data: data }}>
+                        <a href={`/${data.user.uname}/${data.mid}`} className="a-like msg-button">
                             <Icon name="ei-heart" size="s" />
                             <span>{likesSummary}</span>
-                        </Link>
+                        </a>
                     ) : visitor.uid > 0 ? (
-                        <Link to={'/post'} className="a-like msg-button">
+                        <a href={'/post'} className="a-like msg-button">
                             <Icon name="ei-heart" size="s" />
                             <span>{likesSummary}</span>
-                        </Link>
+                        </a>
                     ) : (
-                        <Link to="/login" className="a-login msg-button">
+                        <a href="/login" className="a-login msg-button">
                             <Icon name="ei-heart" size="s" />
                             <span>{likesSummary}</span>
-                        </Link>
+                        </a>
                     )}
                     {
                         data.user && canComment && ((
@@ -131,11 +127,10 @@ export default function Message({ data, isThread, onToggleSubscription, children
                                         </>)}
                                 </a>
                             ) : (
-                                <Link to={`/${data.user.uname}/${data.mid}`} className="a-comment msg-button"
-                                    state={{ data: data }}>
+                                <a href={`/${data.user.uname}/${data.mid}`} className="a-comment msg-button">
                                     <Icon name="ei-comment" size="s" />
                                     <span>{commentsSummary}</span>
-                                </Link>
+                                </a>
                             )
                         ))
                     }
@@ -164,9 +159,9 @@ function Tags({ data, user }) {
                 data.map((tag, index) => (
                     <Fragment key={tag}>
                         {index > 0 && ' '}
-                        <Link key={tag} to={`/${user.uname}?tag=${tag}`} title={tag}>
+                        <a key={tag} href={`/${user.uname}?tag=${tag}`} title={tag}>
                             {tag}
-                        </Link>
+                        </a>
                     </Fragment>
                 ))
             }
diff --git a/vnext/src/ui/UserInfo.js b/vnext/src/ui/UserInfo.js
index f71dfcdc..ac9c6c69 100644
--- a/vnext/src/ui/UserInfo.js
+++ b/vnext/src/ui/UserInfo.js
@@ -1,5 +1,4 @@
 import { memo, useState, useEffect, useRef } from 'react'
-import { Link } from 'react-router-dom'
 
 import { info, fetchUserUri } from '../api'
 
@@ -42,18 +41,18 @@ export default function UserInfo({ uname, onUpdate, children }) {
                 {
                     user.uid > 0 &&
                     <>
-                        <Link to={`/pm/${user.uname}`}>
+                        <a href={`/pm/${user.uname}`}>
                             <Icon name="ei-envelope" size="s" />
                             <span className="desktop">PM</span>
-                        </Link>
-                        <Link to={`/${user.uname}/?show=recomm`} rel="nofollow">
+                        </a>
+                        <a href={`/${user.uname}/?show=recomm`} rel="nofollow">
                             <Icon name="ei-heart" size="s" />
                             <span className="desktop">Recommendations</span>
-                        </Link>
-                        <Link to={`/${user.uname}/?media=1`} rel="nofollow">
+                        </a>
+                        <a href={`/${user.uname}/?media=1`} rel="nofollow">
                             <Icon name="ei-camera" size="s" />
                             <span className="desktop">Photos</span>
-                        </Link>
+                        </a>
                     </>
                 }
             </div>
@@ -70,9 +69,9 @@ function Summary({ user }) {
     const readUrl = `/${user.uname}/friends`
     const readersUrl = `/${user.uname}/readers`
     const blUrl = `/${user.uname}/bl`
-    let read = user.read && <Link key={readUrl} to={readUrl}>I read: {user.read.length}</Link>
-    let readers = user.readers && <Link key={readersUrl} to={readersUrl}>My readers: {user.readers.length}</Link>
-    let mybl = user.statsMyBL && <Link key={blUrl} to={blUrl}>My blacklist: {user.statsMyBL}</Link>
+    let read = user.read && <a key={readUrl} href={readUrl}>I read: {user.read.length}</a>
+    let readers = user.readers && <a key={readersUrl} href={readersUrl}>My readers: {user.readers.length}</a>
+    let mybl = user.statsMyBL && <a key={blUrl} href={blUrl}>My blacklist: {user.statsMyBL}</a>
     let presentItems = [read, readers, mybl].filter(Boolean)
     return (
         <div className="msg-summary">
@@ -119,9 +118,9 @@ export function UserLink(props) {
     }, [props.user])
     return (
         user.uid ?
-            <Link key={user.uid} to={`/${user.uname}/`} className="info-avatar">
+            <a key={user.uid} href={`/${user.uname}/`} className="info-avatar">
                 <img src={user.avatar} />{user.uname}
-            </Link>
+            </a>
             : <a href={user.uri} className="info-avatar">
                 <img src={user.avatar || defaultAvatar} />{user.uname}
             </a>
-- 
cgit v1.2.3