Properly replacing link keys (%%key%%) in localized exercise/assignment specifications.

Author: krulis-martin

src/components/Exercises/ExerciseDetail/ExerciseDetail.js

@@ -22,7 +22,7 @@ import Icon, {
   TagIcon,
   VisibleIcon,
 } from '../../icons';
-import { getLocalizedDescription } from '../../../helpers/localizedData.js';
+import { getLocalizedDescription, replaceLinkKeysWithUrls } from '../../../helpers/localizedData.js';
 import { LocalizedExerciseName } from '../../helpers/LocalizedNames';
 import EnvironmentsList from '../../helpers/EnvironmentsList';
 import Version from '../../widgets/Version/Version.js';
@@ -33,13 +33,13 @@ const ExerciseDetail = ({
   authorId,
   adminsIds = [],
   groupsIds = [],
-  description = '',
   difficulty,
   createdAt,
   updatedAt,
   version,
   forkedFrom = null,
   localizedTexts,
+  localizedTextsLinks,
   runtimeEnvironments,
   tags,
   isPublic,
@@ -105,7 +105,9 @@ const ExerciseDetail = ({
             </span>
           </th>
           <td>
-            <Markdown source={getLocalizedDescription({ description, localizedTexts }, locale)} />
+            <Markdown
+              source={replaceLinkKeysWithUrls(getLocalizedDescription({ localizedTexts }, locale), localizedTextsLinks)}
+            />
           </td>
         </tr>
 
@@ -276,17 +278,16 @@ const ExerciseDetail = ({
 
 ExerciseDetail.propTypes = {
   id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
   authorId: PropTypes.string.isRequired,
   adminsIds: PropTypes.array,
   groupsIds: PropTypes.array,
   difficulty: PropTypes.string.isRequired,
-  description: PropTypes.string,
   createdAt: PropTypes.number.isRequired,
   updatedAt: PropTypes.number.isRequired,
   version: PropTypes.number.isRequired,
   forkedFrom: PropTypes.object,
   localizedTexts: PropTypes.array.isRequired,
+  localizedTextsLinks: PropTypes.object,
   runtimeEnvironments: PropTypes.array.isRequired,
   tags: PropTypes.array.isRequired,
   isPublic: PropTypes.bool.isRequired,

src/components/helpers/ExternalLinkPreview/ExternalLinkPreview.js

@@ -7,6 +7,7 @@ import { LoadingIcon } from '../../icons';
 import Markdown from '../../widgets/Markdown';
 import InsetPanel from '../../widgets/InsetPanel';
 import Callout from '../../widgets/Callout';
+import { replaceLinkKeysWithUrls } from '../../../helpers/localizedData.js';
 
 class ExternalLinkPreview extends Component {
   state = {
@@ -115,6 +116,7 @@ class ExternalLinkPreview extends Component {
 
   render() {
     const { url, pending, error, text, isMarkdown } = this.state;
+    const { localizedTextsLinks } = this.props;
     return url !== null ? (
       <div>
         {text && (
@@ -138,7 +140,15 @@ class ExternalLinkPreview extends Component {
 
         {error && <Callout variant="warning">{error}</Callout>}
 
-        {text && <div>{isMarkdown ? <Markdown source={text} /> : <pre style={{ marginTop: '20px' }}>{text}</pre>}</div>}
+        {text && (
+          <div>
+            {isMarkdown ? (
+              <Markdown source={replaceLinkKeysWithUrls(text, localizedTextsLinks)} />
+            ) : (
+              <pre className="mt-3">{replaceLinkKeysWithUrls(text, localizedTextsLinks)}</pre>
+            )}
+          </div>
+        )}
       </div>
     ) : (
       <div />
@@ -148,6 +158,7 @@ class ExternalLinkPreview extends Component {
 
 ExternalLinkPreview.propTypes = {
   url: PropTypes.string.isRequired,
+  localizedTextsLinks: PropTypes.object,
 };
 
 export default ExternalLinkPreview;

src/components/helpers/LocalizedTexts/LocalizedTexts.js

@@ -8,12 +8,12 @@ import Icon from '../../icons';
 import Markdown from '../../widgets/Markdown';
 import Callout from '../../widgets/Callout';
 import InsetPanel from '../../widgets/InsetPanel';
-import { knownLocales } from '../../../helpers/localizedData.js';
+import { knownLocales, replaceLinkKeysWithUrls } from '../../../helpers/localizedData.js';
 import { UrlContext } from '../../../helpers/contexts.js';
 
 import './LocalizedTexts.css';
 
-const LocalizedTexts = ({ locales = [], noLocalesMessage = null }) => {
+const LocalizedTexts = ({ locales = [], noLocalesMessage = null, localizedTextsLinks = null }) => {
   const localeTabs = knownLocales
     .map(locale => locales.find(l => l.locale === locale))
     .filter(tabData => tabData && (tabData.text || tabData.link || tabData.studentHint));
@@ -70,7 +70,7 @@ const LocalizedTexts = ({ locales = [], noLocalesMessage = null }) => {
                       </div>
                     )}
 
-                    {text.trim() !== '' && <Markdown source={text} />}
+                    {text.trim() !== '' && <Markdown source={replaceLinkKeysWithUrls(text, localizedTextsLinks)} />}
 
                     {!text.trim() && !link && (
                       <Callout variant="warning" className="m-3">
@@ -87,7 +87,7 @@ const LocalizedTexts = ({ locales = [], noLocalesMessage = null }) => {
                       <h4>
                         <FormattedMessage id="app.localizedTexts.studentHintHeading" defaultMessage="Hint" />
                       </h4>
-                      <Markdown source={studentHint} />
+                      <Markdown source={replaceLinkKeysWithUrls(studentHint, localizedTextsLinks)} />
                     </Card.Footer>
                   )}
                 </Tab.Pane>
@@ -108,6 +108,7 @@ LocalizedTexts.propTypes = {
     })
   ),
   noLocalesMessage: PropTypes.any,
+  localizedTextsLinks: PropTypes.object,
 };
 
 export default LocalizedTexts;

src/helpers/localizedData.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { API_BASE } from './config.js';
+
 export const knownLocalesNames = {
   cs: 'Čeština',
   en: 'English',
@@ -97,7 +99,7 @@ export const transformLocalizedTextsFormData = formData => {
 
 /**
  * Global template for localizedTexts validation.
- * Internal validation for different sets of properties is injedted as function.
+ * Internal validation for different sets of properties is injected as function.
  * @param errors {object} redux-form validation error object, where errors are collected
  * @param formData {array} localizedTexts form data
  * @param internalValidation {function} injected internal validator called on every enabled localized text
@@ -118,7 +120,7 @@ export const validateLocalizedTextsFormData = (errors, formData, internalValidat
     );
   }
 
-  // Internally validate all enabled verisons...
+  // Internally validate all enabled versions...
   const localizedTextsErrors = [];
   let localizedTextsErrorsCount = 0;
   formData
@@ -136,3 +138,16 @@ export const validateLocalizedTextsFormData = (errors, formData, internalValidat
 
   return errors;
 };
+
+export const replaceLinkKeysWithUrls = (text, linksMap) => {
+  if (!linksMap) {
+    return text;
+  }
+
+  let replacedText = text;
+  Object.keys(linksMap).forEach(linkKey => {
+    const url = API_BASE + '/uploaded-files/link/' + linksMap[linkKey];
+    replacedText = replacedText.replaceAll(`%%${linkKey}%%`, url);
+  });
+  return replacedText;
+};

src/pages/Assignment/Assignment.js

@@ -170,7 +170,10 @@ class Assignment extends Component {
 
                     {assignment.localizedTexts.length > 0 && (
                       <div>
-                        <LocalizedTexts locales={assignment.localizedTexts} />
+                        <LocalizedTexts
+                          locales={assignment.localizedTexts}
+                          localizedTextsLinks={assignment.localizedTextsLinks}
+                        />
                       </div>
                     )}
                   </Col>

src/pages/Exercise/Exercise.js

@@ -161,7 +161,14 @@ class Exercise extends Component {
             <Row>
               <Col xl={6}>
                 <ExerciseDetail {...exercise} forkedFrom={forkedFrom} locale={locale} className="d-flex d-xl-none" />
-                <div>{exercise.localizedTexts.length > 0 && <LocalizedTexts locales={exercise.localizedTexts} />}</div>
+                <div>
+                  {exercise.localizedTexts.length > 0 && (
+                    <LocalizedTexts
+                      locales={exercise.localizedTexts}
+                      localizedTextsLinks={exercise.localizedTextsLinks}
+                    />
+                  )}
+                </div>
               </Col>
               <Col xl={6}>
                 <ExerciseDetail {...exercise} forkedFrom={forkedFrom} locale={locale} className="d-none d-xl-flex" />