this repo has no description
New Mentions page
+92
-3
+2
src/app.jsx
+2
src/app.jsx
···
36
36
import List from './pages/list';
37
37
import Lists from './pages/lists';
38
38
import Login from './pages/login';
39
+
import Mentions from './pages/mentions';
39
40
import Notifications from './pages/notifications';
40
41
import Public from './pages/public';
41
42
import Search from './pages/search';
···
223
224
{isLoggedIn && (
224
225
<Route path="/notifications" element={<Notifications />} />
225
226
)}
227
+
{isLoggedIn && <Route path="/mentions" element={<Mentions />} />}
226
228
{isLoggedIn && <Route path="/following" element={<Following />} />}
227
229
{isLoggedIn && <Route path="/b" element={<Bookmarks />} />}
228
230
{isLoggedIn && <Route path="/f" element={<Favourites />} />}
+10
-2
src/components/shortcuts-settings.jsx
+10
-2
src/components/shortcuts-settings.jsx
···
18
18
19
19
const TYPES = [
20
20
'following',
21
+
'mentions',
21
22
'notifications',
22
23
'list',
23
24
'public',
25
+
'trending',
24
26
// NOTE: Hide for now
25
27
// 'search', // Search on Mastodon ain't great
26
28
// 'account-statuses', // Need @acct search first
29
+
'hashtag',
27
30
'bookmarks',
28
31
'favourites',
29
-
'hashtag',
30
-
'trending',
31
32
];
32
33
const TYPE_TEXT = {
33
34
following: 'Home / Following',
···
40
41
favourites: 'Favourites',
41
42
hashtag: 'Hashtag',
42
43
trending: 'Trending',
44
+
mentions: 'Mentions',
43
45
};
44
46
const TYPE_PARAMS = {
45
47
list: [
···
100
102
title: (_, index) => (index === 0 ? 'Home' : 'Following'),
101
103
path: '/',
102
104
icon: 'home',
105
+
},
106
+
mentions: {
107
+
id: 'mentions',
108
+
title: 'Mentions',
109
+
path: '/mentions',
110
+
icon: 'at',
103
111
},
104
112
notifications: {
105
113
id: 'notifications',
+76
src/pages/mentions.jsx
+76
src/pages/mentions.jsx
···
1
+
import { useRef } from 'preact/hooks';
2
+
3
+
import Timeline from '../components/timeline';
4
+
import { api } from '../utils/api';
5
+
import { saveStatus } from '../utils/states';
6
+
import useTitle from '../utils/useTitle';
7
+
8
+
const LIMIT = 20;
9
+
10
+
function Mentions() {
11
+
useTitle('Mentions', '/mentions');
12
+
const { masto, instance } = api();
13
+
const mentionsIterator = useRef();
14
+
const latestItem = useRef();
15
+
16
+
async function fetchMentions(firstLoad) {
17
+
if (firstLoad || !mentionsIterator.current) {
18
+
mentionsIterator.current = masto.v1.notifications.list({
19
+
limit: LIMIT,
20
+
types: ['mention'],
21
+
});
22
+
}
23
+
const results = await mentionsIterator.current.next();
24
+
let { value } = results;
25
+
if (value?.length) {
26
+
if (firstLoad) {
27
+
latestItem.current = value[0].id;
28
+
console.log('First load', latestItem.current);
29
+
}
30
+
31
+
value.forEach(({ status: item }) => {
32
+
saveStatus(item, instance);
33
+
});
34
+
}
35
+
return {
36
+
...results,
37
+
value: value.map((item) => item.status),
38
+
};
39
+
}
40
+
41
+
async function checkForUpdates() {
42
+
try {
43
+
const results = await masto.v1.notifications
44
+
.list({
45
+
limit: 1,
46
+
types: ['mention'],
47
+
since_id: latestItem.current,
48
+
})
49
+
.next();
50
+
let { value } = results;
51
+
console.log('checkForUpdates', latestItem.current, value);
52
+
if (value?.length) {
53
+
latestItem.current = value[0].id;
54
+
return true;
55
+
}
56
+
return false;
57
+
} catch (e) {
58
+
return false;
59
+
}
60
+
}
61
+
62
+
return (
63
+
<Timeline
64
+
title="Mentions"
65
+
id="mentions"
66
+
emptyText="No one mentioned you :("
67
+
errorText="Unable to load mentions."
68
+
instance={instance}
69
+
fetchItems={fetchMentions}
70
+
checkForUpdates={checkForUpdates}
71
+
useItemID
72
+
/>
73
+
);
74
+
}
75
+
76
+
export default Mentions;