import { useState, useEffect } from 'react'; import { Link, useLocation, useParams, Navigate } from 'react-router-dom'; import qs from 'qs'; import moment from 'moment'; import Message from './Message'; import Spinner from './Spinner'; import UserInfo from './UserInfo'; import { getMessages } from '../api'; import { useVisitor } from './VisitorContext'; import { Helmet } from 'react-helmet'; /** * @typedef {object} Query * @property {string} baseUrl * @property {object=} search * @property {string} pageParam */ /** * @typedef {object} PageProps * @property {string=} search * @property {import('../api').Message[]=} msgs */ 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 // along to that page after they login, which is a nicer user experience // than dropping them off on the home page. return ; } return children; } /** * @param {PageProps} props */ export function Discover() { const location = useLocation(); let search = qs.parse(location.search.substring(1)); const query = { baseUrl: '/api/messages', search: search, pageParam: search.search ? 'page' : 'before_mid' }; return ( <> Discover ); } /** * @param {PageProps} props */ export function Discussions() { const query = { baseUrl: '/api/messages/discussions', pageParam: 'to' }; return ( <> Discussions ); } /** * @param {PageProps} props */ export function Blog() { const { user } = useParams(); const location = useLocation(); const search = { ...qs.parse(location.search.substring(1)), uname: user }; const query = { baseUrl: '/api/messages', search: search, pageParam: search.search ? 'page' : 'before_mid' }; const blogTitle = `${user} blog`; const pageTitle = search.tag ? `${blogTitle}: #${search.tag}` : blogTitle; return ( <> {pageTitle}
); } /** * */ export function Tag() { const params = useParams(); const { tag } = params; const query = { baseUrl: '/api/messages', search: { tag: tag }, pageParam: 'before_mid' }; return ( <> #{tag} ); } /** * @param {PageProps} props */ export function Home() { const query = { baseUrl: '/api/home', pageParam: 'before_mid' }; return ( ); } /** * @typedef {object} FeedState * @property { import('../api').Message[]= } msgs * @property { Query} query */ /** * @param {FeedState} props */ function Feed({ query }) { const location = useLocation(); const [visitor] = useVisitor(); const [state, setState] = useState({ hash: visitor.hash, msgs: [], nextpage: null, error: false, tag: '' }); const [loading, setLoading] = useState(true); useEffect(() => { setLoading(true); const filter = location.search.substring(1); let getPageParam = (pageParam, lastMessage, filterParams) => { const pageValue = pageParam === 'before_mid' ? lastMessage.mid : pageParam === 'page' ? (Number(filterParams.page) || 0) + 1 : moment.utc(lastMessage.updated).valueOf(); let newFilter = { ...filterParams }; newFilter[pageParam] = pageValue; return `?${qs.stringify(newFilter)}`; }; const filterParams = qs.parse(filter); let params = Object.assign({}, filterParams || {}, query.search || {}); let url = query.baseUrl; getMessages(url, params) .then(response => { const { data } = response; const { pageParam } = query; const lastMessage = data.slice(-1)[0] || {}; const nextpage = getPageParam(pageParam, lastMessage, filterParams); document.body.scrollTop = 0; document.documentElement.scrollTop = 0; setState((prevState) => { return { ...prevState, msgs: data, nextpage: nextpage, tag: qs.parse(location.search.substring(1))['tag'] || '' }; }); setLoading(false); }).catch(() => { setState((prevState) => { return { ...prevState, error: true }; }); }); }, [location.search, query]); return (state.msgs.length > 0 ? (
{ state.tag && (

← All posts with tag {state.tag}

) } { state.msgs.map(msg => ) } { state.msgs.length >= 20 && (

Next →

) }
) : state.error ?
error
: loading ?
:
No more messages
); }