Fix eslint issues

package.json

@@ -3,9 +3,7 @@
 	"version": "2.0.0",
 	"description": "Hanna Achenbach portfolio",
 	"type": "module",
-
 	"license": "MIT",
-
 	"scripts": {
 		"start": "remix dev",
 		"build": "remix build",

public/data/intro-data.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type {ReactNode} from 'react';
 
 export const tags = [
 	'React',

server.js

@@ -1,4 +1,4 @@
-import { createRequestHandler } from "@remix-run/vercel";
-import * as build from "@remix-run/dev/server-build";
+import {createRequestHandler} from '@remix-run/vercel';
+import * as build from '@remix-run/dev/server-build';
 
-export default createRequestHandler({ build, mode: process.env.NODE_ENV });
+export default createRequestHandler({build, mode: process.env.NODE_ENV});

src/components/molecules/CookieBanner.tsx

@@ -10,7 +10,7 @@ interface CookieBanner {
 	onReject(): void;
 }
 
-export const CookieBanner: FC = () => {
+const CookieBanner: FC = () => {
 	const location = useLocation();
 	const navigate = useNavigate();
 	const {consent, setConsent} = useCookieConsent();
@@ -21,7 +21,7 @@ export const CookieBanner: FC = () => {
 			className={classNames(
 				'min-h-full min-w-full fixed top-0 bottom-0 left-0 right-0 z-50',
 				{
-					' bg-neutral-900/50 dark:bg-netral-300/25':
+					' bg-neutral-900/50 dark:bg-neutral-300/25':
 						location.pathname !== '/cookie-consent',
 				},
 			)}
@@ -36,9 +36,9 @@ export const CookieBanner: FC = () => {
 								<>
 									{' '}
 									-{' '}
-									<Typo.LinkExternal to="/cookie-consent">
+									<Typo.LinkInternal to="/cookie-consent">
 										Read more
-									</Typo.LinkExternal>
+									</Typo.LinkInternal>
 								</>
 							)}
 						</Typo.P>
@@ -68,3 +68,5 @@ export const CookieBanner: FC = () => {
 		</div>
 	);
 };
+
+export default CookieBanner;

src/components/molecules/DarkModeSwitch.tsx

@@ -1,7 +1,7 @@
 import {useGTMDispatch} from '@elgorditosalsero/react-gtm-hook';
 import classNames from 'classnames';
-import {FC} from 'react';
-import {ReactProps} from '~/components';
+import type {FC} from 'react';
+import type {ReactProps} from '~/components';
 import {Typo} from '~/components/primitives/typography';
 import {useTheme} from '~/contexts/ThemeContext';
 

src/components/molecules/FormComponents.tsx

@@ -1,4 +1,4 @@
-import {FC} from 'react';
+import type {FC} from 'react';
 import {input} from '~/components/primitives';
 import {Typo} from '~/components/primitives/typography';
 
@@ -68,7 +68,7 @@ export const RadioGroup: FC<
 > = ({label, options, ...props}) => {
 	return (
 		<>
-			<Typo.span>{label[0]}</Typo.span>
+			<Typo.Span>{label[0]}</Typo.Span>
 			{options.map(({value, label}) => (
 				<div key={value} className="flex flex-row items-center gap-1">
 					<input
@@ -83,7 +83,7 @@ export const RadioGroup: FC<
 					</label>
 				</div>
 			))}
-			<Typo.span>{label[1]}</Typo.span>
+			<Typo.Span>{label[1]}</Typo.Span>
 		</>
 	);
 };

src/components/molecules/HeadlineWithDivider.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import {FC, ReactNode} from 'react';
-import {ReactProps} from '~/components';
+import type {FC, ReactNode} from 'react';
+import type {ReactProps} from '~/components';
 import {HR} from '~/components/primitives';
 import {Typo} from '~/components/primitives/typography';
 /**

src/components/molecules/Layout.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import {ComponentWithChildren} from '~/components';
+import type {ComponentWithChildren} from '~/components';
 
 export const ContainerOuter: ComponentWithChildren = ({
 	children,

src/components/molecules/ScrollPosition.tsx

@@ -0,0 +1,35 @@
+import {useLocation} from '@remix-run/react';
+import type {FC} from 'react';
+import {useCallback, useEffect, useState} from 'react';
+import {useWindow} from '~/contexts/WindowContext';
+
+/**
+ *
+ * @returns a custom component to restore scroll position and make it feel like a single page app
+ */
+export const ScrollPosition: FC = () => {
+	const {pathname} = useLocation();
+	const windowContext = useWindow();
+	const [currentPathname, setCurrentPathname] = useState<string>(pathname);
+
+	const resetScrollPosition = useCallback(
+		(
+			_pathname: string,
+			_currentPathname: string,
+			_windowContext: ReturnType<typeof useWindow>,
+		) => {
+			if (_windowContext && _currentPathname !== _pathname) {
+				debugger;
+				window.scroll(0, _windowContext.pageYOffset);
+				setCurrentPathname(_pathname);
+			}
+		},
+		[],
+	);
+
+	useEffect(() => {
+		resetScrollPosition(pathname, currentPathname, windowContext);
+	}, [pathname, currentPathname, windowContext, resetScrollPosition]);
+
+	return null;
+};

src/components/molecules/SuspenseImage.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
-import {FC, Suspense} from 'react';
+import type {FC} from 'react';
+import {Suspense} from 'react';
 import {Img, resource} from 'react-suspense-img';
-import {ReactProps} from '~/components';
+import type {ReactProps} from '~/components';
 
 export const SuspenseImage: FC<
 	ReactProps & {

src/components/primitives/index.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import {FC} from 'react';
-import {ReactProps} from '~/components';
+import type {FC} from 'react';
+import type {ReactProps} from '~/components';
 
 export const blackBorder = 'border-solid border-bl dark:border-white';
 export const link =

src/components/primitives/typography.tsx

@@ -123,7 +123,7 @@ const P: FC<TypoProps & TypoColorProps> = ({children, ...typoProps}) => {
 		</p>
 	);
 };
-const SPAN: FC<TypoProps & TypoColorProps> = ({children, ...typoProps}) => {
+const Span: FC<TypoProps & TypoColorProps> = ({children, ...typoProps}) => {
 	const className = classNames(
 		'font-thin',
 		commonClassNames(typoProps),
@@ -181,7 +181,7 @@ const LINK_EXTERNAL: FC<
 		</a>
 	);
 };
-const CAPTION: FC<TypoProps & TypoColorProps> = ({children, ...typoProps}) => {
+const Caption: FC<TypoProps & TypoColorProps> = ({children, ...typoProps}) => {
 	const className = classNames(
 		'text-sm font-thin',
 		commonClassNames(typoProps),
@@ -202,8 +202,8 @@ export const Typo = {
 	H4,
 	H5,
 	P,
-	SPAN,
+	Span,
 	LinkInternal: LINK_INTERNAL,
 	LinkExternal: LINK_EXTERNAL,
-	Caption: CAPTION,
+	Caption,
 } as const;

src/contexts/CookieContext.tsx

@@ -1,5 +1,5 @@
 import {createContext, useContext, useEffect, useState} from 'react';
-import {ComponentWithChildren} from '~/components';
+import type {ComponentWithChildren} from '~/components';
 
 interface CookieContext {
 	consent: boolean | null;

src/contexts/ThemeContext.tsx

@@ -1,5 +1,5 @@
 import {createContext, useContext, useEffect, useState} from 'react';
-import {ComponentWithChildren} from '~/components';
+import type {ComponentWithChildren} from '~/components';
 import {useWindow} from '~/contexts/WindowContext';
 import {STORAGE_ITEMS} from '~/utils/constants';
 
@@ -37,7 +37,7 @@ export const ThemeContextProvider: ComponentWithChildren = ({children}) => {
 			setSystemDarkMode(system);
 			let isDarkMode = false;
 			const stored = window.localStorage.getItem(STORAGE_ITEMS.DARK_MODE);
-			if (!!stored) {
+			if (stored) {
 				// setting previously saved in localStorage
 				isDarkMode = JSON.parse(stored ?? 'false');
 			} else {

src/contexts/WindowContext.tsx

@@ -1,13 +1,6 @@
 import debounce from 'just-debounce';
-import {
-	createContext,
-	FC,
-	useContext,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
-import {ComponentWithChildren} from '~/components';
+import {createContext, useContext, useEffect, useMemo, useState} from 'react';
+import type {ComponentWithChildren} from '~/components';
 
 type WindowContext = {
 	width: number;
@@ -37,7 +30,7 @@ export const WindowContextProvider: ComponentWithChildren = ({children}) => {
 			setWindowObject({
 				width: window.innerWidth,
 				height: window.innerHeight,
-				pageYOffset: window.pageYOffset,
+				pageYOffset: window.scrollY,
 			});
 	};
 
@@ -58,7 +51,7 @@ export const WindowContextProvider: ComponentWithChildren = ({children}) => {
 			window.removeEventListener('resize', debouncedHandleResize);
 			window.removeEventListener('scroll', debouncedHandleResize);
 		};
-	}, []); // Empty array ensures that effect is only run on mount
+	}, [debouncedHandleResize]); // Empty array ensures that effect is only run on mount
 
 	return (
 		<WindowContext.Provider value={windowObject}>

src/root.tsx

@@ -14,11 +14,9 @@ import {
 import classNames from 'classnames';
 import dotenv from 'dotenv';
 import type {FC} from 'react';
-import {useEffect, useState} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 import {Helmet} from 'react-helmet';
 import type {ComponentWithChildren} from '~/components';
-import {CookieBanner} from '~/components/molecules/CookieBanner';
-import {SrollPosition} from '~/components/molecules/SrollPosition';
 import {Typo} from '~/components/primitives/typography';
 import tailwindStyles from '~/styles/tailwind.css';
 import {
@@ -27,6 +25,7 @@ import {
 } from '~/contexts/CookieContext';
 import {ThemeContextProvider, useTheme} from '~/contexts/ThemeContext';
 import {WindowContextProvider} from '~/contexts/WindowContext';
+import CookieBanner from './components/molecules/CookieBanner';
 
 const description =
 	'I am a Berlin based frontend engineer and artist coming from a design driven background. On this portfolio you can find my cv and career path, a collection of things I currently love, some of my work and a way to contact me for job offers.';
@@ -65,14 +64,20 @@ const PageViewTracker: FC = () => {
 	const [oldPathname, setOldPathname] = useState<string>('/');
 	const {pathname} = useLocation();
 	const sendDataToGTM = useGTMDispatch();
-	useEffect(() => {
+
+	const trackNavigation = useCallback(() => {
 		sendDataToGTM({
 			'event': 'navigate',
 			'gtm.oldUrl': oldPathname,
 			'gtm.newUrl': pathname,
 		});
 		setOldPathname(pathname);
-	}, [pathname]);
+	}, [oldPathname, pathname, sendDataToGTM]);
+
+	useEffect(() => {
+		trackNavigation();
+	}, [trackNavigation]);
+
 	return null;
 };
 
@@ -131,8 +136,6 @@ const Document: ComponentWithChildren = ({children}) => {
 				{process.env.NODE_ENV === 'development' && <LiveReload />}
 				{children}
 				<Scripts />
-				<SrollPosition />
-				{/* <ScrollRestoration /> */}
 			</body>
 		</html>
 	);
@@ -160,12 +163,14 @@ const GTMErrorTracker: FC<{err: string}> = ({err}) => {
 	const sendDataToGTM = useGTMDispatch();
 	const {pathname} = useLocation();
 	useEffect(() => {
-		sendDataToGTM({
-			'event': 'gtm.pageError',
-			'gtm.errorMessage': err,
-			'gtm.errorUrl': pathname,
-		});
-	}, []);
+		if (err && pathname) {
+			sendDataToGTM({
+				'event': 'gtm.pageError',
+				'gtm.errorMessage': err,
+				'gtm.errorUrl': pathname,
+			});
+		}
+	}, [sendDataToGTM, err, pathname]);
 	return null;
 };