infographics feature and code refactoring

Bridgeconn · Jul 30, 2021 · 8dd457a · 8dd457a
1 parent c1877d3
commit 8dd457a
Show file tree

Hide file tree

Showing 15 changed files with 625 additions and 572 deletions.
diff --git a/web-app/src/Common/metaData.js b/web-app/src/Common/metaData.js
@@ -1,23 +1,23 @@
-import Typography from "@material-ui/core/Typography";
 import { useContext } from "react";
 import { CommonContext } from "../contexts/Common";
 
 function MetaData() {
-  const { metaData, classes } = useContext(CommonContext);
-  if (metaData === null) {
-    return "";
-  }
-  return (
-    <div>
-      {metaData &&
-        Object.keys(metaData).map((key) => (
-          <div key={key}>
-            <Typography className={classes.typography}>
-              {key}: {metaData[key]}
-            </Typography>
-          </div>
-        ))}
-    </div>
-  );
+	const { metaData, classes } = useContext(CommonContext);
+	if (metaData === null) {
+		return "";
+	}
+	return (
+		<div>
+			{metaData &&
+				Object.keys(metaData).map((key) => (
+					<div key={key} className={classes.metaData}>
+						<span className={classes.metaWidth}>{key}</span>
+						<span className={classes.metaDataValue}>
+							{metaData[key]}
+						</span>
+					</div>
+				))}
+		</div>
+	);
 }
 export default MetaData;
diff --git a/web-app/src/components/BibleStories/BibleStory.js b/web-app/src/components/BibleStories/BibleStory.js
@@ -6,46 +6,31 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
 import { useContext } from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import { BiBleStoryContext } from "../../contexts/BibleStory";
-
-const useStyles = makeStyles((theme) => ({
-  table: {
-    minWidth: 650,
-  },
-  heading: {
-    fontSize: theme.typography.pxToRem(15),
-    flexBasis: "33.33%",
-    flexShrink: 0,
-    textTransform: "capitalize",
-  },
-}));
+import { CommonContext } from "../../contexts/Common";
 
 function BibleStories() {
-  const { bibleStory } = useContext(BiBleStoryContext);
-  const classes = useStyles();
-  return (
-    <div>
-      <TableContainer component={Paper}>
-        <Table className={classes.table} aria-label="simple table">
-          <TableHead>
-            <TableRow>
-              <TableCell>Language</TableCell>
-              <TableCell>Count</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {
-            Object.keys(bibleStory).map((key)=>(
-            <TableRow key={key}>
-              <TableCell>{key}</TableCell>
-              <TableCell>{bibleStory[key]}</TableCell>
-            </TableRow>
-))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </div>
-  );
+	const { classes, bibleStory } = useContext(CommonContext);
+	return (
+		<div>
+			<TableContainer component={Paper}>
+				<Table className={classes.table} aria-label="simple table">
+					<TableHead>
+						<TableRow>
+							<TableCell>Language</TableCell>
+							<TableCell>Count</TableCell>
+						</TableRow>
+					</TableHead>
+					<TableBody>
+						{Object.keys(bibleStory).map((key) => (
+							<TableRow key={key}>
+								<TableCell>{key}</TableCell>
+								<TableCell>{bibleStory[key]}</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</TableContainer>
+		</div>
+	);
 }
 export default BibleStories;
diff --git a/web-app/src/components/Bibles/BiblePopover.js b/web-app/src/components/Bibles/BiblePopover.js
@@ -0,0 +1,59 @@
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import Popover from "@material-ui/core/Popover";
+import Typography from "@material-ui/core/Typography";
+import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+import InfoIcon from "@material-ui/icons/Info";
+import { CommonContext } from "../../contexts/Common";
+
+const BiblePopover = ({ versionName, code, metaData }) => {
+	const [open, setOpen] = React.useState(false);
+	const { classes } = useContext(CommonContext);
+
+	const handleOpen = () => {
+		setOpen(true);
+	};
+	const handleClose = () => {
+		setOpen(false);
+	};
+
+	return (
+		<div>
+			<InfoIcon onMouseEnter={handleOpen} />
+			<Popover open={open} onClose={handleClose}>
+				<div className={classes.closeIcon}>
+					<IconButton onClick={handleClose}>
+						<CloseIcon />
+					</IconButton>
+				</div>
+				<Typography
+					className={classes.typography}
+					variant="h5"
+					gutterBottom
+				>
+					{versionName} ({code})
+				</Typography>
+				<hr />
+				<div className={classes.metaTable}>
+					{metaData &&
+						Object.keys(metaData).map((key) => (
+							<div key={key} className={classes.metaData}>
+								<span className={classes.metaWidth}>{key}</span>
+								{metaData[key]}
+							</div>
+						))}
+				</div>
+			</Popover>
+		</div>
+	);
+};
+BiblePopover.propTypes = {
+	versionName: PropTypes.string.isRequired,
+	code: PropTypes.string.isRequired,
+	metaData: PropTypes.instanceOf(Object),
+};
+BiblePopover.defaultProps = {
+	metaData: null,
+};
+export default BiblePopover;
diff --git a/web-app/src/components/Bibles/BibleTable.js b/web-app/src/components/Bibles/BibleTable.js
@@ -11,7 +11,8 @@ import VolumeOffIcon from "@material-ui/icons/VolumeOff";
 import VolumeUpIcon from "@material-ui/icons/VolumeUp";
 
 import Paper from "@material-ui/core/Paper";
-import ModalBox from "./ModalBox";
+// import ModalBox from "./ModalBox";
+import BiblePopover from "./BiblePopover";
 
 const useStyles = makeStyles({
 	table: {
@@ -70,7 +71,7 @@ const BibleTable = ({ bibles }) => {
 								<TableCell>{book}</TableCell>
 								<TableCell>{audioInfo}</TableCell>
 								<TableCell>
-									<ModalBox
+									<BiblePopover
 										versionName={language.version.name}
 										code={language.version.code}
 										metaData={language.metadata}

diff --git a/web-app/src/components/Bibles/ModalBox.js b/web-app/src/components/Bibles/ModalBox.js
diff --git a/web-app/src/components/Commentary/Popover.js b/web-app/src/components/Commentary/Popover.js
@@ -7,36 +7,32 @@ import { CommonContext } from "../../contexts/Common";
 import MetaData from "../../Common/metaData";
 
 export default function SimplePopover() {
-  const { openPop, handleClosePop, anchorEl, id, name, classes, code } =
-    useContext(CommonContext);
+	const { openPop, handleClosePop, anchorEl, id, name, classes, code } =
+		useContext(CommonContext);
 
-  return (
-    <div>
-      <Popover
-        id={id}
-        open={openPop}
-        anchorEl={anchorEl}
-        onClose={handleClosePop}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "center",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "center",
-        }}
-      >
-        <div className={classes.closeIcon}>
-          <IconButton onClick={handleClosePop}>
-            <CloseIcon />
-          </IconButton>
-        </div>
-        <Typography className={classes.typography} variant="h5" gutterBottom>
-          {name} {`(${code})`}
-        </Typography>
-        <hr />
-        <MetaData />
-      </Popover>
-    </div>
-  );
+	return (
+		<div>
+			<Popover
+				id={id}
+				open={openPop}
+				anchorEl={anchorEl}
+				onClose={handleClosePop}
+			>
+				<div className={classes.closeIcon}>
+					<IconButton onClick={handleClosePop}>
+						<CloseIcon />
+					</IconButton>
+				</div>
+				<Typography
+					className={classes.typography}
+					variant="h5"
+					gutterBottom
+				>
+					{name} {`(${code})`}
+				</Typography>
+				<hr />
+				<MetaData />
+			</Popover>
+		</div>
+	);
 }