Merge branch 'add-topics' into 'develop'

Groups: allow managing topics

See merge request soapbox-pub/soapbox!2416

app/soapbox/components/ui/streamfield/streamfield.tsx

@@ -69,14 +69,14 @@ const Streamfield: React.FC<IStreamfield> = ({
       </Stack>
 
       {(values.length > 0) && (
-        <Stack>
+        <Stack space={1}>
           {values.map((value, i) => value?._destroy ? null : (
             <HStack space={2} alignItems='center'>
               <Component key={i} onChange={handleChange(i)} value={value} />
               {values.length > minItems && onRemoveItem && (
                 <IconButton
                   iconClassName='h-4 w-4'
-                  className='bg-transparent text-gray-400 hover:text-gray-600'
+                  className='bg-transparent text-gray-600 hover:text-gray-600'
                   src={require('@tabler/icons/x.svg')}
                   onClick={() => onRemoveItem(i)}
                   title={intl.formatMessage(messages.remove)}
@@ -87,11 +87,9 @@ const Streamfield: React.FC<IStreamfield> = ({
         </Stack>
       )}
 
-      {onAddItem && (
+      {(onAddItem && (values.length < maxItems)) && (
         <Button
-          icon={require('@tabler/icons/plus.svg')}
           onClick={onAddItem}
-          disabled={values.length >= maxItems}
           theme='secondary'
           block
         >

app/soapbox/features/group/components/group-tags-field.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { FormattedMessage, 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={<FormattedMessage id='group.tags.label' defaultMessage='Tags' />}
+      hint={<FormattedMessage id='group.tags.hint' defaultMessage='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,8 +1,7 @@
-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';
@@ -10,6 +9,7 @@ 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 +20,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 +37,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 +60,28 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { id: groupId } }) => {
       note: note.value,
       avatar: avatar.file,
       header: header.file,
+      tags,
     });
 
     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 +117,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

@@ -4,6 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 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';
@@ -14,6 +15,7 @@ import type { List as ImmutableList } from 'immutable';
 const messages = defineMessages({
   groupNamePlaceholder: { id: 'manage_group.fields.name_placeholder', defaultMessage: 'Group Name' },
   groupDescriptionPlaceholder: { id: 'manage_group.fields.description_placeholder', defaultMessage: 'Description' },
+  hashtagPlaceholder: { id: 'manage_group.fields.hashtag_placeholder', defaultMessage: 'Add a topic' },
 });
 
 interface IDetailsStep {
@@ -29,6 +31,7 @@ const DetailsStep: React.FC<IDetailsStep> = ({ params, onChange }) => {
   const {
     display_name: displayName = '',
     note = '',
+    tags = [''],
   } = params;
 
   const debouncedName = debounce(displayName, 300);
@@ -63,6 +66,29 @@ const DetailsStep: React.FC<IDetailsStep> = ({ params, onChange }) => {
     };
   };
 
+  const handleTagsChange = (tags: string[]) => {
+    onChange({
+      ...params,
+      tags,
+    });
+  };
+
+  const handleAddTag = () => {
+    onChange({
+      ...params,
+      tags: [...tags, ''],
+    });
+  };
+
+  const handleRemoveTag = (i: number) => {
+    const newTags = [...tags];
+    newTags.splice(i, 1);
+    onChange({
+      ...params,
+      tags: newTags,
+    });
+  };
+
   return (
     <Form>
       <div className='relative mb-12 flex'>
@@ -95,6 +121,15 @@ const DetailsStep: React.FC<IDetailsStep> = ({ params, onChange }) => {
           maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_description']))}
         />
       </FormGroup>
+
+      <div className='pb-6'>
+        <GroupTagsField
+          tags={tags}
+          onChange={handleTagsChange}
+          onAddItem={handleAddTag}
+          onRemoveItem={handleRemoveTag}
+        />
+      </div>
     </Form>
   );
 };

app/soapbox/locales/en.json

@@ -808,6 +808,8 @@
   "group.role.owner": "Owner",
   "group.tabs.all": "All",
   "group.tabs.members": "Members",
+  "group.tags.hint": "Add up to 3 keywords that will serve as core topics of discussion in the group.",
+  "group.tags.label": "Tags",
   "group.upload_banner": "Upload photo",
   "groups.discover.popular.empty": "Unable to fetch popular groups at this time. Please check back later.",
   "groups.discover.popular.show_more": "Show More",
@@ -950,6 +952,7 @@
   "manage_group.fields.cannot_change_hint": "This cannot be changed after the group is created.",
   "manage_group.fields.description_label": "Description",
   "manage_group.fields.description_placeholder": "Description",
+  "manage_group.fields.hashtag_placeholder": "Add a topic",
   "manage_group.fields.name_help": "This cannot be changed after the group is created.",
   "manage_group.fields.name_label": "Group name (required)",
   "manage_group.fields.name_label_optional": "Group name",
@@ -963,6 +966,7 @@
   "manage_group.privacy.private.label": "Private (Owner approval required)",
   "manage_group.privacy.public.hint": "Discoverable. Anyone can join.",
   "manage_group.privacy.public.label": "Public",
+  "manage_group.success": "Group saved!",
   "manage_group.tagline": "Groups connect you with others based on shared interests.",
   "media_panel.empty_message": "No media found.",
   "media_panel.title": "Media",

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 };