From ba198c184b074089e10e245751630b425b7bb085 Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Sun, 19 Jan 2025 00:12:13 +0800
Subject: [PATCH] fix: html element ref object null type issue

---
 src/lib/hooks/useObserver.tsx                   | 2 +-
 src/pages/root/_components/contact/index.tsx    | 2 +-
 src/pages/root/_components/education/index.tsx  | 4 ++--
 src/pages/root/_components/experience/index.tsx | 2 +-
 src/pages/root/_components/hero/index.tsx       | 2 +-
 src/pages/root/_components/projects/index.tsx   | 2 +-
 src/pages/root/_components/skills/index.tsx     | 2 +-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/lib/hooks/useObserver.tsx b/src/lib/hooks/useObserver.tsx
index 2c7f015..1e324c4 100644
--- a/src/lib/hooks/useObserver.tsx
+++ b/src/lib/hooks/useObserver.tsx
@@ -1,7 +1,7 @@
 import { RefObject, useEffect, useState } from "react";
 
 interface useObserverProps {
-  elementRef: RefObject<HTMLElement>;
+  elementRef: RefObject<HTMLElement | null>;
   threshold?: number;
   root?: Element | Document | null;
   rootMargin?: string;
diff --git a/src/pages/root/_components/contact/index.tsx b/src/pages/root/_components/contact/index.tsx
index a2c6179..21d5b95 100644
--- a/src/pages/root/_components/contact/index.tsx
+++ b/src/pages/root/_components/contact/index.tsx
@@ -9,7 +9,7 @@ import { OtherContacts } from "./other-contacts";
 import { ContactForm } from "./contact-form";
 
 const Contact = () => {
-  const sectionRef = useRef<HTMLElement>(null);
+  const sectionRef = useRef<HTMLElement | null>(null);
   const { isVisible } = useObserver({ elementRef: sectionRef });
 
   return (
diff --git a/src/pages/root/_components/education/index.tsx b/src/pages/root/_components/education/index.tsx
index 06415b0..80091d7 100644
--- a/src/pages/root/_components/education/index.tsx
+++ b/src/pages/root/_components/education/index.tsx
@@ -1,16 +1,16 @@
 import { VerticalTimeline } from "react-vertical-timeline-component";
-import { useObserver } from "@/lib/hooks/useObserver";
 import { GraduationCap } from "lucide-react";
 import { useRef } from "react";
 
 import { QUERYELEMENT, ROOTSECTION } from "@/constants/enums";
+import { useObserver } from "@/lib/hooks/useObserver";
 import { EDUCATIONS } from "@/constants/education";
 import { cn } from "@/lib/utils";
 
 import EducationItem from "./education-item";
 
 const Education = () => {
-  const sectionRef = useRef<HTMLElement>(null);
+  const sectionRef = useRef<HTMLElement | null>(null);
   const { isVisible } = useObserver({ elementRef: sectionRef });
 
   return (
diff --git a/src/pages/root/_components/experience/index.tsx b/src/pages/root/_components/experience/index.tsx
index e410786..008d368 100644
--- a/src/pages/root/_components/experience/index.tsx
+++ b/src/pages/root/_components/experience/index.tsx
@@ -11,7 +11,7 @@ import { cn } from "@/lib/utils";
 import { TimelineItem } from "./timeline-item";
 
 const Experience = () => {
-  const sectionRef = useRef<HTMLElement>(null);
+  const sectionRef = useRef<HTMLElement | null>(null);
   const { isVisible } = useObserver({ elementRef: sectionRef });
 
   return (
diff --git a/src/pages/root/_components/hero/index.tsx b/src/pages/root/_components/hero/index.tsx
index 0276961..7f9502d 100644
--- a/src/pages/root/_components/hero/index.tsx
+++ b/src/pages/root/_components/hero/index.tsx
@@ -15,7 +15,7 @@ import { TypingTexts } from "./typing-texts";
 import SocialButtons from "./social-buttons";
 
 const Hero = () => {
-  const sectionRef = useRef<HTMLElement>(null);
+  const sectionRef = useRef<HTMLElement | null>(null);
   const { isVisible } = useObserver({ elementRef: sectionRef });
   const isMounted = useMounted();
   const { width } = useResize();
diff --git a/src/pages/root/_components/projects/index.tsx b/src/pages/root/_components/projects/index.tsx
index c2efae9..8e60262 100644
--- a/src/pages/root/_components/projects/index.tsx
+++ b/src/pages/root/_components/projects/index.tsx
@@ -9,7 +9,7 @@ import { cn } from "@/lib/utils";
 import { ProjectItem, ProjectItemSkeleton } from "./project-item";
 
 const Projects = () => {
-  const sectionRef = useRef<HTMLElement>(null);
+  const sectionRef = useRef<HTMLElement | null>(null);
   const { isVisible } = useObserver({ elementRef: sectionRef });
 
   return (
diff --git a/src/pages/root/_components/skills/index.tsx b/src/pages/root/_components/skills/index.tsx
index 5160f77..843f17b 100644
--- a/src/pages/root/_components/skills/index.tsx
+++ b/src/pages/root/_components/skills/index.tsx
@@ -13,7 +13,7 @@ import { Others } from "./others";
 import { Tools } from "./tools";
 
 const Skills = () => {
-  const sectionRef = useRef<HTMLElement>(null);
+  const sectionRef = useRef<HTMLElement | null>(null);
   const { isVisible } = useObserver({ elementRef: sectionRef });
 
   return (