Had a go at reformatting the code posted for anybody else wanting to review it:
import React, { useEffect, useReducer } from 'react';
import Header from "./header/header";
import Content from "./content/content";
import RightSidebar from "./rightSideBar/rightSidebar";
import Footer from "./footer/footer";
import LeftNav from "./leftNav/leftNav";
import './App.css';
export const ScreenWidthContext = React.createContext(null)
function WidthReducer (state, action) {
console.log(action, 'From reducer function');
switch (action) {
case 'Phone':
return { mediaType: 'Phone' }
case 'Tablet':
return { mediaType: 'Tablet' }
case 'Desktop':
return { mediaType: 'Desktop' }
default:
return state
}
}
const App = () => {
const [state, dispatch] = useReducer(WidthReducer, {
mediaType: window.innerWidth < 641 ? 'Phone' : window.innerWidth < 1024 ? 'Tablet' : 'Desktop'
});
useEffect(() => {
function setWidth (currentWidth) {
const currentMediaType = currentWidth < 641 ? 'Phone' : currentWidth < 1024 ? 'Tablet' : 'Desktop'
if (state.mediaType !== currentMediaType) {
console.log('Current Media Type: '+currentMediaType, 'State: '+state.mediaType)
dispatch(currentMediaType)
}
}
let timeoutId = null;
const resizeListener = () => {
clearTimeout(timeoutId)
timeoutId = setTimeout(() => {
setWidth(window.innerWidth)
}, 150)
}
window.addEventListener('resize', resizeListener)
return () => {
window.removeEventListener('resize', resizeListener)
}
}, [])
console.log(window.innerWidth, state.mediaType, window.innerWidth < 641 ? 'Phone' : window.innerWidth < 1024 ? 'Tablet' : 'Desktop','After setting state')
return (
<>
<ScreenWidthContext.Provider value={state}>
<Header/>
<LeftNav/>
<div id="content">
<Content/>
</div>
<RightSidebar/>
</ScreenWidthContext.Provider>
</> )
}
export default App