RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

use renamed component

Browse Source
This commit is contained in:
SrGooglo 2025-02-05 02:40:39 +00:00
parent 521f239359
commit 30e1256d59
1 changed files with 211 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

406
packages/app/src/components/Searcher/index.jsx
View File

@ -9,243 +9,257 @@ import useUrlQueryActiveKey from "@hooks/useUrlQueryActiveKey"
import UserPreview from "@components/UserPreview" import UserPreview from "@components/UserPreview"
import MusicTrack from "@components/Music/Track" import MusicTrack from "@components/Music/Track"
import PlaylistItem from "@components/Music/PlaylistItem" import Playlist from "@components/Music/Playlist"
import SearchModel from "@models/search" import SearchModel from "@models/search"
import "./index.less" import "./index.less"
const ResultsTypeDecorators = { const ResultsTypeDecorators = {
users: { users: {
icon: "FiUsers", icon: "FiUsers",
label: "Users", label: "Users",
onClick: (item) => { onClick: (item) => {
app.navigation.goToAccount(item.username) app.navigation.goToAccount(item.username)
}, },
renderItem: (props) => { renderItem: (props) => {
const { item, onClick } = props const { item, onClick } = props
return <div className="suggestion"> return (
<UserPreview onClick={() => onClick(item)} user={item} /> <div className="suggestion">
</div> <UserPreview onClick={() => onClick(item)} user={item} />
} </div>
}, )
tracks: { },
icon: "FiAlbum", },
label: "Tracks", tracks: {
renderItem: (props) => { icon: "FiAlbum",
const { item, onClick } = props label: "Tracks",
renderItem: (props) => {
const { item, onClick } = props
return <div className="suggestion" onClick={onClick}> return (
<MusicTrack track={item} /> <div className="suggestion" onClick={onClick}>
</div> <MusicTrack track={item} />
} </div>
}, )
playlists: { },
icon: "FiAlbum", },
label: "Playlists", playlists: {
renderItem: (props) => { icon: "FiAlbum",
return <div className="suggestion"> label: "Playlists",
<PlaylistItem playlist={props.item} /> renderItem: (props) => {
</div> return (
} <div className="suggestion">
} <Playlist playlist={props.item} />
</div>
)
},
},
} }
const Results = (props) => { 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") { if (typeof results !== "object") {
return null return null
} }
let groupsKeys = Object.keys(results) let groupsKeys = Object.keys(results)
// filter out empty groups // filter out groups with no items array property
groupsKeys = groupsKeys.filter((key) => { groupsKeys = groupsKeys.filter((key) => {
return results[key].length > 0 if (!Array.isArray(results[key].items)) {
}) return false
}
if (groupsKeys.length === 0) { return true
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) => { // filter out groups with empty items array
if (typeof decorator.onClick === "function") { groupsKeys = groupsKeys.filter((key) => {
await decorator.onClick(data) return results[key].items.length > 0
} })
if (typeof props.onClose === "function") { if (groupsKeys.length === 0) {
return props.onClose() 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>
)
}
return <div const handleClick = async (decorator, data) => {
className={classnames( if (typeof decorator.onClick === "function") {
"searcher_results", await decorator.onClick(data)
{ }
["one_column"]: groupsKeys.length === 1,
}
)}
>
{
groupsKeys.map((key, index) => {
const decorator = ResultsTypeDecorators[key] ?? {
icon: null,
label: key,
renderItem: () => null
}
return <div if (typeof props.onClose === "function") {
className="searcher_results_category" return props.onClose()
key={index} }
> }
<div className="searcher_results_category_header">
<h1>
{
createIconRender(decorator.icon)
}
<Translation>
{(t) => t(decorator.label)}
</Translation>
</h1>
</div>
<div className="searcher_results_category_suggestions" id={key}> return (
{ <div
results[key].map((item, index) => { className={classnames("searcher_results", {
return decorator.renderItem({ ["one_column"]: groupsKeys.length === 1,
key: index, })}
item, >
onClick: (...data) => handleClick(decorator, ...data), {groupsKeys.map((key, index) => {
...decorator.props, const decorator = ResultsTypeDecorators[key] ?? {
}) icon: null,
}) label: key,
} renderItem: () => null,
</div> }
</div>
}) return (
} <div className="searcher_results_category" key={index}>
</div> <div className="searcher_results_category_header">
<h1>
{createIconRender(decorator.icon)}
<Translation>
{(t) => t(decorator.label)}
</Translation>
</h1>
</div>
<div
className="searcher_results_category_suggestions"
id={key}
>
{results[key].items.map((item, index) => {
return decorator.renderItem({
key: index,
item,
onClick: (...data) =>
handleClick(decorator, ...data),
...decorator.props,
})
})}
</div>
</div>
)
})}
</div>
)
} }
export default (props) => { export default (props) => {
const [loading, setLoading] = React.useState(false) const [loading, setLoading] = React.useState(false)
const [searchResult, setSearchResult] = React.useState(null) const [searchResult, setSearchResult] = React.useState(null)
const [searchValue, setSearchValue] = React.useState("") const [searchValue, setSearchValue] = React.useState("")
const [query, setQuery] = useUrlQueryActiveKey({ const [query, setQuery] = useUrlQueryActiveKey({
queryKey: "search", queryKey: "search",
defaultKey: null defaultKey: null,
}) })
const makeSearch = async (value) => { const makeSearch = async (value) => {
if (value === "") { if (value === "") {
return setSearchResult(null) return setSearchResult(null)
} }
setLoading(true) setLoading(true)
if (props.useUrlQuery) { if (props.useUrlQuery) {
setQuery(value) setQuery(value)
} }
let result = null let result = null
if (typeof props.model === "function") { if (typeof props.model === "function") {
result = await props.model(value, { result = await props.model(value, {
...props.modelParams, ...props.modelParams,
limit_per_section: app.isMobile ? 3 : 5 limit_per_section: app.isMobile ? 3 : 5,
}) })
} else { } else {
result = await SearchModel.search(value, { result = await SearchModel.search(value, {
...props.modelParams, ...props.modelParams,
limit_per_section: app.isMobile ? 3 : 5 limit_per_section: app.isMobile ? 3 : 5,
}) })
} }
if (typeof props.onSearchResult === "function") { if (typeof props.onSearchResult === "function") {
await props.onSearchResult(result) 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) => { const handleOnSearch = (e) => {
// not allow to input space as first character // not allow to input space as first character
if (e.target.value[0] === " ") { if (e.target.value[0] === " ") {
return return
} }
setSearchValue(e.target.value) setSearchValue(e.target.value)
if (e.target.value === "") { if (e.target.value === "") {
debounceSearch.cancel() debounceSearch.cancel()
if (props.useUrlQuery) { if (props.useUrlQuery) {
setQuery(null) setQuery(null)
} }
if (typeof props.onEmpty === "function") { if (typeof props.onEmpty === "function") {
props.onEmpty() props.onEmpty()
} }
} else { } else {
if (typeof props.onFilled === "function") { if (typeof props.onFilled === "function") {
props.onFilled() props.onFilled()
} }
debounceSearch(e.target.value) debounceSearch(e.target.value)
} }
} }
React.useEffect(() => { React.useEffect(() => {
if (props.useUrlQuery) { if (props.useUrlQuery) {
if (typeof query === "string") { if (typeof query === "string") {
makeSearch(query) makeSearch(query)
setSearchValue(query) setSearchValue(query)
} }
} }
}, []) }, [])
return <div return (
className={classnames( <div
"searcher", className={classnames("searcher", {
{ ["open"]: searchValue,
["open"]: searchValue, ["small"]: props.small,
["small"]: props.small, })}
} >
)} <antd.Input
> placeholder="Start typing to search..."
<antd.Input onChange={handleOnSearch}
placeholder="Start typing to search..." value={searchValue}
onChange={handleOnSearch} prefix={<Icons.FiSearch />}
value={searchValue} autoFocus={props.autoFocus ?? false}
prefix={<Icons.FiSearch />} onFocus={props.onFocus}
autoFocus={props.autoFocus ?? false} onBlur={props.onUnfocus}
onFocus={props.onFocus} />
onBlur={props.onUnfocus}
/>
{searchResult && props.renderResults && <div className="results"> {searchResult && props.renderResults && (
{loading && <antd.Skeleton active />} <div className="results">
{ {loading && <antd.Skeleton active />}
!loading && <Results {!loading && (
results={searchResult} <Results results={searchResult} onClose={props.close} />
onClose={props.close} )}
/> </div>
} )}
</div>} </div>
</div> )
} }