feat: add copy functionality

This commit is contained in:
Hristo Nedelkov 2024-01-30 11:38:32 +02:00
parent c63d27528c
commit 92c02068d0
1 changed files with 39 additions and 2 deletions

View File

@ -1,6 +1,6 @@
import { Stack, YStack } from 'tamagui'
import { Text } from '@status-im/components'
import { useSelector } from 'react-redux'
import { useDispatch, useSelector } from 'react-redux'
import { useState } from 'react'
import { RootState } from '../../../../redux/store'
@ -8,15 +8,50 @@ import { DOCUMENTATIONS } from './documentations'
import { MAC } from '../../../../constants'
import OSCards from './OSCards'
import Markdown from '../../../../components/General/Markdown/Markdown'
import { setPinnedMessage } from '../../../../redux/PinnedMessage/slice'
function extractBashCommands(documentation: any) {
const bashCommandRegex = /```bash\n([\s\S]*?)\n```/g
const matches = []
let match
while ((match = bashCommandRegex.exec(documentation)) !== null) {
matches.push(match[1])
}
return matches.join('\n\n')
}
const ValidatorSetupInstall = () => {
const dispatch = useDispatch()
const [selectedOS, setSelectedOS] = useState(MAC)
const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
const docText = DOCUMENTATIONS[selectedClient].documentation[selectedOS]
const bashCommands = extractBashCommands(docText)
const handleOSCardClick = (os: string) => {
setSelectedOS(os)
}
const copyCommands = () => {
navigator.clipboard.writeText(bashCommands)
dispatch(
setPinnedMessage({
id: '123',
text: 'You have successfully copied the commands to your clipboard.',
pinned: true,
}),
)
setTimeout(() => {
dispatch(
setPinnedMessage({
id: '123',
text: 'You have successfully copied the commands to your clipboard.',
pinned: false,
}),
)
}, 3000)
}
return (
<YStack style={{ padding: '26px 32px', width: '100%' }}>
<Text size={27} weight={'semibold'}>
@ -39,7 +74,9 @@ const ValidatorSetupInstall = () => {
<Markdown children={DOCUMENTATIONS[selectedClient].general} />
<OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
<Markdown children={DOCUMENTATIONS[selectedClient].documentation[selectedOS]} />
<Stack onPress={() => copyCommands()}>
<Markdown children={DOCUMENTATIONS[selectedClient].documentation[selectedOS]} />
</Stack>
</Stack>
</YStack>
</YStack>