From 8453a7ccfe10534c42e7bda544fb588288f36685 Mon Sep 17 00:00:00 2001
From: Dejvino <git.dejvino.cz@dejvino.cz>
Date: Thu, 1 Jun 2023 15:12:23 +0200
Subject: [PATCH] Fix redrawing when changing window size

---
 src/app/components/job/JobsHistory.tsx | 15 +++++--------
 src/app/hooks/InWidthRange.tsx         | 28 ++++++++++++++++++++++++
 src/app/hooks/Size.tsx                 | 30 --------------------------
 3 files changed, 33 insertions(+), 40 deletions(-)
 create mode 100644 src/app/hooks/InWidthRange.tsx
 delete mode 100644 src/app/hooks/Size.tsx

diff --git a/src/app/components/job/JobsHistory.tsx b/src/app/components/job/JobsHistory.tsx
index e2878f3..17a72ea 100644
--- a/src/app/components/job/JobsHistory.tsx
+++ b/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 jobsList = size.width === 0 ? <JobsCardsPlaceholder /> : (
-    size.width < 600 ? <JobsAccordion {...props} /> : <JobsCards {...props} />)
+  const {SizeWrapper, inRange} = useInWidthRange(600)
+ 
+  const jobsList = inRange === undefined ? <JobsCardsPlaceholder /> : (
+    inRange ? <JobsAccordion {...props} /> : <JobsCards {...props} />)
 
   return (
     <Container>
diff --git a/src/app/hooks/InWidthRange.tsx b/src/app/hooks/InWidthRange.tsx
new file mode 100644
index 0000000..d712409
--- /dev/null
+++ b/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}
+}
\ No newline at end of file
diff --git a/src/app/hooks/Size.tsx b/src/app/hooks/Size.tsx
deleted file mode 100644
index 58f23c6..0000000
--- a/src/app/hooks/Size.tsx
+++ /dev/null
@@ -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}
-}
\ No newline at end of file