add Local source (#33)

src/components/SpinnerImage.tsx

@@ -35,20 +35,28 @@ export default function SpinnerImage(props: IProps) {
             onImageLoad?.();
         };
 
+        img.onerror = () => {
+            setImagsrc('Not Found');
+        };
+
         return () => {
             img.onload = null;
+            img.onerror = null;
         };
     }, [src]);
 
     if (imageSrc.length === 0) {
         return (
-            // <div className={`${classes.image} ${classes.loadingImage}`}>
             <div className={spinnerClassName}>
                 <CircularProgress thickness={5} />
             </div>
         );
     }
 
+    if (imageSrc === 'Not Found') {
+        return <div className={spinnerClassName} />;
+    }
+
     return (
         <img
             className={imgClassName}

src/components/manga/MangaDetails.tsx

@@ -121,8 +121,8 @@ interface IProps{
 }
 
 function getSourceName(source: ISource) {
-    if (source.name !== null) {
-        return `${source.name} (${source.lang.toLocaleUpperCase()})`;
+    if (source.displayName !== null) {
+        return source.displayName;
     }
     return source.id;
 }

src/components/manga/reader/PageNumber.tsx

@@ -14,7 +14,7 @@ const useStyles = (settings: IReaderSettings) => makeStyles({
         position: 'fixed',
         bottom: '50px',
         right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
-        width: '50px',
+        padding: '2px',
         textAlign: 'center',
         backgroundColor: 'rgba(0, 0, 0, 0.3)',
         borderRadius: '10px',

src/screens/manga/SourceMangas.tsx

@@ -22,9 +22,10 @@ export default function SourceMangas(props: { popular: boolean }) {
     const [mangas, setMangas] = useState<IMangaCard[]>([]);
     const [hasNextPage, setHasNextPage] = useState<boolean>(false);
     const [lastPageNum, setLastPageNum] = useState<number>(1);
+    const [fetched, setFetched] = useState<boolean>(false);
 
     useEffect(() => {
-        setTitle('Source'); // title is deligated to `MangaGrid` but we set it here once
+        setTitle('Source'); // title is later set after a fetch but we set it here once
     }, []);
 
     useEffect(() => {
@@ -49,7 +50,7 @@ export default function SourceMangas(props: { popular: boolean }) {
         client.get(`/api/v1/source/${sourceId}`)
             .then((response) => response.data)
             .then((data: ISource) => {
-                setTitle(data.name);
+                setTitle(data.displayName);
                 setIsConfigurable(data.isConfigurable);
             });
     }, []);
@@ -65,15 +66,20 @@ export default function SourceMangas(props: { popular: boolean }) {
                         title: it.title, thumbnailUrl: it.thumbnailUrl, id: it.id,
                     }))]);
                 setHasNextPage(data.hasNextPage);
+                setFetched(true);
             });
     }, [lastPageNum]);
 
+    let message;
+    if (fetched) message = 'No manga was found!';
+
     return (
         <MangaGrid
             mangas={mangas}
             hasNextPage={hasNextPage}
             lastPageNum={lastPageNum}
             setLastPageNum={setLastPageNum}
+            message={message}
         />
     );
 }

src/typings.d.ts

@@ -25,9 +25,9 @@ interface ISource {
     lang: string
     iconUrl: string
     supportsLatest: boolean
-    history: any
     isConfigurable: boolean
     isNsfw: boolean
+    displayName: string
 }
 
 interface IMangaCard {

src/util/language.tsx

@@ -12,6 +12,8 @@ export const ISOLanguages = [
 
     { code: 'other', name: 'other langs?', nativeName: 'Other' },
 
+    { code: 'localsourcelang', name: 'Local source', nativeName: 'Other' },
+
     // full list: https://github.com/meikidd/iso-639-1/blob/master/src/data.js
     { code: 'en', name: 'English', nativeName: 'English' },
     { code: 'ca', name: 'Catalan; Valencian', nativeName: 'Català' },
@@ -95,6 +97,7 @@ export function defualtLangs() {
     return [
         // todo: infer this from the browser
         'en',
+        'localSourceLang',
     ];
 }
 
@@ -105,5 +108,8 @@ export const langSortCmp = (a: string, b: string) => {
 
     if (a === 'en') return -1;
     if (b === 'en') return 1;
+    if (a === 'localSourceLang') return 1;
+    if (b === 'localSourceLang') return -1;
+
     return aLang > bLang ? 1 : -1;
 };