This repository has no description
add username truncation
author
damedotblog
date
(Feb 24, 2025, 12:03 PM -0500)
commit
430c2e83
430c2e83a372c5aa7a1551b5041752d62109401b
parent
879714b4
879714b4b8dd40cd589f87a8db94975f1297d607
+33
-2
+33
-2
src/components/Leaderboard/Leaderboard.js
+33
-2
src/components/Leaderboard/Leaderboard.js
···
3
3
import { Link } from 'react-router-dom';
4
4
import './Leaderboard.css';
5
5
6
+
// Function to truncate handles that are too long
7
+
const truncateHandle = (handle, maxLength = 20) => {
8
+
if (!handle) return '';
9
+
if (handle.length <= maxLength) return handle;
10
+
11
+
// For handles with domains, try to preserve the beginning and domain part
12
+
if (handle.includes('.')) {
13
+
const parts = handle.split('.');
14
+
const domain = parts.slice(-2).join('.');
15
+
const username = parts.slice(0, -2).join('.');
16
+
17
+
// If username + domain is short enough, just return it
18
+
if (username.length + domain.length + 1 <= maxLength) {
19
+
return `${username}.${domain}`;
20
+
}
21
+
22
+
// Otherwise, truncate the username part
23
+
const availableLength = maxLength - domain.length - 4; // Account for ellipsis and dot
24
+
if (availableLength > 0) {
25
+
return `${username.substring(0, availableLength)}...${domain}`;
26
+
}
27
+
}
28
+
29
+
// For simple handles or fallback
30
+
return `${handle.substring(0, maxLength - 3)}...`;
31
+
};
32
+
6
33
const Leaderboard = () => {
7
34
const [users, setUsers] = useState([]);
8
35
const [runnerUps, setRunnerUps] = useState([]);
···
107
134
<tr key={user.handle} className={isRunnerUp ? 'runner-up' : ''}>
108
135
<td className="rank-cell">#{index + 1}</td>
109
136
<td>
110
-
<a href={`/${user.handle}`} className="user-handle">
111
-
@{user.handle}
137
+
<a
138
+
href={`/${user.handle}`}
139
+
className="user-handle"
140
+
title={`@${user.handle}`} // Add title for hover to see full handle
141
+
>
142
+
@{truncateHandle(user.handle)}
112
143
</a>
113
144
</td>
114
145
<td className="score-cell">