width/height listener

web-app/src/Routes.tsx

@@ -13,19 +13,33 @@ interface Props {
 const styles = {
   page: {
     margin: 0,
-    width: window.innerWidth - 20, // 220
-    height: window.innerHeight - 20, // 655
     backgroundColor: 'white',
   },
 }
 
-console.log('page styles')
-console.log(JSON.stringify(styles.page))
-
 const Routes = ({ state }: Props) => {
+  const [dimensions, setDimensions] = React.useState({
+    width: window.innerWidth - 20,
+    height: window.innerHeight - 20,
+  })
+
+  // solution for windows getting off size
+  // without adding multiple listeners
+  React.useEffect(() => {
+    const dimensionsInterval = setInterval(() => {
+      setDimensions({
+        width: window.innerWidth - 20,
+        height: window.innerHeight - 20,
+      })
+    }, 5000)
+    return () => {
+      clearInterval(dimensionsInterval)
+    }
+  })
+
   // TODO: refactor cond to user <Router><Route> and accept first route as if/else if
   return (
-    <div style={styles.page}>
+    <div style={{ ...styles.page, ...dimensions }}>
       <Cond state={state} path="SelectTutorial.Startup">
         <Loading />
       </Cond>