Fix broken links for share dialog and avatar images (#1249)

src/components/document-read-only-page/document-infobar.tsx

@@ -14,6 +14,7 @@ import {
   DocumentInfoTimeLine
 } from '../editor-page/document-bar/document-info/document-info-time-line'
 import './document-infobar.scss'
+import { useCustomizeAssetsUrl } from '../../hooks/common/use-customize-assets-url'
 
 export interface DocumentInfobarProps {
   changedAuthor: string
@@ -35,6 +36,7 @@ export const DocumentInfobar: React.FC<DocumentInfobarProps> = ({
   viewCount
 }) => {
   const { t } = useTranslation()
+  const assetsBaseUrl = useCustomizeAssetsUrl()
 
   return (
     <div className={ 'd-flex flex-row my-3 document-infobar' }>
@@ -45,12 +47,12 @@ export const DocumentInfobar: React.FC<DocumentInfobarProps> = ({
             mode={ DocumentInfoLineWithTimeMode.CREATED }
             time={ createdTime }
             userName={ createdAuthor }
-            profileImageSrc={ '/img/avatar.png' }/>
+            profileImageSrc={ `${ assetsBaseUrl }/img/avatar.png` }/>
           <DocumentInfoTimeLine
             mode={ DocumentInfoLineWithTimeMode.EDITED }
             time={ changedTime }
             userName={ changedAuthor }
-            profileImageSrc={ '/img/avatar.png' }/>
+            profileImageSrc={ `${ assetsBaseUrl }/img/avatar.png` }/>
           <hr/>
         </div>
         <span className={ 'ml-auto' }>

src/components/editor-page/document-bar/document-info/document-info-modal.tsx

@@ -12,6 +12,7 @@ import { CommonModal } from '../../../common/modals/common-modal'
 import { DocumentInfoLine } from './document-info-line'
 import { DocumentInfoLineWithTimeMode, DocumentInfoTimeLine } from './document-info-time-line'
 import { UnitalicBoldText } from './unitalic-bold-text'
+import { useCustomizeAssetsUrl } from '../../../../hooks/common/use-customize-assets-url'
 
 export interface DocumentInfoModalProps {
   show: boolean,
@@ -19,6 +20,9 @@ export interface DocumentInfoModalProps {
 }
 
 export const DocumentInfoModal: React.FC<DocumentInfoModalProps> = ({ show, onHide }) => {
+  const assetsBaseUrl = useCustomizeAssetsUrl()
+
+  // TODO Replace hardcoded mock data with real/mock API requests
   return (
     <CommonModal
       show={ show }
@@ -34,7 +38,7 @@ export const DocumentInfoModal: React.FC<DocumentInfoModalProps> = ({ show, onHi
               time={ DateTime.local()
                              .minus({ days: 11 }) }
               userName={ 'Tilman' }
-              profileImageSrc={ '/img/avatar.png' }/>
+              profileImageSrc={ `${ assetsBaseUrl }img/avatar.png` }/>
           </ListGroup.Item>
           <ListGroup.Item>
             <DocumentInfoTimeLine
@@ -43,7 +47,7 @@ export const DocumentInfoModal: React.FC<DocumentInfoModalProps> = ({ show, onHi
               time={ DateTime.local()
                              .minus({ minutes: 3 }) }
               userName={ 'Philip' }
-              profileImageSrc={ '/img/avatar.png' }/>
+              profileImageSrc={ `${ assetsBaseUrl }img/avatar.png` }/>
           </ListGroup.Item>
           <ListGroup.Item>
             <DocumentInfoLine icon={ 'users' } size={ '2x' }>

src/components/editor-page/document-bar/share/share-modal.tsx

@@ -38,17 +38,17 @@ export const ShareModal: React.FC<ShareModalProps> = ({ show, onHide }) => {
       titleI18nKey={ 'editor.modal.shareLink.title' }>
       <Modal.Body>
         <Trans i18nKey={ 'editor.modal.shareLink.editorDescription' }/>
-        <CopyableField content={ `${ baseUrl }/n/${ id }?${ editorMode }` } nativeShareButton={ true }
+        <CopyableField content={ `${ baseUrl }n/${ id }?${ editorMode }` } nativeShareButton={ true }
-                       url={ `${ baseUrl }/n/${ id }?${ editorMode }` }/>
+                       url={ `${ baseUrl }n/${ id }?${ editorMode }` }/>
         <ShowIf condition={ noteFrontmatter.type === NoteType.SLIDE }>
           <Trans i18nKey={ 'editor.modal.shareLink.slidesDescription' }/>
-          <CopyableField content={ `${ baseUrl }/p/${ id }` } nativeShareButton={ true }
+          <CopyableField content={ `${ baseUrl }p/${ id }` } nativeShareButton={ true }
-                         url={ `${ baseUrl }/p/${ id }` }/>
+                         url={ `${ baseUrl }p/${ id }` }/>
         </ShowIf>
         <ShowIf condition={ noteFrontmatter.type === '' }>
           <Trans i18nKey={ 'editor.modal.shareLink.viewOnlyDescription' }/>
-          <CopyableField content={ `${ baseUrl }/s/${ id }` } nativeShareButton={ true }
+          <CopyableField content={ `${ baseUrl }s/${ id }` } nativeShareButton={ true }
-                         url={ `${ baseUrl }/s/${ id }` }/>
+                         url={ `${ baseUrl }s/${ id }` }/>
         </ShowIf>
       </Modal.Body>
     </CommonModal>