From 19a52cc723ebc584d1015b9e555ac669d183eef2 Mon Sep 17 00:00:00 2001 From: chencc33 Date: Tue, 14 Feb 2023 19:41:32 -0700 Subject: [PATCH 1/6] add expandable icon --- client/components/main/Faqs.jsx | 11 ++++++-- client/public/index.html | 50 +++++++++++++++++++-------------- 2 files changed, 37 insertions(+), 24 deletions(-) diff --git a/client/components/main/Faqs.jsx b/client/components/main/Faqs.jsx index 7f8ffe201..1ff563822 100644 --- a/client/components/main/Faqs.jsx +++ b/client/components/main/Faqs.jsx @@ -14,6 +14,10 @@ import Button from '@material-ui/core/Button'; import useContentful from '../../hooks/useContentful'; const useStyles = makeStyles(theme => ({ + flexContainer: { + display: 'flex', + justifyContent: 'space-between', + }, textHeading: { fontWeight: theme.typography.fontWeightBold, }, @@ -117,7 +121,7 @@ const Faqs = () => { - { data + {data && ( @@ -128,10 +132,11 @@ const Faqs = () => {
- { data.faqCollection.items.map(item => ( + {data.faqCollection.items.map(item => ( - + {item.question} + {item.answer} diff --git a/client/public/index.html b/client/public/index.html index afadab7a1..f19e7831b 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -1,12 +1,13 @@ - - - - - - + - - + + + + + + + + + + + + + + + <%= htmlWebpackPlugin.options.title %> + - - - - - - + - - <%= htmlWebpackPlugin.options.title %> + + +
+ - - - -
- From 70584fe527413afacc2cfc57bdb8ee1dde15bbae Mon Sep 17 00:00:00 2001 From: chencc33 Date: Tue, 14 Feb 2023 19:52:59 -0700 Subject: [PATCH 2/6] add expand/collapse text --- client/components/main/Faqs.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/components/main/Faqs.jsx b/client/components/main/Faqs.jsx index 1ff563822..64829e606 100644 --- a/client/components/main/Faqs.jsx +++ b/client/components/main/Faqs.jsx @@ -130,13 +130,15 @@ const Faqs = () => { Frequently Asked Questions
- +
+ Expand/Collapse All +
{data.faqCollection.items.map(item => ( {item.question} - + {item.answer} From 579d0efcfd99c6e4a4d5c398210ff636c2d23a06 Mon Sep 17 00:00:00 2001 From: chencc33 Date: Tue, 14 Feb 2023 21:35:47 -0700 Subject: [PATCH 3/6] expand one question --- client/components/main/Faqs.jsx | 35 +++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/client/components/main/Faqs.jsx b/client/components/main/Faqs.jsx index 64829e606..a25a09c26 100644 --- a/client/components/main/Faqs.jsx +++ b/client/components/main/Faqs.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import ReactMarkdown from 'react-markdown'; import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; @@ -26,6 +26,8 @@ const useStyles = makeStyles(theme => ({ }, contentQuestion: { fontWeight: theme.typography.fontWeightMedium, + minWidth: '920px', + cursor: 'pointer', }, searchBar: { display: 'flex', @@ -48,6 +50,9 @@ const useStyles = makeStyles(theme => ({ fontSize: '18px', fontWeight: theme.typography.fontWeightBold, }, + expand: { + cursor: 'pointer', + } })); const query = ` @@ -62,6 +67,7 @@ const query = ` } `; + const Faqs = () => { const { data, errors } = useContentful(query); const classes = { ...useStyles(), ...sharedLayout() }; @@ -71,6 +77,14 @@ const Faqs = () => { }, [errors]); const [searchFormState, setSearchFormState] = React.useState(''); + const [expanded, setExpanded] = React.useState({}) + + const handleExpand = (id) => { + setExpanded({ + ...expanded, + [id]: !expanded[id], + }) + }; const handleSubmit = e => { e.preventDefault(); @@ -130,19 +144,24 @@ const Faqs = () => { Frequently Asked Questions
-
- Expand/Collapse All +
setExpandAll(true)}> + + Expand/Collapse All +
{data.faqCollection.items.map(item => ( - + handleExpand(item.sys.id)}> {item.question} - + {expanded[item.sys.id] && ()} + {!expanded[item.sys.id] && ()} - - {item.answer} - + {expanded[item.sys.id] && ( + + {item.answer} + + )} ))}
From 333d2f86955842748177317f0cc8f2de21adb507 Mon Sep 17 00:00:00 2001 From: chencc33 Date: Tue, 14 Feb 2023 22:19:48 -0700 Subject: [PATCH 4/6] expand/collapse one question --- client/components/main/Faqs.jsx | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/client/components/main/Faqs.jsx b/client/components/main/Faqs.jsx index a25a09c26..e710b72d4 100644 --- a/client/components/main/Faqs.jsx +++ b/client/components/main/Faqs.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import ReactMarkdown from 'react-markdown'; import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; @@ -52,7 +52,7 @@ const useStyles = makeStyles(theme => ({ }, expand: { cursor: 'pointer', - } + }, })); const query = ` @@ -67,7 +67,6 @@ const query = ` } `; - const Faqs = () => { const { data, errors } = useContentful(query); const classes = { ...useStyles(), ...sharedLayout() }; @@ -77,15 +76,25 @@ const Faqs = () => { }, [errors]); const [searchFormState, setSearchFormState] = React.useState(''); - const [expanded, setExpanded] = React.useState({}) + const [expanded, setExpanded] = React.useState({}); - const handleExpand = (id) => { + const handleExpand = id => { setExpanded({ ...expanded, [id]: !expanded[id], - }) + }); }; + // console.log(data) + // const handleExpandAll = () => { + // // const allExpanded = Object.keys(expanded).reduce((obj, key) => { + // // obj[key] = true; + // // return obj; + // // }, {}); + // // const expandedQuest = Object.keys(expanded).find(key => expanded[key] === true) || []; + // }; + + const handleSubmit = e => { e.preventDefault(); console.log(searchFormState); @@ -144,7 +153,7 @@ const Faqs = () => { Frequently Asked Questions
-
setExpandAll(true)}> +
Expand/Collapse All From 869774c89b4e5fa829460aa78f42f60eac04485f Mon Sep 17 00:00:00 2001 From: chencc33 Date: Tue, 14 Feb 2023 22:29:34 -0700 Subject: [PATCH 5/6] expand/collapse FAQ --- client/components/main/Faqs.jsx | 36 ++++++++++++++++++--------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/client/components/main/Faqs.jsx b/client/components/main/Faqs.jsx index e710b72d4..22b8c77a1 100644 --- a/client/components/main/Faqs.jsx +++ b/client/components/main/Faqs.jsx @@ -77,23 +77,27 @@ const Faqs = () => { const [searchFormState, setSearchFormState] = React.useState(''); const [expanded, setExpanded] = React.useState({}); + const [allExpanded, setAllExpanded] = React.useState(false); - const handleExpand = id => { - setExpanded({ - ...expanded, - [id]: !expanded[id], - }); + const handleExpand = (id) => { + setExpanded((prevState) => ({ + ...prevState, + [id]: !prevState[id], + })); }; - // console.log(data) - // const handleExpandAll = () => { - // // const allExpanded = Object.keys(expanded).reduce((obj, key) => { - // // obj[key] = true; - // // return obj; - // // }, {}); - // // const expandedQuest = Object.keys(expanded).find(key => expanded[key] === true) || []; - // }; - + const handleExpandAll = () => { + setAllExpanded((prevAllExpanded) => !prevAllExpanded); + setExpanded( + data.faqCollection.items.reduce( + (prevExpanded, item) => ({ + ...prevExpanded, + [item.sys.id]: !allExpanded, + }), + {} + ) + ); + }; const handleSubmit = e => { e.preventDefault(); @@ -153,9 +157,9 @@ const Faqs = () => { Frequently Asked Questions
-
+
- Expand/Collapse All + {allExpanded ? 'Collapse All' : 'Expand All'}
From de9ad1f7dca51c5a2706c73e8fec6433e1529144 Mon Sep 17 00:00:00 2001 From: chencc33 Date: Tue, 14 Feb 2023 22:32:45 -0700 Subject: [PATCH 6/6] expand/collapse FAQ --- client/components/main/Faqs.jsx | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/client/components/main/Faqs.jsx b/client/components/main/Faqs.jsx index 22b8c77a1..f98a0b8e2 100644 --- a/client/components/main/Faqs.jsx +++ b/client/components/main/Faqs.jsx @@ -79,23 +79,23 @@ const Faqs = () => { const [expanded, setExpanded] = React.useState({}); const [allExpanded, setAllExpanded] = React.useState(false); - const handleExpand = (id) => { - setExpanded((prevState) => ({ + const handleExpand = id => { + setExpanded(prevState => ({ ...prevState, [id]: !prevState[id], })); }; const handleExpandAll = () => { - setAllExpanded((prevAllExpanded) => !prevAllExpanded); + setAllExpanded(prevAllExpanded => !prevAllExpanded); setExpanded( data.faqCollection.items.reduce( (prevExpanded, item) => ({ ...prevExpanded, [item.sys.id]: !allExpanded, }), - {} - ) + {}, + ), ); }; @@ -157,7 +157,17 @@ const Faqs = () => { Frequently Asked Questions
-
+
{ + if (event.key === 'Enter' || event.key === ' ') { + handleExpandAll(); + } + }} + role="button" + tabIndex={0} + > {allExpanded ? 'Collapse All' : 'Expand All'}