use renamed component

packages/app/src/components/Searcher/index.jsx

@@ -9,7 +9,7 @@ import useUrlQueryActiveKey from "@hooks/useUrlQueryActiveKey"
 
 import UserPreview from "@components/UserPreview"
 import MusicTrack from "@components/Music/Track"
-import PlaylistItem from "@components/Music/PlaylistItem"
+import Playlist from "@components/Music/Playlist"
 
 import SearchModel from "@models/search"
 
@@ -25,10 +25,12 @@ const ResultsTypeDecorators = {
 		renderItem: (props) => {
 			const { item, onClick } = props
 
-            return <div className="suggestion">
+			return (
+				<div className="suggestion">
 					<UserPreview onClick={() => onClick(item)} user={item} />
 				</div>
-        }
+			)
+		},
 	},
 	tracks: {
 		icon: "FiAlbum",
@@ -36,26 +38,30 @@ const ResultsTypeDecorators = {
 		renderItem: (props) => {
 			const { item, onClick } = props
 
-            return <div className="suggestion" onClick={onClick}>
+			return (
+				<div className="suggestion" onClick={onClick}>
 					<MusicTrack track={item} />
 				</div>
-        }
+			)
+		},
 	},
 	playlists: {
 		icon: "FiAlbum",
 		label: "Playlists",
 		renderItem: (props) => {
-            return <div className="suggestion">
+			return (
-                <PlaylistItem playlist={props.item} />
+				<div className="suggestion">
+					<Playlist playlist={props.item} />
 				</div>
-        }
+			)
-    }
+		},
+	},
 }
 
 const Results = (props) => {
 	let { results } = props
 
-    console.log("results", results, typeof results)
+	// console.log("results", results, typeof results)
 
 	if (typeof results !== "object") {
 		return null
@@ -63,19 +69,30 @@ const Results = (props) => {
 
 	let groupsKeys = Object.keys(results)
 
-    // filter out empty groups
+	// filter out groups with no items array property
 	groupsKeys = groupsKeys.filter((key) => {
-        return results[key].length > 0
+		if (!Array.isArray(results[key].items)) {
+			return false
+		}
+
+		return true
+	})
+
+	// filter out groups with empty items array
+	groupsKeys = groupsKeys.filter((key) => {
+		return results[key].items.length > 0
 	})
 
 	if (groupsKeys.length === 0) {
-        return <div className="searcher no_results">
+		return (
+			<div className="searcher no_results">
 				<antd.Result
 					status="info"
 					title="No results"
 					subTitle="We are sorry, but we could not find any results for your search."
 				/>
 			</div>
+		)
 	}
 
 	const handleClick = async (decorator, data) => {
@@ -88,53 +105,49 @@ const Results = (props) => {
 		}
 	}
 
-    return <div
+	return (
-        className={classnames(
+		<div
-            "searcher_results",
+			className={classnames("searcher_results", {
-            {
 				["one_column"]: groupsKeys.length === 1,
-            }
+			})}
-        )}
 		>
-        {
+			{groupsKeys.map((key, index) => {
-            groupsKeys.map((key, index) => {
 				const decorator = ResultsTypeDecorators[key] ?? {
 					icon: null,
 					label: key,
-                    renderItem: () => null
+					renderItem: () => null,
 				}
 
-                return <div
+				return (
-                    className="searcher_results_category"
+					<div className="searcher_results_category" key={index}>
-                    key={index}
-                >
 						<div className="searcher_results_category_header">
 							<h1>
-                            {
+								{createIconRender(decorator.icon)}
-                                createIconRender(decorator.icon)
-                            }
 								<Translation>
 									{(t) => t(decorator.label)}
 								</Translation>
 							</h1>
 						</div>
 
-                    <div className="searcher_results_category_suggestions" id={key}>
+						<div
-                        {
+							className="searcher_results_category_suggestions"
-                            results[key].map((item, index) => {
+							id={key}
+						>
+							{results[key].items.map((item, index) => {
 								return decorator.renderItem({
 									key: index,
 									item,
-                                    onClick: (...data) => handleClick(decorator, ...data),
+									onClick: (...data) =>
+										handleClick(decorator, ...data),
 									...decorator.props,
 								})
-                            })
+							})}
-                        }
 						</div>
 					</div>
-            })
+				)
-        }
+			})}
 		</div>
+	)
 }
 
 export default (props) => {
@@ -144,7 +157,7 @@ export default (props) => {
 
 	const [query, setQuery] = useUrlQueryActiveKey({
 		queryKey: "search",
-        defaultKey: null
+		defaultKey: null,
 	})
 
 	const makeSearch = async (value) => {
@@ -163,12 +176,12 @@ export default (props) => {
 		if (typeof props.model === "function") {
 			result = await props.model(value, {
 				...props.modelParams,
-                limit_per_section: app.isMobile ? 3 : 5
+				limit_per_section: app.isMobile ? 3 : 5,
 			})
 		} else {
 			result = await SearchModel.search(value, {
 				...props.modelParams,
-                limit_per_section: app.isMobile ? 3 : 5
+				limit_per_section: app.isMobile ? 3 : 5,
 			})
 		}
 
@@ -181,7 +194,10 @@ export default (props) => {
 		return setSearchResult(result)
 	}
 
-    const debounceSearch = React.useCallback(lodash.debounce(makeSearch, 500), [])
+	const debounceSearch = React.useCallback(
+		lodash.debounce(makeSearch, 500),
+		[],
+	)
 
 	const handleOnSearch = (e) => {
 		// not allow to input space as first character
@@ -219,14 +235,12 @@ export default (props) => {
 		}
 	}, [])
 
-    return <div
+	return (
-        className={classnames(
+		<div
-            "searcher",
+			className={classnames("searcher", {
-            {
 				["open"]: searchValue,
 				["small"]: props.small,
-            }
+			})}
-        )}
 		>
 			<antd.Input
 				placeholder="Start typing to search..."
@@ -238,14 +252,14 @@ export default (props) => {
 				onBlur={props.onUnfocus}
 			/>
 
-        {searchResult && props.renderResults && <div className="results">
+			{searchResult && props.renderResults && (
+				<div className="results">
 					{loading && <antd.Skeleton active />}
-            {
+					{!loading && (
-                !loading && <Results
+						<Results results={searchResult} onClose={props.close} />
-                    results={searchResult}
+					)}
-                    onClose={props.close}
-                />
-            }
-        </div>}
 				</div>
+			)}
+		</div>
+	)
 }