diff --git a/src/features/circle/index.tsx b/src/features/circle/index.tsx index d3799d0b5..ee3cf0ccd 100644 --- a/src/features/circle/index.tsx +++ b/src/features/circle/index.tsx @@ -5,7 +5,8 @@ import { Link } from 'react-router-dom'; import { processCircle } from 'soapbox/actions/circle'; import { resetCompose, uploadComposeSuccess, uploadFile } from 'soapbox/actions/compose'; import { openModal } from 'soapbox/actions/modals'; -import { Accordion, Avatar, Button, Column, HStack, ProgressBar, Stack, Text } from 'soapbox/components/ui'; +import Account from 'soapbox/components/account'; +import { Accordion, Avatar, Button, Column, Form, FormActions, HStack, ProgressBar, Stack, Text } from 'soapbox/components/ui'; import { useAppDispatch, useOwnAccount } from 'soapbox/hooks'; const toRad = (x: number) => x * (Math.PI / 180); @@ -27,9 +28,9 @@ const messages = defineMessages({ const Circle: React.FC = () => { const [{ state, progress }, setProgress] = useState<{ - state: 'pending' | 'fetchingStatuses' | 'fetchingFavourites' | 'fetchingAvatars' | 'drawing' | 'done'; + state: 'unrequested' | 'pending' | 'fetchingStatuses' | 'fetchingFavourites' | 'fetchingAvatars' | 'drawing' | 'done'; progress: number; - }>({ state: 'pending', progress: 0 }); + }>({ state: 'unrequested', progress: 0 }); const [expanded, setExpanded] = useState(false); const [users, setUsers] = useState>(); @@ -40,6 +41,35 @@ const Circle: React.FC = () => { const { account } = useOwnAccount(); useEffect(() => { + }, []); + + const onSave: React.MouseEventHandler = (e) => { + e.preventDefault(); + + const fileToDownload = document.createElement('a'); + fileToDownload.download = 'interactions_circle.png'; + fileToDownload.href = canvasRef.current!.toDataURL('image/png'); + fileToDownload.click(); + }; + + const onCompose: React.MouseEventHandler = (e) => { + e.preventDefault(); + + dispatch(resetCompose('compose-modal')); + + canvasRef.current!.toBlob((blob) => { + const file = new File([blob!], 'interactions_circle.png', { type: 'image/png' }); + + dispatch(uploadFile(file, intl, (data) => { + dispatch(uploadComposeSuccess('compose-modal', data, file)); + dispatch(openModal('COMPOSE')); + })); + }, 'image/png'); + }; + + const handleRequest = () => { + setProgress({ state: 'pending', progress: 0 }); + dispatch(processCircle(setProgress)).then(async (users) => { setUsers(users); @@ -98,31 +128,29 @@ const Circle: React.FC = () => { setProgress({ state: 'done', progress: 100 }); }).catch(() => {}); - }, []); - - const onSave: React.MouseEventHandler = (e) => { - e.preventDefault(); - - const fileToDownload = document.createElement('a'); - fileToDownload.download = 'interactions_circle.png'; - fileToDownload.href = canvasRef.current!.toDataURL('image/png'); - fileToDownload.click(); }; - const onCompose: React.MouseEventHandler = (e) => { - e.preventDefault(); + if (state === 'unrequested') { + return ( + +
+ + + - dispatch(resetCompose('compose-modal')); +
+ {account && } +
- canvasRef.current!.toBlob((blob) => { - const file = new File([blob!], 'interactions_circle.png', { type: 'image/png' }); - - dispatch(uploadFile(file, intl, (data) => { - dispatch(uploadComposeSuccess('compose-modal', data, file)); - dispatch(openModal('COMPOSE')); - })); - }, 'image/png'); - }; + + + +
+
+ ); + } return ( diff --git a/src/locales/en.json b/src/locales/en.json index e85ae1bc0..b9cadf353 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -895,6 +895,8 @@ "input.copy": "Copy", "input.password.hide_password": "Hide password", "input.password.show_password": "Show password", + "interaction_circle.confirmation_heading": "Do you want to generate an interaction circle for the user @{username}?", + "interaction_circle.start": "Generate", "interaction_policies.entry.followers": "Followers", "interaction_policies.entry.following": "People I follow", "interaction_policies.entry.mentioned": "Mentioned",