refactor: added support for base url using a shared function

client/App.tsx

@@ -1,7 +1,8 @@
 import Router from 'preact-router'
 import { route } from 'preact-router'
 import { useContext, useEffect } from 'preact/hooks'
-import { prependBaseUrl } from './api'
+import { prependBaseUrl } from '../shared/utils'
+
 import { ServerContext } from './hooks'
 import { UserProvider } from './hooks/useCurrentUser'
 

client/api.tsx

@@ -1,8 +1,4 @@
-// TODO: move to `shared/` and distinguish client and server (fix imports)
-
-export function prependBaseUrl(route: string) {
-    return import.meta.env.BASE_URL + (route.startsWith('/') ? route.substring(1) : route)
-}
+import { prependBaseUrl } from '../shared/utils'
 
 export const server = {
     async get(url: string) {

client/components/Header.tsx

@@ -1,13 +1,9 @@
 import { Link } from 'preact-router/match'
+
 import { isAdministrator } from '../../shared/model'
-import { prependBaseUrl } from '../api'
-import { useCurrentUser } from '../hooks/useCurrentUser'
+import { prependBaseUrl } from '../../shared/utils'
 
-// const ROLE_LABEL: Record<UserRole, string> = {
-//     ['admin']: 'Admin',
-//     ['moderator']: 'Moderatore',
-//     ['student']: 'Studente',
-// }
+import { useCurrentUser } from '../hooks/useCurrentUser'
 
 export const Header = ({}) => {
     const [user] = useCurrentUser()

client/hooks.tsx

@@ -1,7 +1,7 @@
 import { StateUpdater, useEffect, useState } from 'preact/hooks'
 
 import { createContext } from 'preact'
-import { prependBaseUrl } from './api'
+import { prependBaseUrl } from '../shared/utils'
 
 type Metadata = {
     title?: string

client/hooks/useCurrentUser.tsx

@@ -1,7 +1,9 @@
 import { ComponentChildren, createContext, JSX } from 'preact'
 import { StateUpdater, useContext, useEffect, useState } from 'preact/hooks'
 import { User } from '../../shared/model'
-import { prependBaseUrl, server } from '../api'
+
+import { server } from '../api'
+import { prependBaseUrl } from '../../shared/utils'
 
 type UserContextValue = {
     ready: boolean

client/pages/AdminPage.tsx

@@ -1,8 +1,10 @@
 import { route } from 'preact-router'
 import { useState } from 'preact/hooks'
 import { isAdministrator, Solution as SolutionModel, SolutionId, User as UserModel } from '../../shared/model'
-import { sortByStringKey } from '../../shared/utils'
-import { prependBaseUrl, server } from '../api'
+
+import { server } from '../api'
+import { prependBaseUrl, sortByStringKey } from '../../shared/utils'
+
 import { Header } from '../components/Header'
 import { MarkdownEditor } from '../components/MarkdownEditor'
 import { Select } from '../components/Select'

client/pages/LoginPage.tsx

@@ -1,4 +1,5 @@
-import { prependBaseUrl } from '../api.js'
+import { prependBaseUrl } from '../../shared/utils'
+
 import { Header } from '../components/Header.jsx'
 
 export const LoginPage = () => {
@@ -7,7 +8,9 @@ export const LoginPage = () => {
             <Header />
             <main class="page-login">
                 <div class="fill">
-                    <a class="button" role="button" href={prependBaseUrl('/auth/redirect')} data-native>Accedi con Ateneo</a>
+                    <a class="button" role="button" href={prependBaseUrl('/auth/redirect')} data-native>
+                        Accedi con Ateneo
+                    </a>
                 </div>
             </main>
         </>

client/pages/ProblemPage.tsx

@@ -1,7 +1,8 @@
 import { route } from 'preact-router'
 import { useContext, useEffect, useState } from 'preact/hooks'
 import { isAdministrator, Problem as ProblemModel, Solution as SolutionModel } from '../../shared/model'
-import { prependBaseUrl, server } from '../api'
+import { prependBaseUrl } from '../../shared/utils'
+import { server } from '../api'
 import { Header } from '../components/Header'
 import { MarkdownEditor } from '../components/MarkdownEditor'
 import { Problem } from '../components/Problem'

client/pages/ProfilePage.tsx

@@ -1,7 +1,7 @@
 import { route } from 'preact-router'
 import { isAdministrator, Solution as SolutionModel, User } from '../../shared/model'
 import { sortByStringKey } from '../../shared/utils'
-import { prependBaseUrl } from '../api'
+import { prependBaseUrl } from '../../shared/utils'
 import { Header } from '../components/Header'
 import { Solution } from '../components/Solution'
 import { useResource } from '../hooks'

server/auth.ts

@@ -4,6 +4,7 @@ import fetch from 'node-fetch'
 import { DatabaseConnection, getUser, createUser } from './db/database'
 import { UserId } from '../shared/model'
 import { SessionService } from './routes'
+import { prependBaseUrl } from '../shared/utils'
 
 export function setupOAuth(r: Router, db: DatabaseConnection, sessions: SessionService) {
     const config = {
@@ -80,10 +81,10 @@ export function setupOAuth(r: Router, db: DatabaseConnection, sessions: SessionS
 
             res.cookie('sid', sessions.createSession(authUser.id), { maxAge: 1000 * 60 * 60 * 24 * 7 })
 
-            return res.status(200).redirect('/')
+            return res.status(200).redirect(prependBaseUrl('/'))
         } catch (error) {
             console.error('Access Token Error', error.message)
-            return res.status(500).redirect(`/error?message=${encodeURIComponent('Autenticazione fallita')}`)
+            return res.status(500).redirect(prependBaseUrl(`/error?message=${encodeURIComponent('Autenticazione fallita')}`))
         }
     })
 }

shared/utils.ts

@@ -28,3 +28,19 @@ function sortByKey<T, K>(compareFn: (a: K, b: K) => number, items: T[], keyFn: (
     sortedList.sort((a, b) => order * compareFn(keyFn(a), keyFn(b)))
     return sortedList
 }
+
+//
+// Base Url
+//
+
+export function prependBaseUrl(route: string) {
+    // @ts-ignore
+    if (typeof window === 'undefined') {
+        // NodeJS
+        return process.env.BASE_URL + (route.startsWith('/') ? route.substring(1) : route)
+    } else {
+        // Browser
+        // @ts-ignore
+        return import.meta.env.BASE_URL + (route.startsWith('/') ? route.substring(1) : route)
+    }
+}