From 9fbd52b8a58674d3f3a3adc96a7eb492fee4b3d4 Mon Sep 17 00:00:00 2001
From: Tomas Kikutis <t.kikutis@gmail.com>
Date: Wed, 13 Mar 2024 09:27:17 +0100
Subject: [PATCH] show refresh icon when event gets unposted (#838)

---
 assets/agenda/actions.ts                  |  4 ---
 assets/search/components/NewItemsIcon.tsx | 43 +++++++++++------------
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/assets/agenda/actions.ts b/assets/agenda/actions.ts
index e2c09a941..7ff08f633 100644
--- a/assets/agenda/actions.ts
+++ b/assets/agenda/actions.ts
@@ -597,10 +597,6 @@ export function setAndUpdateNewItems(data: any) {
 
         dispatch(updateItem(item));
 
-        // Do not use 'killed' items for new-item notifications
-        if (item.state === 'killed') {
-            return Promise.resolve();
-        }
 
         dispatch({type: SET_NEW_ITEM, data: item});
         return Promise.resolve();
diff --git a/assets/search/components/NewItemsIcon.tsx b/assets/search/components/NewItemsIcon.tsx
index 93263d9fb..49ffeddad 100644
--- a/assets/search/components/NewItemsIcon.tsx
+++ b/assets/search/components/NewItemsIcon.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import 'react-toggle/style.css';
-import {get} from 'lodash';
 import {Tooltip} from 'bootstrap';
 
-import {gettext, isTouchDevice, isWireContext} from 'utils';
+import {gettext, isTouchDevice} from 'utils';
+
+interface IProps {
+    newItems?: Array<string>; // array of IDs
+    refresh(): void;
+}
+
+class NewItemsIcon extends React.Component<IProps> {
+    private dom: any;
+    private tooltip: any;
 
-class NewItemsIcon extends React.Component<any, any> {
-    static propTypes: any;
-    dom: any;
-    tooltip: any;
     constructor(props: any) {
         super(props);
 
@@ -38,35 +41,31 @@ class NewItemsIcon extends React.Component<any, any> {
     }
 
     render() {
-        const newItemsLength = get(this.props, 'newItems.length', 0) > 25 ?
-            '25+' :
-            get(this.props, 'newItems.length');
+        const newItems = this.props.newItems ?? [];
 
-        const newItemsTooltip = !isWireContext() ?
-            gettext('New events to load') :
-            gettext('New stories available to load');
+        /**
+         * one added item and one removed item would result in action count of 2
+         */
+        const additionOrRemovalActionCount = newItems.length > 25 ?
+            '25+' :
+            newItems.length;
 
         return (
             <button
                 type="button"
                 ref={(elem: any) => this.dom.tooltip = elem}
-                title={newItemsTooltip}
+                title={gettext('refresh')}
+                aria-label={gettext('refresh')}
                 className="button__reset-styles d-flex align-items-center ms-3"
                 onClick={this.props.refresh}
-                aria-label={gettext('Refresh')}
             >
-                <i className="icon--refresh icon--pink"/>
+                <i className="icon--refresh icon--pink" />
                 <span className="badge rounded-pill bg-info ms-2">
-                    {newItemsLength}
+                    {additionOrRemovalActionCount}
                 </span>
             </button>
         );
     }
 }
 
-NewItemsIcon.propTypes = {
-    newItems: PropTypes.array,
-    refresh: PropTypes.func,
-};
-
 export default NewItemsIcon;