|
|
@ -1,19 +1,23 @@ |
|
|
|
import { MWMediaType, MWQuery } from "@/backend/metadata/types"; |
|
|
|
import { MWMediaType, MWQuery } from "@/backend/metadata/types"; |
|
|
|
import React, { useRef, useState } from "react"; |
|
|
|
import { useState } from "react"; |
|
|
|
import { generatePath, useHistory, useRouteMatch } from "react-router-dom"; |
|
|
|
import { generatePath, useHistory, useRouteMatch } from "react-router-dom"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getInitialValue(params: { type: string; query: string }) { |
|
|
|
|
|
|
|
const type = |
|
|
|
|
|
|
|
Object.values(MWMediaType).find((v) => params.type === v) || |
|
|
|
|
|
|
|
MWMediaType.MOVIE; |
|
|
|
|
|
|
|
const searchQuery = params.query || ""; |
|
|
|
|
|
|
|
return { type, searchQuery }; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export function useSearchQuery(): [ |
|
|
|
export function useSearchQuery(): [ |
|
|
|
MWQuery, |
|
|
|
MWQuery, |
|
|
|
(inp: Partial<MWQuery>, force: boolean) => void, |
|
|
|
(inp: Partial<MWQuery>, force: boolean) => void, |
|
|
|
() => void |
|
|
|
() => void |
|
|
|
] { |
|
|
|
] { |
|
|
|
const history = useHistory(); |
|
|
|
const history = useHistory(); |
|
|
|
const isFirstRender = useRef(true); |
|
|
|
|
|
|
|
const { path, params } = useRouteMatch<{ type: string; query: string }>(); |
|
|
|
const { path, params } = useRouteMatch<{ type: string; query: string }>(); |
|
|
|
const [search, setSearch] = useState<MWQuery>({ |
|
|
|
const [search, setSearch] = useState<MWQuery>(getInitialValue(params)); |
|
|
|
searchQuery: "", |
|
|
|
|
|
|
|
type: MWMediaType.MOVIE, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const updateParams = (inp: Partial<MWQuery>, force: boolean) => { |
|
|
|
const updateParams = (inp: Partial<MWQuery>, force: boolean) => { |
|
|
|
const copySearch: MWQuery = { ...search }; |
|
|
|
const copySearch: MWQuery = { ...search }; |
|
|
@ -38,18 +42,5 @@ export function useSearchQuery(): [ |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// only run on first load of the page
|
|
|
|
|
|
|
|
React.useEffect(() => { |
|
|
|
|
|
|
|
if (isFirstRender.current === false) { |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
isFirstRender.current = false; |
|
|
|
|
|
|
|
const type = |
|
|
|
|
|
|
|
Object.values(MWMediaType).find((v) => params.type === v) || |
|
|
|
|
|
|
|
MWMediaType.MOVIE; |
|
|
|
|
|
|
|
const searchQuery = params.query || ""; |
|
|
|
|
|
|
|
setSearch({ type, searchQuery }); |
|
|
|
|
|
|
|
}, [setSearch, params, isFirstRender]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return [search, updateParams, onUnFocus]; |
|
|
|
return [search, updateParams, onUnFocus]; |
|
|
|
} |
|
|
|
} |
|
|
|