diff --git a/app/soapbox/features/group/components/group-tags-field.tsx b/app/soapbox/features/group/components/group-tags-field.tsx new file mode 100644 index 000000000..326fbfd8b --- /dev/null +++ b/app/soapbox/features/group/components/group-tags-field.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; + +import { Input, Streamfield } from 'soapbox/components/ui'; + +const messages = defineMessages({ + hashtagPlaceholder: { id: 'manage_group.fields.hashtag_placeholder', defaultMessage: 'Add a topic' }, +}); + +interface IGroupTagsField { + tags: string[] + onChange(tags: string[]): void + onAddItem(): void + onRemoveItem(i: number): void + maxItems?: number +} + +const GroupTagsField: React.FC = ({ tags, onChange, onAddItem, onRemoveItem, maxItems = 3 }) => { + return ( + + ); +}; + +interface IHashtagField { + value: string + onChange: (value: string) => void +} + +const HashtagField: React.FC = ({ value, onChange }) => { + const intl = useIntl(); + + const handleChange: React.ChangeEventHandler = ({ target }) => { + onChange(target.value); + }; + + return ( + + ); +}; + +export default GroupTagsField; \ No newline at end of file diff --git a/app/soapbox/features/group/edit-group.tsx b/app/soapbox/features/group/edit-group.tsx index 23ff9ed98..bb8c622c9 100644 --- a/app/soapbox/features/group/edit-group.tsx +++ b/app/soapbox/features/group/edit-group.tsx @@ -1,15 +1,16 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; -import Icon from 'soapbox/components/icon'; -import { Button, Column, Form, FormActions, FormGroup, Input, Spinner, Textarea } from 'soapbox/components/ui'; +import { Button, Column, Form, FormActions, FormGroup, Icon, Input, Spinner, Textarea } from 'soapbox/components/ui'; import { useAppSelector, useInstance } from 'soapbox/hooks'; import { useGroup, useUpdateGroup } from 'soapbox/hooks/api'; import { useImageField, useTextField } from 'soapbox/hooks/forms'; +import toast from 'soapbox/toast'; import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts'; import AvatarPicker from './components/group-avatar-picker'; import HeaderPicker from './components/group-header-picker'; +import GroupTagsField from './components/group-tags-field'; import type { List as ImmutableList } from 'immutable'; @@ -20,6 +21,7 @@ const messages = defineMessages({ heading: { id: 'navigation_bar.edit_group', defaultMessage: 'Edit Group' }, groupNamePlaceholder: { id: 'manage_group.fields.name_placeholder', defaultMessage: 'Group Name' }, groupDescriptionPlaceholder: { id: 'manage_group.fields.description_placeholder', defaultMessage: 'Description' }, + success: { id: 'manage_group.success', defaultMessage: 'Group saved!' }, }); interface IEditGroup { @@ -36,6 +38,7 @@ const EditGroup: React.FC = ({ params: { id: groupId } }) => { const { updateGroup } = useUpdateGroup(groupId); const [isSubmitting, setIsSubmitting] = useState(false); + const [tags, setTags] = useState(['']); const avatar = useImageField({ maxPixels: 400 * 400, preview: nonDefaultAvatar(group?.avatar) }); const header = useImageField({ maxPixels: 1920 * 1080, preview: nonDefaultHeader(group?.header) }); @@ -58,11 +61,29 @@ const EditGroup: React.FC = ({ params: { id: groupId } }) => { note: note.value, avatar: avatar.file, header: header.file, + tags, }); + toast.success(intl.formatMessage(messages.success)); setIsSubmitting(false); } + const handleAddTag = () => { + setTags([...tags, '']); + }; + + const handleRemoveTag = (i: number) => { + const newTags = [...tags]; + newTags.splice(i, 1); + setTags(newTags); + }; + + useEffect(() => { + if (group) { + setTags(group.tags.map((t) => t.name)); + } + }, [group?.id]); + if (isLoading) { return ; } @@ -98,6 +119,15 @@ const EditGroup: React.FC = ({ params: { id: groupId } }) => { /> +
+ +
+