From 30e1256d593be8c99b8908904db150d10979f5b4 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Wed, 5 Feb 2025 02:40:39 +0000 Subject: [PATCH] use renamed component --- .../app/src/components/Searcher/index.jsx | 408 +++++++++--------- 1 file changed, 211 insertions(+), 197 deletions(-) diff --git a/packages/app/src/components/Searcher/index.jsx b/packages/app/src/components/Searcher/index.jsx index fc6a9054..a61effbd 100755 --- a/packages/app/src/components/Searcher/index.jsx +++ b/packages/app/src/components/Searcher/index.jsx @@ -9,243 +9,257 @@ 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" import "./index.less" const ResultsTypeDecorators = { - users: { - icon: "FiUsers", - label: "Users", - onClick: (item) => { - app.navigation.goToAccount(item.username) - }, - renderItem: (props) => { - const { item, onClick } = props + users: { + icon: "FiUsers", + label: "Users", + onClick: (item) => { + app.navigation.goToAccount(item.username) + }, + renderItem: (props) => { + const { item, onClick } = props - return
- onClick(item)} user={item} /> -
- } - }, - tracks: { - icon: "FiAlbum", - label: "Tracks", - renderItem: (props) => { - const { item, onClick } = props + return ( +
+ onClick(item)} user={item} /> +
+ ) + }, + }, + tracks: { + icon: "FiAlbum", + label: "Tracks", + renderItem: (props) => { + const { item, onClick } = props - return
- -
- } - }, - playlists: { - icon: "FiAlbum", - label: "Playlists", - renderItem: (props) => { - return
- -
- } - } + return ( +
+ +
+ ) + }, + }, + playlists: { + icon: "FiAlbum", + label: "Playlists", + renderItem: (props) => { + return ( +
+ +
+ ) + }, + }, } const Results = (props) => { - let { results } = props + let { results } = props - console.log("results", results, typeof results) + // console.log("results", results, typeof results) - if (typeof results !== "object") { - return null - } + if (typeof results !== "object") { + return null + } - let groupsKeys = Object.keys(results) + let groupsKeys = Object.keys(results) - // filter out empty groups - groupsKeys = groupsKeys.filter((key) => { - return results[key].length > 0 - }) + // filter out groups with no items array property + groupsKeys = groupsKeys.filter((key) => { + if (!Array.isArray(results[key].items)) { + return false + } - if (groupsKeys.length === 0) { - return
- -
- } + return true + }) - const handleClick = async (decorator, data) => { - if (typeof decorator.onClick === "function") { - await decorator.onClick(data) - } + // filter out groups with empty items array + groupsKeys = groupsKeys.filter((key) => { + return results[key].items.length > 0 + }) - if (typeof props.onClose === "function") { - return props.onClose() - } - } + if (groupsKeys.length === 0) { + return ( +
+ +
+ ) + } - return
- { - groupsKeys.map((key, index) => { - const decorator = ResultsTypeDecorators[key] ?? { - icon: null, - label: key, - renderItem: () => null - } + const handleClick = async (decorator, data) => { + if (typeof decorator.onClick === "function") { + await decorator.onClick(data) + } - return
-
-

- { - createIconRender(decorator.icon) - } - - {(t) => t(decorator.label)} - -

-
+ if (typeof props.onClose === "function") { + return props.onClose() + } + } -
- { - results[key].map((item, index) => { - return decorator.renderItem({ - key: index, - item, - onClick: (...data) => handleClick(decorator, ...data), - ...decorator.props, - }) - }) - } -
-
- }) - } -
+ return ( +
+ {groupsKeys.map((key, index) => { + const decorator = ResultsTypeDecorators[key] ?? { + icon: null, + label: key, + renderItem: () => null, + } + + return ( +
+
+

+ {createIconRender(decorator.icon)} + + {(t) => t(decorator.label)} + +

+
+ +
+ {results[key].items.map((item, index) => { + return decorator.renderItem({ + key: index, + item, + onClick: (...data) => + handleClick(decorator, ...data), + ...decorator.props, + }) + })} +
+
+ ) + })} +
+ ) } export default (props) => { - const [loading, setLoading] = React.useState(false) - const [searchResult, setSearchResult] = React.useState(null) - const [searchValue, setSearchValue] = React.useState("") + const [loading, setLoading] = React.useState(false) + const [searchResult, setSearchResult] = React.useState(null) + const [searchValue, setSearchValue] = React.useState("") - const [query, setQuery] = useUrlQueryActiveKey({ - queryKey: "search", - defaultKey: null - }) + const [query, setQuery] = useUrlQueryActiveKey({ + queryKey: "search", + defaultKey: null, + }) - const makeSearch = async (value) => { - if (value === "") { - return setSearchResult(null) - } + const makeSearch = async (value) => { + if (value === "") { + return setSearchResult(null) + } - setLoading(true) + setLoading(true) - if (props.useUrlQuery) { - setQuery(value) - } + if (props.useUrlQuery) { + setQuery(value) + } - let result = null + let result = null - if (typeof props.model === "function") { - result = await props.model(value, { - ...props.modelParams, - limit_per_section: app.isMobile ? 3 : 5 - }) - } else { - result = await SearchModel.search(value, { - ...props.modelParams, - limit_per_section: app.isMobile ? 3 : 5 - }) - } + if (typeof props.model === "function") { + result = await props.model(value, { + ...props.modelParams, + limit_per_section: app.isMobile ? 3 : 5, + }) + } else { + result = await SearchModel.search(value, { + ...props.modelParams, + limit_per_section: app.isMobile ? 3 : 5, + }) + } - if (typeof props.onSearchResult === "function") { - await props.onSearchResult(result) - } + if (typeof props.onSearchResult === "function") { + await props.onSearchResult(result) + } - setLoading(false) + setLoading(false) - return setSearchResult(result) - } + 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 - if (e.target.value[0] === " ") { - return - } + const handleOnSearch = (e) => { + // not allow to input space as first character + if (e.target.value[0] === " ") { + return + } - setSearchValue(e.target.value) + setSearchValue(e.target.value) - if (e.target.value === "") { - debounceSearch.cancel() + if (e.target.value === "") { + debounceSearch.cancel() - if (props.useUrlQuery) { - setQuery(null) - } + if (props.useUrlQuery) { + setQuery(null) + } - if (typeof props.onEmpty === "function") { - props.onEmpty() - } - } else { - if (typeof props.onFilled === "function") { - props.onFilled() - } + if (typeof props.onEmpty === "function") { + props.onEmpty() + } + } else { + if (typeof props.onFilled === "function") { + props.onFilled() + } - debounceSearch(e.target.value) - } - } + debounceSearch(e.target.value) + } + } - React.useEffect(() => { - if (props.useUrlQuery) { - if (typeof query === "string") { - makeSearch(query) - setSearchValue(query) - } - } - }, []) + React.useEffect(() => { + if (props.useUrlQuery) { + if (typeof query === "string") { + makeSearch(query) + setSearchValue(query) + } + } + }, []) - return
- } - autoFocus={props.autoFocus ?? false} - onFocus={props.onFocus} - onBlur={props.onUnfocus} - /> + return ( +
+ } + autoFocus={props.autoFocus ?? false} + onFocus={props.onFocus} + onBlur={props.onUnfocus} + /> - {searchResult && props.renderResults &&
- {loading && } - { - !loading && - } -
} -
-} \ No newline at end of file + {searchResult && props.renderResults && ( +
+ {loading && } + {!loading && ( + + )} +
+ )} +
+ ) +}