import { useState, useEffect, useRef, Fragment } from 'react'; import { Route, Link, Routes } from 'react-router-dom'; import qs from 'qs'; import svg4everybody from 'svg4everybody'; import Icon from './ui/Icon'; import { Discover, Discussions, Blog, Tag, Home } from './ui/Feeds'; import { Friends, Readers } from './ui/Users'; import Settings from './ui/Settings'; import Contacts from './ui/Contacts'; import Chat from './ui/Chat'; import Header from './ui/Header'; import Post from './ui/Post'; import Thread from './ui/Thread'; import Login from './ui/Login'; import { useCookies } from 'react-cookie'; import { me, trends } from './api'; import { useVisitor } from './ui/VisitorContext'; /** * * @param {import('react').PropsWithChildren<{}> & { * footer: string * }} props props */ export default function App({ footer }) { let contentRef = useRef(null); const [cookie, setCookie] = useCookies(['hash']); const [allTrends, setAllTrends] = useState([]); const [visitor, setVisitor] = useVisitor(); useEffect(() => { svg4everybody(); let params = qs.parse(window.location.search.substring(1)); if (params.hash) { setCookie('hash', params.hash, { path: '/' }); let retpath = params.retpath || `${window.location.protocol}//${window.location.host}${window.location.pathname}`; window.history.replaceState({}, document.title, retpath); } }, [setCookie, footer]); let updateStatus = () => { // refresh server visitor state (unread counters) me().then(visitor => { setVisitor(visitor); }); }; const [hash, setHash] = useState(cookie.hash); const [eventSource, setEventSource] = /** @param EventSource? */ useState({}); useEffect(() => { let es; const anonymousUser = { uid: 0 }; if (hash) { me().then(visitor => auth(visitor)) .catch(() => setVisitor(anonymousUser)); if ('EventSource' in window) { const eventParams = { hash: hash }; let url = new URL(`https://juick.com/api/events?${qs.stringify(eventParams)}`); es = new EventSource(url.toString()); es.onopen = () => { console.log('online'); }; es.onerror = () => { es.removeEventListener('read', updateStatus); es.removeEventListener('msg', updateStatus); }; es.addEventListener('read', updateStatus); es.addEventListener('msg', updateStatus); setEventSource(es); } } else { setVisitor(anonymousUser); } return (() => { if (es && es.removeEventListener) { es.removeEventListener('read', updateStatus); es.removeEventListener('msg', updateStatus); } }); }, [hash]); useEffect(() => { const getTrends = async () => { setAllTrends(await trends()); }; getTrends(); }, []); /** * @param {import("./api").SecureUser} visitor */ let auth = (visitor) => { setVisitor(prevState => { if (visitor.hash != prevState.hash) { setHash(visitor.hash); } return visitor; }); }; return ( <>
{ }
} /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } /> } />
); }