[Glitch] Wrapstodon: Allow dismissing banner

Port 10f232ca08 to glitch-soc

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

app/javascript/flavours/glitch/components/dismissable_banner.tsx

@@ -1,12 +1,10 @@
-import type { PropsWithChildren } from 'react';
-import { useCallback, useState, useEffect } from 'react';
+import type { FC, ReactNode } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import { changeSetting } from 'flavours/glitch/actions/settings';
-import { bannerSettings } from 'flavours/glitch/settings';
-import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
+
+import { useDismissible } from '../hooks/useDismissible';
 
 import { IconButton } from './icon_button';
 
@@ -16,48 +14,12 @@ const messages = defineMessages({
 
 interface Props {
   id: string;
+  children: ReactNode;
 }
 
-export function useDismissableBannerState({ id }: Props) {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const dismissed: boolean = useAppSelector((state) =>
-    /* eslint-disable-next-line */
-    state.settings.getIn(['dismissed_banners', id], false),
-  );
-
-  const [isVisible, setIsVisible] = useState(
-    !bannerSettings.get(id) && !dismissed,
-  );
-
-  const dispatch = useAppDispatch();
-
-  const dismiss = useCallback(() => {
-    setIsVisible(false);
-    bannerSettings.set(id, true);
-    dispatch(changeSetting(['dismissed_banners', id], true));
-  }, [id, dispatch]);
-
-  useEffect(() => {
-    // Store legacy localStorage setting on server
-    if (!isVisible && !dismissed) {
-      dispatch(changeSetting(['dismissed_banners', id], true));
-    }
-  }, [id, dispatch, isVisible, dismissed]);
-
-  return {
-    wasDismissed: !isVisible,
-    dismiss,
-  };
-}
-
-export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
-  id,
-  children,
-}) => {
+export const DismissableBanner: FC<Props> = ({ id, children }) => {
   const intl = useIntl();
-  const { wasDismissed, dismiss } = useDismissableBannerState({
-    id,
-  });
+  const { wasDismissed, dismiss } = useDismissible(id);
 
   if (wasDismissed) {
     return null;

app/javascript/flavours/glitch/components/status_action_bar/remove_quote_hint.tsx

@@ -6,13 +6,13 @@ import classNames from 'classnames';
 
 import Overlay from 'react-overlays/Overlay';
 
+import { useDismissible } from '@/flavours/glitch/hooks/useDismissible';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 
 import { Button } from '../button';
-import { useDismissableBannerState } from '../dismissable_banner';
 import { Icon } from '../icon';
 
-const DISMISSABLE_BANNER_ID = 'notifications/remove_quote_hint';
+const DISMISSIBLE_BANNER_ID = 'notifications/remove_quote_hint';
 
 /**
  * We don't want to show this hint in the UI more than once,
@@ -29,9 +29,7 @@ export const RemoveQuoteHint: React.FC<{
   const anchorRef = useRef<HTMLDivElement>(null);
   const intl = useIntl();
 
-  const { wasDismissed, dismiss } = useDismissableBannerState({
-    id: DISMISSABLE_BANNER_ID,
-  });
+  const { wasDismissed, dismiss } = useDismissible(DISMISSIBLE_BANNER_ID);
 
   const shouldShowHint = !wasDismissed && canShowHint;
 

app/javascript/flavours/glitch/components/status_list.jsx

@@ -8,8 +8,6 @@ import { debounce } from 'lodash';
 import { TIMELINE_GAP, TIMELINE_SUGGESTIONS } from 'flavours/glitch/actions/timelines';
 import { RegenerationIndicator } from 'flavours/glitch/components/regeneration_indicator';
 import { InlineFollowSuggestions } from 'flavours/glitch/features/home_timeline/components/inline_follow_suggestions';
-import { AnnualReportTimeline } from 'flavours/glitch/features/annual_report/timeline';
-import { TIMELINE_WRAPSTODON } from '@/flavours/glitch/reducers/slices/annual_report';
 
 import { StatusQuoteManager } from '../components/status_quoted';
 
@@ -68,10 +66,6 @@ export default class StatusList extends ImmutablePureComponent {
           return (
             <InlineFollowSuggestions key={TIMELINE_SUGGESTIONS} />
           );
-        case TIMELINE_WRAPSTODON:
-          return (
-            <AnnualReportTimeline key={TIMELINE_WRAPSTODON} />
-          )
         case TIMELINE_GAP:
           return (
             <LoadGap