Enable editing of zap split messages
This commit is contained in:
danidfra
parent
a66dd2b263
commit
275513ea16
|
|
@ -1,11 +1,11 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { defineMessages } from 'react-intl';
|
||||
|
||||
import { type INewAccount } from 'soapbox/features/admin/manage-zap-split';
|
||||
import { useApi } from 'soapbox/hooks';
|
||||
import { baseZapAccountSchema, ZapSplitData } from 'soapbox/schemas/zap-split';
|
||||
import toast from 'soapbox/toast';
|
||||
|
||||
import { type INewAccount } from '../../../features/admin/manage-zap-split';
|
||||
|
||||
const messages = defineMessages({
|
||||
zapSplitFee: { id: 'manage.zap_split.fees_error_message', defaultMessage: 'The fees cannot exceed 50% of the total zap.' },
|
||||
|
|
@ -18,6 +18,7 @@ export const useManageZapSplit = () => {
|
|||
const api = useApi();
|
||||
const [formattedData, setFormattedData] = useState<ZapSplitData[]>([]);
|
||||
const [weights, setWeights] = useState<{ [id: string]: number }>({});
|
||||
const [message, setMessage] = useState<{ [id: string]: string }>({});
|
||||
|
||||
const fetchZapSplitData = async () => {
|
||||
try {
|
||||
|
|
@ -31,6 +32,11 @@ export const useManageZapSplit = () => {
|
|||
return acc;
|
||||
}, {} as { [id: string]: number });
|
||||
setWeights(initialWeights);
|
||||
const initialMessages = normalizedData.reduce((acc, item) => {
|
||||
acc[item.account.id] = item.message;
|
||||
return acc;
|
||||
}, {} as { [id: string]: string });
|
||||
setMessage(initialMessages);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(messages.fetchErrorMessage);
|
||||
|
|
@ -48,11 +54,18 @@ export const useManageZapSplit = () => {
|
|||
}));
|
||||
};
|
||||
|
||||
const sendNewSplit = async (newAccount?: INewAccount) => {
|
||||
const handleMessageChange = (accountId: string, newMessage: string) => {
|
||||
setMessage((prevMessage) => ({
|
||||
...prevMessage,
|
||||
[accountId]: newMessage,
|
||||
}));
|
||||
};
|
||||
|
||||
const sendNewSplit = async (newAccount?: INewAccount, newMessage?: string) => {
|
||||
try {
|
||||
const updatedZapSplits = formattedData.reduce((acc: { [id: string]: { message: string; weight: number } }, zapData) => {
|
||||
acc[zapData.account.id] = {
|
||||
message: zapData.message,
|
||||
message: message[zapData.account.id] || zapData.message,
|
||||
weight: weights[zapData.account.id] || zapData.weight,
|
||||
};
|
||||
return acc;
|
||||
|
|
@ -95,6 +108,8 @@ export const useManageZapSplit = () => {
|
|||
return {
|
||||
formattedData,
|
||||
weights,
|
||||
message,
|
||||
handleMessageChange,
|
||||
handleWeightChange,
|
||||
sendNewSplit,
|
||||
removeAccount,
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
|||
|
||||
import Account from 'soapbox/components/account';
|
||||
import List, { ListItem } from 'soapbox/components/list';
|
||||
import { Button, Column, HStack, Stack } from 'soapbox/components/ui';
|
||||
import { Button, Column, HStack, Input, Stack } from 'soapbox/components/ui';
|
||||
|
||||
import { useManageZapSplit } from '../../api/hooks/admin/useManageZapSplit';
|
||||
import AddNewAccount from '../ui/components/new-account-zap-split';
|
||||
|
|
@ -23,7 +23,7 @@ interface INewAccount{
|
|||
|
||||
const ManageZapSplit: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const { formattedData, weights, handleWeightChange, sendNewSplit, removeAccount } = useManageZapSplit();
|
||||
const { formattedData, weights, message, handleMessageChange, handleWeightChange, sendNewSplit, removeAccount } = useManageZapSplit();
|
||||
const [hasNewAccount, setHasNewAccount] = useState(false);
|
||||
const [newWeight, setNewWeight] = useState(0.05);
|
||||
const [newAccount, setNewAccount] = useState<INewAccount>({ acc: '', message: '', weight: Number((newWeight * 100).toFixed()) });
|
||||
|
|
@ -54,17 +54,28 @@ const ManageZapSplit: React.FC = () => {
|
|||
<List>
|
||||
{formattedData.map((data) => (
|
||||
<ListItem key={data.account.id} label={''}>
|
||||
<div className='relative flex w-full flex-col items-start justify-center gap-4 sm:flex-row sm:justify-between'>
|
||||
<div className='flex w-60 justify-center sm:justify-start '>
|
||||
<div className='relative flex w-full flex-col items-start justify-center gap-4 pt-2 md:flex-row md:items-center md:justify-between md:pt-0'>
|
||||
<div className='flex min-w-60 items-center justify-center md:justify-start'>
|
||||
<Account account={data.account} showProfileHoverCard={false} />
|
||||
</div>
|
||||
<HStack space={2} className='w-full sm:justify-end'>
|
||||
|
||||
<div className='flex w-[96%] flex-col justify-center md:w-full'>
|
||||
<FormattedMessage id='manage.zap_split.new_account_message' defaultMessage='Message:' />
|
||||
<Input
|
||||
className='md:-mt-1'
|
||||
value={message[data.account.id] || ''}
|
||||
onChange={(e) =>
|
||||
handleMessageChange(data.account.id, e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<HStack space={2} className='w-full md:justify-end'>
|
||||
<ZapSplitSlider
|
||||
width='w-[96%] sm:w-40'
|
||||
width='w-[96%] md:w-40'
|
||||
initialWeight={weights[data.account.id] || 0}
|
||||
onWeightChange={(weight) => handleWeightChange(data.account.id, weight)}
|
||||
/>
|
||||
<Button type='button' className='absolute right-0 top-2 sm:relative sm:right-0 sm:top-0' size='xs' icon={closeIcon} theme='transparent' onClick={() => removeAccount(data.account.id)} />
|
||||
<Button type='button' className='absolute right-0 top-0 md:relative' size='xs' icon={closeIcon} theme='transparent' onClick={() => removeAccount(data.account.id)} />
|
||||
</HStack>
|
||||
</div>
|
||||
</ListItem>
|
||||
|
|
|
|||
Loading…
Reference in New Issue