error handling if a requested tvshow item doesn't exist

src/pages/TVShowPage/EpisodePage.tsx

@@ -15,6 +15,8 @@ interface Props extends RouteComponentProps<{id: string}> {}
 
 interface State {
     loaded: boolean;
+    error: number;
+    Showname: string;
 }
 
 interface Episode {
@@ -24,28 +26,46 @@ interface Episode {
     Episode: number;
 }
 
+interface EpisodeData {
+    error: number;
+    episodes: Episode[];
+    ShowName: string;
+}
+
 export class EpisodePage extends React.Component<Props, State> {
     episodes: Episode[] = [];
 
     state = {
-        loaded: false
+        loaded: false,
+        error: 0,
+        Showname: ''
     };
 
     componentDidMount(): void {
-        callAPI(APINode.TVShow, {action: 'getEpisodes', ShowID: parseInt(this.props.match.params.id, 10)}, (episodes: Episode[]) => {
-            this.episodes = episodes;
-            this.setState({loaded: true});
+        callAPI(APINode.TVShow, {action: 'getEpisodes', ShowID: parseInt(this.props.match.params.id, 10)}, (data: EpisodeData) => {
+            if (data.error !== 0) {
+                this.setState({error: data.error, loaded: true});
+            } else {
+                this.episodes = data.episodes;
+                this.setState({loaded: true, Showname: data.ShowName});
+            }
         });
     }
 
     render(): JSX.Element {
+        // check if content is loaded
         if (!this.state.loaded) {
             return <>loading...</>;
         }
 
+        // check if there is an error to display
+        if (this.state.error !== 0) {
+            return <>Error code: {this.state.error}</>;
+        }
+
         return (
             <>
-                <PageTitle title='TV Shows' subtitle='' />
+                <PageTitle title={this.state.Showname} subtitle={this.episodes.length + ' Episodes'} />
                 <SideBar>
                     <SideBarTitle>Infos:</SideBarTitle>
                     <Line />