From 9712b74cda128daf033bf1510b81e4a263cd5f27 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Fri, 21 Jun 2024 18:22:00 +0200
Subject: [PATCH] Add section progress to new interview

---
 .../components/sidebar/Navigation.js          | 86 ++++++++-----------
 .../components/sidebar/NavigationLink.js      | 40 +++++++++
 2 files changed, 76 insertions(+), 50 deletions(-)
 create mode 100644 rdmo/projects/assets/js/interview/components/sidebar/NavigationLink.js

diff --git a/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js b/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js
index bccc461178..aea883f470 100644
--- a/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js
+++ b/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js
@@ -4,13 +4,9 @@ import classNames from 'classnames'
 
 import Html from 'rdmo/core/assets/js/components/Html'
 
-const Navigation = ({ currentPage, navigation, help, fetchPage }) => {
-
-  const handleClick = (event, pageId) => {
-    event.preventDefault()
-    fetchPage(pageId)
-  }
+import NavigationLink from './NavigationLink'
 
+const Navigation = ({ currentPage, navigation, help, fetchPage }) => {
   return (
     <>
       <h2>{gettext('Navigation')}</h2>
@@ -19,51 +15,41 @@ const Navigation = ({ currentPage, navigation, help, fetchPage }) => {
       <ul className="list-unstyled interview-navigation">
         {
           navigation.map((section, sectionIndex) => (
-            <li key={sectionIndex}>
-              <a href={`/projects/12/interview/${section.first}/`} onClick={event => handleClick(event, section.first)}>
-                {section.title}
-              </a>
-              {
-                section.pages && (
-                  <ul className="list-unstyled">
-                    {
-                      section.pages.map((page, pageIndex) => {
-                        const label = interpolate(gettext('(%s of %s)'), [page.count, page.total])
-
-                        return (
-                          <li key={pageIndex} className={classNames({'active': currentPage ? page.id == currentPage.id : false})}>
-                            {
-                              page.show ? (
-                                <a href={`/projects/12/interview/${page.id}/`} onClick={event => handleClick(event, page.id)}>
-                                  <span>{page.title}</span>
-                                  {
-                                    page.count > 0 && page.count == page.total && (
-                                      <span>
-                                        {' '}<i className="fa fa-check" aria-hidden="true"></i>
-                                      </span>
-                                    )
-                                  }
-                                  {
-                                    page.count > 0 && page.count != page.total && (
-                                      <>
-                                        {' '}<span>{label}</span>
-                                      </>
-                                    )
-                                  }
-                                </a>
-                              ) : (
-                                <span className="text-muted">{page.title}</span>
-                              )
-                            }
-                          </li>
+              <li key={sectionIndex}>
+                <NavigationLink
+                  element={section}
+                  href={`/projects/12/interview/${section.first}/`}
+                  onClick={() => fetchPage(section.first)}
+                />
+                {
+                  section.pages && (
+                    <ul className="list-unstyled">
+                      {
+                        section.pages.map((page, pageIndex) => (
+                            <li key={pageIndex} className={classNames({
+                              'active': currentPage ? page.id == currentPage.id : false})
+                            }>
+                              {
+                                page.show ? (
+                                  <NavigationLink
+                                    element={page}
+                                    href={`/projects/12/interview/${page.id}/`}
+                                    onClick={() => fetchPage(page.id)}
+                                  />
+                                ) : (
+                                  <span className="text-muted">{page.title}</span>
+                                )
+                              }
+                            </li>
+                          )
                         )
-                      })
-                    }
-                  </ul>
-                )
-              }
-            </li>
-          ))
+                      }
+                    </ul>
+                  )
+                }
+              </li>
+            )
+          )
         }
       </ul>
     </>
diff --git a/rdmo/projects/assets/js/interview/components/sidebar/NavigationLink.js b/rdmo/projects/assets/js/interview/components/sidebar/NavigationLink.js
new file mode 100644
index 0000000000..a2b8c13113
--- /dev/null
+++ b/rdmo/projects/assets/js/interview/components/sidebar/NavigationLink.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const NavigationLink = ({ element, href, onClick }) => {
+
+  const label = interpolate(gettext('(%s of %s)'), [element.count, element.total])
+
+  const handleClick = (event,) => {
+    event.preventDefault()
+    onClick()
+  }
+
+  return (
+    <a href={href} onClick={handleClick}>
+      {element.title}
+      {
+        element.count > 0 && element.count == element.total && (
+          <span>
+            {' '}<i className="fa fa-check" aria-hidden="true"></i>
+          </span>
+        )
+      }
+      {
+        element.count > 0 && element.count != element.total && (
+          <>
+            {' '}<span>{label}</span>
+          </>
+        )
+      }
+    </a>
+  )
+}
+
+NavigationLink.propTypes = {
+  element: PropTypes.object.isRequired,
+  href: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+}
+
+export default NavigationLink