You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.3 KiB
104 lines
2.3 KiB
import NotFound from "./404";
|
|
|
|
import { NextPage } from "next";
|
|
import { NextSeo } from "next-seo";
|
|
import { useRouter } from "next/router";
|
|
|
|
import { useQuery } from "react-query";
|
|
|
|
import axios from "axios";
|
|
|
|
import Container from "@mui/material/Container";
|
|
import Divider from "@mui/material/Divider";
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import Result, {
|
|
CategoryResult,
|
|
ChannelResult,
|
|
PlaylistResult,
|
|
VideoResult
|
|
} from "@interfaces/api/search";
|
|
|
|
import { apiToVideo } from "@utils/conversions";
|
|
import { useSettings } from "@utils/hooks";
|
|
|
|
import Channel from "@components/Channel/Inline";
|
|
import Layout from "@components/Layout";
|
|
import Loading from "@components/Loading";
|
|
import Video from "@components/Video/Inline";
|
|
|
|
const Results: NextPage = () => {
|
|
const router = useRouter();
|
|
|
|
const [settings] = useSettings();
|
|
|
|
const query = router.query["search_query"];
|
|
|
|
const { data, isLoading } = useQuery<Result[] | undefined>(
|
|
["searchResultsFor", query],
|
|
() =>
|
|
query
|
|
? axios
|
|
.get(`https://${settings.invidiousServer}/api/v1/search`, {
|
|
params: {
|
|
q: query,
|
|
type: "all"
|
|
}
|
|
})
|
|
.then((res) => res.data)
|
|
: undefined
|
|
);
|
|
|
|
if (!router.isReady || isLoading)
|
|
return (
|
|
<>
|
|
<NextSeo title="Searching..." />
|
|
<Layout>
|
|
<Loading />
|
|
</Layout>
|
|
</>
|
|
);
|
|
|
|
if (!query) return <NotFound />;
|
|
|
|
const channels = data?.filter((result) => result.type == "channel") as
|
|
| ChannelResult[]
|
|
| undefined;
|
|
|
|
const videos = data?.filter((result) => result.type == "video") as
|
|
| VideoResult[]
|
|
| undefined;
|
|
|
|
// const categories = data?.filter()
|
|
|
|
return (
|
|
<>
|
|
<NextSeo title={query as string} />
|
|
<Layout>
|
|
<Container sx={{ py: 2 }}>
|
|
{channels && channels.length != 0 && (
|
|
<>
|
|
<Typography variant="h5">Channels</Typography>
|
|
{channels.map((channel, i) => (
|
|
<Channel key={i} channel={channel} />
|
|
))}
|
|
<Divider sx={{ my: 4 }} />
|
|
</>
|
|
)}
|
|
{videos && videos.length != 0 && (
|
|
<>
|
|
<Typography variant="h5">Videos</Typography>
|
|
{videos.map((video, i) => (
|
|
<Video key={i} video={apiToVideo(video)} />
|
|
))}
|
|
<Divider sx={{ my: 4 }} />
|
|
</>
|
|
)}
|
|
</Container>
|
|
</Layout>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Results;
|