Skip to content

Commit

Permalink
Develop (#748)
Browse files Browse the repository at this point in the history
* Feature/203 links and branding (#642)

* website title and replan journey URL updated

* updated description and short name

* added new header and footer link to index page

* amend header and update social media link on share-button

* update feedback link and key

* updated feedback link id

* updated feedback link id

* reinstall package-lock

* remove feedback link and reinstall package-lock

* reinstall package-lock

* remove unused vars

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Bug/203 links filter and video (#645)

* moved feedback link to env variable and updated the header

* add keys to netlify and remove unused vars on header

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/203 links and branding (#649)

* website title and replan journey URL updated

* updated description and short name

* added new header and footer link to index page

* amend header and update social media link on share-button

* update feedback link and key

* updated feedback link id

* updated feedback link id

* reinstall package-lock

* remove feedback link and reinstall package-lock

* reinstall package-lock

* remove unused vars

* updating twitter and email links

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/204 upgrade disruptions UI in line with tfwm (#650)

* align the filter options and change the button styling for map and list

* replacing locate map icon and updating zoom map icons

* alignment of filter options and map button styling

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* ncu updates applied to project (#653)

* npm-check-updates applied to project

* updated comments

* clear npm cache and replace propTypes any with propTypes object

* fix es-lint error to move disruptionsData in its own useMemo() hook

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/upgrade node and other dependencies (#656)

* ncu updates applied to project

* updated comments

* clear npm cache and replacing propTypes any with propTypes object

* fix eslint error to move disruptionsData in its own useMemo() hook

* applied npm upgrade and show header title smaller for mobiles

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/upgrade node and other dependencies (#657)

* ncu updates applied to project

* updated comments

* clear npm cache and replacing propTypes any with propTypes object

* fix eslint error to move disruptionsData in its own useMemo() hook

* applied npm upgrade and show header title smaller for mobiles

* update node module and adjusted title margin

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/adjust header and footer (#658)

* adjusted header for mobile screen

* adjusted header margin

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* npm install changes updated after mergt

* added new message type NoKnownDisruptionMessage replacing 'good service' (#670)

* added new message type NoKnownDisruptionMessage replacing 'good service'

* remove strike message

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Bug/change good service to unknown disruption (#671)

* added new message type NoKnownDisruptionMessage replacing 'good service'

* remove strike message

* replacing GoodServiceMessage with NoKnownDisruptionMessage

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Identify and fix issue with API returning empty array (#679)

* integrating rail station graph with tram disruptions

* replaced atcoCode filter with naPTAN

* Empty-Commit

* removed unexpected console statement.

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* update staging environment with new api key

* rollback dependencies updated previously

* rolled back  api key

* updated with new api key

* rollback package lock file as a test

* remove extra 's' on the end of the api endpoint

* added 'show more lines' toggle link to trams (#697)

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Bug/amendments to UI displaying incorrect disruptions (#703)

* amendments to toggle more affected items

* Restyled by prettier (#700)

Co-authored-by: Restyled.io <commits@restyled.io>

* resolving prettier build issue

* resolving prettier issue

* Restyled by prettier (#702)

Co-authored-by: Restyled.io <commits@restyled.io>

* Restyled by prettier is not working

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>
Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com>
Co-authored-by: Restyled.io <commits@restyled.io>

* implementing disruptions lines display list (#707)

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/revise text on Disruptions when no known disruption (#677) (#708)

* Feature/203 links and branding (#642)

* website title and replan journey URL updated

* updated description and short name

* added new header and footer link to index page

* amend header and update social media link on share-button

* update feedback link and key

* updated feedback link id

* updated feedback link id

* reinstall package-lock

* remove feedback link and reinstall package-lock

* reinstall package-lock

* remove unused vars

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Bug/203 links filter and video (#645)

* moved feedback link to env variable and updated the header

* add keys to netlify and remove unused vars on header

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/203 links and branding (#649)

* website title and replan journey URL updated

* updated description and short name

* added new header and footer link to index page

* amend header and update social media link on share-button

* update feedback link and key

* updated feedback link id

* updated feedback link id

* reinstall package-lock

* remove feedback link and reinstall package-lock

* reinstall package-lock

* remove unused vars

* updating twitter and email links

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/204 upgrade disruptions UI in line with tfwm (#650)

* align the filter options and change the button styling for map and list

* replacing locate map icon and updating zoom map icons

* alignment of filter options and map button styling

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* ncu updates applied to project (#653)

* npm-check-updates applied to project

* updated comments

* clear npm cache and replace propTypes any with propTypes object

* fix es-lint error to move disruptionsData in its own useMemo() hook

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/upgrade node and other dependencies (#656)

* ncu updates applied to project

* updated comments

* clear npm cache and replacing propTypes any with propTypes object

* fix eslint error to move disruptionsData in its own useMemo() hook

* applied npm upgrade and show header title smaller for mobiles

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/upgrade node and other dependencies (#657)

* ncu updates applied to project

* updated comments

* clear npm cache and replacing propTypes any with propTypes object

* fix eslint error to move disruptionsData in its own useMemo() hook

* applied npm upgrade and show header title smaller for mobiles

* update node module and adjusted title margin

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/adjust header and footer (#658)

* adjusted header for mobile screen

* adjusted header margin

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* npm install changes updated after mergt

* added new message type NoKnownDisruptionMessage replacing 'good service' (#670)

* added new message type NoKnownDisruptionMessage replacing 'good service'

* remove strike message

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Bug/change good service to unknown disruption (#671)

* added new message type NoKnownDisruptionMessage replacing 'good service'

* remove strike message

* replacing GoodServiceMessage with NoKnownDisruptionMessage

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* testing branch eslint (#721)

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* bug/send random string with api call (#720)

* Feature/revise text on Disruptions when no known disruption (#677)

* Feature/203 links and branding (#642)

* website title and replan journey URL updated

* updated description and short name

* added new header and footer link to index page

* amend header and update social media link on share-button

* update feedback link and key

* updated feedback link id

* updated feedback link id

* reinstall package-lock

* remove feedback link and reinstall package-lock

* reinstall package-lock

* remove unused vars

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Bug/203 links filter and video (#645)

* moved feedback link to env variable and updated the header

* add keys to netlify and remove unused vars on header

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/203 links and branding (#649)

* website title and replan journey URL updated

* updated description and short name

* added new header and footer link to index page

* amend header and update social media link on share-button

* update feedback link and key

* updated feedback link id

* updated feedback link id

* reinstall package-lock

* remove feedback link and reinstall package-lock

* reinstall package-lock

* remove unused vars

* updating twitter and email links

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/204 upgrade disruptions UI in line with tfwm (#650)

* align the filter options and change the button styling for map and list

* replacing locate map icon and updating zoom map icons

* alignment of filter options and map button styling

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* ncu updates applied to project (#653)

* npm-check-updates applied to project

* updated comments

* clear npm cache and replace propTypes any with propTypes object

* fix es-lint error to move disruptionsData in its own useMemo() hook

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/upgrade node and other dependencies (#656)

* ncu updates applied to project

* updated comments

* clear npm cache and replacing propTypes any with propTypes object

* fix eslint error to move disruptionsData in its own useMemo() hook

* applied npm upgrade and show header title smaller for mobiles

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/upgrade node and other dependencies (#657)

* ncu updates applied to project

* updated comments

* clear npm cache and replacing propTypes any with propTypes object

* fix eslint error to move disruptionsData in its own useMemo() hook

* applied npm upgrade and show header title smaller for mobiles

* update node module and adjusted title margin

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/adjust header and footer (#658)

* adjusted header for mobile screen

* adjusted header margin

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* npm install changes updated after mergt

* added new message type NoKnownDisruptionMessage replacing 'good service' (#670)

* added new message type NoKnownDisruptionMessage replacing 'good service'

* remove strike message

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Bug/change good service to unknown disruption (#671)

* added new message type NoKnownDisruptionMessage replacing 'good service'

* remove strike message

* replacing GoodServiceMessage with NoKnownDisruptionMessage

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* added random string with api call

* Empty-Commit

* remove spaces

* remove log info

---------

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* bug/send random string with api call (#722)

* Feature/revise text on Disruptions when no known disruption (#677)

* Feature/203 links and branding (#642)

* website title and replan journey URL updated

* updated description and short name

* added new header and footer link to index page

* amend header and update social media link on share-button

* update feedback link and key

* updated feedback link id

* updated feedback link id

* reinstall package-lock

* remove feedback link and reinstall package-lock

* reinstall package-lock

* remove unused vars

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Bug/203 links filter and video (#645)

* moved feedback link to env variable and updated the header

* add keys to netlify and remove unused vars on header

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/203 links and branding (#649)

* website title and replan journey URL updated

* updated description and short name

* added new header and footer link to index page

* amend header and update social media link on share-button

* update feedback link and key

* updated feedback link id

* updated feedback link id

* reinstall package-lock

* remove feedback link and reinstall package-lock

* reinstall package-lock

* remove unused vars

* updating twitter and email links

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/204 upgrade disruptions UI in line with tfwm (#650)

* align the filter options and change the button styling for map and list

* replacing locate map icon and updating zoom map icons

* alignment of filter options and map button styling

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* ncu updates applied to project (#653)

* npm-check-updates applied to project

* updated comments

* clear npm cache and replace propTypes any with propTypes object

* fix es-lint error to move disruptionsData in its own useMemo() hook

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/upgrade node and other dependencies (#656)

* ncu updates applied to project

* updated comments

* clear npm cache and replacing propTypes any with propTypes object

* fix eslint error to move disruptionsData in its own useMemo() hook

* applied npm upgrade and show header title smaller for mobiles

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/upgrade node and other dependencies (#657)

* ncu updates applied to project

* updated comments

* clear npm cache and replacing propTypes any with propTypes object

* fix eslint error to move disruptionsData in its own useMemo() hook

* applied npm upgrade and show header title smaller for mobiles

* update node module and adjusted title margin

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Feature/adjust header and footer (#658)

* adjusted header for mobile screen

* adjusted header margin

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* npm install changes updated after mergt

* added new message type NoKnownDisruptionMessage replacing 'good service' (#670)

* added new message type NoKnownDisruptionMessage replacing 'good service'

* remove strike message

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Bug/change good service to unknown disruption (#671)

* added new message type NoKnownDisruptionMessage replacing 'good service'

* remove strike message

* replacing GoodServiceMessage with NoKnownDisruptionMessage

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* added random string with api call

* Empty-Commit

* remove spaces

* remove log info

* log randomString

---------

Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* Bug/group disruption lines and operators (#728)

* group disruptions linas and operators and new styles

* refined to display routes grouped by operators

* updated styles

* amendments to the disruption list

* applying styles and adding severity setting

---------

Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>

* merge master into develop & fix severity

* urgent fix: hard coded industrial action text

* show disruption descriptions on trains

* fixed case issue

* appled paragraph formatting

* fix: node sass (#733)

* replace node-sass

* prettier updates

* update eslint and react-share

* fix weight %

* eslint prettier updates and new lint npm scripts

* automatic lint issue fixes

* + babel/plugin-proposal-private-property-in-object

* ignore some linting errors

* fix: rail disruption time (#734)

* include react-moment plugin

* Tidy up for release

* fix ReactDOM error

* fix import order

* Add time to rail disruptions

* remove disruption log

* Amend API keys

* Alter API keys for netlify

---------

Co-authored-by: Nathan Rogan <rolorogan@gmail.com>

* Remove BST temp +1 hour fix (#740)

* add local to train times (#744)

* fix: Inc-15300 (#745)

* fix disruption map

* fix clear search css

* remove esri-loader package

* fix: inc 20732 (#747)

* fix datepicker padding

* add scroll bar to disruption information

* Nr/fix/inc 20732 (#749)

* fix datepicker padding

* add scroll bar to disruption information

* add banner height to mapview height

* fix map height when a disruption is selected

* remove console log

* fix mobile height

* fix overflow (#750)

* fix overflow

* fix desktop height

* fix mobile disruption height

* update package lock

---------

Co-authored-by: Sudheer <92720228+sudheer-rk@users.noreply.github.com>
Co-authored-by: Sudheer Kotha <SudheerKotha@wmca.org.uk>
Co-authored-by: Sudheer Kotha <sudheer.kotha@wmca@org.uk>
Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com>
Co-authored-by: Restyled.io <commits@restyled.io>
Co-authored-by: GeorgeEverett <87702223+GeorgeEverett@users.noreply.github.com>
  • Loading branch information
7 people authored Jul 22, 2024
1 parent 69d0cb7 commit ed05f87
Show file tree
Hide file tree
Showing 9 changed files with 320 additions and 1,231 deletions.
1,463 changes: 248 additions & 1,215 deletions package-lock.json

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^14.4.3",
"@uidotdev/usehooks": "^2.4.1",
"axios": "^0.27.2",
"date-fns": "^2.29.2",
"dompurify": "^2.3.11",
Expand Down Expand Up @@ -71,4 +72,4 @@
"ie 11"
]
}
}
}
11 changes: 11 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
margin-left: auto;
margin-right: 0;
}

/* For mobile phones: */
@media screen and (max-width: 600px) {
.wmnds-header__title {
Expand All @@ -110,6 +111,16 @@
margin-right: 0;
}
}

@media screen and (min-width: 768px) {
/* .MapView_disruptionsContainer__eBitF > div:nth-child(2) {
display: contents !important;
} */

/* #js-disruptions-tray {
overflow-y: auto;
} */
}
</style>

<!-- Google Tag Manager (noscript) -->
Expand Down
5 changes: 3 additions & 2 deletions src/components/ViewToShow/MapView/MapView.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ import Tray from '../../shared/Tray/Tray';
import s from './MapView.module.scss';

function MapView() {
const { appHeight, windowWidth } = useWindowHeightWidth(); // Get window height and width
const { appHeight, windowWidth, bannerHeight } = useWindowHeightWidth(); // Get window height and width
const mobileSize = `calc(100vh - ${bannerHeight}px - 200px)`;

// Show correct height based on screen size
const mapHeight = windowWidth < 768 ? appHeight : 'calc(100vh - 88px - 72px)'; // Minus 298px as this is the height footer
const mapHeight = windowWidth < 768 ? mobileSize : appHeight; // Minus 298px as this is the height footer 'calc(100vh - 88px - 72px)'
const leftPadding = windowWidth / 2 - 504;

return (
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared/Tray/MobileTray.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ function MobileTray() {

return (
<div
className={`${s.tray} wmnds-grid `}
className={`${s.tray} wmnds-grid mobile-tray`}
// set top position of tray based on logic in useMobileTrayMethods
style={{
top: typeof appHeight !== 'number' ? '100%' : appHeight - trayPosition,
Expand Down
5 changes: 4 additions & 1 deletion src/components/shared/Tray/Tray.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useContext } from 'react';
import React, { useRef, useContext } from 'react';
// Import contexts
import { FetchDisruptionsContext } from 'globalState';
// Import customHooks
Expand All @@ -9,9 +9,11 @@ import MobileTray from './MobileTray';
// Import styles
import s from './Tray.module.scss';

// eslint-disable-next-line react/prop-types
function Tray() {
const [fetchDisruptionState] = useContext(FetchDisruptionsContext);
const { windowWidth } = useWindowHeightWidth(); // Get window height and width
const elementRef = useRef(null);

// Output for how the mobile tray looks
const mobileTray = <MobileTray />;
Expand All @@ -24,6 +26,7 @@ function Tray() {
fetchDisruptionState.isMapVisible ? s.mapTray : ''
}`}
id="js-disruptions-tray"
ref={elementRef}
>
<TrayComponents />
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,10 @@ function DisruptedService({ disruption }) {
}
}, [modeState.mode, selectedItem.id, selectedItemTo]);

const styles = { overflowY: 'auto' };

return (
<div className={`wmnds-grid wmnds-m-t-sm `} ref={disruptionRef}>
<div className="wmnds-grid wmnds-m-t-sm wmnds-disruption" ref={disruptionRef} style={styles}>
<hr className="wmnds-col-1" />
{/* Title of disruptions */}
<div className="wmnds-col-1 wmnds-m-b-lg">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,6 @@
border: none;
box-shadow: 0 0 5px 0 rgba(192, 192, 192, 0.5);
max-width: 100%;

@media screen and (min-width:340px) {
padding: 0 16px 10px;
}
}

// Date Picker - Weekends Background Colours
Expand Down
54 changes: 48 additions & 6 deletions src/customHooks/useWindowHeightWidth.js
Original file line number Diff line number Diff line change
@@ -1,41 +1,83 @@
import { useState, useEffect } from 'react';
import { useLocalStorage } from '@uidotdev/usehooks';

const useWindowHeightWidth = () => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth); // Store windows innerWidth so we can check on it for the render/return of this component
const [windowHeight, setWindowHeight] = useState(window.innerHeight);
const [bannerHeight, setBannerHeight] = useState(0);
const [footerHeight, setFooterHeight] = useState(0);
const [disruptionHeight, setDisruptionHeight] = useState(0);
const [appHeight, setAppHeight] = useState();
const [filterHeight, setFilterHeight] = useLocalStorage('filterHeight', null); // add filter height to local storage

// Check window width on resize, used to determine if we should show the mobile or desktop panel in the return/render at the bottom
useEffect(() => {
let mounted = true;

// work out height of the banner to include in the app height
const banner = document.getElementsByClassName('wmnds-banner-container');
const divElement = document.querySelector('.wmnds-banner-container');
if (banner.length > 0) {
setBannerHeight(divElement.offsetHeight);
}

// work out height of the footer to include in the app height
const footer = document.getElementsByClassName('wmnds-footer');
const footerElement = document.querySelector('.wmnds-footer');
if (footer.length > 0) {
setFooterHeight(footerElement.offsetHeight);
}

// work out height of the filter including the disruption info
const filter = document.getElementsByClassName('Tray_tray__hrAu8');
const filterElements = document.querySelector('.Tray_tray__hrAu8');
if (filter.length > 0) {
setFilterHeight(filterElements.offsetHeight);
}

// work out height of the banner to include in the app height
const disruption = document.getElementsByClassName('wmnds-disruption');
const divElements = document.querySelector('.wmnds-disruption');
if (disruption.length > 0) {
setDisruptionHeight(divElements.offsetHeight);
}

// Function to update window.width and window.height to state
const updateWidthHeight = () => {
if (mounted) {
setWindowWidth(window.innerWidth);
setWindowHeight(window.innerHeight);
}
};

const updateAppWidthHeight = () => {
setFilterHeight(filterElements.offsetHeight); // set filter height
};

// Add event listener to window resize, if resized then update width with new window.width and window.height
window.addEventListener('resize', updateWidthHeight);
window.addEventListener('load', updateWidthHeight);

filterElements.onresize = updateAppWidthHeight();

// Cleanup: remove eventListener
return () => {
mounted = false;
window.removeEventListener('resize', updateWidthHeight);
};
}, [windowWidth, windowHeight, setWindowWidth, setWindowHeight]);
}, [windowWidth, windowHeight, setWindowWidth, setWindowHeight, setFilterHeight]);

useEffect(() => {
// console.log(filterHeight);
// Set app height to window height minus the header height
if (windowWidth > 410) {
setAppHeight(windowHeight - 140);
if (windowWidth > 768) {
setAppHeight(filterHeight + 300);
} else {
setAppHeight(windowHeight - 122);
setAppHeight(filterHeight - bannerHeight); // bannerHeight - footerHeight
}
}, [windowHeight, windowWidth]);
}, [bannerHeight, disruptionHeight, filterHeight, windowHeight, windowWidth]);

return { windowWidth, windowHeight, appHeight };
return { windowWidth, windowHeight, appHeight, bannerHeight, footerHeight };
};

export default useWindowHeightWidth;

0 comments on commit ed05f87

Please sign in to comment.