bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Groups: scaffold the confirmation step

Browse source
This commit is contained in:
Alex Gleason 2023-03-08 13:43:16 -06:00
parent 925509a985
commit d7f5e210d8
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
4 changed files with 44 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/soapbox/actions/groups.ts
View file

@ -148,6 +148,8 @@ const createGroup = (params: Record<string, any>, shouldReset?: boolean) =>
if (shouldReset) {
dispatch(resetGroupEditor());
}
return data;
}).catch(err => dispatch(createGroupFail(err)));
};
@ -868,9 +870,9 @@ const submitGroupEditor = (shouldReset?: boolean) => (dispatch: AppDispatch, get
if (header) params.header = header;
if (groupId === null) {
dispatch(createGroup(params, shouldReset));
return dispatch(createGroup(params, shouldReset));
} else {
dispatch(updateGroup(groupId, params, shouldReset));
return dispatch(updateGroup(groupId, params, shouldReset));
}
};

1
app/soapbox/components/ui/stack/stack.tsx
View file

@ -11,6 +11,7 @@ const spaces = {
4: 'space-y-4',
5: 'space-y-5',
6: 'space-y-6',
9: 'space-y-9',
10: 'space-y-10',
};

16
app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx
View file

@ -1,7 +1,7 @@
import React, { useMemo, useState } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { resetGroupEditor, submitGroupEditor } from 'soapbox/actions/groups';
import { submitGroupEditor } from 'soapbox/actions/groups';
import { Modal, Stack } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
@ -37,6 +37,7 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
const dispatch = useAppDispatch();
const id = useAppSelector((state) => state.group_editor.groupId);
const [group, setGroup] = useState<any | null>(null);
const isSubmitting = useAppSelector((state) => state.group_editor.isSubmitting);
@ -47,7 +48,7 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
};
const handleSubmit = () => {
dispatch(submitGroupEditor(true));
return dispatch(submitGroupEditor(true));
};
const confirmationText = useMemo(() => {
@ -67,8 +68,12 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
setCurrentStep(Steps.TWO);
break;
case Steps.TWO:
handleSubmit();
setCurrentStep(Steps.THREE);
handleSubmit()
.then((group) => {
setCurrentStep(Steps.THREE);
setGroup(group);
})
.catch(() => {});
break;
case Steps.THREE:
handleClose();
@ -92,7 +97,8 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
onClose={handleClose}
>
<Stack space={2}>
<StepToRender />
{/* @ts-ignore */}
<StepToRender group={group} />
</Stack>
</Modal>
);

176
app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
View file

@ -1,162 +1,42 @@
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import React from 'react';
import { FormattedMessage } from 'react-intl';
import {
changeGroupEditorTitle,
changeGroupEditorDescription,
changeGroupEditorMedia,
} from 'soapbox/actions/groups';
import Icon from 'soapbox/components/icon';
import { Avatar, Form, FormGroup, HStack, Input, Text, Textarea } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
import resizeImage from 'soapbox/utils/resize-image';
import { Avatar, Divider, Stack, Text } from 'soapbox/components/ui';
import type { List as ImmutableList } from 'immutable';
interface IMediaInput {
src: string | null
accept: string
onChange: React.ChangeEventHandler<HTMLInputElement>
disabled: boolean
interface IConfirmationStep {
group: any
}
const messages = defineMessages({
groupNamePlaceholder: { id: 'manage_group.fields.name_placeholder', defaultMessage: 'Group Name' },
groupDescriptionPlaceholder: { id: 'manage_group.fields.description_placeholder', defaultMessage: 'Description' },
});
const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
return (
<label
className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
>
{src && <img className='h-full w-full object-cover' src={src} alt='' />}
<HStack
className={clsx('absolute top-0 h-full w-full transition-opacity', {
'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
})}
space={1.5}
alignItems='center'
justifyContent='center'
>
<Icon
src={require('@tabler/icons/photo-plus.svg')}
className='h-4.5 w-4.5'
/>
<Stack space={9}>
<Stack space={3}>
<Stack>
<label
className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
>
{group.header && <img className='h-full w-full object-cover' src={group.header} alt='' />}
</label>
<Text size='md' theme='primary' weight='semibold'>
<FormattedMessage id='group.upload_banner' defaultMessage='Upload photo' />
</Text>
<label className='mx-auto -mt-10 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
{group.avatar && <Avatar src={group.avatar} size={80} />}
</label>
</Stack>
<input
name='header'
type='file'
accept={accept}
onChange={onChange}
disabled={disabled}
className='hidden'
/>
</HStack>
</label>
);
};
<Stack>
<Text size='2xl' weight='bold' align='center'>{group.display_name}</Text>
<Text size='md' className='mx-auto max-w-sm'>{group.note}</Text>
</Stack>
</Stack>
const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
return (
<label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
{src && <Avatar src={src} size={80} />}
<HStack
alignItems='center'
justifyContent='center'
<Divider />
className={clsx('absolute left-0 top-0 h-full w-full rounded-full transition-opacity', {
'opacity-0 hover:opacity-90 bg-primary-500': src,
})}
>
<Icon
src={require('@tabler/icons/camera-plus.svg')}
className='h-5 w-5 text-white'
/>
</HStack>
<span className='sr-only'>Upload avatar</span>
<input
name='avatar'
type='file'
accept={accept}
onChange={onChange}
disabled={disabled}
className='hidden'
/>
</label>
);
};
const ConfirmationStep = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const instance = useInstance();
const groupId = useAppSelector((state) => state.group_editor.groupId);
const isUploading = useAppSelector((state) => state.group_editor.isUploading);
const name = useAppSelector((state) => state.group_editor.displayName);
const description = useAppSelector((state) => state.group_editor.note);
const [avatarSrc, setAvatarSrc] = useState<string | null>(null);
const [headerSrc, setHeaderSrc] = useState<string | null>(null);
const attachmentTypes = useAppSelector(
state => state.instance.configuration.getIn(['media_attachments', 'supported_mime_types']) as ImmutableList<string>,
)?.filter(type => type.startsWith('image/')).toArray().join(',');
const onChangeName: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
dispatch(changeGroupEditorTitle(target.value));
};
const onChangeDescription: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => {
dispatch(changeGroupEditorDescription(target.value));
};
const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = e => {
const rawFile = e.target.files?.item(0);
if (!rawFile) return;
if (e.target.name === 'avatar') {
resizeImage(rawFile, 400 * 400).then(file => {
dispatch(changeGroupEditorMedia('avatar', file));
setAvatarSrc(URL.createObjectURL(file));
}).catch(console.error);
} else {
resizeImage(rawFile, 1920 * 1080).then(file => {
dispatch(changeGroupEditorMedia('header', file));
setHeaderSrc(URL.createObjectURL(file));
}).catch(console.error);
}
};
useEffect(() => {
if (!groupId) return;
dispatch((_, getState) => {
const group = getState().groups.items.get(groupId);
if (!group) return;
if (group.avatar && !isDefaultAvatar(group.avatar)) setAvatarSrc(group.avatar);
if (group.header && !isDefaultHeader(group.header)) setHeaderSrc(group.header);
});
}, [groupId]);
return (
<Form>
<div className='relative mb-12 flex'>
<HeaderPicker src={headerSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
<AvatarPicker src={avatarSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
</div>
<div>
<Text size='2xl'>You're all set!</Text>
<Text size='3xl' weight='bold' align='center'>
<FormattedMessage id='manage_group.confirmation.title' defaultMessage='You’re all set!' />
</Text>
</div>
</Form>
</Stack>
);
};