diff --git a/src/components/layout/Templates/BoardLayout.tsx b/src/components/layout/Templates/BoardLayout.tsx index 27ed51013..30c2ab0cc 100644 --- a/src/components/layout/Templates/BoardLayout.tsx +++ b/src/components/layout/Templates/BoardLayout.tsx @@ -67,6 +67,7 @@ const DockerButton = () => { const CustomizeBoardButton = () => { const { name } = useConfigContext(); + console.log('name', name); return ( diff --git a/src/components/layout/header/MovieModal.tsx b/src/components/layout/header/MovieModal.tsx index 36c6aead9..27d7dc708 100644 --- a/src/components/layout/header/MovieModal.tsx +++ b/src/components/layout/header/MovieModal.tsx @@ -34,11 +34,39 @@ const queryParamsSchema = z.object({ type: z.enum(['jellyseerr', 'overseerr']), }); -type MovieResultsProps = z.infer & { - closeModal: () => void; +export const MovieModal = ({ opened, closeModal }: MovieModalProps) => { + const query = useRouter().query; + const queryParams = queryParamsSchema.safeParse(query); + + if (!queryParams.success) { + return null; + } + + const integration = useMemo(() => { + return availableIntegrations.find((x) => x.value === queryParams.data.type)!; + }, [queryParams.data.type]); + + return ( + + {`${integration.label} + {integration.label} movies + + } + > + + + ); }; -const MovieResults = ({ search, type, closeModal }: MovieResultsProps) => { +type MovieResultsProps = Omit, 'movie'>; + +const MovieResults = ({ search, type }: MovieResultsProps) => { const { name: configName } = useConfigContext(); const { data: overseerrResults, isLoading } = api.overseerr.search.useQuery( { @@ -68,7 +96,7 @@ const MovieResults = ({ search, type, closeModal }: MovieResultsProps) => { {overseerrResults?.map((result, index: number) => ( - + {index < overseerrResults.length - 1 && } ))} @@ -77,48 +105,12 @@ const MovieResults = ({ search, type, closeModal }: MovieResultsProps) => { ); }; -export const MovieModal = ({ opened, closeModal }: MovieModalProps) => { - const query = useRouter().query; - const queryParams = queryParamsSchema.safeParse(query); - - if (!queryParams.success) { - return null; - } - - const integration = useMemo(() => { - return availableIntegrations.find((x) => x.value === queryParams.data.type)!; - }, [queryParams.data.type]); - - return ( - - {`${integration.label} - {integration.label} movies - - } - > - - - ); -}; - type MovieDisplayProps = { movie: RouterOutputs['overseerr']['search'][number]; type: 'jellyseerr' | 'overseerr'; - closeModal: () => void; }; -const MovieDisplay = ({ movie, type, closeModal }: MovieDisplayProps) => { +const MovieDisplay = ({ movie, type }: MovieDisplayProps) => { const { t } = useTranslation('modules/common-media-cards'); const { config } = useConfigContext(); const [requestModalOpened, requestModal] = useDisclosure(false); diff --git a/src/components/layout/header/Search.tsx b/src/components/layout/header/Search.tsx index 613bc2ab7..4941697a1 100644 --- a/src/components/layout/header/Search.tsx +++ b/src/components/layout/header/Search.tsx @@ -73,7 +73,6 @@ export const Search = ({ isMobile }: SearchProps) => { onItemSubmit={(item: SearchAutoCompleteItem) => { setSearch(''); if (item.sort === 'movie') { - // TODO: show movie modal const url = new URL(`${window.location.origin}${router.asPath}`); url.searchParams.set('movie', 'true'); url.searchParams.set('search', search); @@ -91,7 +90,11 @@ export const Search = ({ isMobile }: SearchProps) => { opened={showMovieModal} closeModal={() => { movieModal.close(); - router.push(router.pathname, undefined, { shallow: true }); + const url = new URL(`${window.location.origin}${router.asPath}`); + url.searchParams.delete('movie'); + url.searchParams.delete('search'); + url.searchParams.delete('type'); + router.push(url, undefined, { shallow: true }); }} />