michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

truncate long list of verified devices

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-03-23 11:07:47 +05:30
parent 49d4dbfc81
commit 66c27e9feb
1 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/app/organisms/settings/DeviceManage.jsx
View file

@ -5,6 +5,7 @@ import dateFormat from 'dateformat';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import Button from '../../atoms/button/Button';
import IconButton from '../../atoms/button/IconButton'; import IconButton from '../../atoms/button/IconButton';
import { MenuHeader } from '../../atoms/context-menu/ContextMenu'; import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
import Spinner from '../../atoms/spinner/Spinner'; import Spinner from '../../atoms/spinner/Spinner';
@ -56,11 +57,14 @@ function isCrossVerified(deviceId) {
} }
function DeviceManage() { function DeviceManage() {
const TRUNCATED_COUNT = 4;
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
const deviceList = useDeviceList(); const deviceList = useDeviceList();
const [processing, setProcessing] = useState([]); const [processing, setProcessing] = useState([]);
const [truncated, setTruncated] = useState(true);
const mountStore = useStore(); const mountStore = useStore();
mountStore.setItem(true); mountStore.setItem(true);
useEffect(() => { useEffect(() => {
setProcessing([]); setProcessing([]);
}, [deviceList]); }, [deviceList]);
@ -193,9 +197,17 @@ function DeviceManage() {
<MenuHeader>Verified sessions</MenuHeader> <MenuHeader>Verified sessions</MenuHeader>
{ {
verified.length > 0 verified.length > 0
? verified.map((device) => renderDevice(device, true)) ? verified.map((device, index) => {
if (truncated && index >= TRUNCATED_COUNT) return null;
return renderDevice(device, true);
})
: <Text className="device-manage__info">No verified session</Text> : <Text className="device-manage__info">No verified session</Text>
} }
{ verified.length > TRUNCATED_COUNT && (
<Button className="device-manage__info" onClick={() => setTruncated(!truncated)}>
{truncated ? `View ${verified.length - 4} more` : 'View less'}
</Button>
)}
{ deviceList.length > 0 && ( { deviceList.length > 0 && (
<Text className="device-manage__info" variant="b3">Session names are visible to everyone, so do not put any private info here.</Text> <Text className="device-manage__info" variant="b3">Session names are visible to everyone, so do not put any private info here.</Text>
)} )}