From b41af99673d6ae8a8a7dbf4bdfd8b4591a899cbc Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Thu, 30 Nov 2023 12:45:54 +0100
Subject: [PATCH] [Glitch] Change dismissed banners to be stored server-side

Port 7faa27e17de515b8718075d89a00942c06c0ef48 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/dismissable_banner.tsx  | 25 ++++++++++++++++---
 .../flavours/glitch/reducers/settings.js      |  9 +++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/dismissable_banner.tsx b/app/javascript/flavours/glitch/components/dismissable_banner.tsx
index 68fe1f9a22..817f61df01 100644
--- a/app/javascript/flavours/glitch/components/dismissable_banner.tsx
+++ b/app/javascript/flavours/glitch/components/dismissable_banner.tsx
@@ -1,9 +1,16 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call,
+                  @typescript-eslint/no-unsafe-return,
+                  @typescript-eslint/no-unsafe-assignment,
+                  @typescript-eslint/no-unsafe-member-access
+                  -- the settings store is not yet typed */
 import type { PropsWithChildren } from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
+import { changeSetting } from 'flavours/glitch/actions/settings';
 import { bannerSettings } from 'flavours/glitch/settings';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
 
 import { IconButton } from './icon_button';
 
@@ -19,13 +26,25 @@ export const DismissableBanner: React.FC<PropsWithChildren<Props>> = ({
   id,
   children,
 }) => {
-  const [visible, setVisible] = useState(!bannerSettings.get(id));
+  const dismissed = useAppSelector((state) =>
+    state.settings.getIn(['dismissed_banners', id], false),
+  );
+  const dispatch = useAppDispatch();
+
+  const [visible, setVisible] = useState(!bannerSettings.get(id) && !dismissed);
   const intl = useIntl();
 
   const handleDismiss = useCallback(() => {
     setVisible(false);
     bannerSettings.set(id, true);
-  }, [id]);
+    dispatch(changeSetting(['dismissed_banners', id], true));
+  }, [id, dispatch]);
+
+  useEffect(() => {
+    if (!visible && !dismissed) {
+      dispatch(changeSetting(['dismissed_banners', id], true));
+    }
+  }, [id, dispatch, visible, dismissed]);
 
   if (!visible) {
     return null;
diff --git a/app/javascript/flavours/glitch/reducers/settings.js b/app/javascript/flavours/glitch/reducers/settings.js
index 3d04419d8d..a1b2434cdb 100644
--- a/app/javascript/flavours/glitch/reducers/settings.js
+++ b/app/javascript/flavours/glitch/reducers/settings.js
@@ -110,6 +110,15 @@ const initialState = ImmutableMap({
       body: '',
     }),
   }),
+
+  dismissed_banners: ImmutableMap({
+    'public_timeline': false,
+    'community_timeline': false,
+    'home.explore_prompt': false,
+    'explore/links': false,
+    'explore/statuses': false,
+    'explore/tags': false,
+  }),
 });
 
 const defaultColumns = fromJS([