import apiInstance from '@api/instance' import Icon from '@components/Icon' import ComponentSeparator from '@components/Separator' import HeaderSharedCreated from '@components/Timeline/Shared/HeaderShared/Created' import { useNavigation } from '@react-navigation/native' import { getInstanceDrafts, removeInstanceDraft } from '@utils/slices/instancesSlice' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' import React, { useCallback, useContext, useState } from 'react' import { useTranslation } from 'react-i18next' import { Dimensions, Image, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native' import { PanGestureHandler } from 'react-native-gesture-handler' import { SwipeListView } from 'react-native-swipe-list-view' import { useDispatch, useSelector } from 'react-redux' import formatText from '../formatText' import ComposeContext from '../utils/createContext' import { ComposeStateDraft, ExtendedAttachment } from '../utils/types' export interface Props { timestamp: number } const ComposeDraftsListRoot: React.FC = ({ timestamp }) => { const { composeDispatch } = useContext(ComposeContext) const { t } = useTranslation('screenCompose') const navigation = useNavigation() const dispatch = useDispatch() const { colors, theme } = useTheme() const instanceDrafts = useSelector(getInstanceDrafts)?.filter( draft => draft.timestamp !== timestamp ) const actionWidth = StyleConstants.Font.Size.L + StyleConstants.Spacing.Global.PagePadding * 4 const [checkingAttachments, setCheckingAttachments] = useState(false) const removeDraft = useCallback(ts => { dispatch(removeInstanceDraft(ts)) }, []) const renderItem = useCallback( ({ item }: { item: ComposeStateDraft }) => { return ( { setCheckingAttachments(true) let tempDraft = item let tempUploads: ExtendedAttachment[] = [] if (item.attachments && item.attachments.uploads.length) { for (const attachment of item.attachments.uploads) { await apiInstance({ method: 'get', url: `media/${attachment.remote?.id}` }) .then(res => { if (res.body.id === attachment.remote?.id) { tempUploads.push(attachment) } }) .catch(() => {}) } tempDraft = { ...tempDraft, attachments: { ...item.attachments, uploads: tempUploads } } } tempDraft.spoiler?.length && formatText({ textInput: 'text', composeDispatch, content: tempDraft.spoiler }) tempDraft.text?.length && formatText({ textInput: 'text', composeDispatch, content: tempDraft.text }) composeDispatch({ type: 'loadDraft', payload: tempDraft }) dispatch(removeInstanceDraft(item.timestamp)) navigation.goBack() }} > {item.text || item.spoiler || t('content.draftsList.content.textEmpty')} {item.attachments?.uploads.length ? ( {item.attachments.uploads.map((attachment, index) => ( ))} ) : null} ) }, [theme] ) const renderHiddenItem = useCallback( ({ item }) => ( removeDraft(item.timestamp)} children={ } /> } /> ), [theme] ) return ( <> item.timestamp.toString()} /> } /> } /> ) } const styles = StyleSheet.create({ draft: { flex: 1, padding: StyleConstants.Spacing.Global.PagePadding }, text: { marginTop: StyleConstants.Spacing.XS, ...StyleConstants.FontStyle.M }, attachments: { flex: 1, flexDirection: 'row', marginTop: StyleConstants.Spacing.S }, attachment: { width: (Dimensions.get('screen').width - StyleConstants.Spacing.Global.PagePadding * 2 - StyleConstants.Spacing.S * 3) / 4, height: (Dimensions.get('screen').width - StyleConstants.Spacing.Global.PagePadding * 2 - StyleConstants.Spacing.S * 3) / 4 }, hiddenBase: { flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }, action: { flexBasis: StyleConstants.Font.Size.L + StyleConstants.Spacing.Global.PagePadding * 4, justifyContent: 'center', alignItems: 'center' }, modal: { flex: 1, justifyContent: 'center', alignItems: 'center' } }) export default ComposeDraftsListRoot