44 fix issue where refresh loses connection to vm

webdev-prosjekt1/public/.htaccess

@@ -0,0 +1,6 @@
+Options -MultiViews
+RewriteEngine On
+
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^ index.html [L]

webdev-prosjekt1/src/App.tsx

@@ -38,12 +38,18 @@ const readSessionItem = <T,>(key: string): T | null => {
 
 const SEARCH_QUERY_STORAGE_KEY = 'music-wiz-search-query';
 const FILTERS_STORAGE_KEY = 'music-wiz-filters';
+const BASE_PATH = '/project1';
+
+const getRoutePath = () => {
+	const pathname = window.location.pathname;
+	return pathname.startsWith(BASE_PATH) ? pathname.slice(BASE_PATH.length) || '/' : pathname;
+};
 
 function App() {
 	const [query, setQuery] = useState(() => readSessionItem<string>(SEARCH_QUERY_STORAGE_KEY) ?? '');
 	const [isFilterOpen, setIsFilterOpen] = useState(false);
 	const [filters, setFilters] = useState(() => readSessionItem<typeof EMPTY_FILTERS>(FILTERS_STORAGE_KEY) ?? EMPTY_FILTERS);
-	const [currentPath, setCurrentPath] = useState(window.location.pathname);
+	const [currentPath, setCurrentPath] = useState(getRoutePath);
 	const [selectedTrack, setSelectedTrack] = useState<Track | null>(() => readStoredItem<Track>('music-wiz-selected-track'));
 	const [selectedAlbum, setSelectedAlbum] = useState<Album | null>(() => readStoredItem<Album>('music-wiz-selected-album'));
 	const [selectedArtist, setSelectedArtist] = useState<Artist | null>(() => readStoredItem<Artist>('music-wiz-selected-artist'));
@@ -104,7 +110,7 @@ function App() {
 		uri: 'spotify:album:album-id',
 	};
 	useEffect(() => {
-		const handlePopState = () => setCurrentPath(window.location.pathname);
+		const handlePopState = () => setCurrentPath(getRoutePath());
 		window.addEventListener('popstate', handlePopState);
 
 		return () => window.removeEventListener('popstate', handlePopState);
@@ -116,7 +122,7 @@ function App() {
 		sessionStorage.setItem(FILTERS_STORAGE_KEY, JSON.stringify(filters));
 	}, [filters]);
 	const navigateTo = (path: string) => {
-		window.history.pushState({}, '', path);
+		window.history.pushState({}, '', `${BASE_PATH}${path}`);
 		setCurrentPath(path);
 	};
 	const handleSearch = (nextQuery: string) => setQuery(nextQuery);

webdev-prosjekt1/src/components/Header.tsx

@@ -3,13 +3,15 @@ import '../variables.css';
 import type { MouseEvent } from 'react';
 import logoImage from '../assets/music-wiz-logo.png';
 
+const BASE_PATH = '/project1';
+
 type HeaderProps = {
 	onHome?: () => void;
 };
 
 export const Header = ({ onHome }: HeaderProps) => {
 	const navigateTo = (path: string) => {
-		window.history.pushState({}, '', path);
+		window.history.pushState({}, '', `${BASE_PATH}${path}`);
 		window.dispatchEvent(new PopStateEvent('popstate'));
 	};
 	const handleHomeClick = (event: MouseEvent<HTMLAnchorElement>) => {
@@ -24,7 +26,7 @@ export const Header = ({ onHome }: HeaderProps) => {
 
 	return (
 		<header className='main-header'>
-			<a className='app-title' href='/' onClick={handleHomeClick}>
+			<a className='app-title' href={`${BASE_PATH}/`} onClick={handleHomeClick}>
 				<figure className='app-logo-wrapper'>
 					<img className='app-logo' src={logoImage} alt='' />
 				</figure>
@@ -33,7 +35,7 @@ export const Header = ({ onHome }: HeaderProps) => {
 					<h3 className='header-note'>Your personal music magician</h3>
 				</span>
 			</a>
-			<a className='favorites-link' href='/favorites' onClick={handleFavoritesClick}>Favorites</a>
+			<a className='favorites-link' href={`${BASE_PATH}/favorites`} onClick={handleFavoritesClick}>Favorites</a>
 		</header>
 	);
 };

webdev-prosjekt1/vite.config.ts

@@ -4,10 +4,11 @@ import { defineConfig } from 'vitest/config'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [
-    react(),
-    babel({ presets: [reactCompilerPreset()] })
-  ],
+	plugins: [
+		react(),
+		babel({ presets: [reactCompilerPreset()] }),
+	],
+	base: '/project1/',
   test: {
     environment: 'jsdom',
     setupFiles: './src/test/setup.ts',