git.iko.soy/bridge
on master help sign in
bridge/src/views/Invite/CSVButton.tsx
54 lines 1.3 kB history raw
1import { Row, Box, Icon, BaseButton } from '@tlon/indigo-react';
3import { useEffect, useState } from 'react';
4import { useInvites } from './useInvites';
5import { generateCsvName } from 'lib/utils/invite';
6import { DEFAULT_CSV_NAME } from 'lib/constants';
7import Point from 'lib/types/Point';
9interface CSVModalProps {
10 point: Point;
11 invitesUpdating: boolean;
14export const CSVButton = ({ point, invitesUpdating }: CSVModalProps) => {
15 const { generateCsv } = useInvites();
16 const [csv, setCsv] = useState<string | null>(null);
17 const [error, setError] = useState('');
19 useEffect(() => {
20 if (invitesUpdating) {
21 return;
22 }
24 try {
25 const csv = generateCsv();
26 setCsv(csv);
27 } catch (e) {
28 setError((e as Error).message);
29 }
30 }, [generateCsv, invitesUpdating]);
32 if (!csv || invitesUpdating) {
33 return (
34 <BaseButton display="flex" className="download-csv" disabled>
35 <Icon icon="Download" />
36 <Box>CSV</Box>
37 </BaseButton>
38 );
39 }
41 return (
42 <a
43 href={`data:text/csv;charset=utf-8,${encodeURIComponent(csv)}`}
44 download={generateCsvName(
45 DEFAULT_CSV_NAME,
46 point.patp?.slice(1) || 'bridge'
47 )}>
48 <Row className="download-csv">
49 <Icon icon="Download" />
50 <Box>CSV</Box>
51 </Row>
52 </a>
53 );
54};