Core 5076 sdg demo webpage (#1260)

* CORE-5076: creat sdg page * CORE-5076: update upload url * CORE-5076: add sdg pdf checker * file upload issue * CORE-5076: add videp
oacore · Dec 11, 2024 · 6683bbd · 6683bbd
1 parent 1ee90a0
commit 6683bbd
Show file tree

Hide file tree

Showing 34 changed files with 1,445 additions and 192 deletions.
diff --git a/components/pdf-upload/defaultUpload.jsx b/components/pdf-upload/defaultUpload.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Button } from '@oacore/design'
 import { ProgressSpinner } from '@oacore/design/lib/elements'
+import { useRouter } from 'next/router'
 
 import text from '../../data/retention.yml'
 import uploadSvg from '../../public/images/logos/upload.svg'
@@ -12,50 +13,57 @@ const DefaultUploadView = ({
   handleFileChange,
   rrsPdfLoading,
   fileName,
-}) => (
-  <div className={styles.uploadWrapper}>
-    <h3 className={styles.uploadTitle}>{text.upload.default.title}</h3>
-    {rrsPdfLoading ? (
-      <div className={styles.innerWrapper}>
-        <div className={styles.spinnerWrapper}>
-          <ProgressSpinner className={styles.spinner} />
+}) => {
+  const router = useRouter()
+  const defaultText = router.pathname.includes('sdg')
+    ? text.upload.sdgDefault
+    : text.upload.default
+
+  return (
+    <div className={styles.uploadWrapper}>
+      <h3 className={styles.uploadTitle}>{defaultText.title}</h3>
+      {rrsPdfLoading ? (
+        <div className={styles.innerWrapper}>
+          <div className={styles.spinnerWrapper}>
+            <ProgressSpinner className={styles.spinner} />
+          </div>
+          <h6 className={styles.fileName}>{fileName}</h6>
         </div>
-        <h6 className={styles.fileName}>{fileName}</h6>
-      </div>
-    ) : (
-      /* eslint-disable-next-line max-len */
-      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
-      <div className={styles.innerWrapper} onClick={handleClick}>
-        <img
-          src={uploadSvg}
-          alt="Upload Icon"
-          style={{ width: '50px', height: '50px', marginBottom: '10px' }}
-        />
-        <p className={styles.innerTitle}>{text.upload.default.subTitle}</p>
-        <input
-          ref={uploadRef}
-          type="file"
-          id="fileInput"
-          accept="application/pdf"
-          onChange={handleFileChange}
-          className={styles.display}
-          hidden
-        />
-        <p className={styles.connector}>- OR -</p>
-        <Button
-          disabled={rrsPdfLoading}
-          onClick={handleClick}
-          variant="contained"
-        >
-          {text.upload.default.action.title}
-        </Button>
+      ) : (
+        /* eslint-disable-next-line max-len */
+        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
+        <div className={styles.innerWrapper} onClick={handleClick}>
+          <img
+            src={uploadSvg}
+            alt="Upload Icon"
+            style={{ width: '50px', height: '50px', marginBottom: '10px' }}
+          />
+          <p className={styles.innerTitle}>{text.upload.default.subTitle}</p>
+          <input
+            ref={uploadRef}
+            type="file"
+            id="fileInput"
+            accept="application/pdf"
+            onChange={handleFileChange}
+            className={styles.display}
+            hidden
+          />
+          <p className={styles.connector}>- OR -</p>
+          <Button
+            disabled={rrsPdfLoading}
+            onClick={handleClick}
+            variant="contained"
+          >
+            {text.upload.default.action.title}
+          </Button>
+        </div>
+      )}
+      <div className={styles.uploadFooter}>
+        <span className={styles.footerText}>{text.upload.subInfo.format}</span>
+        <span className={styles.footerText}>{text.upload.subInfo.size}</span>
       </div>
-    )}
-    <div className={styles.uploadFooter}>
-      <span className={styles.footerText}>{text.upload.subInfo.format}</span>
-      <span className={styles.footerText}>{text.upload.subInfo.size}</span>
     </div>
-  </div>
-)
+  )
+}
 
 export default DefaultUploadView
diff --git a/components/pdf-upload/formatUpload.jsx b/components/pdf-upload/formatUpload.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Button } from '@oacore/design'
 import { ProgressSpinner } from '@oacore/design/lib/elements'
+import { useRouter } from 'next/router'
 
 import text from '../../data/retention.yml'
 import styles from './styles.module.scss'
@@ -11,51 +12,60 @@ const FormatUploadIssue = ({
   uploadRef,
   rrsPdfLoading,
   fileName,
-}) => (
-  <div className={styles.uploadWrapper}>
-    <div className={styles.titleWrapper}>
-      {!rrsPdfLoading ? (
-        <>
-          <img src={text.upload.noSupport.image} alt="issueSvg" />
-          <h3 className={styles.uploadTitle}>{text.upload.noSupport.title}</h3>
-        </>
+}) => {
+  const router = useRouter()
+  const defaultText = router.pathname.includes('sdg')
+    ? text.upload.sdgDefault
+    : text.upload.default
+
+  return (
+    <div className={styles.uploadWrapper}>
+      <div className={styles.titleWrapper}>
+        {!rrsPdfLoading ? (
+          <>
+            <img src={text.upload.noSupport.image} alt="issueSvg" />
+            <h3 className={styles.uploadTitle}>
+              {text.upload.noSupport.title}
+            </h3>
+          </>
+        ) : (
+          <h3 className={styles.uploadTitle}>{defaultText.title}</h3>
+        )}
+      </div>
+      {rrsPdfLoading ? (
+        <div className={styles.innerWrapper}>
+          <div className={styles.spinnerWrapper}>
+            <ProgressSpinner className={styles.spinner} />
+          </div>
+          <h6 className={styles.fileName}>{fileName}</h6>
+        </div>
       ) : (
-        <h3 className={styles.uploadTitle}>{text.upload.default.title}</h3>
-      )}
-    </div>
-    {rrsPdfLoading ? (
-      <div className={styles.innerWrapper}>
-        <div className={styles.spinnerWrapper}>
-          <ProgressSpinner className={styles.spinner} />
+        <div className={styles.innerIssueWrapper}>
+          <span className={styles.innerIssueTitle}>
+            {text.upload.subInfo.format}
+          </span>
+          <input
+            ref={uploadRef}
+            type="file"
+            id="fileInput"
+            accept="application/pdf"
+            onChange={handleFileChange}
+            className={styles.display}
+            hidden
+          />
         </div>
-        <h6 className={styles.fileName}>{fileName}</h6>
-      </div>
-    ) : (
-      <div className={styles.innerIssueWrapper}>
-        <span className={styles.innerIssueTitle}>
-          {text.upload.subInfo.format}
-        </span>
-        <input
-          ref={uploadRef}
-          type="file"
-          id="fileInput"
-          accept="application/pdf"
-          onChange={handleFileChange}
-          className={styles.display}
-          hidden
-        />
+      )}
+      <div className={styles.uploadIssueFooter}>
+        <Button
+          disabled={rrsPdfLoading}
+          onClick={handleClick}
+          variant="contained"
+        >
+          {text.upload.noSupport.action}
+        </Button>
       </div>
-    )}
-    <div className={styles.uploadIssueFooter}>
-      <Button
-        disabled={rrsPdfLoading}
-        onClick={handleClick}
-        variant="contained"
-      >
-        {text.upload.noSupport.action}
-      </Button>
     </div>
-  </div>
-)
+  )
+}
 
 export default FormatUploadIssue
diff --git a/components/pdf-upload/index.jsx b/components/pdf-upload/index.jsx
@@ -1,17 +1,24 @@
 import React, { useState, useRef, useEffect } from 'react'
+import { useRouter } from 'next/router'
 
 import DefaultUploadView from './defaultUpload'
 import FormatUploadIssue from './formatUpload'
 import SizeUploadIssue from './sizeUploadIssue'
 import styles from './styles.module.scss'
 import UploadSuccess from './uploadSuccess'
 import UploadFail from './uploadFail'
+import SdgUploadSuccess from './sdgUploadSuccess'
 
-const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => {
+const RrsCheckCard = ({
+  uploadPdf,
+  uploadResults,
+  rrsPdfLoading,
+  sdgTypes,
+}) => {
   const uploadRef = useRef(null)
   const [fileName, setFileName] = useState('')
-
   const [currentView, setCurrentView] = useState('default')
+  const router = useRouter()
 
   const handleClick = () => {
     uploadRef.current.click()
@@ -22,16 +29,21 @@ const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => {
   }
 
   useEffect(() => {
+    const results = Array.isArray(uploadResults) ? uploadResults : []
+    if (results.some((result) => result.predictions)) setCurrentView('success')
     if (uploadResults.rightsRetentionSentence) setCurrentView('success')
     if (
       !uploadResults.rightsRetentionSentence &&
       uploadResults.confidence === 0
     )
       setCurrentView('fail')
+    if (results.some((result) => result.predictions === null))
+      setCurrentView('fail')
   }, [uploadResults])
 
   const handleFileChange = (event) => {
     event.preventDefault()
+    event.stopPropagation()
     if (rrsPdfLoading) return
 
     let file
@@ -40,7 +52,7 @@ const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => {
     if (files && files.length) {
       // eslint-disable-next-line prefer-destructuring
       file = files[0]
-      uploadPdf(file, 1)
+      uploadPdf(file)
       setFileName(file.name)
       if (file.size > 10 * 1024 * 1024) {
         setCurrentView('sizeIssue')
@@ -54,12 +66,9 @@ const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => {
           fileType ===
             'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
         )
-      ) {
+      )
         setCurrentView('formatIssue')
-        return
-      }
     }
-    event.stopPropagation()
   }
 
   return (
@@ -96,21 +105,34 @@ const RrsCheckCard = ({ uploadPdf, uploadResults, rrsPdfLoading }) => {
         />
       )}
       {currentView === 'success' && (
-        <UploadSuccess
-          uploadRef={uploadRef}
-          handleClick={handleClick}
-          handleFileChange={handleFileChange}
-          uploadResults={uploadResults}
-          rrsPdfLoading={rrsPdfLoading}
-          fileName={fileName}
-        />
+        <>
+          {router.pathname.includes('sdg') ? (
+            <SdgUploadSuccess
+              uploadRef={uploadRef}
+              handleClick={handleClick}
+              handleFileChange={handleFileChange}
+              uploadResults={uploadResults}
+              rrsPdfLoading={rrsPdfLoading}
+              fileName={fileName}
+              sdgTypes={sdgTypes}
+            />
+          ) : (
+            <UploadSuccess
+              uploadRef={uploadRef}
+              handleClick={handleClick}
+              handleFileChange={handleFileChange}
+              uploadResults={uploadResults}
+              rrsPdfLoading={rrsPdfLoading}
+              fileName={fileName}
+            />
+          )}
+        </>
       )}
       {currentView === 'fail' && (
         <UploadFail
           uploadRef={uploadRef}
           handleClick={handleClick}
           handleFileChange={handleFileChange}
-          uploadResults={uploadResults}
           rrsPdfLoading={rrsPdfLoading}
           fileName={fileName}
         />