takaisin-nappula documentpagelle

Author: ArttKan

frontend/src/components/DocumentPage.tsx

@@ -1,6 +1,6 @@
 import axios from 'axios'
 import type { Headings, DocumentPageProps } from "../types"
-import { useState} from 'react'
+import { useEffect, useState } from 'react'
 import TableOfContent from './TableOfContent'
 import { useParams } from 'react-router-dom'
 import {Helmet} from "react-helmet";
@@ -17,26 +17,23 @@ const DocumentPage = ({language, apipath} : DocumentPageProps) => {
   const [law, setLaw] = useState<string>('')
   const [headings, setHeadings] = useState<Headings[]>([])
   const [lan, setLan] = useState<string>(language)
-  let path = `/api/${apipath}/id/${docyear}/${docnumber}/${lan}`
-  let headerpath = `/api/${apipath}/structure/id/${docyear}/${docnumber}/${lan}/`
-
-  if (apipath !== "statute") {
-    path = `/api/${apipath}/id/${docyear}/${docnumber}/${lan}/${doclevel}`
-  }
+  const [backButtonHovered, setBackButtonHovered] = useState<boolean>(false)
 
   const topStyle: React.CSSProperties = {
     display: 'flex',
     position: 'fixed',
     top: '0px',
     left: '0px',
-    justifyContent: 'center',
-    alignContent: 'center',
+    alignItems: 'center',
+    justifyContent: 'space-between',
     width: '100%',
     height: '50px',
     backgroundColor: '#0C6FC0',
     padding: '0px',
     margin: '0px',
-    border: '0px solid red'
+    border: '0px solid red',
+    paddingLeft: '20px',
+    paddingRight: '20px'
   }
 
   const contentStyle: React.CSSProperties = {
@@ -72,13 +69,40 @@ const DocumentPage = ({language, apipath} : DocumentPageProps) => {
     border: '0px solid pink'
   }
 
-  if (docnumber === "") {
-    throw new Error("Unexpected error: Missing docnumber")
+  const backButtonStyle: React.CSSProperties = {
+    color: '#fefefe',
+    textDecoration: 'none',
+    border: 'none',
+    padding: '6px 12px',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    backgroundColor: backButtonHovered ? 'rgba(255, 255, 255, 0.2)' : 'transparent',
+    transition: 'background-color 0.2s ease'
+  }
+
+  const getBackUrl = () => {
+    if (apipath === 'statute') {
+      return '/lainsaadanto/'
+    } else {
+      return '/oikeuskaytanto/'
+    }
   }
-  if (docyear === "") {
-    throw new Error("Unexpected error: Missing docyear")
+
+  const buildPaths = (currentLanguage: string) => {
+    let docPath = `/api/${apipath}/id/${docyear}/${docnumber}/${currentLanguage}`
+    if (apipath !== 'statute') {
+      docPath = `${docPath}/${doclevel}`
+    }
+    let structurePath = `/api/${apipath}/structure/id/${docyear}/${docnumber}/${currentLanguage}`
+    if (apipath !== 'statute') {
+      structurePath = `${structurePath}/${doclevel}`
+    }
+    return { docPath, structurePath }
   }
 
+  const hasRequiredParams = docnumber !== "" && docyear !== ""
+
   const getHtml = async (path: string) => {
 
     try {
@@ -127,44 +151,30 @@ const DocumentPage = ({language, apipath} : DocumentPageProps) => {
     const currentValue = (event.target as HTMLInputElement).value
     setLan(currentValue)
     localStorage.setItem("language", currentValue)
-
-    if(apipath === "statute") {
-      path = `/api/${apipath}/id/${docyear}/${docnumber}/${currentValue}`
-    } else {
-      path = `/api/${apipath}/id/${docyear}/${docnumber}/${currentValue}/${doclevel}`
-    }
-
-    headerpath = `/api/${apipath}/structure/id/${docyear}/${docnumber}/${currentValue}/`
-    updateHTML()
-
   }
 
-  const updateHTML = () => {
-    if(apipath === "statute") {
-      getLawHtml(path)
-    } else {
-      getHtml(path)
-    }
-    getHeadings()
-  }
-
-  const getHeadings = async () => {
-
+  const getHeadings = async (structurePath: string) => {
     try {
-      const response = await axios.get(`${headerpath}${doclevel ? doclevel : ''}`)
+      const response = await axios.get(structurePath)
       setHeadings(response.data)
     } catch(error) {
       console.error(error)
     }
   }
 
-  if (law === '') {
-    updateHTML()
-  }
+  useEffect(() => {
+    if (!hasRequiredParams) {
+      return
+    }
 
-  if(headings.length < 1 && law.length < 1) {
-    getHeadings()
-  }
+    const { docPath, structurePath } = buildPaths(lan)
+    if (apipath === "statute") {
+      getLawHtml(docPath)
+    } else {
+      getHtml(docPath)
+    }
+    getHeadings(structurePath)
+  }, [apipath, docnumber, docyear, doclevel, lan, hasRequiredParams])
 
   return (
     <>
@@ -174,18 +184,33 @@ const DocumentPage = ({language, apipath} : DocumentPageProps) => {
         </title>
       </Helmet>
       <div id="topId" style={topStyle}>
-
-        <TopMenu language={lan} handleSelect={handleSelect} />
+        <button
+          onClick={() => window.location.href = getBackUrl()}
+          style={backButtonStyle}
+          onMouseEnter={() => setBackButtonHovered(true)}
+          onMouseLeave={() => setBackButtonHovered(false)}
+        >
+          {language === 'fin' ? 'Takaisin' : 'Tillbaka'}
+        </button>
+        <div style={{flex: 1, display: 'flex', justifyContent: 'center'}}>
+          <TopMenu language={lan} handleSelect={handleSelect} />
+        </div>
       </div>
       <div id="contentDiv" style={contentStyle}>
         <div id="contentBlock" style={contentBlockStyle}>
-          <div id="leftMargin" style={tocStyle}>
-
-            <TableOfContent headings={headings} />
-
-          </div>
-
-          <div id="documentbodydiv" style={docBodyStyle} dangerouslySetInnerHTML={{ __html: law}}></div>
+          {hasRequiredParams ? (
+            <>
+              <div id="leftMargin" style={tocStyle}>
+                <TableOfContent headings={headings} />
+              </div>
+
+              <div id="documentbodydiv" style={docBodyStyle} dangerouslySetInnerHTML={{ __html: law}}></div>
+            </>
+          ) : (
+            <div style={{ padding: '20px', color: '#666' }}>
+              {language === 'fin' ? 'Asiakirjaa ei voitu ladata.' : 'Dokumentet kunde inte laddas.'}
+            </div>
+          )}
         </div>
       </div>
     </>