({
- paper: {
- position: "relative",
- width: 650,
- top: 100,
- left: 300,
- backgroundColor: theme.palette.background.paper,
- border: "2px solid #000",
- boxShadow: theme.shadows[5],
- padding: theme.spacing(2, 4, 3),
- },
- metaTable: {
- height: "50vh",
- overflowY: "auto",
- overflowX: "hidden",
- },
- metaWidth: {
- width: "200px",
- display: "inline-block",
- },
- metaData: {
- "&:nth-child(even)": {
- background: "rgb(234 234 234)",
- padding: "2px",
- },
- "&:nth-child(odd)": {
- padding: "2px",
- },
- },
-}));
-
-const ModalBox = ({ versionName, code, metaData }) => {
- const classes = useStyles();
- const [open, setOpen] = React.useState(false);
-
- const handleOpen = () => {
- setOpen(true);
- };
- const handleClose = () => {
- setOpen(false);
- };
-
- return (
-
-
-
-
-
- {versionName} ({code})
-
-
-
- {metaData &&
- Object.keys(metaData).map((key) => (
-
- {key}
- {metaData[key]}
-
- ))}
-
-
-
-
-
-
-
-
-
-
- {name} {`(${code})`}
-
-
-
-
-
+
+
+
+
+
+
+
+ {name} {`(${code})`}
+
+
+
+
+
- {commentaries.map((language) => (
-
-
- }
- aria-controls="panel1bh-content"
- id="panel1bh-header"
- >
-
- {language.language}
-
-
-
-
-
-
-
- Code
- Name
- Meta Data
-
-
-
- {language.commentaries.map((element) => (
-
- {element.code}
- {element.name}
-
-
- handleClick(
- e,
- element.metadata,
- element.name,
- element.code
- )
- }
- >
-
-
-
-
- ))}
-
-
-
-
-
-
-
- ))}
-
+ {commentaries.map((language) => (
+
+
+ }
+ aria-controls="panel1bh-content"
+ id="panel1bh-header"
+ >
+
+ {language.language}
+
+
+
+
+
+
+
+ Code
+ Name
+ Meta Data
+
+
+
+ {language.commentaries.map(
+ (element) => (
+
+
+ {element.code}
+
+
+ {element.name}
+
+
+
+ handleClick(
+ e,
+ element.metadata,
+ element.name,
+ element.code
+ )
+ }
+ >
+
+
+
+
+ )
+ )}
+
+
+
+
+
+
+
+ ))}
+
- {dictonary.map((language) => (
-
-
- }
- aria-controls="panel1bh-content"
- id="panel1bh-header"
- >
-
- {language.language}
-
-
-
-
-
-
-
- Code
- Name
- Meta Data
-
-
-
- {language.dictionaries.map((element) => (
-
- {element.code}
- {element.name}
-
-
- handleClick(
- e,
- element.metadata,
- element.name,
- element.code
- )
- }
- >
-
-
-
-
- ))}
-
-
-
-
-
-
-
- ))}
-
+ {dictonary.map((language) => (
+
+
+ }
+ aria-controls="panel1bh-content"
+ id="panel1bh-header"
+ >
+
+ {language.language}
+
+
+
+
+
+
+
+ Code
+ Name
+ Meta Data
+
+
+
+ {language.dictionaries.map(
+ (element) => (
+
+
+ {element.code}
+
+
+ {element.name}
+
+
+
+ handleClick(
+ e,
+ element.metadata,
+ element.name,
+ element.code
+ )
+ }
+ >
+
+
+
+
+ )
+ )}
+
+
+
+
+
+
+
+ ))}
+
- {value === index && {children}}
-
- );
+ return (
+
+ {value === index && {children}}
+
+ );
}
TabPanel.propTypes = {
- children: PropTypes.node.isRequired,
- index: PropTypes.node.isRequired,
- value: PropTypes.node.isRequired,
+ children: PropTypes.node.isRequired,
+ index: PropTypes.node.isRequired,
+ value: PropTypes.node.isRequired,
};
function a11yProps(index) {
- return {
- id: `vertical-tab-${index}`,
- "aria-controls": `vertical-tabpanel-${index}`,
- };
+ return {
+ id: `vertical-tab-${index}`,
+ "aria-controls": `vertical-tabpanel-${index}`,
+ };
}
const useStyles = makeStyles((theme) => ({
- root: {
- flexGrow: 1,
- backgroundColor: theme.palette.background.paper,
- display: "flex",
- },
- tabs: {
- borderRight: `2px solid ${theme.palette.divider}`,
- },
+ root: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.paper,
+ display: "flex",
+ },
+ tabs: {
+ borderRight: `2px solid ${theme.palette.divider}`,
+ },
}));
export default function VerticalTabs() {
- const classes = useStyles();
- const [value, setValue] = useState(0);
+ const classes = useStyles();
+ const [value, setValue] = useState(0);
- const handleChange = (event, newValue) => {
- setValue(newValue);
- };
+ const handleChange = (event, newValue) => {
+ setValue(newValue);
+ };
- return (
-
-
- } label="Bibles" {...a11yProps(0)} />
- } label="Commentaries" {...a11yProps(1)} />
- }
- label="Dictionaries"
- {...a11yProps(2)}
- />
- } label="Infographics" {...a11yProps(3)} />
- } label="Videos" {...a11yProps(4)} />
- }
- label="Bible Stories"
- {...a11yProps(5)}
- />
- } label="Reading Plans " {...a11yProps(6)} />
-
-
-
- Bibles
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Infographics
-
-
-
- Videos
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
+ return (
+
+
+ }
+ label="Bibles"
+ {...a11yProps(0)}
+ />
+ }
+ label="Commentaries"
+ {...a11yProps(1)}
+ />
+ }
+ label="Dictionaries"
+ {...a11yProps(2)}
+ />
+ }
+ label="Infographics"
+ {...a11yProps(3)}
+ />
+ } label="Videos" {...a11yProps(4)} />
+ }
+ label="Bible Stories"
+ {...a11yProps(5)}
+ />
+ }
+ label="Reading Plans "
+ {...a11yProps(6)}
+ />
+
+
+
+ Bibles
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Videos
+
+
+
+
+
+
+
+
+
+
+
+
+ );
}
diff --git a/web-app/src/components/Videos/VideoTable.js b/web-app/src/components/Videos/VideoTable.js
index 99f4ece..3c2d527 100644
--- a/web-app/src/components/Videos/VideoTable.js
+++ b/web-app/src/components/Videos/VideoTable.js
@@ -1,5 +1,4 @@
import React, { useContext } from "react";
-import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
@@ -9,16 +8,11 @@ import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import { VideoContext } from "../../contexts/VideoContext";
-
-const useStyles = makeStyles({
- table: {
- minWidth: 650,
- },
-});
+import { CommonContext } from "../../contexts/Common";
const VideoTable = () => {
- const classes = useStyles();
const { videos } = useContext(VideoContext);
+ const { classes } = useContext(CommonContext);
return (
diff --git a/web-app/src/components/infographics/Infographics.js b/web-app/src/components/infographics/Infographics.js
new file mode 100644
index 0000000..2dfc782
--- /dev/null
+++ b/web-app/src/components/infographics/Infographics.js
@@ -0,0 +1,38 @@
+import { useContext } from "react";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
+import { CommonContext } from "../../contexts/Common";
+import { InfographicsContext } from "../../contexts/InfographicsContext";
+
+function Infographic() {
+ const { data, count } = useContext(InfographicsContext);
+ const { classes } = useContext(CommonContext);
+
+ return (
+
+
+
+
+ Language
+ Count
+
+
+
+ {data &&
+ Object.keys(data).map((language) => (
+
+ {data[language]}
+ {count}
+
+ ))}
+
+
+
+ );
+}
+export default Infographic;
diff --git a/web-app/src/contexts/BibleStory.js b/web-app/src/contexts/BibleStory.js
deleted file mode 100644
index e6f384e..0000000
--- a/web-app/src/contexts/BibleStory.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import PropTypes from "prop-types";
-import { createContext, useEffect, useState } from "react";
-import { useQuery } from "react-query";
-
-export const BiBleStoryContext = createContext();
-function BiBleStoryContextProvider({ children }) {
- const [bibleStory, setBibleStory] = useState({});
- const { isLoading, error, data } = useQuery("languageData", () =>
- fetch(`${process.env.REACT_APP_BIBLE_STORIES_URL}languages.json`).then(
- (res) => res.json()
- )
- );
-
- useEffect(() => {
- /*eslint spaced-comment: ["error", "always"]*/
- /*eslint spaced-comment: [2, "never"]*/
- /*eslint no-unused-expressions: ["error", { "allowShortCircuit": true }]*/
-
- data &&
- Object.keys(data).map((language) =>
- fetch(
- `${process.env.REACT_APP_BIBLE_STORIES_URL}${language}/manifest.json`
- )
- .then((res) => res.json())
- .then((response) => {
- const temp = bibleStory;
- temp[data[language]] = response.length;
- setBibleStory(temp);
- })
- );
- }, [bibleStory, data]);
- return (
-
- {children}
-
- );
-}
-BiBleStoryContextProvider.propTypes = {
- children: PropTypes.node.isRequired,
-};
-
-export default BiBleStoryContextProvider;
diff --git a/web-app/src/contexts/Common.js b/web-app/src/contexts/Common.js
index 283d82a..96340c6 100644
--- a/web-app/src/contexts/Common.js
+++ b/web-app/src/contexts/Common.js
@@ -1,84 +1,139 @@
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
-import { createContext, useState } from "react";
+import { createContext, useEffect, useState } from "react";
+import { useQuery } from "react-query";
export const CommonContext = createContext();
const useStyles = makeStyles((theme) => ({
- typography: {
- padding: theme.spacing(),
- },
- closeIcon: {
- float: "right",
- },
- root: {
- width: "100%",
- },
- table: {
- minWidth: 650,
- },
- heading: {
- fontSize: theme.typography.pxToRem(15),
- flexBasis: "33.33%",
- flexShrink: 0,
- textTransform: "capitalize",
- },
- secondaryHeading: {
- fontSize: theme.typography.pxToRem(15),
- color: theme.palette.text.secondary,
- },
+ typography: {
+ padding: theme.spacing(),
+ },
+ closeIcon: {
+ float: "right",
+ },
+ root: {
+ width: "100%",
+ },
+ table: {
+ minWidth: 650,
+ },
+ heading: {
+ fontSize: theme.typography.pxToRem(15),
+ flexBasis: "33.33%",
+ flexShrink: 0,
+ textTransform: "capitalize",
+ },
+ secondaryHeading: {
+ fontSize: theme.typography.pxToRem(15),
+ color: theme.palette.text.secondary,
+ },
+ paper: {
+ position: "relative",
+ width: 650,
+ top: 100,
+ left: 300,
+ backgroundColor: theme.palette.background.paper,
+ border: "2px solid #000",
+ boxShadow: theme.shadows[5],
+ padding: theme.spacing(2, 4, 3),
+ },
+ metaWidth: {
+ width: "200px",
+ display: "inline-block",
+ },
+ metaDataValue: {
+ width: "300px",
+ display: "inline-block",
+ },
+ metaData: {
+ "&:nth-child(even)": {
+ background: "rgb(234 234 234)",
+ padding: "2px",
+ },
+ "&:nth-child(odd)": {
+ padding: "2px",
+ },
+ },
}));
function CommonContextProvider({ children }) {
- const [open, setOpen] = useState(false);
- const [metaData, setMetaData] = useState(null);
- const [name, setName] = useState("");
- const [code, setCode] = useState("");
- const [anchorEl, setAnchorEl] = useState(null);
- const openPop = Boolean(anchorEl);
- const id = openPop ? "simple-popover" : undefined;
- const classes = useStyles();
+ const [open, setOpen] = useState(false);
+ const [metaData, setMetaData] = useState(null);
+ const [name, setName] = useState("");
+ const [code, setCode] = useState("");
+ const [anchorEl, setAnchorEl] = useState(null);
+ const openPop = Boolean(anchorEl);
+ const id = openPop ? "simple-popover" : undefined;
+ const classes = useStyles();
+ const [bibleStory, setBibleStory] = useState({});
+ const { isLoading, error, data } = useQuery("languageData", () =>
+ fetch(`${process.env.REACT_APP_BIBLE_STORIES_URL}languages.json`).then(
+ (res) => res.json()
+ )
+ );
+ const handleClick = (event, metadata, title, codeAbb) => {
+ setMetaData(metadata);
+ setName(title);
+ setCode(codeAbb);
+ setAnchorEl(event.currentTarget);
+ };
- const handleClick = (event, data, title, codeAbb) => {
- setMetaData(data);
- setName(title);
- setCode(codeAbb);
- setAnchorEl(event.currentTarget);
- };
+ const handleClickOpen = (metadata) => {
+ setMetaData(metadata);
+ setOpen(true);
+ };
+ const handleClose = () => {
+ setOpen(false);
+ };
- const handleClickOpen = (data) => {
- setMetaData(data);
- setOpen(true);
- };
- const handleClose = () => {
- setOpen(false);
- };
+ const handleClosePop = () => {
+ setAnchorEl(null);
+ };
+ useEffect(() => {
+ /*eslint spaced-comment: ["error", "always"]*/
+ /*eslint spaced-comment: [2, "never"]*/
+ /*eslint no-unused-expressions: ["error", { "allowShortCircuit": true }]*/
- const handleClosePop = () => {
- setAnchorEl(null);
- };
-
- return (
-
- {children}
-
- );
+ data &&
+ Object.keys(data).map((language) =>
+ fetch(
+ `${process.env.REACT_APP_BIBLE_STORIES_URL}${language}/manifest.json`
+ )
+ .then((res) => res.json())
+ .then((response) => {
+ const temp = bibleStory;
+ temp[data[language]] = response.length;
+ console.log(response.length);
+ setBibleStory(temp);
+ })
+ );
+ }, [bibleStory, data]);
+ return (
+
+ {children}
+
+ );
}
CommonContextProvider.propTypes = {
- children: PropTypes.node.isRequired,
+ children: PropTypes.node.isRequired,
};
export default CommonContextProvider;
diff --git a/web-app/src/contexts/InfographicsContext.js b/web-app/src/contexts/InfographicsContext.js
new file mode 100644
index 0000000..1d8a586
--- /dev/null
+++ b/web-app/src/contexts/InfographicsContext.js
@@ -0,0 +1,38 @@
+import PropTypes from "prop-types";
+import { createContext, useEffect, useState } from "react";
+import { useQuery } from "react-query";
+
+export const InfographicsContext = createContext();
+function InfographicsContextProvider({ children }) {
+ const [count, setCount] = useState("");
+ const { isLoading, error, data } = useQuery("languageData", () =>
+ fetch(`${process.env.REACT_APP_BIBLE_STORIES_URL}languages.json`).then(
+ (res) => res.json()
+ )
+ );
+
+ useEffect(() => {
+ fetch("https://api.autographamt.com/v1/infographics/hin")
+ .then((res) => res.json())
+ .then((infoData) => {
+ const urls = [];
+ infoData.books.forEach((element) => {
+ element.infographics.forEach((item) =>
+ urls.push(item.fileName)
+ );
+ });
+ setCount(urls.length);
+ });
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+}
+InfographicsContextProvider.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+export default InfographicsContextProvider;
diff --git a/web-app/src/contexts/readingplan.js b/web-app/src/contexts/readingplan.js
index 1977c21..4d7a039 100644
--- a/web-app/src/contexts/readingplan.js
+++ b/web-app/src/contexts/readingplan.js
@@ -4,19 +4,19 @@ import { useQuery } from "react-query";
export const ReadingPlanContext = createContext();
function ReadingPlanContextProvider({ children }) {
- const { isLoading, error, data } = useQuery("readingData", () =>
- fetch(
- `https://raw.githubusercontent.com/Bridgeconn/vachancontentrepository/master/bible_reading_plans/manifest.json`
- ).then((res) => res.json())
- );
- return (
-
- {children}
-
- );
+ const { isLoading, error, data } = useQuery("readingData", () =>
+ fetch(`${process.env.REACT_APP_READING_PLANS_URL}`).then((res) =>
+ res.json()
+ )
+ );
+ return (
+
+ {children}
+
+ );
}
ReadingPlanContextProvider.propTypes = {
- children: PropTypes.node.isRequired,
+ children: PropTypes.node.isRequired,
};
export default ReadingPlanContextProvider;