git.iko.soy/bridge
on df0c310 help sign in
bridge/src/views/Ops/Residents.tsx
82 lines 2.5 kB history raw
1import { useCallback, useEffect, useState } from 'react';
2import { Box, Row } from '@tlon/indigo-react';
3import { Ship } from '@urbit/roller-api';
5import { useRollerStore } from 'store/rollerStore';
6import useRoller from 'lib/useRoller';
7import { useLocalRouter } from 'lib/LocalRouter';
9import Window from 'components/L2/Window/Window';
10import HeaderPane from 'components/L2/Window/HeaderPane';
11import BodyPane from 'components/L2/Window/BodyPane';
12import View from 'components/View';
13import L2BackHeader from 'components/L2/Headers/L2BackHeader';
15import { ResidentRow } from './ResidentRow';
16import './Residents.scss';
18export const Residents = () => {
19 const { pop }: any = useLocalRouter();
20 const { point, setLoading } = useRollerStore();
21 const { api, changeSponsorship } = useRoller();
22 const [sponsoredPoints, setSponsoredPoints] = useState<Ship[]>([]);
24 const fetchResidents = useCallback(async () => {
25 if (!point) {
26 return;
27 }
29 setLoading(true);
30 // TODO: remove this hack once the API is updated
31 const { residentes, residents } = await api.getSponsoredPoints(point.value);
32 setSponsoredPoints((residents || residentes || []).sort());
33 setLoading(false);
34 }, [api, point, setLoading]);
36 const handleKick = useCallback(
37 async (ship: Ship) => {
38 setLoading(true);
39 await changeSponsorship(ship, 'detach', point.isL1);
40 await fetchResidents();
41 setLoading(false);
42 },
43 [setLoading, changeSponsorship, point.isL1, fetchResidents]
44 );
46 useEffect(() => {
47 fetchResidents();
48 }, [fetchResidents]);
50 return (
51 <View
52 className="ops-residents"
53 pop={pop}
54 inset
55 hideBack
56 header={<L2BackHeader hideBalance back={pop} />}>
57 <Window>
58 <HeaderPane>
59 <Row className="header-row">
60 <h5>
61 Residents{' '}
62 <span className="header-count">{sponsoredPoints.length}</span>
63 </h5>
64 </Row>
65 </HeaderPane>
66 <BodyPane>
67 <Box className="content-container">
68 {sponsoredPoints.length > 0 ? (
69 <ul className="residents-list">
70 {sponsoredPoints.map(sp => (
71 <ResidentRow key={sp} point={sp} onKick={handleKick} />
72 ))}
73 </ul>
74 ) : (
75 <Box className="no-results">No residents</Box>
76 )}
77 </Box>
78 </BodyPane>
79 </Window>
80 </View>
81 );
82};