diff --git a/webdev-prosjekt1/public/.htaccess b/webdev-prosjekt1/public/.htaccess new file mode 100644 index 0000000..4c97969 --- /dev/null +++ b/webdev-prosjekt1/public/.htaccess @@ -0,0 +1,6 @@ +Options -MultiViews +RewriteEngine On + +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_FILENAME} !-d +RewriteRule ^ index.html [L] diff --git a/webdev-prosjekt1/src/App.tsx b/webdev-prosjekt1/src/App.tsx index 3723933..2edea47 100644 --- a/webdev-prosjekt1/src/App.tsx +++ b/webdev-prosjekt1/src/App.tsx @@ -38,12 +38,18 @@ const readSessionItem = (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(SEARCH_QUERY_STORAGE_KEY) ?? ''); const [isFilterOpen, setIsFilterOpen] = useState(false); const [filters, setFilters] = useState(() => readSessionItem(FILTERS_STORAGE_KEY) ?? EMPTY_FILTERS); - const [currentPath, setCurrentPath] = useState(window.location.pathname); + const [currentPath, setCurrentPath] = useState(getRoutePath); const [selectedTrack, setSelectedTrack] = useState(() => readStoredItem('music-wiz-selected-track')); const [selectedAlbum, setSelectedAlbum] = useState(() => readStoredItem('music-wiz-selected-album')); const [selectedArtist, setSelectedArtist] = useState(() => readStoredItem('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); diff --git a/webdev-prosjekt1/src/components/Header.tsx b/webdev-prosjekt1/src/components/Header.tsx index e2a9bc4..5572275 100644 --- a/webdev-prosjekt1/src/components/Header.tsx +++ b/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) => { @@ -24,7 +26,7 @@ export const Header = ({ onHome }: HeaderProps) => { return (
- +
@@ -33,7 +35,7 @@ export const Header = ({ onHome }: HeaderProps) => {

Your personal music magician

- Favorites + Favorites
); }; \ No newline at end of file diff --git a/webdev-prosjekt1/vite.config.ts b/webdev-prosjekt1/vite.config.ts index aa8cc65..c489a45 100644 --- a/webdev-prosjekt1/vite.config.ts +++ b/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',