aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/ui/Feeds.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/ui/Feeds.js')
-rw-r--r--vnext/src/ui/Feeds.js118
1 files changed, 59 insertions, 59 deletions
diff --git a/vnext/src/ui/Feeds.js b/vnext/src/ui/Feeds.js
index 48da52e3..086a910e 100644
--- a/vnext/src/ui/Feeds.js
+++ b/vnext/src/ui/Feeds.js
@@ -1,18 +1,18 @@
-import { useState, useEffect } from 'react';
-import { Link, useLocation, useParams, Navigate, useSearchParams } from 'react-router-dom';
+import { useState, useEffect } from 'react'
+import { Link, useLocation, useParams, Navigate, useSearchParams } from 'react-router-dom'
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-dayjs.extend(utc);
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+dayjs.extend(utc)
-import Message from './Message';
-import Spinner from './Spinner';
+import Message from './Message'
+import Spinner from './Spinner'
-import UserInfo from './UserInfo';
+import UserInfo from './UserInfo'
-import { getMessages } from '../api';
-import { useVisitor } from './VisitorContext';
-import { Helmet } from 'react-helmet';
+import { getMessages } from '../api'
+import { useVisitor } from './VisitorContext'
+import { Helmet } from 'react-helmet'
/**
* @typedef {object} Query
@@ -28,29 +28,29 @@ import { Helmet } from 'react-helmet';
*/
function RequireAuth({ children }) {
- let location = useLocation();
- let [visitor] = useVisitor();
+ 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 <Navigate to="/login" state={{ from: location }} />;
+ return <Navigate to="/login" state={{ from: location }} />
}
- return children;
+ return children
}
/**
*
*/
export function Discover() {
- const [search] = useSearchParams();
+ const [search] = useSearchParams()
const query = {
baseUrl: '/api/messages',
search: search,
pageParam: search.search ? 'page' : 'before_mid'
- };
+ }
return (
<>
<Helmet>
@@ -58,7 +58,7 @@ export function Discover() {
</Helmet>
<Feed query={query} />
</>
- );
+ )
}
/**
@@ -68,7 +68,7 @@ export function Discussions() {
const query = {
baseUrl: '/api/messages/discussions',
pageParam: 'to'
- };
+ }
return (
<>
<Helmet>
@@ -76,26 +76,26 @@ export function Discussions() {
</Helmet>
<Feed query={query} />
</>
- );
+ )
}
/**
*
*/
export function Blog() {
- const { user } = useParams();
- const [params] = useSearchParams();
+ const { user } = useParams()
+ const [params] = useSearchParams()
const search = {
...params,
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;
+ }
+ const blogTitle = `${user} blog`
+ const pageTitle = search.tag ? `${blogTitle}: #${search.tag}` : blogTitle
return (
<>
<Helmet>
@@ -106,22 +106,22 @@ export function Blog() {
</div>
<Feed query={query} />
</>
- );
+ )
}
/**
*
*/
export function Tag() {
- const params = useParams();
- const { tag } = params;
+ const params = useParams()
+ const { tag } = params
const query = {
baseUrl: '/api/messages',
search: {
tag: tag
},
pageParam: 'before_mid'
- };
+ }
return (
<>
<Helmet>
@@ -129,7 +129,7 @@ export function Tag() {
</Helmet>
<Feed query={query} />
</>
- );
+ )
}
/**
@@ -139,12 +139,12 @@ export function Home() {
const query = {
baseUrl: '/api/home',
pageParam: 'before_mid'
- };
+ }
return (
<RequireAuth>
<Feed query={query} />
</RequireAuth>
- );
+ )
}
/**
@@ -157,52 +157,52 @@ export function Home() {
* @param {FeedState} props
*/
function Feed({ query }) {
- const location = useLocation();
- const [visitor] = useVisitor();
+ const location = useLocation()
+ const [visitor] = useVisitor()
const [state, setState] = useState({
hash: visitor.hash,
msgs: [],
nextpage: null,
error: false,
tag: ''
- });
- const [loading, setLoading] = useState(true);
- const [filter] = useSearchParams();
+ })
+ const [loading, setLoading] = useState(true)
+ const [filter] = useSearchParams()
useEffect(() => {
- setLoading(true);
+ setLoading(true)
let getPageParam = (pageParam, lastMessage, /** @type { URLSearchParams } */ filterParams) => {
- const pageValue = pageParam === 'before_mid' ? lastMessage.mid : pageParam === 'page' ? (Number(filterParams.page) || 0) + 1 : dayjs.utc(lastMessage.updated).valueOf();
- filterParams.append(pageParam, pageValue);
- return `?${filterParams.toString()}`;
- };
- let params = { ...Object.fromEntries(filter), ...query.search };
- let url = query.baseUrl;
+ const pageValue = pageParam === 'before_mid' ? lastMessage.mid : pageParam === 'page' ? (Number(filterParams.page) || 0) + 1 : dayjs.utc(lastMessage.updated).valueOf()
+ filterParams.append(pageParam, pageValue)
+ return `?${filterParams.toString()}`
+ }
+ let params = { ...Object.fromEntries(filter), ...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, new URLSearchParams(params));
- document.body.scrollTop = 0;
- document.documentElement.scrollTop = 0;
+ const { data } = response
+ const { pageParam } = query
+ const lastMessage = data.slice(-1)[0] || {}
+ const nextpage = getPageParam(pageParam, lastMessage, new URLSearchParams(params))
+ document.body.scrollTop = 0
+ document.documentElement.scrollTop = 0
setState((prevState) => {
return {
...prevState,
msgs: data,
nextpage: nextpage,
tag: filter['tag'] || ''
- };
- });
- setLoading(false);
+ }
+ })
+ setLoading(false)
}).catch(() => {
setState((prevState) => {
return {
...prevState,
error: true
- };
- });
- });
- }, [query, filter]);
+ }
+ })
+ })
+ }, [query, filter])
return (state.msgs.length > 0 ? (
<div className="msgs">
{
@@ -227,5 +227,5 @@ function Feed({ query }) {
}
</div>
) : state.error ? <div>error</div> : loading ? <div className="msgs"><Spinner /><Spinner /><Spinner /><Spinner /></div> : <div>No more messages</div>
- );
+ )
}