Minor refactor, use Utils.renderContent instead of library

ifmeorg · Oct 22, 2024 · 21ff2e0 · 21ff2e0
1 parent 7de4a58
commit 21ff2e0
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 17 deletions.
diff --git a/client/app/components/Header/index.jsx b/client/app/components/Header/index.jsx
@@ -4,7 +4,7 @@ import React, {
 } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
-import renderHTML from 'react-render-html';
+import { Utils } from 'utils';
 import { I18n } from 'libs/i18n';
 import { Logo } from 'components/Logo';
 import { HeaderProfile } from 'components/Header/HeaderProfile';
@@ -106,7 +106,7 @@ export const Header = ({
     <div id="headerMobile" className={css.headerMobileNav}>
       <div>
         {profile ? <HeaderProfile profile={profile} /> : null}
-        {mobileOnly ? renderHTML(mobileOnly) : null}
+        {mobileOnly ? Utils.renderContent(mobileOnly) : null}
         {displayLinks()}
       </div>
     </div>

diff --git a/client/app/components/Input/InputCheckbox.jsx b/client/app/components/Input/InputCheckbox.jsx
@@ -1,11 +1,11 @@
 // @flow
-import React from 'react';
-import type { Node } from 'react';
-import renderHTML from 'react-render-html';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuestion } from '@fortawesome/free-solid-svg-icons';
-import globalCss from 'styles/_global.scss';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from 'components/Tooltip';
+import type { Node } from 'react';
+import React from 'react';
+import globalCss from 'styles/_global.scss';
+import { Utils } from 'utils';
 import css from './Input.scss';
 import type { Checkbox as Props } from './utils';
 
@@ -65,7 +65,7 @@ export const InputCheckbox = (props: Props): Node => {
           && displayUnchecked(name, uncheckedValue)}
         {displayCheckbox(id, name, value, checked, onChange, label)}
         <label className={`${css.checkboxLabel}`} htmlFor={id}>
-          {renderHTML(label)}
+          {Utils.renderContent(label)}
         </label>
       </div>
       {displayInfo(info)}

diff --git a/client/app/components/Input/InputSelect.jsx b/client/app/components/Input/InputSelect.jsx
@@ -1,9 +1,9 @@
 // @flow
-import React, { useState } from 'react';
-import type { Node } from 'react';
-import renderHTML from 'react-render-html';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { Node } from 'react';
+import React, { useState } from 'react';
+import { Utils } from 'utils';
 import css from './Input.scss';
 import type { Option } from './utils';
 
@@ -49,7 +49,7 @@ export function InputSelect({
       >
         {options.map((option: Option) => (
           <option id={option.id} value={option.value} key={option.value}>
-            {renderHTML(option.label)}
+            {Utils.renderContent(option.label)}
           </option>
         ))}
       </select>

diff --git a/client/app/widgets/Comments/index.jsx b/client/app/widgets/Comments/index.jsx
@@ -2,7 +2,6 @@
 import React, { useState } from 'react';
 import type { Node } from 'react';
 import axios from 'axios';
-import renderHTML from 'react-render-html';
 import { I18n } from 'libs/i18n';
 import { StoryBy } from 'components/Story/StoryBy';
 import { StoryDate } from 'components/Story/StoryDate';
@@ -109,7 +108,7 @@ export const Comments = ({ comments, formProps }: Props): Node => {
     const author = <a href={`/profile?uid=${commentByUid}`}>{commentByName}</a>;
     return (
       <article key={id} className={`comment ${css.comment}`}>
-        <div className={css.commentContent}>{renderHTML(comment)}</div>
+        <div className={css.commentContent}>{Utils.renderContent(comment)}</div>
         <StoryDate date={createdAt} />
         <div className={css.commentInfo}>
           <StoryBy avatar={commentByAvatar} author={author} />

diff --git a/client/app/widgets/Notifications/index.jsx b/client/app/widgets/Notifications/index.jsx
@@ -2,7 +2,6 @@
 import React, { useState, useEffect } from 'react';
 import type { Node } from 'react';
 import axios from 'axios';
-import renderHTML from 'react-render-html';
 import { I18n } from 'libs/i18n';
 import Modal from 'components/Modal';
 import { Utils } from 'utils';
@@ -82,7 +81,7 @@ export const Notifications = ({ element, pusher }: Props): Node => {
 
   const displayNotifications = () => (
     <div aria-live="polite">
-      {renderHTML(notifications)}
+      {Utils.renderContent(notifications)}
       <button
         type="button"
         className="buttonDarkS smallMarginTop"