refactor(core): ♻️ various minor refactor

resources/skins.citizen.search/searchHistory.js

@@ -1,35 +1,51 @@
+/**
+ * Represents a search history object that stores search queries and provides methods to manipulate the history.
+ *
+ * @param {Object} config - The configuration object containing the maximum number of search results allowed.
+ * @return {Object} An object with methods to get, set, add, clear, and initialize the search history.
+ */
 function searchHistory( config ) {
 	return {
 		data: [],
-		/* TODO: Should probably create a separate config */
 		limit: config.wgCitizenMaxSearchResults,
+		isValidSearchHistory: function ( arr ) {
+			return Array.isArray( arr ) && arr.length <= this.limit;
+		},
 		get: function () {
-			// IDK why this.data keeps returning an empty array without init
+			if ( this.data.length === 0 ) {
-			this.init();
+				this.init();
+			}
 			return this.data;
 		},
 		set: function ( arr ) {
-			this.data = arr;
+			if ( arr && this.isValidSearchHistory( arr ) ) {
+				this.data = arr;
+				mw.storage.set( 'skin-citizen-search-history', JSON.stringify( this.data ) );
+			}
 		},
 		add: function ( query ) {
 			if ( typeof query === 'string' ) {
-				let history = this.data;
+				let history = [ ...this.data ];
 				history.unshift( query );
-				history = history.filter( ( value, index ) => {
+				history = [ ...new Set( history ) ]; // Remove duplicates
-					return history.indexOf( value ) === index;
-				} );
 				if ( history.length > this.limit ) {
-					history.splice( this.limit );
+					history.length = this.limit;
 				}
 				this.set( history );
-				/* NOTE: Should we set an expiry? This data only exists locally though */
-				mw.storage.set( 'skin-citizen-search-history', JSON.stringify( this.data ) );
 			}
 		},
+		clear: function () {
+			this.set( [] );
+			mw.storage.remove( 'skin-citizen-search-history' );
+		},
 		init: function () {
 			const storedData = mw.storage.get( 'skin-citizen-search-history' );
 			if ( storedData ) {
-				this.set( JSON.parse( storedData ) );
+				try {
+					this.data = JSON.parse( storedData );
+				} catch ( error ) {
+					mw.log.error( `[Citizen] Error parsing search history. Stored data: ${ storedData }`, error );
+				}
 			}
 		}
 	};

resources/skins.citizen.search/typeahead.js

@@ -400,7 +400,7 @@ async function getSuggestions() {
 				id: 'suggestion',
 				items: []
 			};
-			results.forEach( ( result ) => {
+			const items = results.map( ( result ) => {
 				const data = {
 					type: 'page',
 					size: 'md',
@@ -415,8 +415,9 @@ async function getSuggestions() {
 					// Thumbnail placeholder icon
 					data.icon = 'image';
 				}
-				itemGroupData.items.push( data );
+				return data;
 			} );
+			itemGroupData.items.push( ...items );
 			fragment.append( htmlHelper.getItemGroupElement( itemGroupData ) );
 		} else {
 			// Update placeholder with no result content