leaflet.pub
a tool for shared writing and social publishing
simplify mention logic
awarm.space
+16
-46
+16
-46
components/Mention.tsx
+16
-46
components/Mention.tsx
···
135
135
136
136
const headerStyle = "text-xs text-tertiary font-bold pt-1 px-2";
137
137
138
-
const getHeader = (type: Mention["type"]) => {
139
-
switch (type) {
140
-
case "did":
141
-
return "People";
142
-
case "publication":
143
-
return "Publications";
144
-
}
145
-
};
146
-
147
-
const getKey = (mention: Mention) => {
148
-
switch (mention.type) {
149
-
case "did":
150
-
return mention.did;
151
-
case "publication":
152
-
return mention.uri;
153
-
}
154
-
};
155
-
156
-
const getResultText = (mention: Mention) => {
157
-
switch (mention.type) {
158
-
case "did":
159
-
return mention.displayName || `@${mention.handle}`;
160
-
case "publication":
161
-
return mention.name;
162
-
}
163
-
};
164
-
165
-
const getSubtext = (mention: Mention) => {
166
-
switch (mention.type) {
167
-
case "did":
168
-
return mention.displayName ? `@${mention.handle}` : undefined;
169
-
case "publication":
170
-
return undefined;
171
-
}
172
-
};
173
-
174
138
const sortedSuggestions = [...suggestions].sort((a, b) => {
175
139
const order: Mention["type"][] = ["did", "publication"];
176
140
return order.indexOf(a.type) - order.indexOf(b.type);
···
202
166
<ul className="list-none p-0 text-sm">
203
167
{sortedSuggestions.map((result, index) => {
204
168
const prevResult = sortedSuggestions[index - 1];
205
-
const showHeader = !prevResult || prevResult.type !== result.type;
169
+
const showHeader =
170
+
prevResult && prevResult.type !== result.type;
171
+
172
+
const [key, resultText, subtext] =
173
+
result.type === "did"
174
+
? [
175
+
result.did,
176
+
result.displayName || `@${result.handle}`,
177
+
result.displayName ? `@${result.handle}` : undefined,
178
+
]
179
+
: [result.uri, result.name, undefined];
206
180
207
181
return (
208
182
<>
209
183
{showHeader && (
210
184
<>
211
-
{index > 0 && (
212
-
<hr className="border-border-light mx-1 my-1" />
213
-
)}
214
-
<div className={headerStyle}>
215
-
{getHeader(result.type)}
216
-
</div>
185
+
<hr className="border-border-light mx-1 my-1" />
186
+
<div className={headerStyle}>Publications</div>
217
187
</>
218
188
)}
219
189
<Result
220
-
key={getKey(result)}
190
+
key={key}
221
191
onClick={() => {
222
192
if (mentionRange) {
223
193
props.onSelect(result, mentionRange);
···
227
197
}
228
198
}}
229
199
onMouseDown={(e) => e.preventDefault()}
230
-
result={getResultText(result)}
231
-
subtext={getSubtext(result)}
200
+
result={resultText}
201
+
subtext={subtext}
232
202
selected={index === suggestionIndex}
233
203
/>
234
204
</>