[FEATURE] Search shows

[JakubKoralewski]

A search input element is available in /app/welcome but its unfuctional. For this to be completed we'd need to:

---

• do something similar to what is done in:

lets-watch-it-together/src/components/pages/welcome/AddFriends.tsx

Lines 27 to 164 in 2cf3b9a

	export function AddFriends(
	{
	nextStage,
	currentStage,
	maxStage,
	prevStage
	}: GoToNextStageProps
	): JSX.Element {
	const styles = useFriendsStyles()
	// TODO: maybe get 10 users and show them at beginning?
	// FIXME: maybe hide, throw away users who dont match anymore?
	const [foundUsers, setFoundUsers] =
	useState<Record<string, UserPublicSearchResult>>({})
	const [searching, setSearching] =
	useState(false)
	const [searchString, setSearchString] =
	useState<string>('')
	const fetchSearch = async (
	searchString: string
	): Promise<UserPublicSearchResult[]> => {
	const response = await fetch(
	`/api/search/users?q=${encodeURI(searchString)}`
	)
	return response.json().catch((reason) => {
	console.error('response error', reason)
	})
	}
	// const handler = useDebounced(search)
	const search = async (user: string) => {
	setSearching(true)
	const searchResults: UserPublicSearchResult[] =
	await fetchSearch(user)
	// console.log({searchResults})
	if (searchResults && searchResults.length > 0) {
	const mappedResults: Record<number, UserPublicSearchResult> = {}
	searchResults.forEach(usr => {
	mappedResults[usr.id] = usr
	})
	setFoundUsers(old =>
	({ ...old, ...mappedResults })
	)
	}
	setSearching(false)
	}
	const loaded = useRef(false)
	useEffect(() => {
	if (!loaded.current) {
	loaded.current = true
	return
	}
	void search(searchString)
	}, [searchString])
	const debouncedSetInput = useDebounced(
	async (search) => {
	if (search.length > 1) {
	setSearchString(search)
	}
	}
	)
	const [primaryActionTaken, setPrimaryActionTaken] = useState(false)
	const onPrimaryActionTaken = () => setPrimaryActionTaken(true)
	const foundUsersValues = Object.values(foundUsers)
	return (
	<NextOrSkipWrapper
	nextStage={nextStage}
	canGoForward={primaryActionTaken}
	currentStage={currentStage}
	maxStage={maxStage}
	prevStage={prevStage}
	>
	<Box>Add Friends</Box>
	<Box>
	<TextField
	id="outlined-basic"
	label={`Search users${process.env.NODE_ENV === 'development' ? ' (type "my")' : ''}`}
	variant="outlined"
	onChange={
	(e) => debouncedSetInput(e.target.value.trim())
	}
	InputProps={{
	startAdornment: (
	<InputAdornment position="start">
	<AccountCircle />
	</InputAdornment>
	),
	endAdornment: (
	<InputAdornment position="end">
	<Search
	className={styles.clickable}
	onClick={
	() => search(searchString)
	}
	/>
	</InputAdornment>
	)
	}}
	/>
	</Box>
	<Box
	className={styles.usersContainer}
	>
	{
	searching &&
	[0, 1, 2].map(i =>
	<UserSmall
	key={i}
	isLoading={true}
	user={{} as UserPublicSearchResult}
	/>
	)
	}
	{
	foundUsersValues.length === 0 ?
	<div>No users found 😥</div> :
	foundUsersValues.map(usr =>
	<UserSmall
	key={usr.id}
	user={usr}
	className={styles.userSmall}
	onFriendToggle={onPrimaryActionTaken}
	/>
	)
	}
	</Box>
	</NextOrSkipWrapper>
	)
	}

to implement reactive, debounced search React component

---

• do something similar to what is done in:

https://github.com/JakubKoralewski/lets-watch-it-together/blob/main/src/pages/api/search/users.ts

to implement search API endpoint, probably to have easy to understand reliance on TMDb to use corresponding URLs like search/multi and search/tv

---

• use the TMDb API endpoints:
  • probably better to have search/multi
  • but maybe separate:
    • search/tv
    • search/movie
    • search/person

Example of using TMDb API client:

lets-watch-it-together/src/lib/api/shows/getShowDetails.ts

Lines 48 to 87 in 2cf3b9a

	const tvGetDetailsPath =
	`/tv/${showTmdbId.id as number}` as TmdbPath<TvGetDetails>
	let response: TMDBTvGetDetailsResponse
	try {
	const rawResponse = await tmdb.call<TvGetDetails>(
	tvGetDetailsPath as TmdbPath<TvGetDetails>,
	{}
	)
	response = {
	...rawResponse,
	id: {
	id: rawResponse.id,
	type: TmdbIdType.Show
	}
	}
	} catch (e) {
	if (isTmdbError(e)) {
	if (e.tmdbErrorType === TmdbErrorType.Tmdb) {
	if ((e.tmdbMessage as TmdbErrorTmdbResponse).statusCode === 404) {
	throw new GetShowDetailsError(
	GetShowDetailsErrorType.NotFound,
	undefined,
	e
	)
	}
	} else {
	throw new GetShowDetailsError(
	GetShowDetailsErrorType.Tmdb,
	undefined,
	e
	)
	}
	} else {
	throw new GetShowDetailsError(
	GetShowDetailsErrorType.Other,
	undefined,
	e
	)
	}
	}