[Glitch] Add ability to feature and unfeature hashtags from web UI

Port 40157e063d12b5591a9cccaf92abd783e03586b4 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/actions/tags_typed.ts

@@ -2,6 +2,8 @@ import {
   apiGetTag,
   apiFollowTag,
   apiUnfollowTag,
+  apiFeatureTag,
+  apiUnfeatureTag,
 } from 'flavours/glitch/api/tags';
 import { createDataLoadingThunk } from 'flavours/glitch/store/typed_functions';
 
@@ -19,3 +21,13 @@ export const unfollowHashtag = createDataLoadingThunk(
   'tags/unfollow',
   ({ tagId }: { tagId: string }) => apiUnfollowTag(tagId),
 );
+
+export const featureHashtag = createDataLoadingThunk(
+  'tags/feature',
+  ({ tagId }: { tagId: string }) => apiFeatureTag(tagId),
+);
+
+export const unfeatureHashtag = createDataLoadingThunk(
+  'tags/unfeature',
+  ({ tagId }: { tagId: string }) => apiUnfeatureTag(tagId),
+);

app/javascript/flavours/glitch/api/tags.ts

@@ -14,6 +14,12 @@ export const apiFollowTag = (tagId: string) =>
 export const apiUnfollowTag = (tagId: string) =>
   apiRequestPost<ApiHashtagJSON>(`v1/tags/${tagId}/unfollow`);
 
+export const apiFeatureTag = (tagId: string) =>
+  apiRequestPost<ApiHashtagJSON>(`v1/tags/${tagId}/feature`);
+
+export const apiUnfeatureTag = (tagId: string) =>
+  apiRequestPost<ApiHashtagJSON>(`v1/tags/${tagId}/unfeature`);
+
 export const apiGetFollowedTags = async (url?: string) => {
   const response = await api().request<ApiHashtagJSON[]>({
     method: 'GET',

app/javascript/flavours/glitch/api_types/tags.ts

@@ -10,4 +10,5 @@ export interface ApiHashtagJSON {
   url: string;
   history: [ApiHistoryJSON, ...ApiHistoryJSON[]];
   following?: boolean;
+  featuring?: boolean;
 }

app/javascript/flavours/glitch/features/hashtag_timeline/components/hashtag_header.tsx

@@ -9,6 +9,8 @@ import {
   fetchHashtag,
   followHashtag,
   unfollowHashtag,
+  featureHashtag,
+  unfeatureHashtag,
 } from 'flavours/glitch/actions/tags_typed';
 import type { ApiHashtagJSON } from 'flavours/glitch/api_types/tags';
 import { Button } from 'flavours/glitch/components/button';
@@ -28,6 +30,11 @@ const messages = defineMessages({
     id: 'hashtag.admin_moderation',
     defaultMessage: 'Open moderation interface for #{name}',
   },
+  feature: { id: 'hashtag.feature', defaultMessage: 'Feature on profile' },
+  unfeature: {
+    id: 'hashtag.unfeature',
+    defaultMessage: "Don't feature on profile",
+  },
 });
 
 const usesRenderer = (displayNumber: React.ReactNode, pluralReady: number) => (
@@ -88,22 +95,51 @@ export const HashtagHeader: React.FC<{
   }, [dispatch, tagId, setTag]);
 
   const menu = useMemo(() => {
-    const tmp = [];
+    const arr = [];
 
-    if (
-      tag &&
-      signedIn &&
-      (permissions & PERMISSION_MANAGE_TAXONOMIES) ===
-        PERMISSION_MANAGE_TAXONOMIES
-    ) {
-      tmp.push({
-        text: intl.formatMessage(messages.adminModeration, { name: tag.id }),
-        href: `/admin/tags/${tag.id}`,
+    if (tag && signedIn) {
+      const handleFeature = () => {
+        if (tag.featuring) {
+          void dispatch(unfeatureHashtag({ tagId })).then((result) => {
+            if (isFulfilled(result)) {
+              setTag(result.payload);
+            }
+
+            return '';
+          });
+        } else {
+          void dispatch(featureHashtag({ tagId })).then((result) => {
+            if (isFulfilled(result)) {
+              setTag(result.payload);
+            }
+
+            return '';
+          });
+        }
+      };
+
+      arr.push({
+        text: intl.formatMessage(
+          tag.featuring ? messages.unfeature : messages.feature,
+        ),
+        action: handleFeature,
       });
+
+      arr.push(null);
+
+      if (
+        (permissions & PERMISSION_MANAGE_TAXONOMIES) ===
+        PERMISSION_MANAGE_TAXONOMIES
+      ) {
+        arr.push({
+          text: intl.formatMessage(messages.adminModeration, { name: tagId }),
+          href: `/admin/tags/${tag.id}`,
+        });
+      }
     }
 
-    return tmp;
-  }, [signedIn, permissions, intl, tag]);
+    return arr;
+  }, [setTag, dispatch, tagId, signedIn, permissions, intl, tag]);
 
   const handleFollow = useCallback(() => {
     if (!signedIn || !tag) {