EditGroup: allow managing topics

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<IGroupTagsField> = ({ tags, onChange, onAddItem, onRemoveItem, maxItems = 3 }) => {
+  return (
+    <Streamfield
+      label='Topics'
+      hint='Add up to 3 keywords that will serve as core topics of discussion in the group.'
+      component={HashtagField}
+      values={tags}
+      onChange={onChange}
+      onAddItem={onAddItem}
+      onRemoveItem={onRemoveItem}
+      maxItems={maxItems}
+    />
+  );
+};
+
+interface IHashtagField {
+  value: string
+  onChange: (value: string) => void
+}
+
+const HashtagField: React.FC<IHashtagField> = ({ value, onChange }) => {
+  const intl = useIntl();
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    onChange(target.value);
+  };
+
+  return (
+    <Input
+      outerClassName='w-full'
+      type='text'
+      value={value}
+      onChange={handleChange}
+      placeholder={intl.formatMessage(messages.hashtagPlaceholder)}
+    />
+  );
+};
+
+export default GroupTagsField;

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, Icon, Input, Spinner, Textarea } from 'soapbox/components/ui';
-import { Button, Column, Form, FormActions, FormGroup, 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<IEditGroup> = ({ params: { id: groupId } }) => {
   const { updateGroup } = useUpdateGroup(groupId);
 
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [tags, setTags] = useState<string[]>(['']);
 
   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<IEditGroup> = ({ 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 <Spinner />;
   }
@@ -98,6 +119,15 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
           />
         </FormGroup>
 
+        <div className='pb-6'>
+          <GroupTagsField
+            tags={tags}
+            onChange={setTags}
+            onAddItem={handleAddTag}
+            onRemoveItem={handleRemoveTag}
+          />
+        </div>
+
         <FormActions>
           <Button theme='primary' type='submit' disabled={isSubmitting} block>
             <FormattedMessage id='edit_profile.save' defaultMessage='Save' />

app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Form, FormGroup, Input, Streamfield, Textarea } from 'soapbox/components/ui';
+import { Form, FormGroup, Input, Textarea } from 'soapbox/components/ui';
 import AvatarPicker from 'soapbox/features/group/components/group-avatar-picker';
 import HeaderPicker from 'soapbox/features/group/components/group-header-picker';
+import GroupTagsField from 'soapbox/features/group/components/group-tags-field';
 import { useAppSelector, useDebounce, useInstance } from 'soapbox/hooks';
 import { CreateGroupParams, useGroupValidation } from 'soapbox/hooks/api';
 import { usePreview } from 'soapbox/hooks/forms';
@@ -122,42 +123,15 @@ const DetailsStep: React.FC<IDetailsStep> = ({ params, onChange }) => {
       </FormGroup>
 
       <div className='pb-6'>
-        <Streamfield
+        <GroupTagsField
-          label='Topics'
+          tags={tags}
-          hint='Add up to 3 keywords that will serve as core topics of discussion in the group.'
-          component={HashtagField}
-          values={tags.map((t) => [t])}
           onChange={handleTagsChange}
           onAddItem={handleAddTag}
           onRemoveItem={handleRemoveTag}
-          maxItems={3}
         />
       </div>
     </Form>
   );
 };
 
-interface IHashtagField {
-  value: string
-  onChange: (value: string) => void
-}
-
-const HashtagField: React.FC<IHashtagField> = ({ value, onChange }) => {
-  const intl = useIntl();
-
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
-    onChange(target.value);
-  };
-
-  return (
-    <Input
-      outerClassName='w-full'
-      type='text'
-      value={value}
-      onChange={handleChange}
-      placeholder={intl.formatMessage(messages.hashtagPlaceholder)}
-    />
-  );
-};
-
 export default DetailsStep;

app/soapbox/normalizers/group.ts

@@ -33,6 +33,7 @@ export const GroupRecord = ImmutableRecord({
   members_count: 0,
   note: '',
   statuses_visibility: 'public',
+  tags: [],
   uri: '',
   url: '',
 

app/soapbox/schemas/group-tag.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+const groupTagSchema = z.object({
+  name: z.string(),
+});
+
+type GroupTag = z.infer<typeof groupTagSchema>;
+
+export { groupTagSchema, type GroupTag };

app/soapbox/schemas/group.ts

@@ -6,6 +6,7 @@ import { unescapeHTML } from 'soapbox/utils/html';
 
 import { customEmojiSchema } from './custom-emoji';
 import { groupRelationshipSchema } from './group-relationship';
+import { groupTagSchema } from './group-tag';
 import { filteredArray, makeCustomEmojiMap } from './utils';
 
 const avatarMissing = require('assets/images/avatar-missing.png');
@@ -28,6 +29,7 @@ const groupSchema = z.object({
   note: z.string().transform(note => note === '<p></p>' ? '' : note).catch(''),
   relationship: groupRelationshipSchema.nullable().catch(null), // Dummy field to be overwritten later
   statuses_visibility: z.string().catch('public'),
+  tags: z.array(groupTagSchema).catch([]),
   uri: z.string().catch(''),
   url: z.string().catch(''),
 }).transform(group => {
@@ -46,4 +48,4 @@ const groupSchema = z.object({
 
 type Group = z.infer<typeof groupSchema>;
 
-export { groupSchema, Group };
+export { groupSchema, type Group };