From 863f209b3164dd77ec78702fbd2dfe6b4baa8e13 Mon Sep 17 00:00:00 2001
From: camille-s <camille.seaberry@gmail.com>
Date: Tue, 27 Aug 2024 15:03:53 -0400
Subject: [PATCH] Refactor footer into separate files

---
 .../Layout/Footer/Dictionary/Dictionary.jsx   |  94 +++++++++
 .../Layout/Footer/Download/Download.jsx       |  28 +++
 src/components/Layout/Footer/Footer.jsx       | 186 +-----------------
 .../Layout/Footer/FooterRow/FooterRow.jsx     |  20 ++
 .../Layout/Footer/Geography/Geography.jsx     |  21 ++
 .../Layout/Footer/Sources/Sources.jsx         |  36 ++++
 6 files changed, 206 insertions(+), 179 deletions(-)
 create mode 100644 src/components/Layout/Footer/Dictionary/Dictionary.jsx
 create mode 100644 src/components/Layout/Footer/Download/Download.jsx
 create mode 100644 src/components/Layout/Footer/FooterRow/FooterRow.jsx
 create mode 100644 src/components/Layout/Footer/Geography/Geography.jsx
 create mode 100644 src/components/Layout/Footer/Sources/Sources.jsx

diff --git a/src/components/Layout/Footer/Dictionary/Dictionary.jsx b/src/components/Layout/Footer/Dictionary/Dictionary.jsx
new file mode 100644
index 0000000..df993d9
--- /dev/null
+++ b/src/components/Layout/Footer/Dictionary/Dictionary.jsx
@@ -0,0 +1,94 @@
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Link from '@mui/material/Link';
+import FooterRow from '../FooterRow/FooterRow';
+
+const Dictionary = ({ definitions, format, }) => (
+    <FooterRow heading='Definitions of terms'>
+        {definitions.map((section, i) => (
+            <DictionarySection key={`def-section-${i}`} 
+                format={format} 
+                {...section} 
+                i={i} 
+            />
+        ))}
+    </FooterRow>
+);
+
+Dictionary.propTypes = {
+    definitions: PropTypes.arrayOf(PropTypes.object).isRequired,
+    format: PropTypes.func,
+};
+
+const DictionarySection = ({ source, format, variables, i, }) => (
+    <Accordion
+        disableGutters
+        elevation={0}
+    >
+        <AccordionSummary
+            aria-controls={`def-section-content-${i}`}
+            id={`def-section-header-${i}`}
+            expandIcon={<ExpandMoreIcon />}
+            sx={{
+                '& .MuiAccordionSummary-content': {
+                    margin: '4px 0',
+                },
+            }}
+            size='small'
+            variant='filled'
+        >
+            <Typography variant='h4'>{source}</Typography>
+        </AccordionSummary>
+        <AccordionDetails
+            sx={{
+                '& dl': {
+                    margin: 0,
+                }
+            }}
+        >
+            <dl>
+                {variables.map((def, j) => (
+                    <Definition format={format} key={`def-${j}`} {...def} />
+                ))}
+            </dl>
+        </AccordionDetails>
+    </Accordion>
+);
+
+DictionarySection.propTypes = {
+    source: PropTypes.string.isRequired,
+    variables: PropTypes.arrayOf(PropTypes.object).isRequired,
+    i: PropTypes.number.isRequired,
+    format: PropTypes.func,
+};
+
+const Definition = ({ term, definition, url, format }) => (
+    <>
+        <dt
+            style={{
+                fontWeight: '600',
+            }}
+        >
+            {term}
+        </dt>
+        <dd>
+            {format(definition)}
+            {url && (
+                <Link href={url}> Learn more here.</Link>
+            )}
+        </dd>
+    </>
+);
+
+Definition.propTypes = {
+    term: PropTypes.string.isRequired,
+    definition: PropTypes.string,
+    url: PropTypes.string,
+    format: PropTypes.func,
+};
+
+export default Dictionary;
\ No newline at end of file
diff --git a/src/components/Layout/Footer/Download/Download.jsx b/src/components/Layout/Footer/Download/Download.jsx
new file mode 100644
index 0000000..56725da
--- /dev/null
+++ b/src/components/Layout/Footer/Download/Download.jsx
@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import FooterRow from '../FooterRow/FooterRow';
+
+const Download = ({ dwBase, dwSlug, ghBase, csvFn }) => {
+    const dlLink = <Link href={`https://query.data.world/s/${dwSlug}`}>Download</Link>;
+    const dwLink = <Link href={dwBase}>data.world</Link>;
+    const ghLink = <Link href={`${ghBase}/${csvFn}`}>GitHub</Link>;
+    return (
+        <FooterRow heading='Download data'>
+            <Typography>
+                {dlLink} data for all towns and COGs (.csv file),
+                filter and analyze data online on {dwLink} (requires free sign-up),
+                or download / clone from {ghLink} (advanced users).
+            </Typography>
+        </FooterRow>
+    );
+};
+
+Download.propTypes = {
+    dwBase: PropTypes.string.isRequired,
+    dwSlug: PropTypes.string.isRequired,
+    ghBase: PropTypes.string.isRequired,
+    csvFn: PropTypes.string.isRequired,
+};
+
+export default Download;
\ No newline at end of file
diff --git a/src/components/Layout/Footer/Footer.jsx b/src/components/Layout/Footer/Footer.jsx
index d7541c4..3952199 100644
--- a/src/components/Layout/Footer/Footer.jsx
+++ b/src/components/Layout/Footer/Footer.jsx
@@ -1,186 +1,12 @@
 import PropTypes from 'prop-types';
 import Panel from '../Panel/Panel';
-import Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
-import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
-import Accordion from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Download from './Download/Download';
+import Geography from './Geography/Geography';
+import Sources from './Sources/Sources';
+import Dictionary from './Dictionary/Dictionary';
 
-/*****************
- * // FOOTER ROW *
- *****************/
-const FooterRow = ({ heading, children }) => (
-    <Box>
-        <Typography
-            variant='h3'
-            gutterBottom
-        >{heading}</Typography>
-        {children}
-    </Box>
-);
-
-FooterRow.propTypes = {
-    heading: PropTypes.string.isRequired,
-    children: PropTypes.node.isRequired,
-};
-
-/***************
- * // DOWNLOAD *
- ***************/
-const Download = ({ dwBase, dwSlug, ghBase, csvFn }) => {
-    const dlLink = <Link href={`https://query.data.world/s/${dwSlug}`}>Download</Link>;
-    const dwLink = <Link href={dwBase}>data.world</Link>;
-    const ghLink = <Link href={`${ghBase}/${csvFn}`}>GitHub</Link>;
-    return (
-        <FooterRow heading='Download data'>
-            <Typography>
-                {dlLink} data for all towns and COGs (.csv file),
-                filter and analyze data online on {dwLink} (requires free sign-up),
-                or download / clone from {ghLink} (advanced users).
-            </Typography>
-        </FooterRow>
-    );
-};
-
-Download.propTypes = {
-    dwBase: PropTypes.string.isRequired,
-    dwSlug: PropTypes.string.isRequired,
-    ghBase: PropTypes.string.isRequired,
-    csvFn: PropTypes.string.isRequired,
-};
-
-/****************
- * // GEOGRAPHY *
- ****************/
-const Geography = ({ towns, cog }) => (
-    <FooterRow heading='Geography'>
-        <Typography>
-            Note that in order to include Community Wellbeing Survey results for small towns, values shown here are based on a model that incorporates direct measurements. Contact DataHaven for more information about the methodology used.
-        </Typography>
-        {towns && <Typography>
-            {`${cog} is made up of the towns of ${towns}.`}
-        </Typography>}
-    </FooterRow>
-);
-
-Geography.propTypes = {
-    towns: PropTypes.string,
-    cog: PropTypes.string,
-};
-
-/**************
- * // SOURCES *
- **************/
-const Sources = ({ sources }) => (
-    <FooterRow heading='Source: DataHaven analysis (2024) of:'>
-        <ul style={{ margin: 0 }}>
-            {sources.map((source, i) => (
-                <Source key={i} {...source} />
-            ))}
-        </ul>
-    </FooterRow>
-);
-
-Sources.propTypes = {
-    sources: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
-const Source = ({ project, source, url, year }) => (
-    <li>
-        <span style={{
-            fontWeight: '600',
-        }}>{`${source} `}</span>
-        {`(${year}). `}
-        <Link href={url}>{`${project}`}</Link>
-    </li>
-);
-
-Source.propTypes = {
-    project: PropTypes.string.isRequired,
-    source: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-};
-
-/*****************
- * // DICTIONARY *
- *****************/
-const Dictionary = ({ definitions, }) => (
-    <FooterRow heading='Definitions of terms'>
-        {definitions.map((section, i) => (
-            <DictionarySection key={i} {...section} i={i}  />
-        ))}
-    </FooterRow>
-);
-
-Dictionary.propTypes = {
-    definitions: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
-const DictionarySection = ({ source, variables, i, }) => (
-    <Accordion
-        disableGutters
-        elevation={0}
-    >
-        <AccordionSummary
-            aria-controls={`def-section-content-${i}`}
-            id={`def-section-header-${i}`}
-            expandIcon={<ExpandMoreIcon />}
-            sx={{
-                '& .MuiAccordionSummary-content': {
-                    margin: '4px 0',
-                },
-            }}
-            size='small'
-            variant='filled'
-        >
-            <Typography variant='h4'>{source}</Typography>
-        </AccordionSummary>
-        <AccordionDetails
-            sx={{
-                '& dl': {
-                    margin: 0,
-                }
-            }}
-        >
-            <dl>
-                {variables.map((def, j) => (
-                    <Definition key={`def-${j}`} {...def} />
-                ))}
-            </dl>
-        </AccordionDetails>
-    </Accordion>
-);
-
-DictionarySection.propTypes = {
-    source: PropTypes.string.isRequired,
-    variables: PropTypes.arrayOf(PropTypes.object).isRequired,
-    i: PropTypes.number.isRequired,
-};
-
-const Definition = ({ indicator, detail }) => (
-    <>
-        <dt
-            style={{
-                fontWeight: '600',
-            }}
-        >{indicator}</dt>
-        <dd>{detail}</dd>
-    </>
-);
-
-Definition.propTypes = {
-    indicator: PropTypes.string.isRequired,
-    detail: PropTypes.string,
-};
-
-/*************
- * // FOOTER *
- *************/
 const Footer = ({
     dwBase,
     ghBase,
@@ -190,6 +16,7 @@ const Footer = ({
     cog,
     sources,
     dictionary,
+    format,
 }) => (
     <Panel heading={`Notes`}>
         <Stack
@@ -214,7 +41,7 @@ const Footer = ({
 
             <Sources sources={sources} />
 
-            <Dictionary definitions={dictionary} />
+            <Dictionary definitions={dictionary} format={format} />
         </Stack>
     </Panel>
 );
@@ -228,6 +55,7 @@ Footer.propTypes = {
     cog: PropTypes.string,
     sources: PropTypes.arrayOf(PropTypes.object).isRequired,
     dictionary: PropTypes.arrayOf(PropTypes.object).isRequired,
+    format: PropTypes.func,
 };
 
 export default Footer;
diff --git a/src/components/Layout/Footer/FooterRow/FooterRow.jsx b/src/components/Layout/Footer/FooterRow/FooterRow.jsx
new file mode 100644
index 0000000..a144a43
--- /dev/null
+++ b/src/components/Layout/Footer/FooterRow/FooterRow.jsx
@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+const FooterRow = ({ heading, children }) => (
+    <Box>
+        <Typography
+            variant='h3'
+            gutterBottom
+        >{heading}</Typography>
+        {children}
+    </Box>
+);
+
+FooterRow.propTypes = {
+    heading: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
+};
+
+export default FooterRow;
\ No newline at end of file
diff --git a/src/components/Layout/Footer/Geography/Geography.jsx b/src/components/Layout/Footer/Geography/Geography.jsx
new file mode 100644
index 0000000..3ddcd7b
--- /dev/null
+++ b/src/components/Layout/Footer/Geography/Geography.jsx
@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import FooterRow from '../FooterRow/FooterRow';
+
+const Geography = ({ towns, cog }) => (
+    <FooterRow heading='Geography'>
+        <Typography>
+            Note that in order to include Community Wellbeing Survey results for small towns, values shown here are based on a model that incorporates direct measurements. Contact DataHaven for more information about the methodology used.
+        </Typography>
+        {towns && <Typography>
+            {`${cog} is made up of the towns of ${towns}.`}
+        </Typography>}
+    </FooterRow>
+);
+
+Geography.propTypes = {
+    towns: PropTypes.string,
+    cog: PropTypes.string,
+};
+
+export default Geography;
\ No newline at end of file
diff --git a/src/components/Layout/Footer/Sources/Sources.jsx b/src/components/Layout/Footer/Sources/Sources.jsx
new file mode 100644
index 0000000..a9e9ef6
--- /dev/null
+++ b/src/components/Layout/Footer/Sources/Sources.jsx
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import Link from '@mui/material/Link';
+import FooterRow from '../FooterRow/FooterRow';
+
+const Sources = ({ sources }) => (
+    <FooterRow heading='Source: DataHaven analysis (2024) of:'>
+        <ul style={{ margin: 0 }}>
+            {sources.map((source, i) => (
+                <Source key={i} {...source} />
+            ))}
+        </ul>
+    </FooterRow>
+);
+
+Sources.propTypes = {
+    sources: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+const Source = ({ project, source, url, year }) => (
+    <li>
+        <span style={{
+            fontWeight: '600',
+        }}>{`${source} `}</span>
+        {`(${year}). `}
+        <Link href={url}>{`${project}`}</Link>
+    </li>
+);
+
+Source.propTypes = {
+    project: PropTypes.string.isRequired,
+    source: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+export default Sources;
\ No newline at end of file