Fix/manga white screen missing extension (#285)

* Prevent white screen when source is missing

A undefined source caused a TypeError

* Show error message when source is missing

src/components/manga/MangaDetails.tsx

@@ -12,12 +12,14 @@ import { Typography } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import { Theme } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { mutate } from 'swr';
 import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
 import { IManga, ISource } from 'typings';
+import { t as translate } from 'i18next';
+import makeToast from 'components/util/Toast';
 
 const useStyles = (inLibrary: boolean) =>
     makeStyles((theme: Theme) => ({
@@ -119,10 +121,11 @@ interface IProps {
 }
 
 function getSourceName(source: ISource) {
-    if (source.displayName !== null) {
-        return source.displayName;
+    if (!source) {
+        return translate('global.label.unknown');
     }
-    return source.id;
+
+    return source.displayName ?? source.id;
 }
 
 function getValueOrUnknown(val: string) {
@@ -137,6 +140,8 @@ const MangaDetails: React.FC<IProps> = ({ manga }) => {
 
     const classes = useStyles(manga.inLibrary)();
 
+    useEffect(() => makeToast(translate('source.error.label.source_not_found'), 'error'), [manga.id]);
+
     const addToLibrary = () => {
         mutate(`/api/v1/manga/${manga.id}/?onlineFetch=false`, { ...manga, inLibrary: true }, { revalidate: false });
         client