Fix redrawing when changing window size

src/app/components/job/JobsHistory.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react';
 import Container from 'react-bootstrap/Container';
-import useSize from '../../hooks/Size';
+import useInWidthRange from '../../hooks/InWidthRange';
 import { JobListProps } from './types';
 import JobsAccordion from './JobsAccordion';
 import JobsCards, { JobsCardsPlaceholder } from './JobsCards';
@@ -10,16 +10,11 @@ export type Props = {
   heading: string,
 } & JobListProps
 
-const defaultProps = {
-  entriesPerRow: 2,
-  currentHeading: 'Currently',
-}
-
 export default function JobHistory(props: Props) {
-  const {SizeWrapper, size} = useSize()
+  const {SizeWrapper, inRange} = useInWidthRange(600)
-
+ 
-  const jobsList = size.width === 0 ? <JobsCardsPlaceholder /> : (
+  const jobsList = inRange === undefined ? <JobsCardsPlaceholder /> : (
-    size.width < 600 ? <JobsAccordion {...props} /> : <JobsCards {...props} />)
+    inRange ? <JobsAccordion {...props} /> : <JobsCards {...props} />)
 
   return (
     <Container>

src/app/hooks/InWidthRange.tsx

@@ -0,0 +1,28 @@
+import React, { ForwardedRef, ReactNode, forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
+
+export default function useInWidthRange(threshold: number) {
+    const areaRef = useRef<HTMLDivElement>(null)
+    const [inRange, setInRange] = useState<boolean | undefined>(undefined)
+    
+    function SizeWrapper(props: {children: ReactNode }) {
+        return (
+            <div ref={areaRef}>{props.children}</div>
+        )
+    }
+      
+    useEffect(() => {
+        function updateState() {
+            if (areaRef.current) {
+                const width = areaRef.current.offsetWidth
+                setInRange(width <= threshold)
+            }
+        }
+        updateState()
+        addEventListener("resize", updateState);
+        return () => {
+            removeEventListener("resize", updateState)
+        };
+    }, [areaRef, threshold, setInRange])
+
+    return {SizeWrapper, inRange}
+}

src/app/hooks/Size.tsx

@@ -1,30 +0,0 @@
-import React, { ForwardedRef, ReactNode, forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
-
-export default function useSize() {
-    const areaRef = useRef<HTMLDivElement>(null)
-    const [size, setSize] = useState({ width: 0, height: 0 })
-    
-    function SizeWrapper(props: {children: ReactNode }) {
-        return (
-            <div ref={areaRef}>{props.children}</div>
-        )
-    }
-      
-    useEffect(() => {
-        function updateSize() {
-            if (areaRef.current) {
-                setSize({
-                    width: areaRef.current.offsetWidth,
-                    height: areaRef.current.offsetHeight
-                    })
-            }
-        }
-        updateSize()
-        addEventListener("resize", updateSize);
-        return () => {
-            removeEventListener("resize", updateSize)
-        };
-    }, [areaRef, setSize])
-
-    return {SizeWrapper, size}
-}