From 1fb3ca5a3ba98cd526f51f6f2670fdf85d8c0504 Mon Sep 17 00:00:00 2001
From: Michael Brusegard <56915010+michaelbrusegard@users.noreply.github.com>
Date: Sat, 4 Jan 2025 01:29:43 +0100
Subject: [PATCH] refactor: section higher order component

---
 src/components/about.tsx                      |  4 +-
 src/components/contact.tsx                    |  4 +-
 src/components/experience.tsx                 |  4 +-
 src/components/feedbacks.tsx                  |  4 +-
 .../{SectionWrapper.tsx => SectionHOC.tsx}    |  0
 src/components/sectionWrapper.tsx             | 45 -------------------
 src/components/works.tsx                      |  4 +-
 7 files changed, 10 insertions(+), 55 deletions(-)
 rename src/components/layout/{SectionWrapper.tsx => SectionHOC.tsx} (100%)
 delete mode 100644 src/components/sectionWrapper.tsx

diff --git a/src/components/about.tsx b/src/components/about.tsx
index ac17d86..87fa26c 100644
--- a/src/components/about.tsx
+++ b/src/components/about.tsx
@@ -3,7 +3,7 @@ import { motion, Variants } from 'motion/react';
 import Image from 'next/image';
 import { services } from '../constants';
 import { fadeIn, textVariant } from '../utils/motion';
-import SectionWrapper from '../components/sectionWrapper';
+import { SectionHOC } from '@/components/layout/SectionHOC';
 
 const ServiceCard = ({
   index,
@@ -82,4 +82,4 @@ const About = () => {
   );
 };
 
-export default SectionWrapper(About, 'about');
+export default SectionHOC(About, 'about');
diff --git a/src/components/contact.tsx b/src/components/contact.tsx
index 288f172..e0cf82d 100644
--- a/src/components/contact.tsx
+++ b/src/components/contact.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 import { Variants, motion } from 'motion/react';
-import SectionWrapper from './sectionWrapper';
+import { SectionHOC } from '@/components/layout/SectionHOC';
 import { slideIn } from '../utils/motion';
 import DogCanvas from './dog';
 
@@ -149,4 +149,4 @@ const Contact = () => {
   );
 };
 
-export default SectionWrapper(Contact, 'contact');
+export default SectionHOC(Contact, 'contact');
diff --git a/src/components/experience.tsx b/src/components/experience.tsx
index f59f34f..24e3aed 100644
--- a/src/components/experience.tsx
+++ b/src/components/experience.tsx
@@ -6,7 +6,7 @@ import { useState, useEffect } from 'react';
 import { Variants, motion } from 'framer-motion';
 import 'react-vertical-timeline-component/style.min.css';
 import { experiences } from '../constants';
-import SectionWrapper from '../components/sectionWrapper';
+import { SectionHOC } from '@/components/layout/SectionHOC';
 import { textVariant } from '../utils/motion';
 import Image from 'next/image';
 
@@ -98,4 +98,4 @@ const Experience = () => {
   );
 };
 
-export default SectionWrapper(Experience, 'work');
+export default SectionHOC(Experience, 'work');
diff --git a/src/components/feedbacks.tsx b/src/components/feedbacks.tsx
index fd07938..43c6b63 100644
--- a/src/components/feedbacks.tsx
+++ b/src/components/feedbacks.tsx
@@ -1,5 +1,5 @@
 import { Variants, motion } from 'motion/react';
-import SectionWrapper from './sectionWrapper';
+import { SectionHOC } from '@/components/layout/SectionHOC';
 import { fadeIn, textVariant } from '../utils/motion';
 import { testimonials } from '../constants/index';
 import Image, { StaticImageData } from 'next/image';
@@ -121,4 +121,4 @@ const Feedbacks = () => {
   );
 };
 
-export default SectionWrapper(Feedbacks, '');
+export default SectionHOC(Feedbacks, '');
diff --git a/src/components/layout/SectionWrapper.tsx b/src/components/layout/SectionHOC.tsx
similarity index 100%
rename from src/components/layout/SectionWrapper.tsx
rename to src/components/layout/SectionHOC.tsx
diff --git a/src/components/sectionWrapper.tsx b/src/components/sectionWrapper.tsx
deleted file mode 100644
index 218e7aa..0000000
--- a/src/components/sectionWrapper.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Variants, motion } from 'motion/react';
-import { ComponentType } from 'react';
-import { staggerContainer } from '../utils/motion';
-import { useEffect } from 'react';
-
-const SectionWrapper = (Component: ComponentType, idName: string) => {
-  const WrappedComponent = (props: any) => {
-    useEffect(() => {
-      const sectionTitles = document.querySelectorAll(
-        '.section-title',
-      ) as NodeListOf<HTMLElement>;
-      const sectionTexts = document.querySelectorAll(
-        '.section-text',
-      ) as NodeListOf<HTMLElement>;
-
-      sectionTitles.forEach((sectionTitle) => {
-        // fluidHover(sectionTitle);
-      });
-
-      sectionTexts.forEach((sectionText) => {
-        // fluidHover(sectionText);
-      });
-    }, []);
-    return (
-      <motion.section
-        variants={staggerContainer() as Variants}
-        initial='hidden'
-        whileInView='show'
-        viewport={{ once: true, amount: 0.15 }}
-        className='padding relative z-10 mx-auto max-w-7xl'
-      >
-        <span className='mt-[-100px] block select-none pt-[100px]' id={idName}>
-          &nbsp;
-        </span>
-        <Component {...props} />
-      </motion.section>
-    );
-  };
-
-  WrappedComponent.displayName = `SectionWrapper(${Component.displayName || Component.name || 'Component'})`;
-
-  return WrappedComponent;
-};
-
-export default SectionWrapper;
diff --git a/src/components/works.tsx b/src/components/works.tsx
index 6180b97..56b619e 100644
--- a/src/components/works.tsx
+++ b/src/components/works.tsx
@@ -1,6 +1,6 @@
 import Tilt from 'react-parallax-tilt';
 import { Variants, motion } from 'motion/react';
-import SectionWrapper from '../components/sectionWrapper';
+import { SectionHOC } from '@/components/layout/SectionHOC';
 import { projects } from '../constants/index';
 import { fadeIn, textVariant } from '../utils/motion';
 import Image, { StaticImageData } from 'next/image';
@@ -143,4 +143,4 @@ const Works = () => {
   );
 };
 
-export default SectionWrapper(Works, '');
+export default SectionHOC(Works, '');