closes #32

webUI/react/src/components/MangaDetails.tsx

@@ -19,11 +19,17 @@ const useStyles = makeStyles(() => createStyles({
 
 interface IProps{
     manga: IManga
+    source: ISource
+}
+
+function getSourceName(source: ISource) {
+    if (source.name !== null) { return source.name; }
+    return source.id;
 }
 
 export default function MangaDetails(props: IProps) {
     const classes = useStyles();
-    const { manga } = props;
+    const { manga, source } = props;
     const [inLibrary, setInLibrary] = useState<string>(
         manga.inLibrary ? 'In Library' : 'Not In Library',
     );
@@ -54,8 +60,13 @@ export default function MangaDetails(props: IProps) {
     return (
         <div>
             <h1>
-                {manga && manga.title}
+                {manga.title}
             </h1>
+            <h3>
+                Source:
+                {' '}
+                {getSourceName(source)}
+            </h3>
             <div className={classes.root}>
                 <Button variant="outlined" onClick={() => handleButtonClick()}>{inLibrary}</Button>
                 {inLibrary === 'In Library'

webUI/react/src/screens/Manga.tsx

@@ -16,6 +16,7 @@ export default function Manga() {
     const { id } = useParams<{id: string}>();
 
     const [manga, setManga] = useState<IManga>();
+    const [source, setSource] = useState<ISource>();
     const [chapters, setChapters] = useState<IChapter[]>([]);
 
     useEffect(() => {
@@ -27,6 +28,16 @@ export default function Manga() {
             });
     }, []);
 
+    useEffect(() => {
+        if (manga !== undefined) {
+            client.get(`/api/v1/source/${manga.sourceId}`)
+                .then((response) => response.data)
+                .then((data: ISource) => {
+                    setSource(data);
+                });
+        }
+    }, [manga]);
+
     useEffect(() => {
         client.get(`/api/v1/manga/${id}/chapters`)
             .then((response) => response.data)
@@ -41,7 +52,7 @@ export default function Manga() {
 
     return (
         <>
-            {manga && <MangaDetails manga={manga} />}
+            {(manga && source) && <MangaDetails manga={manga} source={source} />}
             {chapterCards}
         </>
     );

webUI/react/src/typings.d.ts

@@ -23,6 +23,7 @@ interface ISource {
 
 interface IManga {
     id: number
+    sourceId?: string
     title: string
     thumbnailUrl: string
     inLibrary?: boolean