extenstions now do show

webUI/react/.eslintcache

@@ -1 +1 @@
-[{"/home/armor/programming/kotlin/Tachidesk/webUI/react/src/App.js":"1","/home/armor/programming/kotlin/Tachidesk/webUI/react/src/index.js":"2","/home/armor/programming/kotlin/Tachidesk/webUI/react/src/reportWebVitals.js":"3","/home/armor/programming/kotlin/Tachidesk/webUI/react/src/components/TemporaryDrawer.jsx":"4","/home/armor/programming/kotlin/Tachidesk/webUI/react/src/components/NavBar.jsx":"5"},{"size":1366,"mtime":1608802841897,"results":"6","hashOfConfig":"7"},{"size":544,"mtime":1608802921759,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1608764685013,"results":"9","hashOfConfig":"7"},{"size":1710,"mtime":1608805575833,"results":"10","hashOfConfig":"7"},{"size":1494,"mtime":1608804788739,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"1pwsfv0",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/armor/programming/kotlin/Tachidesk/webUI/react/src/App.js",["22","23"],"/home/armor/programming/kotlin/Tachidesk/webUI/react/src/index.js",[],"/home/armor/programming/kotlin/Tachidesk/webUI/react/src/reportWebVitals.js",[],"/home/armor/programming/kotlin/Tachidesk/webUI/react/src/components/TemporaryDrawer.jsx",["24","25"],"/home/armor/programming/kotlin/Tachidesk/webUI/react/src/components/NavBar.jsx",[],{"ruleId":"26","severity":1,"message":"27","line":6,"column":5,"nodeType":"28","messageId":"29","endLine":6,"endColumn":9},{"ruleId":"26","severity":1,"message":"30","line":9,"column":8,"nodeType":"28","messageId":"29","endLine":9,"endColumn":23},{"ruleId":"26","severity":1,"message":"31","line":4,"column":8,"nodeType":"28","messageId":"29","endLine":4,"endColumn":14},{"ruleId":"26","severity":1,"message":"32","line":10,"column":8,"nodeType":"28","messageId":"29","endLine":10,"endColumn":16},"no-unused-vars","'Link' is defined but never used.","Identifier","unusedVar","'TemporaryDrawer' is defined but never used.","'Button' is defined but never used.","'MailIcon' is defined but never used."]
+[{"/home/armor/programming/kotlin/Tachidesk/webUI/react/src/App.js":"1","/home/armor/programming/kotlin/Tachidesk/webUI/react/src/index.js":"2","/home/armor/programming/kotlin/Tachidesk/webUI/react/src/reportWebVitals.js":"3","/home/armor/programming/kotlin/Tachidesk/webUI/react/src/components/TemporaryDrawer.jsx":"4","/home/armor/programming/kotlin/Tachidesk/webUI/react/src/components/NavBar.jsx":"5","/home/armor/programming/kotlin/Tachidesk/webUI/react/src/components/ExtensionCard.jsx":"6"},{"size":1366,"mtime":1608802841897,"results":"7","hashOfConfig":"8"},{"size":544,"mtime":1608802921759,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":1608764685013,"results":"10","hashOfConfig":"8"},{"size":1710,"mtime":1608805575833,"results":"11","hashOfConfig":"8"},{"size":1440,"mtime":1608813326048,"results":"12","hashOfConfig":"8"},{"size":2000,"mtime":1608813579874,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"1pwsfv0",{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"22","messages":"23","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"24","messages":"25","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/armor/programming/kotlin/Tachidesk/webUI/react/src/App.js",["26","27"],"/home/armor/programming/kotlin/Tachidesk/webUI/react/src/index.js",[],"/home/armor/programming/kotlin/Tachidesk/webUI/react/src/reportWebVitals.js",[],"/home/armor/programming/kotlin/Tachidesk/webUI/react/src/components/TemporaryDrawer.jsx",["28","29"],"/home/armor/programming/kotlin/Tachidesk/webUI/react/src/components/NavBar.jsx",["30"],"/home/armor/programming/kotlin/Tachidesk/webUI/react/src/components/ExtensionCard.jsx",["31"],{"ruleId":"32","severity":1,"message":"33","line":6,"column":5,"nodeType":"34","messageId":"35","endLine":6,"endColumn":9},{"ruleId":"32","severity":1,"message":"36","line":9,"column":8,"nodeType":"34","messageId":"35","endLine":9,"endColumn":23},{"ruleId":"32","severity":1,"message":"37","line":4,"column":8,"nodeType":"34","messageId":"35","endLine":4,"endColumn":14},{"ruleId":"32","severity":1,"message":"38","line":10,"column":8,"nodeType":"34","messageId":"35","endLine":10,"endColumn":16},{"ruleId":"32","severity":1,"message":"37","line":6,"column":8,"nodeType":"34","messageId":"35","endLine":6,"endColumn":14},{"ruleId":"32","severity":1,"message":"39","line":37,"column":11,"nodeType":"34","messageId":"35","endLine":37,"endColumn":15},"no-unused-vars","'Link' is defined but never used.","Identifier","unusedVar","'TemporaryDrawer' is defined but never used.","'Button' is defined but never used.","'MailIcon' is defined but never used.","'bull' is assigned a value but never used."]

webUI/react/src/App.js

@@ -8,6 +8,7 @@ import {
 import Button from '@material-ui/core/Button';
 import TemporaryDrawer from "./components/TemporaryDrawer";
 import NavBar from "./components/NavBar";
+import ExtensionCard from "./components/ExtensionCard";
 
 
 export default function App() {
@@ -41,7 +42,7 @@ function Extensions() {
             .then(response => response.json())
             .then(data => setExtensions(data));
     } else {
-        mapped = extensions.map(it => <h3>{it.name}</h3>);
+        mapped = extensions.map(it => <ExtensionCard {...it} />);
     }
 
     return <h2>{mapped}</h2>;

webUI/react/src/components/ExtensionCard.jsx

@@ -32,9 +32,11 @@ const useStyles = makeStyles((theme) => ({
     }
 }));
 
-export default function SimpleCard() {
+export default function ExtensionCard(props) {
     const classes = useStyles();
     const bull = <span className={classes.bullet}>•</span>;
+    const {name, lang, versionName, iconUrl} = props
+    const langPress = lang === "all"? "All": lang.toUpperCase()
 
     return (
         <Card>
@@ -43,20 +45,20 @@ export default function SimpleCard() {
                     <Avatar
                         variant="rounded"
                         className={classes.icon}
-                        alt="Madara"
+                        alt={name}
-                        src="https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/icon/tachiyomi-all.fmreader-v1.2.22.png"
+                        src={iconUrl}
                     />
                     <div style={{display:"flex", flexDirection:"column"}}>
                         <Typography variant="h5" component="h2">
-                            Madara
+                            {name}
                         </Typography>
                         <Typography variant="caption" display="block" gutterBottom>
-                            All 1.2.161
+                            {langPress} {versionName}
                         </Typography>
                     </div>
                 </div>
 
-                <Button size="small">install</Button>
+                <Button variant="outlined" >install</Button>
             </CardContent>
         </Card>
     );

webUI/react/src/components/NavBar.jsx

@@ -33,9 +33,8 @@ export default function NavBar() {
                         <MenuIcon/>
                     </IconButton>
                     <Typography variant="h6" className={classes.title}>
-                        News
+                        Tachidesk
                     </Typography>
-                    <Button color="inherit">Login</Button>
                 </Toolbar>
             </AppBar>
             <TemporaryDrawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen}/>