refactor(ui): No need to compute fields before displaying them

dataesr · Nov 27, 2023 · b41a46f · b41a46f
1 parent e1620f4
commit b41a46f
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 59 deletions.
diff --git a/client/src/pages/index.jsx b/client/src/pages/index.jsx
@@ -18,13 +18,7 @@ import { PageSpinner } from '../components/spinner';
 import DatasetsTab from './datasetsTab';
 import Filters from './filters';
 import PublicationsTab from './publicationsTab';
-import {
-  getAllIdsHtmlField,
-  getAffiliationsHtmlField,
-  getAffiliationsTooltipField,
-  getAuthorsHtmlField,
-  getAuthorsTooltipField,
-} from '../utils/templates';
+import { getAffiliationsHtmlField, getAffiliationsTooltipField } from '../utils/templates';
 import { getData } from '../utils/works';
 import { status } from '../config';
 
@@ -83,19 +77,13 @@ export default function Home() {
           ...dataset,
           affiliationsHtml: getAffiliationsHtmlField(dataset, regexp),
           affiliationsTooltip: getAffiliationsTooltipField(dataset),
-          allIdsHtml: getAllIdsHtmlField(dataset),
-          authorsHtml: getAuthorsHtmlField(dataset),
-          authorsTooltip: getAuthorsTooltipField(dataset),
           status: status.tobedecided.id,
         }));
       const allPublicationsTmp = data.publications.results
         .map((publication) => ({
           ...publication,
           affiliationsHtml: getAffiliationsHtmlField(publication, regexp),
           affiliationsTooltip: getAffiliationsTooltipField(publication),
-          allIdsHtml: getAllIdsHtmlField(publication),
-          authorsHtml: getAuthorsHtmlField(publication),
-          authorsTooltip: getAuthorsTooltipField(publication),
           status: status.tobedecided.id,
         }));
       setAllAffiliations(allAffiliationsTmp);

diff --git a/client/src/pages/worksView.jsx b/client/src/pages/worksView.jsx
@@ -37,13 +37,13 @@ export default function WorksView({
     >
       <Column selectionMode="multiple" />
       <Column field="status" header="Status" body={statusTemplate} />
-      <Column field="allIdsHtml" header="Ids" body={allIdsTemplate} filter filterMatchMode="contains" filterPlaceholder="Search by id" />
+      <Column field="allIds" header="Ids" body={allIdsTemplate} filter filterMatchMode="contains" filterPlaceholder="Search by id" />
       <Column field="datasource" header="Source" body={datasourceTemplate} />
       <Column field="type" header="Type" />
       <Column field="year" header="Year" />
       <Column field="journal_name" header="Journal" />
       <Column field="affiliationsHtml" header="Affiliations" body={affiliationsTemplate} />
-      <Column field="authorsHtml" header="Authors" body={authorsTemplate} filter filterField="authorsTooltip" filterMatchMode="contains" filterPlaceholder="Search by author" style={{ minWidth: '10px' }} />
+      <Column field="authors" header="Authors" body={authorsTemplate} filter filterMatchMode="contains" filterPlaceholder="Search by author" style={{ minWidth: '10px' }} />
       <Column field="title" header="Title" filter filterMatchMode="contains" showFilterMenu={false} filterPlaceholder="Search by title" style={{ minWidth: '10px' }} />
     </DataTable>
   );

diff --git a/client/src/utils/templates.jsx b/client/src/utils/templates.jsx
@@ -15,20 +15,41 @@ const affiliationsTemplate = (rowData) => (
   </>
 );
 
-const allIdsTemplate = (rowData) => <span dangerouslySetInnerHTML={{ __html: rowData.allIdsHtml }} />;
+const allIdsTemplate = (rowData) => {
+  let html = '<ul>';
+  rowData.allIds.forEach((id) => {
+    html += `<li key="${id.id_value}">${id.id_type}: `;
+    const idLink = getIdLink(id.id_type, id.id_value);
+    html += idLink ? `<a target="_blank" href="${idLink}">${id.id_value}</a>` : `<span>${id.id_value}</span>`;
+    html += '</li>';
+  });
+  html += '</ul>';
+  return <span dangerouslySetInnerHTML={{ __html: html }} />;
+};
 
-const authorsTemplate = (rowData) => (
-  <>
-    <span dangerouslySetInnerHTML={{ __html: rowData.authorsHtml }} />
-    <Tooltip id={`tooltip-author-${rowData.id}`}>
-      <span dangerouslySetInnerHTML={{ __html: rowData.authorsTooltip }} />
-    </Tooltip>
-  </>
-);
+const authorsTemplate = (rowData) => {
+  let authorsHtml = `<ul data-tooltip-id="tooltip-author-${rowData.id}">`;
+  authorsHtml += rowData.authors.slice(0, 3).map((author, index) => `<li key="author-${rowData.id}-${index}">${author}</li>`).join('');
+  if (rowData.authors.length > 3) {
+    authorsHtml += `<li>et al. (${rowData.authors.length - 3})</li>`;
+  }
+  authorsHtml += '</ul>';
+  let authorsTooltip = '<ul>';
+  authorsTooltip += rowData.authors.map((author, index) => `<li key="tooltip-author-${rowData.id}-${index}">${author}</li>`).join('');
+  authorsTooltip += '</ul>';
+  return (
+    <>
+      <span dangerouslySetInnerHTML={{ __html: authorsHtml }} />
+      <Tooltip id={`tooltip-author-${rowData.id}`}>
+        <span dangerouslySetInnerHTML={{ __html: authorsTooltip }} />
+      </Tooltip>
+    </>
+  );
+};
 
 const datasourceTemplate = (rowData) => {
-  const tmp = `<ul>${rowData.datasource.map((source) => `<li key="source-${source}">${source}</li>`).join('')}</ul>`;
-  return <span dangerouslySetInnerHTML={{ __html: tmp }} />;
+  const html = `<ul>${rowData.datasource.map((source) => `<li key="source-${source}">${source}</li>`).join('')}</ul>`;
+  return <span dangerouslySetInnerHTML={{ __html: html }} />;
 };
 
 const getAffiliationsHtmlField = (rowData, regexp) => {
@@ -54,35 +75,6 @@ const getAffiliationsTooltipField = (rowData) => {
   return html;
 };
 
-const getAllIdsHtmlField = (rowData) => {
-  let html = '<ul>';
-  rowData.allIds.forEach((id) => {
-    html += `<li key="${id.id_value}">${id.id_type}: `;
-    const idLink = getIdLink(id.id_type, id.id_value);
-    html += idLink ? `<a target="_blank" href="${idLink}">${id.id_value}</a>` : `<span>${id.id_value}</span>`;
-    html += '</li>';
-  });
-  html += '</ul>';
-  return html;
-};
-
-const getAuthorsHtmlField = (rowData) => {
-  let html = `<ul data-tooltip-id="tooltip-author-${rowData.id}">`;
-  html += rowData.authors.slice(0, 3).map((author, index) => `<li key="author-${rowData.id}-${index}">${author}</li>`).join('');
-  if (rowData.authors.length > 3) {
-    html += `<li>et al. (${rowData.authors.length - 3})</li>`;
-  }
-  html += '</ul>';
-  return html;
-};
-
-const getAuthorsTooltipField = (rowData) => {
-  let html = '<ul>';
-  html += rowData.authors.map((author, index) => `<li key="tooltip-author-${rowData.id}-${index}">${author}</li>`).join('');
-  html += '</ul>';
-  return html;
-};
-
 const nameTemplate = (rowData) => <span dangerouslySetInnerHTML={{ __html: rowData.nameHtml }} />;
 
 const statusTemplate = (rowData) => <Badge text={status[rowData?.status ?? rowData]?.label} type={status[rowData?.status ?? rowData]?.badgeType} />;
@@ -94,9 +86,6 @@ export {
   datasourceTemplate,
   getAffiliationsHtmlField,
   getAffiliationsTooltipField,
-  getAllIdsHtmlField,
-  getAuthorsHtmlField,
-  getAuthorsTooltipField,
   nameTemplate,
   statusTemplate,
 };
diff --git a/server/src/routes/works.routes.js b/server/src/routes/works.routes.js
@@ -51,7 +51,7 @@ router.route('/works')
           ) {
             datasets.push(deduplicatedWork);
           } else {
-            console.log(`Work not sort : ${JSON.stringify(deduplicatedWork)}`);
+            console.log(`Work not sorted : ${JSON.stringify(deduplicatedWork)}`);
           }
         });
         console.timeEnd(`4. Sort ${options.affiliations}`);