From 6d0dcb50a720cec603ad564d67c387cf196485fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20LUDWIG?= <contact@theoludwig.fr>
Date: Sun, 30 Jul 2023 18:50:14 +0200
Subject: [PATCH] refactor: 'use client' when appropriate

---
 components/Header/Language/index.tsx         | 4 +++-
 components/Header/SwitchTheme.tsx            | 2 ++
 components/OpenSource/Repository.tsx         | 4 ++--
 components/OpenSource/index.tsx              | 6 +++---
 components/Portfolio/PortfolioItem.tsx       | 2 +-
 components/Profile/ProfileList/index.tsx     | 4 +++-
 components/Profile/SocialMediaList/index.tsx | 2 +-
 components/Skills/SkillsSection.tsx          | 2 +-
 components/design/RevealFade.tsx             | 2 ++
 components/design/Section/index.tsx          | 4 ++--
 cypress/component/utils/getAge.cy.ts         | 2 +-
 11 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/components/Header/Language/index.tsx b/components/Header/Language/index.tsx
index 8555cd6..8641e97 100644
--- a/components/Header/Language/index.tsx
+++ b/components/Header/Language/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { useCallback, useEffect, useState, useRef } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
@@ -61,7 +63,7 @@ export const Language: React.FC = () => {
       >
         {i18n.locales.map((language, index) => {
           if (language === currentLanguage) {
-            return null
+            return <></>
           }
           return (
             <li
diff --git a/components/Header/SwitchTheme.tsx b/components/Header/SwitchTheme.tsx
index f5577a7..5fba8be 100644
--- a/components/Header/SwitchTheme.tsx
+++ b/components/Header/SwitchTheme.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect, useState } from 'react'
 import classNames from 'clsx'
 import { useTheme } from 'next-themes'
diff --git a/components/OpenSource/Repository.tsx b/components/OpenSource/Repository.tsx
index 5042b16..7c62e2d 100644
--- a/components/OpenSource/Repository.tsx
+++ b/components/OpenSource/Repository.tsx
@@ -1,5 +1,5 @@
-import { ShadowContainer } from 'components/design/ShadowContainer'
-import { GitHubIcon } from 'components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon'
+import { ShadowContainer } from '@/components/design/ShadowContainer'
+import { GitHubIcon } from '@/components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon'
 
 export interface RepositoryProps {
   name: string
diff --git a/components/OpenSource/index.tsx b/components/OpenSource/index.tsx
index fe90f68..40b9c7e 100644
--- a/components/OpenSource/index.tsx
+++ b/components/OpenSource/index.tsx
@@ -11,7 +11,7 @@ export const OpenSource: React.FC = () => {
       <div className='my-6 grid grid-cols-1 gap-6 md:w-10/12 md:grid-cols-2'>
         <Repository
           name='nodejs/node'
-          description='Node.js JavaScript runtime 🐢🚀'
+          description='Node.js JavaScript runtime ✨🐢🚀✨'
           href='https://github.com/nodejs/node/commits?author=theoludwig'
         />
         <Repository
@@ -21,12 +21,12 @@ export const OpenSource: React.FC = () => {
         />
         <Repository
           name='nrwl/nx'
-          description='Smart, Extensible Build Framework'
+          description='Smart, Fast and Extensible Build System'
           href='https://github.com/nrwl/nx/commits?author=theoludwig'
         />
         <Repository
           name='vercel/next.js'
-          description='The React Framework for Production'
+          description='The React Framework'
           href='https://github.com/vercel/next.js/commits?author=theoludwig'
         />
       </div>
diff --git a/components/Portfolio/PortfolioItem.tsx b/components/Portfolio/PortfolioItem.tsx
index fb0e393..1e29306 100644
--- a/components/Portfolio/PortfolioItem.tsx
+++ b/components/Portfolio/PortfolioItem.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-import { ShadowContainer } from 'components/design/ShadowContainer'
+import { ShadowContainer } from '@/components/design/ShadowContainer'
 
 export interface PortfolioItemProps {
   title: string
diff --git a/components/Profile/ProfileList/index.tsx b/components/Profile/ProfileList/index.tsx
index b1562b3..d19e4ef 100644
--- a/components/Profile/ProfileList/index.tsx
+++ b/components/Profile/ProfileList/index.tsx
@@ -1,7 +1,9 @@
+'use client'
+
 import useTranslation from 'next-translate/useTranslation'
 import { useMemo } from 'react'
 
-import { BIRTH_DATE, BIRTH_DATE_STRING, getAge } from 'utils/getAge'
+import { BIRTH_DATE, BIRTH_DATE_STRING, getAge } from '@/utils/getAge'
 
 import { ProfileItem } from './ProfileItem'
 
diff --git a/components/Profile/SocialMediaList/index.tsx b/components/Profile/SocialMediaList/index.tsx
index 83ddddf..852d03a 100644
--- a/components/Profile/SocialMediaList/index.tsx
+++ b/components/Profile/SocialMediaList/index.tsx
@@ -16,7 +16,7 @@ export const SocialMediaList: React.FC = () => {
       <SocialMediaItem link='https://gitlab.com/theoludwig' ariaLabel='GitLab'>
         <GitLabIcon />
       </SocialMediaItem>
-      <SocialMediaItem link='https://www.npmjs.com/~theoludwig' ariaLabel='NPM'>
+      <SocialMediaItem link='https://www.npmjs.com/~theoludwig' ariaLabel='npm'>
         <NPMIcon />
       </SocialMediaItem>
       <SocialMediaItem
diff --git a/components/Skills/SkillsSection.tsx b/components/Skills/SkillsSection.tsx
index e664ed8..0d97c8e 100644
--- a/components/Skills/SkillsSection.tsx
+++ b/components/Skills/SkillsSection.tsx
@@ -1,4 +1,4 @@
-import { ShadowContainer } from 'components/design/ShadowContainer'
+import { ShadowContainer } from '@/components/design/ShadowContainer'
 
 export interface SkillsSectionProps {
   title: string
diff --git a/components/design/RevealFade.tsx b/components/design/RevealFade.tsx
index 55feeff..2edc144 100644
--- a/components/design/RevealFade.tsx
+++ b/components/design/RevealFade.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect, useRef } from 'react'
 
 export const RevealFade: React.FC<React.PropsWithChildren> = (props) => {
diff --git a/components/design/Section/index.tsx b/components/design/Section/index.tsx
index a2abf15..5b9b144 100644
--- a/components/design/Section/index.tsx
+++ b/components/design/Section/index.tsx
@@ -1,5 +1,5 @@
-import { ShadowContainer } from '../ShadowContainer'
-import { SectionHeading } from './SectionHeading'
+import { ShadowContainer } from '@/components/design/ShadowContainer'
+import { SectionHeading } from '@/components/design/Section/SectionHeading'
 
 type SectionProps = React.ComponentPropsWithRef<'section'> & {
   heading?: string
diff --git a/cypress/component/utils/getAge.cy.ts b/cypress/component/utils/getAge.cy.ts
index 9904c4e..4892afb 100644
--- a/cypress/component/utils/getAge.cy.ts
+++ b/cypress/component/utils/getAge.cy.ts
@@ -1,4 +1,4 @@
-import { getAge } from '../../../utils/getAge'
+import { getAge } from '@/utils/getAge'
 
 describe('utils/getAge', () => {
   it('should calculate the right age of a person', () => {