From 68c560745157d2fd5888f251702826b02e477976 Mon Sep 17 00:00:00 2001 From: mikkojamG Date: Wed, 20 Nov 2024 13:18:07 +0200 Subject: [PATCH] fix: additional entrances click on tab PL-17 --- src/components/TabLists/TabLists.js | 91 ++++++++------- src/views/UnitView/UnitView.js | 41 ++++--- .../components/ContactInfo/ContactInfo.js | 109 ++++++++++-------- 3 files changed, 140 insertions(+), 101 deletions(-) diff --git a/src/components/TabLists/TabLists.js b/src/components/TabLists/TabLists.js index ed52bfad2..6db9b1a25 100644 --- a/src/components/TabLists/TabLists.js +++ b/src/components/TabLists/TabLists.js @@ -1,3 +1,4 @@ +/* eslint-disable react/forbid-prop-types */ /* eslint-disable react/no-multi-comp */ import React, { useState, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; @@ -16,14 +17,14 @@ import config from '../../../config'; import useMobileStatus from '../../utils/isMobile'; import PaginatedList from '../Lists/PaginatedList'; -const TabLists = ({ +function TabLists({ location, data, - onTabChange = null, - focusClass = null, - focusText = null, - headerComponents = null, -}) => { + onTabChange, + focusClass, + focusText, + headerComponents, +}) { const isMobile = useMobileStatus(); const theme = useTheme(); const navigator = useSelector(selectNavigator); @@ -154,7 +155,7 @@ const TabLists = ({ const renderHeader = () => { let fullData = []; - data.forEach((element) => { + data.forEach(element => { if (element.data && !element.noOrderer) { fullData = [...fullData, ...element.data]; } @@ -216,16 +217,16 @@ const TabLists = ({ } { fullData.length > 0 && ( - <> - - + ) } { focusClass && focusText && ( - {focusText} + + {focusText} + ) } { - filteredData.map((item, index) => { - if (item.data && item.data.length > 0) { - const label = `${item.title} ${item.component ? '' : `(${item.data.length})`}`.trim(); - const tabId = `${item.title}-${item.data.length}`; - return ( - item.onClick(index) : null} - focusVisibleClassName={tabFocusClass} - /> - ); - } + filteredData.map((item, index) => { + if (item.data && item.data.length > 0) { + const label = `${item.title} ${item.component ? '' : `(${item.data.length})`}`.trim(); + const tabId = `${item.title}-${item.data.length}`; + return ( - item.onClick(index) : null} focusVisibleClassName={tabFocusClass} /> ); - }) - } + } + return ( + item.onClick(index) : null} + focusVisibleClassName={tabFocusClass} + /> + ); + }) + } ); @@ -281,18 +285,18 @@ const TabLists = ({ useEffect(() => { calculateHeaderStylings(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [isMobile]); - useEffect(() => { // Change tab if selected tab is changed on url const tabFromUrl = getTabfromUrl(); if (tabFromUrl !== tabIndex) { handleTabChange(null, tabFromUrl); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [location]); - const render = () => ( <> { @@ -359,7 +363,7 @@ const TabLists = ({ ); return render(); -}; +} const StyledTabs = styled(Tabs)(({ theme }) => ({ position: 'sticky', @@ -404,4 +408,11 @@ TabLists.propTypes = { focusText: PropTypes.string, }; +TabLists.defaultProps = { + onTabChange: null, + focusClass: null, + focusText: null, + headerComponents: null, +}; + export default TabLists; diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js index 86c68b96b..7b799b5f7 100644 --- a/src/views/UnitView/UnitView.js +++ b/src/views/UnitView/UnitView.js @@ -1,6 +1,9 @@ +/* eslint-disable react/forbid-prop-types */ /* eslint-disable no-underscore-dangle */ import styled from '@emotion/styled'; -import { Hearing, Mail, OpenInFull, Share } from '@mui/icons-material'; +import { + Hearing, Mail, OpenInFull, Share, +} from '@mui/icons-material'; import { Button, Typography } from '@mui/material'; import { visuallyHidden } from '@mui/utils'; import Watermark from '@uiw/react-watermark'; @@ -56,7 +59,7 @@ import UnitLinks from './components/UnitLinks'; import UnitsServicesList from './components/UnitsServicesList'; import { parseUnitViewUrlParams } from './utils/unitViewUrlParamAndSettingsHandler'; -const UnitView = (props) => { +function UnitView(props) { const { embed = false, match = {}, @@ -87,6 +90,7 @@ const UnitView = (props) => { const getLocaleText = useLocaleText(); const dispatch = useDispatch(); const history = useHistory(); + const accessiblityTabRef = useRef(); const getImageAlt = () => `${intl.formatMessage({ id: 'unit.picture' })}${getLocaleText(unit.name)}`; @@ -117,11 +121,12 @@ const UnitView = (props) => { dispatch(setMapType(value)); }); resetUrlSearchParams(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const initializePTVAccessibilitySentences = () => { if (unit) { - unit.identifiers.forEach((element) => { + unit.identifiers.forEach(element => { if (element.namespace === 'ptv') { const ptvId = element.value; fetchAccessibilitySentences(ptvId); @@ -135,7 +140,7 @@ const UnitView = (props) => { const unitId = params.unit; // If no selected unit data, or selected unit data is old, fetch new data if (!stateUnit || !checkCorrectUnit(stateUnit) || !stateUnit.complete) { - fetchSelectedUnit(unitId, (unit) => { + fetchSelectedUnit(unitId, unit => { setUnit(unit); if (unit?.keywords?.fi?.some(keyword => keyword.toLowerCase() === 'kuuluvuuskartta')) { fetchHearingMaps(unitId); @@ -214,18 +219,21 @@ const UnitView = (props) => { map.setView(viewPosition?.current?.center, viewPosition?.current?.zoom); } }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { // If unit changes without the component unmounting, update data if (unit) { intializeUnitData(); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [match.params.unit]); useEffect(() => { if (config.usePtvAccessibilityApi) { initializePTVAccessibilitySentences(); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [unit]); if (embed) { @@ -311,7 +319,7 @@ const UnitView = (props) => { const renderDetailTab = () => { if (!unit || !unit.complete) { - return <>; + return null; } const contractText = UnitHelper.getContractText(unit, intl, getLocaleText); @@ -347,7 +355,11 @@ const UnitView = (props) => { {/* View Components */} - + { const renderServiceTab = () => { if (!unit || !unit.complete) { - return <>; + return null; } return ( @@ -464,7 +476,7 @@ const UnitView = (props) => { color="primary" aria-label={intl.formatMessage({ id: 'map.button.expand.aria' })} icon={} - onClick={(e) => { + onClick={e => { e.preventDefault(); if (navigator) { navigator.openMap(); @@ -481,7 +493,6 @@ const UnitView = (props) => { ); - const render = () => { const title = unit && unit.name ? getLocaleText(unit.name) : ''; const onLinkOpenClick = () => { @@ -515,10 +526,9 @@ const UnitView = (props) => { titleComponent="h3" shareLink={elem} /> - {unit?.location?.coordinates && - - } - + {unit?.location?.coordinates + && } + ); if (unitFetching) { @@ -551,6 +561,7 @@ const UnitView = (props) => { data: null, itemsPerPage: null, title: intl.formatMessage({ id: 'accessibility' }), + ref: accessiblityTabRef, }, { id: 'services', @@ -584,7 +595,7 @@ const UnitView = (props) => { : renderPicture() } - )} + )} /> ); @@ -603,7 +614,7 @@ const UnitView = (props) => { }; return render(); -}; +} export default UnitView; diff --git a/src/views/UnitView/components/ContactInfo/ContactInfo.js b/src/views/UnitView/components/ContactInfo/ContactInfo.js index e9efc11b3..adf4253ae 100644 --- a/src/views/UnitView/components/ContactInfo/ContactInfo.js +++ b/src/views/UnitView/components/ContactInfo/ContactInfo.js @@ -1,3 +1,4 @@ +/* eslint-disable react/forbid-prop-types */ import styled from '@emotion/styled'; import React from 'react'; import PropTypes from 'prop-types'; @@ -14,11 +15,9 @@ import useLocaleText from '../../../../utils/useLocaleText'; import { parseSearchParams, stringifySearchParams } from '../../../../utils'; import { SMAccordion } from '../../../../components'; -const ContactInfo = ({ - unit, - userLocation = null, - headingLevel = 'h4', -}) => { +function ContactInfo({ + unit, userLocation, headingLevel, accessiblityTabRef, +}) { const intl = useIntl(); const history = useHistory(); const location = useLocation(); @@ -36,7 +35,9 @@ const ContactInfo = ({ const phone = { type: 'PHONE', value: unit.phone ? { phone: unit.phone } : intl.formatMessage({ id: 'unit.phone.missing' }), - noDivider: showCallInfo || (subgroupContacts && subgroupContacts.length > 0), // TODO: fix this hard coded value when unit data returns call charge boolean + // TODO: fix this hard coded value when unit data returns call charge boolean + noDivider: showCallInfo + || (subgroupContacts && subgroupContacts.length > 0), }; const email = { type: 'EMAIL', @@ -50,11 +51,12 @@ const ContactInfo = ({ } : intl.formatMessage({ id: 'unit.homepage.missing' }), }; - const addNewTabSuffix = (text) => `${text} ${intl.formatMessage({ id: 'opens.new.tab' })}`; + const addNewTabSuffix = text => `${text} ${intl.formatMessage({ id: 'opens.new.tab' })}`; // Custom list item component for call charge info const callInformation = { - component: showCallInfo // TODO: fix this hard coded value when unit data returns call charge boolean + // TODO: fix this hard coded value when unit data returns call charge boolean + component: showCallInfo && ( @@ -80,44 +82,52 @@ const ContactInfo = ({ // Custom list item component for additional entrances const entrances = { component: additionalEntrances?.length - && ( - - - } - collapseContent={( - - {additionalEntrances.map(entrance => ( - entrance.name ? ( - - {getLocaleText(entrance.name)} + && ( + + + } + collapseContent={( + + {additionalEntrances.map(entrance => ( + entrance.name ? ( + + {getLocaleText(entrance.name)} + + ) : null + ))} + { + // Navigate to accessibility tab by clicking tab + if (accessiblityTabRef.current) { + accessiblityTabRef.current.click(); + accessiblityTabRef.current.focus(); + + return; + } + + // Navigate to accessibility tab by changing url tab parameter + const searchParams = parseSearchParams(location.search); + searchParams.t = 'accessibilityDetails'; + const searchString = stringifySearchParams(searchParams); + history.push(`${location.pathname}?${searchString}`); + }} + > + + {addNewTabSuffix(intl.formatMessage({ id: 'unit.entrances.accessibility' }))} - ) : null - ))} - { - // Navigate to accessibility tab by changing url tab parameter - const searchParams = parseSearchParams(location.search); - searchParams.t = 'accessibilityDetails'; - const searchString = stringifySearchParams(searchParams); - history.push(`${location.pathname}?${searchString}`); - }} - > - - {addNewTabSuffix(intl.formatMessage({ id: 'unit.entrances.accessibility' }))} - - - + + )} - /> - -
  • - -
    • -     - ), + /> +     +
  • + +
    • +     + ), }; const otherAddress = { @@ -180,7 +190,7 @@ const ContactInfo = ({ ) : null ))} - )} + )} />
  • @@ -238,7 +248,7 @@ const ContactInfo = ({ titleComponent={headingLevel} /> ); -}; +} const StyledShortDivider = styled(Divider)(({ theme }) => ({ marginLeft: theme.spacing(9), @@ -278,6 +288,13 @@ ContactInfo.propTypes = { unit: PropTypes.objectOf(PropTypes.any).isRequired, userLocation: PropTypes.objectOf(PropTypes.any), headingLevel: PropTypes.string, + accessiblityTabRef: PropTypes.shape({ current: PropTypes.any }), +}; + +ContactInfo.defaultProps = { + userLocation: null, + headingLevel: 'h4', + accessiblityTabRef: null, }; export default ContactInfo;