38 lines
891 B
TypeScript
38 lines
891 B
TypeScript
import React, {useState, useEffect, useCallback} from 'react';
|
|
import DesktopRoot from './DesktopRoot';
|
|
import MobileRoot from './MobileRoot';
|
|
|
|
/**
|
|
* @return {jsx} The root component
|
|
*/
|
|
export default function Root() {
|
|
const [windowSize, setWindowSize] = useState(0);
|
|
const [content, setContent]: any = useState();
|
|
|
|
const handleWindowResize = useCallback((_event) => {
|
|
setWindowSize(window.innerWidth);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setWindowSize(window.innerWidth);
|
|
window.addEventListener('resize', handleWindowResize);
|
|
return () => {
|
|
window.removeEventListener('resize', handleWindowResize);
|
|
};
|
|
}, [handleWindowResize]);
|
|
|
|
useEffect(() => {
|
|
if (windowSize > 1200) {
|
|
setContent(<DesktopRoot windowSize={windowSize} />);
|
|
} else {
|
|
setContent(<MobileRoot windowSize={windowSize} />);
|
|
}
|
|
}, [windowSize]);
|
|
|
|
return (
|
|
<div id='root'>
|
|
{content}
|
|
</div>
|
|
);
|
|
}
|