Merge pull request coderoad#71 from ShMcK/fix/resize-issues

ShMcK · web-flow · commit 7046d8fb2b26 · 2020-01-12T18:39:09.000-08:00
resolve resize issues
diff --git a/web-app/src/components/Divider.tsx b/web-app/src/components/Divider.tsx
@@ -3,6 +3,7 @@ import { css, jsx } from '@emotion/core'
 
 const styles = {
   divider: {
+    width: '100%',
     backgroundColor: '#e8e8e8',
     height: '0.1rem',
   },
diff --git a/web-app/src/components/Workspace/index.tsx b/web-app/src/components/Workspace/index.tsx
@@ -1,32 +1,22 @@
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
+import { useWindowResize } from '../../services/hooks/resize'
 
 interface Props {
   children: React.ReactElement
 }
 
-const resize = () => ({
-  width: window.innerWidth,
-  height: window.innerHeight,
-})
+const styles = {
+  page: {
+    display: 'flex' as 'flex',
+    position: 'relative' as 'relative',
+    margin: 0,
+    backgroundColor: 'white',
+  },
+}
 
 const Workspace = ({ children }: Props) => {
-  const [dimensions, setDimensions] = React.useState(resize())
-
-  // solution for windows getting off size
-  React.useEffect(() => {
-    setDimensions(resize())
-  }, [window.innerHeight, window.innerWidth])
-
-  const styles = {
-    page: {
-      display: 'flex' as 'flex',
-      position: 'relative' as 'relative',
-      margin: 0,
-      backgroundColor: 'white',
-    },
-  }
-
+  const dimensions = useWindowResize()
   return <div css={{ ...styles.page, ...dimensions }}>{children}</div>
 }
 
diff --git a/web-app/src/services/hooks/resize.ts b/web-app/src/services/hooks/resize.ts
@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+export const useWindowResize = () => {
+  const resize = () => ({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  })
+
+  const [dimensions, setDimensions] = React.useState(resize())
+
+  // solution for windows getting off size
+  React.useEffect(() => {
+    const handleResize = () => {
+      setDimensions(resize())
+    }
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+  return dimensions
+}
