Commit 75996386 authored by Daniel Puchala's avatar Daniel Puchala
Browse files

feat: added loading and error page

parent 8a47fe12
import Header from './Header';
export const ErrorPage = () => {
return (
<div>
<Header/>
<div>
An error occurred.
</div>
</div>
);
};
export default ErrorPage;
...@@ -2,12 +2,14 @@ import useSWR from 'swr'; ...@@ -2,12 +2,14 @@ import useSWR from 'swr';
import Header from './Header'; import Header from './Header';
import MovieCard from './MovieCard'; import MovieCard from './MovieCard';
import { MovieCardMode, MovieDto } from '../models/types'; import { MovieCardMode, MovieDto } from '../models/types';
import LoadingPage from './LoadingPage';
import ErrorPage from './ErrorPage';
export const LandingPage = () => { export const LandingPage = () => {
const { data, error } = useSWR<MovieDto[]>('movies'); const { data, error } = useSWR<MovieDto[]>('movies');
if (error) return <div>failed to load</div>; if (error) return <ErrorPage />;
if (!data) return <div>loading...</div>; if (!data) return <LoadingPage />;
return ( return (
<div className="h-screen"> <div className="h-screen">
......
import Header from './Header';
export const LoadingPage = () => {
return (
<div>
<Header/>
<div>
Data is loading...
</div>
</div>
);
};
export default LoadingPage;
...@@ -9,6 +9,8 @@ import useSWR from 'swr'; ...@@ -9,6 +9,8 @@ import useSWR from 'swr';
import { getToken, getUser } from '../services/auth'; import { getToken, getUser } from '../services/auth';
import formatDuration from '../services/formatDuration'; import formatDuration from '../services/formatDuration';
import Review from './Review'; import Review from './Review';
import LoadingPage from './LoadingPage';
import ErrorPage from './ErrorPage';
function getAverageRating(review: any) { function getAverageRating(review: any) {
return (review.actingRating + review.ideaRating + review.scriptRating + review.musicRating + review.visualsEditRating) / 5; return (review.actingRating + review.ideaRating + review.scriptRating + review.musicRating + review.visualsEditRating) / 5;
...@@ -39,8 +41,8 @@ export const Movie = () => { ...@@ -39,8 +41,8 @@ export const Movie = () => {
const { data: reviews, error: reviewError, mutate: mutateReviews } = useSWR<ReviewDto[]>(`reviews/search/${id}`); const { data: reviews, error: reviewError, mutate: mutateReviews } = useSWR<ReviewDto[]>(`reviews/search/${id}`);
const { data: recommended, error: recommendedError } = useSWR<MovieDto[]>(`movies/${id}/recommended`); const { data: recommended, error: recommendedError } = useSWR<MovieDto[]>(`movies/${id}/recommended`);
if (movieError || reviewError || recommendedError) return <div>failed to load</div>; if (movieError || reviewError || recommendedError) return <ErrorPage />;
if (!movie || !reviews || !recommended) return <div>loading...</div>; if (!movie || !reviews || !recommended) return <LoadingPage />;
const recommendedMovies = recommended.slice(0, 5); const recommendedMovies = recommended.slice(0, 5);
......
...@@ -13,7 +13,7 @@ export const Pages = () => ( ...@@ -13,7 +13,7 @@ export const Pages = () => (
<Route path="pa165" element={<LandingPage/>}/> <Route path="pa165" element={<LandingPage/>}/>
<Route path="pa165/movie/:id" element={<Movie/>}/> <Route path="pa165/movie/:id" element={<Movie/>}/>
<Route path="pa165/login" element={<Login/>}/> <Route path="pa165/login" element={<Login/>}/>
<Route path="*" element={<PageNotFound />}/> <Route path="*" element={<PageNotFound/>}/>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
</SWRConfig> </SWRConfig>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment