git.iko.soy/bridge
on df0c310 help sign in
bridge/src/views/Ops/Requests.tsx
96 lines 2.8 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 { RequestRow } from './RequestRow';
16import './Requests.scss';
18export const Requests = () => {
19 const { pop }: any = useLocalRouter();
20 const { point, setLoading } = useRollerStore();
21 const { api, changeSponsorship } = useRoller();
22 const [requestingPoints, setRequestingPoints] = useState<Ship[]>([]);
24 const fetchRequests = useCallback(async () => {
25 if (!point) {
26 return;
27 }
29 setLoading(true);
30 const { requests } = await api.getSponsoredPoints(point.value);
31 setRequestingPoints((requests || []).sort());
32 setLoading(false);
33 }, [api, point, setLoading]);
35 const handleAcceptClick = useCallback(
36 async (ship: Ship) => {
37 setLoading(true);
38 await changeSponsorship(ship, 'adopt', point.isL1);
39 await fetchRequests();
40 setLoading(false);
41 },
42 [changeSponsorship, fetchRequests, point.isL1, setLoading]
43 );
45 const handleRejectClick = useCallback(
46 async (ship: Ship) => {
47 setLoading(true);
48 await changeSponsorship(ship, 'reject', point.isL1);
49 await fetchRequests();
50 setLoading(false);
51 },
52 [changeSponsorship, fetchRequests, point.isL1, setLoading]
53 );
55 useEffect(() => {
56 fetchRequests();
57 }, [fetchRequests]);
59 return (
60 <View
61 className="ops-requests"
62 pop={pop}
63 inset
64 hideBack
65 header={<L2BackHeader hideBalance back={pop} />}>
66 <Window>
67 <HeaderPane>
68 <Row className="header-row">
69 <h5>
70 Requests{' '}
71 <span className="header-count">{requestingPoints.length}</span>
72 </h5>
73 </Row>
74 </HeaderPane>
75 <BodyPane>
76 <Box className="content-container">
77 {requestingPoints.length > 0 ? (
78 <ul className="requests-list">
79 {requestingPoints.map(sp => (
80 <RequestRow
81 key={sp}
82 point={sp}
83 onAccept={handleAcceptClick}
84 onReject={handleRejectClick}
85 />
86 ))}
87 </ul>
88 ) : (
89 <Box className="no-results">No requests</Box>
90 )}
91 </Box>
92 </BodyPane>
93 </Window>
94 </View>
95 );
96};