d7a3246fe3
* basic export repository link in settings Absolutely no prior React experience, and limited TypeScript, so probably doing all kinds of things wrong! I tried to make it a download button instead of link but that didn't work. There is probably a safer way to construct the URL string. I think having the download open in the browser is reasonable, as opposed to an in-app save flow in mobile. But i'm not sure. * Remove appview proxy toggle * Move Settings screen to a subfolder * Add support for the download attribute on links in web * Rewrite ExportRepository modal using ALF * Mobile ui tweaks --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
import React from 'react'
|
|
import {View} from 'react-native'
|
|
import {useLingui} from '@lingui/react'
|
|
import {Trans, msg} from '@lingui/macro'
|
|
|
|
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
|
|
import * as Dialog from '#/components/Dialog'
|
|
import {Text, P} from '#/components/Typography'
|
|
import {Button, ButtonText} from '#/components/Button'
|
|
import {InlineLink, Link} from '#/components/Link'
|
|
import {getAgent, useSession} from '#/state/session'
|
|
|
|
export function ExportCarDialog({
|
|
control,
|
|
}: {
|
|
control: Dialog.DialogOuterProps['control']
|
|
}) {
|
|
const {_} = useLingui()
|
|
const t = useTheme()
|
|
const {gtMobile} = useBreakpoints()
|
|
const {currentAccount} = useSession()
|
|
|
|
const downloadUrl = React.useMemo(() => {
|
|
const agent = getAgent()
|
|
if (!currentAccount || !agent.session) {
|
|
return '' // shouldnt ever happen
|
|
}
|
|
// eg: https://bsky.social/xrpc/com.atproto.sync.getRepo?did=did:plc:ewvi7nxzyoun6zhxrhs64oiz
|
|
const url = new URL(agent.pdsUrl || agent.service)
|
|
url.pathname = '/xrpc/com.atproto.sync.getRepo'
|
|
url.searchParams.set('did', agent.session.did)
|
|
return url.toString()
|
|
}, [currentAccount])
|
|
|
|
return (
|
|
<Dialog.Outer control={control}>
|
|
<Dialog.Handle />
|
|
|
|
<Dialog.ScrollableInner
|
|
accessibilityDescribedBy="dialog-description"
|
|
accessibilityLabelledBy="dialog-title">
|
|
<View style={[a.relative, a.gap_md, a.w_full]}>
|
|
<Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}>
|
|
<Trans>Export My Data</Trans>
|
|
</Text>
|
|
<P nativeID="dialog-description" style={[a.text_sm]}>
|
|
<Trans>
|
|
Your account repository, containing all public data records, can
|
|
be downloaded as a "CAR" file. This file does not include media
|
|
embeds, such as images, or your private data, which must be
|
|
fetched separately.
|
|
</Trans>
|
|
</P>
|
|
|
|
<Link
|
|
variant="solid"
|
|
color="primary"
|
|
size="large"
|
|
label={_(msg`Download CAR file`)}
|
|
to={downloadUrl}
|
|
download="repo.car">
|
|
<ButtonText>
|
|
<Trans>Download CAR file</Trans>
|
|
</ButtonText>
|
|
</Link>
|
|
|
|
<P
|
|
style={[
|
|
a.py_xs,
|
|
t.atoms.text_contrast_medium,
|
|
a.text_sm,
|
|
a.leading_snug,
|
|
a.flex_1,
|
|
]}>
|
|
<Trans>
|
|
This feature is in beta. You can read more about repository
|
|
exports in{' '}
|
|
<InlineLink
|
|
to="https://atproto.com/blog/repo-export"
|
|
style={[a.text_sm]}>
|
|
this blogpost.
|
|
</InlineLink>
|
|
</Trans>
|
|
</P>
|
|
|
|
<View style={gtMobile && [a.flex_row, a.justify_end]}>
|
|
<Button
|
|
testID="doneBtn"
|
|
variant="outline"
|
|
color="primary"
|
|
size={gtMobile ? 'small' : 'large'}
|
|
onPress={() => control.close()}
|
|
label={_(msg`Done`)}>
|
|
{_(msg`Done`)}
|
|
</Button>
|
|
</View>
|
|
|
|
{!gtMobile && <View style={{height: 40}} />}
|
|
</View>
|
|
</Dialog.ScrollableInner>
|
|
</Dialog.Outer>
|
|
)
|
|
}
|