Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-01-23 00:56:23 +01:00
Code Issues Projects Releases Packages Wiki Activity

Make "tabs" work for Mentions page in Columns mode

Browse source
This commit is contained in:
Lim Chee Aun 2023-07-20 20:06:07 +08:00
parent 8112f0a9d6
commit 6f28db2532
1 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/pages/mentions.jsx
View file

@ -1,4 +1,4 @@
import { useMemo, useRef } from 'preact/hooks'; import { useMemo, useRef, useState } from 'preact/hooks';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
import Link from '../components/link'; import Link from '../components/link';
@ -14,7 +14,8 @@ function Mentions({ columnMode, ...props }) {
useTitle('Mentions', '/mentions'); useTitle('Mentions', '/mentions');
const { masto, instance } = api(); const { masto, instance } = api();
const [searchParams] = columnMode ? [emptySearchParams] : useSearchParams(); const [searchParams] = columnMode ? [emptySearchParams] : useSearchParams();
const type = props?.type || searchParams.get('type'); const [stateType, setStateType] = useState(null);
const type = props?.type || searchParams.get('type') || stateType;
const mentionsIterator = useRef(); const mentionsIterator = useRef();
const latestItem = useRef(); const latestItem = useRef();
@ -127,12 +128,27 @@ function Mentions({ columnMode, ...props }) {
const TimelineStart = useMemo(() => { const TimelineStart = useMemo(() => {
return ( return (
<div class="filter-bar centered"> <div class="filter-bar centered">
<Link to="/mentions" class={!type ? 'is-active' : ''}> <Link
to="/mentions"
class={!type ? 'is-active' : ''}
onClick={(e) => {
if (columnMode) {
e.preventDefault();
setStateType(null);
}
}}
>
All All
</Link> </Link>
<Link <Link
to="/mentions?type=private" to="/mentions?type=private"
class={type === 'private' ? 'is-active' : ''} class={type === 'private' ? 'is-active' : ''}
onClick={(e) => {
if (columnMode) {
e.preventDefault();
setStateType('private');
}
}}
> >
Private Private
</Link> </Link>