From 93eba92f0c0d5cc205d3e23cd80b86d83174f930 Mon Sep 17 00:00:00 2001
From: Petri Partio <petri.partio@gmail.com>
Date: Fri, 31 May 2024 14:06:35 +0300
Subject: [PATCH] fix: top fade should be calculated on first render too

if page had been scrolled and refreshed the wrong initial value was used
---
 components/Nav.tsx     |  1 -
 components/TopFade.tsx | 18 +++++++++---------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/components/Nav.tsx b/components/Nav.tsx
index a35bbc6..f4451ff 100644
--- a/components/Nav.tsx
+++ b/components/Nav.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import Image from 'next/image';
 import Link, { LinkProps } from 'next/link';
 import Wrapper from './Wrapper';
 import { useEffect, useRef, useState } from 'react';
diff --git a/components/TopFade.tsx b/components/TopFade.tsx
index 53273a7..1d0b01a 100644
--- a/components/TopFade.tsx
+++ b/components/TopFade.tsx
@@ -2,18 +2,18 @@
 
 import { useEffect, useState } from 'react';
 
+const calculatedBrightnessValue = () => {
+  if (window.scrollY > 200) return 0.5;
+  const amountToDecrease = (window.scrollY / 200) * 0.5;
+  return 1 - amountToDecrease;
+};
+
 export default function TopFade() {
-  const [brightness, setBrightness] = useState(1);
+  const [brightness, setBrightness] = useState(calculatedBrightnessValue());
 
   const handleScroll = (event: Event) => {
-    if (window.scrollY > 200) {
-      if (brightness === 0.5) return;
-      setBrightness(0.5);
-      return;
-    }
-
-    const amountToDecrease = (window.scrollY / 200) * 0.5;
-    setBrightness(1 - amountToDecrease);
+    if (window.scrollY > 200 && brightness === 0.5) return;
+    setBrightness(calculatedBrightnessValue());
   };
 
   useEffect(() => {