fix: added BASE_URL support

client/api.tsx

@@ -1,10 +1,14 @@
+export function prependBaseUrl(route: string) {
+    return import.meta.env.BASE_URL + (route.startsWith('/') ? route.substring(1) : route)
+}
+
 export const server = {
     async get(url: string) {
-        const res = await fetch(url, { credentials: 'include' })
+        const res = await fetch(prependBaseUrl(url), { credentials: 'include' })
         return await res.json()
     },
     async post<T>(url: string, body?: T) {
-        const res = await fetch(url, {
+        const res = await fetch(prependBaseUrl(url), {
             method: 'POST',
             credentials: 'include',
             headers: {
@@ -16,7 +20,7 @@ export const server = {
         return await res.json()
     },
     async patch<T>(url: string, body?: T) {
-        const res = await fetch(url, {
+        const res = await fetch(prependBaseUrl(url), {
             method: 'PATCH',
             credentials: 'include',
             headers: {

client/components/Header.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'preact-router/match'
 import { isAdministrator, User, UserRole } from '../../shared/model'
+import { prependBaseUrl } from '../api'
 
 const ROLE_LABEL: Record<UserRole, string> = {
     ['admin']: 'Admin',
@@ -15,7 +16,7 @@ type Props = {
 export const Header = ({ user, noLogin }: Props) => (
     <header>
         <div class="logo">
-            <a href="/">PHC / Problemi</a>
+            <a href={prependBaseUrl('/')}>PHC / Problemi</a>
         </div>
         <nav>
             {user ? (

client/components/Problem.tsx

@@ -1,3 +1,4 @@
+import { prependBaseUrl } from '../api'
 import { Markdown } from './Markdown'
 
 type Props = {
@@ -11,7 +12,7 @@ export const Problem = ({ id, content, solutionsCount }: Props) => {
         <div class="problem">
             <div class="problem-header">
                 <div class="problem-title">
-                    <a href={`/problem/${id}`}>Problema {id}</a>
+                    <a href={prependBaseUrl(`/problem/${id}`)}>Problema {id}</a>
                 </div>
             </div>
             <div class="problem-content">

client/components/Solution.tsx

@@ -8,7 +8,7 @@ import {
     SolutionStatus,
     UserId,
 } from '../../shared/model'
-import { server } from '../api'
+import { prependBaseUrl, server } from '../api'
 import { Markdown } from './Markdown'
 import { Select } from './Select'
 
@@ -89,13 +89,14 @@ export const Solution = ({
                     {sentBy && (
                         <>
                             {' '}
-                            di <a href={`/user/${sentBy}`}>@{sentBy}</a>
+                            di <a href={prependBaseUrl(`/user/${sentBy}`)}>@{sentBy}</a>
                         </>
                     )}
                     {forProblem && (
                         <>
                             {' '}
-                            per il <a href={`/problem/${forProblem}`}>Problema {forProblem}</a>
+                            per il{' '}
+                            <a href={prependBaseUrl(`/problem/${forProblem}`)}>Problema {forProblem}</a>
                         </>
                     )}
                     {!isNaN(d as any) && (

client/hooks.tsx

@@ -1,7 +1,7 @@
 import { StateUpdater, useEffect, useState } from 'preact/hooks'
 
 import { createContext } from 'preact'
-import { server } from './api'
+import { prependBaseUrl, server } from './api'
 import { User } from '../shared/model'
 
 type Metadata = {
@@ -13,9 +13,7 @@ export const MetadataContext = createContext<Metadata>({})
 export const ServerContext = createContext<boolean>(false)
 export const ClientContext = createContext<boolean>(false)
 
-type CurrentUserHook = (
-    onLoaded?: (user: User | null) => void
-) => [User | null, () => Promise<void>]
+type CurrentUserHook = (onLoaded?: (user: User | null) => void) => [User | null, () => Promise<void>]
 
 export const useCurrentUser: CurrentUserHook = onLoaded => {
     const [user, setUser] = useState(null)
@@ -49,7 +47,8 @@ export const useResource: ResourceHookFunction = (url, initialValue) => {
     function refresh() {
         const controller = new AbortController()
         const realUrl = typeof url === 'function' ? url() : url
-        fetch(realUrl, { signal: controller.signal })
+
+        fetch(prependBaseUrl(realUrl), { signal: controller.signal })
             .then(res => {
                 if (res.ok) {
                     return res.json()

client/pages/Login.tsx

@@ -7,7 +7,8 @@ export const LoginPage = () => {
     const [username, setUsername] = useState('')
 
     const login = async () => {
-        await fetch(`/api/login`, {
+        // @ts-ignore
+        await fetch(`${import.meta.env.BASE_URL}/api/login`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -30,9 +31,7 @@ export const LoginPage = () => {
                     id="login-username"
                     type="text"
                     value={username}
-                    onInput={e =>
-                        setUsername(e.target instanceof HTMLInputElement ? e.target.value : '')
-                    }
+                    onInput={e => setUsername(e.target instanceof HTMLInputElement ? e.target.value : '')}
                     onKeyDown={e => e.key === 'Enter' && login()}
                 />