avniproject#1140 |fix:change report detail hardcoded with getting fro…

…m mock api

src/rootApp/views/SignInView.js

@@ -14,11 +14,18 @@ import { RemoveRedEye } from "@material-ui/icons";
 import Button from "@material-ui/core/Button";
 import Link from "@material-ui/core/Link";
 import Typography from "@material-ui/core/Typography";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import SideImage from "../../avni-background.jpeg";
 import { withStyles } from "@material-ui/core/styles";
 import ApplicationContext from "../../ApplicationContext";
 
+const fetchReportingSystem = async setReportingSystems => {
+  const data = await fetch("https://mocki.io/v1/4ecbcf7f-f1d5-46a7-a193-928678d3dd12").then(
+    response => response.json()
+  );
+  if (data.reportingSystems) setReportingSystems(data.reportingSystems);
+};
+
 function SignInView({
   classes,
   onSignIn,
@@ -29,6 +36,14 @@ function SignInView({
 }) {
   const [passwordIsMasked, setPasswordIsMasked] = useState(true);
   const autoComplete = ApplicationContext.isDevEnv() ? "on" : "off";
+  const [reportingSystems, setReportingSystems] = useState(null);
+
+  useEffect(() => {
+    fetchReportingSystem(setReportingSystems);
+    return () => {
+      setReportingSystems(null);
+    };
+  }, []);
 
   return (
     <Grid container component="main" className={classes.root}>
@@ -115,40 +130,50 @@ function SignInView({
             </form>
           </CardContent>
         </Card>
-        <Grid style={{ backgroundColor: "#f0f2f0" }}>
-          <CardHeader title={"View Reports"} />
-          <CardContent>
-            <Typography variant="body2" color="secondary">
-              Avni provides reports using one of two different external BI tools - Metabase and
-              Jasper Reports. You can find out the reports used by your organisation from your
-              system administrator.
-            </Typography>
-            <Typography variant="body2" color="secondary">
-              <br />
-              Choose your reporting system
-            </Typography>
-          </CardContent>
-          <CardActions>
-            <Link href={"https://reporting.avniproject.org"}>
-              <Button size="small" variant={"contained"} className={classes.submit}>
-                Metabase Reports
-              </Button>
-            </Link>
-            <Link
-              href={"https://reporting-jasper.avniproject.org/jasperserver"}
-              style={{ marginLeft: "56px" }}
-            >
-              <Button size="small" variant={"contained"} className={classes.submit}>
-                Jasper Reports
-              </Button>
-            </Link>
-          </CardActions>
-        </Grid>
+        {reportingSystems && <ShowReport classes={classes} reportingSystems={reportingSystems} />}
       </Grid>
     </Grid>
   );
 }
 
+const ShowReport = ({ classes, reportingSystems }) => {
+  return (
+    <>
+      <Grid style={{ backgroundColor: "#f0f2f0" }}>
+        <CardHeader title={"View Reports"} />
+        <CardContent>
+          <Typography variant="body2" color="secondary">
+            Avni provides reports using one of two different external BI tools - Metabase and Jasper
+            Reports. You can find out the reports used by your organisation from your system
+            administrator.
+          </Typography>
+          <Typography variant="body2" color="secondary">
+            <br />
+            Choose your reporting system
+          </Typography>
+        </CardContent>
+        <CardActions style={{ justifyContent: "space-evenly" }}>
+          {reportingSystems.map(({ name, url }) => (
+            <ReportDetails key={name} name={name} url={url} classes={classes} />
+          ))}
+        </CardActions>
+      </Grid>
+    </>
+  );
+};
+
+const ReportDetails = ({ name, url, classes }) => {
+  return (
+    <>
+      <Link href={url}>
+        <Button size="small" variant={"contained"} className={classes.submit}>
+          {name}
+        </Button>
+      </Link>
+    </>
+  );
+};
+
 const useStyles = theme => ({
   root: {
     height: "100vh"