From 8887e1b51565b992f34c955c459125eb85b28483 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Mon, 31 Oct 2022 22:48:30 +0300 Subject: `useVisitor` hook --- vnext/server/middleware/renderer.js | 9 ++++++--- vnext/src/App.js | 36 +++++++++++++++--------------------- vnext/src/index.js | 13 ++++++++----- vnext/src/ui/Chat.js | 7 ++++--- vnext/src/ui/Comment.js | 5 +++-- vnext/src/ui/Contacts.js | 3 +++ vnext/src/ui/Feeds.js | 31 ++++++++++++++++--------------- vnext/src/ui/Header.js | 6 ++++-- vnext/src/ui/Login.js | 12 ++++++------ vnext/src/ui/Message.js | 5 +++-- vnext/src/ui/PM.js | 7 ++++--- vnext/src/ui/Post.js | 6 ++++-- vnext/src/ui/Settings.js | 14 +++++++++----- vnext/src/ui/Thread.js | 9 +++++---- vnext/src/ui/Users.js | 1 + vnext/src/ui/VisitorContext.js | 32 ++++++++++++++++++++++++++++++++ 16 files changed, 123 insertions(+), 73 deletions(-) create mode 100644 vnext/src/ui/VisitorContext.js diff --git a/vnext/server/middleware/renderer.js b/vnext/server/middleware/renderer.js index a4b745f8..ca2ac2df 100644 --- a/vnext/server/middleware/renderer.js +++ b/vnext/server/middleware/renderer.js @@ -7,6 +7,7 @@ import App from '../../src/App'; import { getLinks } from '../sape'; import { StaticRouter } from 'react-router-dom/server'; +import { VisitorProvider } from '../../src/ui/VisitorContext'; const path = require('path'); const fs = require('fs'); @@ -49,9 +50,11 @@ const serverRenderer = async (req, res) => { const propsData = `${marker}`; let didError = false; const { pipe } = ReactDOMServer.renderToPipeableStream( - - - + + + + + , { onShellReady() { res.statusCode = didError ? 500 : 200; diff --git a/vnext/src/App.js b/vnext/src/App.js index 4e235c46..15e29017 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -18,6 +18,7 @@ import Login from './ui/Login'; import { useCookies } from 'react-cookie'; import { me, trends } from './api'; +import { useVisitor } from './ui/VisitorContext'; /** * @@ -32,6 +33,8 @@ export default function App({ footer }) { const [allTrends, setAllTrends] = useState([]); + const [visitor, setVisitor] = useVisitor(); + useEffect(() => { svg4everybody(); let params = qs.parse(window.location.search.substring(1)); @@ -42,15 +45,6 @@ export default function App({ footer }) { } }, [setCookie, footer]); - /** - * @type {import('./api').SecureUser} - */ - const unknownUser = { - uid: -1 - }; - - const [visitor, setVisitor] = useState(unknownUser); - let updateStatus = () => { // refresh server visitor state (unread counters) me().then(visitor => { @@ -116,7 +110,7 @@ export default function App({ footer }) { }; return ( <> -
+
{
diff --git a/vnext/src/index.js b/vnext/src/index.js index 5f3c262e..3c354826 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -4,6 +4,7 @@ import { BrowserRouter } from 'react-router-dom'; import { CookiesProvider } from 'react-cookie'; import './index.css'; +import { VisitorProvider } from './ui/VisitorContext'; const Juick = lazy(() => import('./App')); @@ -20,11 +21,13 @@ const props = window.__PROPS__ ? JSON.parse(fromBinary(window.__PROPS__)) : {}; const JuickApp = () => ( - - - - - + + + + + + + ); diff --git a/vnext/src/ui/Chat.js b/vnext/src/ui/Chat.js index 5ecb9c0f..cdf3de1b 100644 --- a/vnext/src/ui/Chat.js +++ b/vnext/src/ui/Chat.js @@ -9,10 +9,10 @@ import UserInfo from './UserInfo'; import { getChat, pm } from '../api'; import './Chat.css'; +import { useVisitor } from './VisitorContext'; /** * @typedef {Object} ChatProps - * @property {import('../api').SecureUser} visitor * @property {EventSource} connection */ @@ -21,11 +21,12 @@ import './Chat.css'; * @param {ChatProps} props */ export default function Chat(props) { + const [visitor] = useVisitor(); const [chats, setChats] = useState([]); const params = useParams(); let loadChat = useCallback((uname) => { - const { hash } = props.visitor; + const { hash } = visitor; setChats([]); if (hash && uname) { getChat(uname) @@ -33,7 +34,7 @@ export default function Chat(props) { setChats(response.data); }); } - }, [props.visitor]); + }, []); let onMessage = useCallback((json) => { const msg = JSON.parse(json.data); diff --git a/vnext/src/ui/Comment.js b/vnext/src/ui/Comment.js index 756b3487..45c80187 100644 --- a/vnext/src/ui/Comment.js +++ b/vnext/src/ui/Comment.js @@ -9,6 +9,7 @@ import MessageInput from './MessageInput'; import { fetchUserUri } from '../api'; import { chatItemStyle } from './helpers/BubbleStyle'; import { format, embedUrls } from '../utils/embed'; +import { useVisitor } from './VisitorContext'; let isMounted; @@ -16,16 +17,16 @@ let isMounted; * @param {{ msg: import('../api').Message, draft: string, - visitor: import('../api').User, active: number, setActive: function, onStartEditing: function, postComment: function }} props */ -export default function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postComment }) { +export default function Comment({ msg, draft, active, setActive, onStartEditing, postComment }) { const embedRef = useRef(); const msgRef = useRef(); + const [visitor] = useVisitor(); const [author, setAuthor] = useState(msg.user); useEffect(() => { if (msgRef.current) { diff --git a/vnext/src/ui/Contacts.js b/vnext/src/ui/Contacts.js index 2a727b82..0005da9a 100644 --- a/vnext/src/ui/Contacts.js +++ b/vnext/src/ui/Contacts.js @@ -6,6 +6,9 @@ import { getChats } from '../api'; import Contact from './Contact.js'; import { ChatSpinner } from './Spinner'; +/** + * + */ export default function Contacts(props) { const [pms, setPms] = useState([]); useEffect(() => { diff --git a/vnext/src/ui/Feeds.js b/vnext/src/ui/Feeds.js index 84319c28..75f1800d 100644 --- a/vnext/src/ui/Feeds.js +++ b/vnext/src/ui/Feeds.js @@ -10,6 +10,7 @@ import Spinner from './Spinner'; import UserInfo from './UserInfo'; import { getMessages } from '../api'; +import { useVisitor } from './VisitorContext'; /** * @typedef {object} Query @@ -21,12 +22,12 @@ import { getMessages } from '../api'; /** * @typedef {object} PageProps * @property {string=} search - * @property {import('../api').SecureUser} visitor * @property {import('../api').Message[]=} msgs */ -function RequireAuth({ visitor, children }) { +function RequireAuth({ children }) { let location = useLocation(); + let [ visitor ] = useVisitor(); if (!visitor.hash) { // Redirect them to the /login page, but save the current location they were // trying to go to when they were redirected. This allows us to send them @@ -41,7 +42,7 @@ function RequireAuth({ visitor, children }) { /** * @param {PageProps} props */ -export function Discover({ visitor }) { +export function Discover() { const location = useLocation(); let search = qs.parse(location.search.substring(1)); const query = { @@ -49,24 +50,24 @@ export function Discover({ visitor }) { search: search, pageParam: search.search ? 'page' : 'before_mid' }; - return (); + return (); } /** * @param {PageProps} props */ -export function Discussions({ visitor }) { +export function Discussions() { const query = { baseUrl: '/api/messages/discussions', pageParam: 'to' }; - return (); + return (); } /** * @param {PageProps} props */ -export function Blog({ visitor }) { +export function Blog() { const { user } = useParams(); const location = useLocation(); const search = { @@ -83,7 +84,7 @@ export function Blog({ visitor }) {
- + ); } @@ -91,7 +92,7 @@ export function Blog({ visitor }) { /** * @param {PageProps} props */ -export function Tag({ visitor }) { +export function Tag() { const params = useParams(); const { tag } = params; const query = { @@ -101,27 +102,26 @@ export function Tag({ visitor }) { }, pageParam: 'before_mid' }; - return (); + return (); } /** * @param {PageProps} props */ -export function Home({ visitor }) { +export function Home() { const query = { baseUrl: '/api/home', pageParam: 'before_mid' }; return ( - - + + ); } /** * @typedef {object} FeedState - * @property { import('../api').SecureUser } visitor * @property { import('../api').Message[]= } msgs * @property { Query} query */ @@ -129,8 +129,9 @@ export function Home({ visitor }) { /** * @param {FeedState} props */ -function Feed({ visitor, query }) { +function Feed({ query }) { const location = useLocation(); + const [visitor] = useVisitor(); const [state, setState] = useState({ hash: visitor.hash, msgs: [], diff --git a/vnext/src/ui/Header.js b/vnext/src/ui/Header.js index 3162c9ea..db8959ea 100644 --- a/vnext/src/ui/Header.js +++ b/vnext/src/ui/Header.js @@ -4,8 +4,10 @@ import { Link, useNavigate } from 'react-router-dom'; import Icon from './Icon'; import { UserLink } from './UserInfo'; import SearchBox from './SearchBox'; +import { useVisitor } from './VisitorContext'; -function Header({ visitor, className }) { +function Header() { + const [visitor] = useVisitor(); const navigate = useNavigate(); /** * @param {string} searchString @@ -17,7 +19,7 @@ function Header({ visitor, className }) { navigate(location); }, [navigate]); return ( -