Change schema of url environment variables (#1237)

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

package.json

@@ -110,7 +110,7 @@
   "scripts": {
     "start": "cross-env PORT=3001 craco start",
     "start:test": "cross-env REACT_APP_TEST_MODE=true yarn start",
-    "start:for-real-backend": "cross-env REACT_APP_BACKEND_BASE_URL=http://localhost:3000 yarn start",
+    "start:for-real-backend": "cross-env REACT_APP_BACKEND_BASE_URL=http://localhost:3000/ yarn start",
     "serve:build": "http-server build/ -s -p 3001 -P \"http://localhost:3001?\"",
     "build:test": "cross-env REACT_APP_TEST_MODE=true craco build",
     "build:mock": "cross-env craco build",

src/api/auth/index.ts

@@ -10,7 +10,7 @@ import { defaultFetchConfig, expectResponseCode, getApiUrl } from '../utils'
 export const INTERACTIVE_LOGIN_METHODS = ['internal', 'ldap', 'openid']
 
 export const doInternalLogin = async (username: string, password: string): Promise<void> => {
-  const response = await fetch(getApiUrl() + '/auth/internal', {
+  const response = await fetch(getApiUrl() + 'auth/internal', {
     ...defaultFetchConfig,
     method: 'POST',
     body: JSON.stringify({
@@ -23,7 +23,7 @@ export const doInternalLogin = async (username: string, password: string): Promi
 }
 
 export const doInternalRegister = async (username: string, password: string): Promise<void> => {
-  const response = await fetch(getApiUrl() + '/auth/register', {
+  const response = await fetch(getApiUrl() + 'auth/register', {
     ...defaultFetchConfig,
     method: 'POST',
     body: JSON.stringify({
@@ -40,7 +40,7 @@ export const doInternalRegister = async (username: string, password: string): Pr
 }
 
 export const doLdapLogin = async (username: string, password: string): Promise<void> => {
-  const response = await fetch(getApiUrl() + '/auth/ldap', {
+  const response = await fetch(getApiUrl() + 'auth/ldap', {
     ...defaultFetchConfig,
     method: 'POST',
     body: JSON.stringify({
@@ -53,7 +53,7 @@ export const doLdapLogin = async (username: string, password: string): Promise<v
 }
 
 export const doOpenIdLogin = async (openId: string): Promise<void> => {
-  const response = await fetch(getApiUrl() + '/auth/openid', {
+  const response = await fetch(getApiUrl() + 'auth/openid', {
     ...defaultFetchConfig,
     method: 'POST',
     body: JSON.stringify({

src/api/config/index.ts

@@ -8,7 +8,7 @@ import { defaultFetchConfig, expectResponseCode, getApiUrl } from '../utils'
 import { Config } from './types'
 
 export const getConfig = async (): Promise<Config> => {
-  const response = await fetch(getApiUrl() + '/config', {
+  const response = await fetch(getApiUrl() + 'config', {
     ...defaultFetchConfig
   })
   expectResponseCode(response)

src/api/history/index.ts

@@ -8,13 +8,13 @@ import { defaultFetchConfig, expectResponseCode, getApiUrl } from '../utils'
 import { HistoryEntryDto, HistoryEntryPutDto, HistoryEntryUpdateDto } from './types'
 
 export const getHistory = async (): Promise<HistoryEntryDto[]> => {
-  const response = await fetch(getApiUrl() + '/me/history')
+  const response = await fetch(getApiUrl() + 'me/history')
   expectResponseCode(response)
   return await response.json() as Promise<HistoryEntryDto[]>
 }
 
 export const postHistory = async (entries: HistoryEntryPutDto[]): Promise<void> => {
-  const response = await fetch(getApiUrl() + '/me/history', {
+  const response = await fetch(getApiUrl() + 'me/history', {
     ...defaultFetchConfig,
     method: 'POST',
     body: JSON.stringify(entries)
@@ -23,7 +23,7 @@ export const postHistory = async (entries: HistoryEntryPutDto[]): Promise<void>
 }
 
 export const updateHistoryEntryPinStatus = async (noteId: string, entry: HistoryEntryUpdateDto): Promise<void> => {
-  const response = await fetch(getApiUrl() + '/me/history/' + noteId, {
+  const response = await fetch(getApiUrl() + 'me/history/' + noteId, {
     ...defaultFetchConfig,
     method: 'PUT',
     body: JSON.stringify(entry)
@@ -32,7 +32,7 @@ export const updateHistoryEntryPinStatus = async (noteId: string, entry: History
 }
 
 export const deleteHistoryEntry = async (noteId: string): Promise<void> => {
-  const response = await fetch(getApiUrl() + '/me/history/' + noteId, {
+  const response = await fetch(getApiUrl() + 'me/history/' + noteId, {
     ...defaultFetchConfig,
     method: 'DELETE'
   })
@@ -40,7 +40,7 @@ export const deleteHistoryEntry = async (noteId: string): Promise<void> => {
 }
 
 export const deleteHistory = async (): Promise<void> => {
-  const response = await fetch(getApiUrl() + '/me/history', {
+  const response = await fetch(getApiUrl() + 'me/history', {
     ...defaultFetchConfig,
     method: 'DELETE'
   })

src/api/me/index.ts

@@ -9,7 +9,7 @@ import { defaultFetchConfig, expectResponseCode, getApiUrl } from '../utils'
 import { isMockMode } from '../../utils/test-modes'
 
 export const getMe = async (): Promise<UserResponse> => {
-  const response = await fetch(getApiUrl() + `/me${ isMockMode() ? '-get' : '' }`, {
+  const response = await fetch(getApiUrl() + `me${ isMockMode() ? '-get' : '' }`, {
     ...defaultFetchConfig
   })
   expectResponseCode(response)
@@ -17,7 +17,7 @@ export const getMe = async (): Promise<UserResponse> => {
 }
 
 export const updateDisplayName = async (displayName: string): Promise<void> => {
-  const response = await fetch(getApiUrl() + '/me', {
+  const response = await fetch(getApiUrl() + 'me', {
     ...defaultFetchConfig,
     method: 'POST',
     body: JSON.stringify({
@@ -29,7 +29,7 @@ export const updateDisplayName = async (displayName: string): Promise<void> => {
 }
 
 export const changePassword = async (oldPassword: string, newPassword: string): Promise<void> => {
-  const response = await fetch(getApiUrl() + '/me/password', {
+  const response = await fetch(getApiUrl() + 'me/password', {
     ...defaultFetchConfig,
     method: 'POST',
     body: JSON.stringify({
@@ -42,7 +42,7 @@ export const changePassword = async (oldPassword: string, newPassword: string):
 }
 
 export const deleteUser = async (): Promise<void> => {
-  const response = await fetch(getApiUrl() + '/me', {
+  const response = await fetch(getApiUrl() + 'me', {
     ...defaultFetchConfig,
     method: 'DELETE'
   })

src/api/media/index.ts

@@ -8,7 +8,7 @@ import { ImageProxyResponse } from '../../components/markdown-renderer/replace-c
 import { defaultFetchConfig, expectResponseCode, getApiUrl } from '../utils'
 
 export const getProxiedUrl = async (imageUrl: string): Promise<ImageProxyResponse> => {
-  const response = await fetch(getApiUrl() + '/media/proxy', {
+  const response = await fetch(getApiUrl() + 'media/proxy', {
     ...defaultFetchConfig,
     method: 'POST',
     body: JSON.stringify({
@@ -24,7 +24,7 @@ export interface UploadedMedia {
 }
 
 export const uploadFile = async (noteId: string, contentType: string, media: Blob): Promise<UploadedMedia> => {
-  const response = await fetch(getApiUrl() + '/media/upload', {
+  const response = await fetch(getApiUrl() + 'media/upload', {
     ...defaultFetchConfig,
     headers: {
       'Content-Type': contentType,

src/api/notes/index.ts

@@ -11,7 +11,7 @@ import { isMockMode } from '../../utils/test-modes'
 export const getNote = async (noteId: string): Promise<NoteDto> => {
   // The "-get" suffix is necessary, because in our mock api (filesystem) the note id might already be a folder.
   // TODO: [mrdrogdrog] replace -get with actual api route as soon as api backend is ready.
-  const response = await fetch(getApiUrl() + `/notes/${ noteId }${ isMockMode() ? '-get' : '' }`, {
+  const response = await fetch(getApiUrl() + `notes/${ noteId }${ isMockMode() ? '-get' : '' }`, {
     ...defaultFetchConfig
   })
   expectResponseCode(response)
@@ -19,7 +19,7 @@ export const getNote = async (noteId: string): Promise<NoteDto> => {
 }
 
 export const deleteNote = async (noteId: string): Promise<void> => {
-  const response = await fetch(getApiUrl() + `/notes/${ noteId }`, {
+  const response = await fetch(getApiUrl() + `notes/${ noteId }`, {
     ...defaultFetchConfig,
     method: 'DELETE'
   })

src/api/revisions/index.ts

@@ -15,7 +15,7 @@ export const getRevision = async (noteId: string, timestamp: number): Promise<Re
   if (revisionCache.has(cacheKey)) {
     return revisionCache.get(cacheKey)
   }
-  const response = await fetch(getApiUrl() + `/notes/${ noteId }/revisions/${ timestamp }`, {
+  const response = await fetch(getApiUrl() + `notes/${ noteId }/revisions/${ timestamp }`, {
     ...defaultFetchConfig
   })
   expectResponseCode(response)
@@ -26,7 +26,7 @@ export const getRevision = async (noteId: string, timestamp: number): Promise<Re
 
 export const getAllRevisions = async (noteId: string): Promise<RevisionListEntry[]> => {
   // TODO Change 'revisions-list' to 'revisions' as soon as the backend is ready to serve some data!
-  const response = await fetch(getApiUrl() + `/notes/${ noteId }/revisions-list`, {
+  const response = await fetch(getApiUrl() + `notes/${ noteId }/revisions-list`, {
     ...defaultFetchConfig
   })
   expectResponseCode(response)

src/api/tokens/index.ts

@@ -8,7 +8,7 @@ import { defaultFetchConfig, expectResponseCode, getApiUrl } from '../utils'
 import { AccessToken, AccessTokenSecret } from './types'
 
 export const getAccessTokenList = async (): Promise<AccessToken[]> => {
-  const response = await fetch(`${ getApiUrl() }/tokens`, {
+  const response = await fetch(`${ getApiUrl() }tokens`, {
     ...defaultFetchConfig
   })
   expectResponseCode(response)
@@ -16,7 +16,7 @@ export const getAccessTokenList = async (): Promise<AccessToken[]> => {
 }
 
 export const postNewAccessToken = async (label: string): Promise<AccessToken & AccessTokenSecret> => {
-  const response = await fetch(`${ getApiUrl() }/tokens`, {
+  const response = await fetch(`${ getApiUrl() }tokens`, {
     ...defaultFetchConfig,
     method: 'POST',
     body: label
@@ -26,7 +26,7 @@ export const postNewAccessToken = async (label: string): Promise<AccessToken & A
 }
 
 export const deleteAccessToken = async (timestamp: number): Promise<void> => {
-  const response = await fetch(`${ getApiUrl() }/tokens/${ timestamp }`, {
+  const response = await fetch(`${ getApiUrl() }tokens/${ timestamp }`, {
     ...defaultFetchConfig,
     method: 'DELETE'
   })

src/components/application-loader/initializers/fetch-and-set-banner.ts

@@ -11,7 +11,7 @@ export const BANNER_LOCAL_STORAGE_KEY = 'banner.lastModified'
 
 export const fetchAndSetBanner = async (customizeAssetsUrl: string): Promise<void> => {
   const cachedLastModified = window.localStorage.getItem(BANNER_LOCAL_STORAGE_KEY)
-  const bannerUrl = `${ customizeAssetsUrl }/banner.txt`
+  const bannerUrl = `${ customizeAssetsUrl }banner.txt`
 
   if (cachedLastModified) {
     const response = await fetch(bannerUrl, {

src/components/application-loader/initializers/i18n.ts

@@ -19,7 +19,7 @@ export const setUpI18n = async (frontendAssetsUrl: string): Promise<void> => {
       fallbackLng: 'en',
       debug: process.env.NODE_ENV !== 'production',
       backend: {
-        loadPath: `${ frontendAssetsUrl }/locales/{{lng}}.json`
+        loadPath: `${ frontendAssetsUrl }locales/{{lng}}.json`
       },
 
       interpolation: {

src/components/application-loader/initializers/index.ts

@@ -26,7 +26,7 @@ export interface InitTask {
 
 export const createSetUpTaskList = (frontendAssetsUrl: string, customizeAssetsUrl: string, backendBaseUrl: string): InitTask[] => {
   setApiUrl({
-    apiUrl: `${ backendBaseUrl }/api/private`
+    apiUrl: `${ backendBaseUrl }api/private/`
   })
 
   return [{

src/components/intro-page/requests.ts

@@ -7,7 +7,7 @@
 import { defaultFetchConfig, expectResponseCode } from '../../api/utils'
 
 export const fetchFrontPageContent = async (customizeAssetsUrl: string): Promise<string> => {
-  const response = await fetch(customizeAssetsUrl + '/intro.md', {
+  const response = await fetch(customizeAssetsUrl + 'intro.md', {
     ...defaultFetchConfig,
     method: 'GET'
   })

src/components/landing-layout/navigation/sign-in-button.tsx

@@ -30,7 +30,7 @@ export const SignInButton: React.FC<SignInButtonProps> = ({ variant, ...props })
     const activeOneClickProviders = activeProviders.filter(entry => !INTERACTIVE_LOGIN_METHODS.includes(entry))
 
     if (activeProviders.length === 1 && activeOneClickProviders.length === 1) {
-      return `${ getApiUrl() }/auth/${ activeOneClickProviders[0] }`
+      return `${ getApiUrl() }auth/${ activeOneClickProviders[0] }`
     }
     return '/login'
   }, [authProviders])

src/components/profile-page/settings/profile-account-management.tsx

@@ -63,7 +63,7 @@ export const ProfileAccountManagement: React.FC = () => {
       <Card className="bg-dark mb-4">
         <Card.Body>
           <Card.Title><Trans i18nKey="profile.accountManagement"/></Card.Title>
-          <Button variant="secondary" block href={ getApiUrl() + '/me/export' } className="mb-2">
+          <Button variant="secondary" block href={ getApiUrl() + 'me/export' } className="mb-2">
             <ForkAwesomeIcon icon="cloud-download" fixedWidth={ true } className="mx-2"/>
             <Trans i18nKey="profile.exportUserData"/>
           </Button>

src/hooks/common/use-backend-base-url.ts

@@ -5,5 +5,5 @@
  */
 
 export const useBackendBaseUrl = (): string => {
-  return process.env.REACT_APP_BACKEND_BASE_URL ?? '/mock-backend'
+  return process.env.REACT_APP_BACKEND_BASE_URL ?? '/mock-backend/'
 }

src/hooks/common/use-customize-assets-url.ts

@@ -8,5 +8,5 @@ import { useBackendBaseUrl } from './use-backend-base-url'
 
 export const useCustomizeAssetsUrl = (): string => {
   const backendBaseUrl = useBackendBaseUrl()
-  return (process.env.REACT_APP_CUSTOMIZE_ASSETS_URL || `${ backendBaseUrl }/public`)
+  return (process.env.REACT_APP_CUSTOMIZE_ASSETS_URL || `${ backendBaseUrl }public/`)
 }

src/hooks/common/use-frontend-base-url.ts

@@ -11,5 +11,5 @@ export const useFrontendBaseUrl = (): string => {
   const location = window.location
   const cleanedPathName = location.pathname.replace(pathname, '')
 
-  return `${ location.protocol }//${ location.host }${ cleanedPathName }`
+  return `${ location.protocol }//${ location.host }${ cleanedPathName }/`
 }