this repo has no description
New "Private" tab in Mentions
This is still very clunky
+104
-20
+3
src/app.css
+3
src/app.css
+101
-20
src/pages/mentions.jsx
+101
-20
src/pages/mentions.jsx
···
1
-
import { useRef } from 'preact/hooks';
1
+
import { useMemo, useRef } from 'preact/hooks';
2
+
import { useSearchParams } from 'react-router-dom';
2
3
4
+
import Link from '../components/link';
3
5
import Timeline from '../components/timeline';
4
6
import { api } from '../utils/api';
5
7
import { saveStatus } from '../utils/states';
···
7
9
8
10
const LIMIT = 20;
9
11
10
-
function Mentions() {
12
+
function Mentions(props) {
11
13
useTitle('Mentions', '/mentions');
12
14
const { masto, instance } = api();
15
+
const [searchParams] = useSearchParams();
16
+
const type = props?.type || searchParams.get('type');
17
+
13
18
const mentionsIterator = useRef();
14
19
const latestItem = useRef();
15
20
···
34
39
}
35
40
return {
36
41
...results,
37
-
value: value.map((item) => item.status),
42
+
value: value?.map((item) => item.status),
43
+
};
44
+
}
45
+
46
+
const conversationsIterator = useRef();
47
+
const latestConversationItem = useRef();
48
+
async function fetchConversations(firstLoad) {
49
+
if (firstLoad || !conversationsIterator.current) {
50
+
conversationsIterator.current = masto.v1.conversations.list({
51
+
limit: LIMIT,
52
+
});
53
+
}
54
+
const results = await conversationsIterator.current.next();
55
+
let { value } = results;
56
+
if (value?.length) {
57
+
if (firstLoad) {
58
+
latestConversationItem.current = value[0].lastStatus.id;
59
+
console.log('First load', latestConversationItem.current);
60
+
}
61
+
62
+
value.forEach(({ lastStatus: item }) => {
63
+
saveStatus(item, instance);
64
+
});
65
+
}
66
+
console.log('results', results);
67
+
return {
68
+
...results,
69
+
value: value?.map((item) => item.lastStatus),
38
70
};
39
71
}
40
72
73
+
function fetchItems(...args) {
74
+
if (type === 'private') {
75
+
return fetchConversations(...args);
76
+
}
77
+
return fetchMentions(...args);
78
+
}
79
+
41
80
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;
81
+
if (type === 'private') {
82
+
try {
83
+
const results = await masto.v1.conversations
84
+
.list({
85
+
limit: 1,
86
+
since_id: latestConversationItem.current,
87
+
})
88
+
.next();
89
+
let { value } = results;
90
+
console.log(
91
+
'checkForUpdates PRIVATE',
92
+
latestConversationItem.current,
93
+
value,
94
+
);
95
+
if (value?.length) {
96
+
latestConversationItem.current = value[0].lastStatus.id;
97
+
return true;
98
+
}
99
+
return false;
100
+
} catch (e) {
101
+
return false;
55
102
}
56
-
return false;
57
-
} catch (e) {
58
-
return false;
103
+
} else {
104
+
try {
105
+
const results = await masto.v1.notifications
106
+
.list({
107
+
limit: 1,
108
+
types: ['mention'],
109
+
since_id: latestItem.current,
110
+
})
111
+
.next();
112
+
let { value } = results;
113
+
console.log('checkForUpdates ALL', latestItem.current, value);
114
+
if (value?.length) {
115
+
latestItem.current = value[0].id;
116
+
return true;
117
+
}
118
+
return false;
119
+
} catch (e) {
120
+
return false;
121
+
}
59
122
}
60
123
}
61
124
125
+
const TimelineStart = useMemo(() => {
126
+
return (
127
+
<div class="filter-bar centered">
128
+
<Link to="/mentions" class={!type ? 'is-active' : ''}>
129
+
All
130
+
</Link>
131
+
<Link
132
+
to="/mentions?type=private"
133
+
class={type === 'private' ? 'is-active' : ''}
134
+
>
135
+
Private
136
+
</Link>
137
+
</div>
138
+
);
139
+
}, [type]);
140
+
62
141
return (
63
142
<Timeline
64
143
title="Mentions"
···
66
145
emptyText="No one mentioned you :("
67
146
errorText="Unable to load mentions."
68
147
instance={instance}
69
-
fetchItems={fetchMentions}
148
+
fetchItems={fetchItems}
70
149
checkForUpdates={checkForUpdates}
71
150
useItemID
151
+
timelineStart={TimelineStart}
152
+
refresh={type}
72
153
/>
73
154
);
74
155
}