Small ui changes: Improved error handling for trending

package.json

@@ -7,17 +7,16 @@
 		"build": "next build",
 		"start": "next start",
 		"export": "next build && next export",
-		"test-build": "tsc",
 		"lint": "next lint",
 		"stylelint": "npx stylelint **/*.scss",
-		"prettify": "prettier src --write",
-		"full-test": "yarn test-build && yarn lint && yarn stylelint"
+		"prettify": "prettier src --write"
 	},
 	"dependencies": {
 		"@emotion/react": "^11.8.2",
 		"@emotion/styled": "^11.8.1",
 		"@mui/icons-material": "^5.5.1",
 		"@mui/material": "^5.5.1",
+		"axios": "^0.26.1",
 		"next": "^12.1.0",
 		"next-seo": "^5.1.0",
 		"react": "^17.0.2",

src/components/Video/index.tsx

@@ -30,7 +30,7 @@ const Video: FC<VideoModel> = ({
 	const router = useRouter();
 
 	return (
-		<Card sx={{ display: "inline-block" }}>
+		<Card sx={{ width: "100%" }}>
 			<CardActionArea onClick={() => router.push(`/watch?v=${id}`)}>
 				<CardMedia
 					height="270"
@@ -40,7 +40,7 @@ const Video: FC<VideoModel> = ({
 				/>
 				<CardContent>
 					<Tooltip title={title}>
-						<Typography gutterBottom variant="h6" component="div">
+						<Typography noWrap gutterBottom variant="h6" component="div">
 							{title}
 						</Typography>
 					</Tooltip>

src/interfaces/api.ts

@@ -0,0 +1,3 @@
+export interface Error {
+	error: string;
+}

src/pages/_app.tsx

@@ -31,7 +31,9 @@ const App = ({ Component, pageProps }: AppProps) => {
 	return (
 		<CacheProvider value={cache}>
 			<QueryClientProvider client={queryClient}>
-				<ReactQueryDevtools initialIsOpen={true} />
+				{process.env.NODE_ENV != "production" && (
+					<ReactQueryDevtools initialIsOpen={true} />
+				)}
 				<ThemeProvider theme={theme}>
 					<CssBaseline />
 					<DefaultSeo {...SEO} />

src/pages/trending.tsx

@@ -1,12 +1,14 @@
+import axios, { AxiosError } from "axios";
+
 import { NextPage } from "next";
 import { NextSeo } from "next-seo";
 
 import { useQuery } from "react-query";
 
 import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
 
-import { Typography } from "@mui/material";
-
+import { Error } from "@interfaces/api";
 import {
 	Trending as TrendingModel,
 	Video as VideoModel
@@ -18,12 +20,19 @@ import Layout from "@components/Layout";
 import Grid from "@components/Video/Grid";
 
 const Trending: NextPage = () => {
-	const { isLoading, error, data } = useQuery<TrendingModel[]>(
+	const { isLoading, error, data } = useQuery<
+		TrendingModel[],
+		AxiosError<Error>
+	>(
 		"trendingData",
 		() =>
-			fetch("https://invidious.privacy.gd/api/v1/trending").then((res) =>
-				res.json()
-			)
+			axios("https://invidious.privacy.gd/api/v1/trending").then(
+				(res) => res.data
+			),
+		{
+			retry: 5,
+			retryDelay: 5000
+		}
 	);
 
 	return (
@@ -31,7 +40,18 @@ const Trending: NextPage = () => {
 			<NextSeo title="Trending" />
 			<Layout>
 				<Box sx={{ padding: { xs: 2, md: 5 } }}>
-					{isLoading && <Typography variant="h3">Loading</Typography>}
+					{isLoading && (
+						<Box
+							sx={{
+								display: "flex",
+								justifyContent: "center",
+								alignItems: "center"
+							}}
+						>
+							<CircularProgress />
+						</Box>
+					)}
+					{error && <Box>{error.response?.data.error}</Box>}
 					{!isLoading && !error && data && (
 						<Grid videos={data.map(trendingToVideo)} />
 					)}

yarn.lock

@@ -912,6 +912,13 @@ axe-core@^4.3.5:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.1.tgz#7dbdc25989298f9ad006645cd396782443757413"
   integrity sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==
 
+axios@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
+  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
+  dependencies:
+    follow-redirects "^1.14.8"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -1690,6 +1697,11 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
   integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==
 
+follow-redirects@^1.14.8:
+  version "1.14.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
+  integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"