Skip to content

Commit 0afc8fe

Browse files
ArttKanArttKan
committed
asiasana-componenttien refaktorointi
1 parent 7b004af commit 0afc8fe

File tree

9 files changed

+112
-228
lines changed

9 files changed

+112
-228
lines changed

‎frontend/src/App.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import {
44
} from 'react-router-dom'
55
import ListDocumentPage from './components/ListDocumentPage'
66
import DocumentPage from './components/DocumentPage'
7-
import KeywordPage from './components/KeywordPage'
8-
import KeywordLawPage from './components/KeywordLawPage'
9-
import KeywordJudgmentPage from './components/KeywordJudgmentPage'
10-
import KeywordJudgmentListPage from './components/KeywordJudgmentListPage'
7+
import KeywordStatuteList from './components/KeywordStatuteList'
8+
import KeywordStatuteResults from './components/KeywordStatuteResults'
9+
import KeywordJudgmentList from './components/KeywordJudgmentList'
10+
import KeywordJudgmentResults from './components/KeywordJudgmentResults'
1111
import AdminPage from './components/AdminPage'
1212
import { useState, useEffect, useCallback } from 'react'
1313
import { Helmet } from "react-helmet"
@@ -114,13 +114,13 @@ const App = () => {
114114
element={<DocumentPage language={language} apipath="statute" />
115115
}
116116
/>
117-
<Route key="keywords" path="/lainsaadanto/asiasanat" element={<KeywordPage language={language} />}
117+
<Route key="keyword_statute_list" path="/lainsaadanto/asiasanat" element={<KeywordStatuteList language={language} />}
118118
/>
119-
<Route key="keyword_laws" path="/lainsaadanto/asiasanat/:keyword_id" element={<KeywordLawPage language={language} />}
119+
<Route key="keyword_statute_results" path="/lainsaadanto/asiasanat/:keyword_id" element={<KeywordStatuteResults language={language} />}
120120
/>
121-
<Route key="judgment_keywords" path="/oikeuskaytanto/asiasanat" element={<KeywordJudgmentPage language={language} />}
121+
<Route key="keyword_judgment_list" path="/oikeuskaytanto/asiasanat" element={<KeywordJudgmentList language={language} />}
122122
/>
123-
<Route key="judgment_keyword_list" path="/oikeuskaytanto/asiasanat/:keyword_id" element={<KeywordJudgmentListPage language={language} />}
123+
<Route key="keyword_judgment_results" path="/oikeuskaytanto/asiasanat/:keyword_id" element={<KeywordJudgmentResults language={language} />}
124124
/>
125125
<Route key="caselistpage" path="/oikeuskaytanto"
126126
element={<ListDocumentPage language={language} setLanguage={setLanguage} buttonetext={buttontext} apisection="judgment"

‎frontend/src/components/KeywordJudgmentList.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import type { KeywordPageType } from '../types'
2+
import KeywordListBase from './KeywordListBase'
3+
4+
const KeywordJudgmentList = ({ language }: KeywordPageType) => (
5+
<KeywordListBase
6+
language={language}
7+
apiBasePath="/api/judgment/keyword"
8+
routeBasePath="/oikeuskaytanto/asiasanat"
9+
/>
10+
)
11+
12+
export default KeywordJudgmentList

‎frontend/src/components/KeywordJudgmentResults.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { KeywordPageType, JudgmentByKey } from '../types'
2+
import KeywordResultsBase from './KeywordResultsBase'
3+
4+
const KeywordJudgmentResults = ({ language }: KeywordPageType) => (
5+
<KeywordResultsBase<JudgmentByKey>
6+
language={language}
7+
apiBasePath="/api/judgment/keyword"
8+
buildLink={(judgment) => `/oikeuskaytanto/${judgment.year}/${judgment.number}/${judgment.level}`}
9+
formatLabel={(judgment) => (
10+
<>
11+
<b>{judgment.level.toUpperCase()} {judgment.number}/{judgment.year}</b>
12+
</>
13+
)}
14+
getItemKey={(judgment) => `${judgment.level}-${judgment.number}-${judgment.year}`}
15+
/>
16+
)
17+
18+
export default KeywordJudgmentResults

‎frontend/src/components/KeywordLawPage.tsx‎

Lines changed: 0 additions & 99 deletions
This file was deleted.

frontend/src/components/KeywordJudgmentPage.tsx renamed to frontend/src/components/KeywordListBase.tsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
import axios from 'axios'
2-
import type { KeywordPageType, KeysType } from '../types'
32
import { useEffect, useState } from 'react'
43
import { Helmet } from 'react-helmet'
54
import TopMenu from './TopMenu'
5+
import type { KeysType, KeywordPageType } from '../types'
66

7-
const KeywordJudgmentPage = ({ language }: KeywordPageType) => {
7+
interface KeywordListBaseProps extends KeywordPageType {
8+
apiBasePath: string
9+
routeBasePath: string
10+
}
11+
12+
const KeywordListBase = ({ language, apiBasePath, routeBasePath }: KeywordListBaseProps) => {
813
const [keywords, setKeywords] = useState<KeysType[]>([])
914
const [lan, setLan] = useState<string>(() => localStorage.getItem('language') || language)
10-
const path = `/api/judgment/keyword/${lan}`
15+
const path = `${apiBasePath}/${lan}`
1116
const title = lan === 'fin' ? 'Asiasanat' : 'Ämnesord'
1217
let letter = ''
1318

@@ -39,17 +44,17 @@ const KeywordJudgmentPage = ({ language }: KeywordPageType) => {
3944
marginTop: '50px'
4045
}
4146

42-
const getKeywords = async (path: string) => {
43-
const keywords = await axios.get(path)
44-
setKeywords(keywords.data)
47+
const getKeywords = async (url: string) => {
48+
const resp = await axios.get(url)
49+
setKeywords(resp.data)
4550
}
4651

4752
useEffect(() => {
4853
getKeywords(path)
4954
}, [path])
5055

5156
function prepareLink(keyword_id: string) {
52-
return `/oikeuskaytanto/asiasanat/${encodeURIComponent(keyword_id)}`
57+
return `${routeBasePath}/${encodeURIComponent(keyword_id)}`
5358
}
5459

5560
const handleSelect = (event: React.SyntheticEvent) => {
@@ -91,4 +96,4 @@ const KeywordJudgmentPage = ({ language }: KeywordPageType) => {
9196
)
9297
}
9398

94-
export default KeywordJudgmentPage
99+
export default KeywordListBase

‎frontend/src/components/KeywordPage.tsx‎

Lines changed: 0 additions & 95 deletions
This file was deleted.

frontend/src/components/KeywordJudgmentListPage.tsx renamed to frontend/src/components/KeywordResultsBase.tsx

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,32 @@
11
import axios from 'axios'
22
import { useEffect, useState } from 'react'
3-
import type { KeywordPageType, JudgmentByKey } from '../types'
43
import { useParams } from 'react-router-dom'
54
import { Helmet } from 'react-helmet'
65
import TopMenu from './TopMenu'
6+
import type { KeywordPageType } from '../types'
77

8-
const KeywordJudgmentListPage = ({ language }: KeywordPageType) => {
8+
interface KeywordResultItem {
9+
keyword: string
10+
}
11+
12+
interface KeywordResultsBaseProps<T extends KeywordResultItem> extends KeywordPageType {
13+
apiBasePath: string
14+
buildLink: (item: T) => string
15+
formatLabel: (item: T) => React.ReactNode
16+
getItemKey: (item: T) => string
17+
}
18+
19+
const KeywordResultsBase = <T extends KeywordResultItem,>({
20+
language,
21+
apiBasePath,
22+
buildLink,
23+
formatLabel,
24+
getItemKey
25+
}: KeywordResultsBaseProps<T>) => {
926
const keyword_id: string = decodeURIComponent(useParams().keyword_id ?? '')
10-
const [judgments, setJudgments] = useState<JudgmentByKey[]>([])
27+
const [items, setItems] = useState<T[]>([])
1128
const [lan, setLan] = useState<string>(() => localStorage.getItem('language') || language)
12-
const path = `/api/judgment/keyword/${lan}/${encodeURIComponent(keyword_id)}`
29+
const path = `${apiBasePath}/${lan}/${encodeURIComponent(keyword_id)}`
1330
const title = lan === 'fin' ? 'Asiasanat' : 'Ämnesord'
1431

1532
const topStyle: React.CSSProperties = {
@@ -47,19 +64,15 @@ const KeywordJudgmentListPage = ({ language }: KeywordPageType) => {
4764
marginTop: '50px'
4865
}
4966

50-
const getJudgments = async (path: string) => {
51-
const resp = await axios.get(path)
52-
setJudgments(resp.data)
67+
const getItems = async (url: string) => {
68+
const resp = await axios.get(url)
69+
setItems(resp.data)
5370
}
5471

5572
useEffect(() => {
56-
getJudgments(path)
73+
getItems(path)
5774
}, [path])
5875

59-
function prepareLink(judgment: JudgmentByKey): string {
60-
return `/oikeuskaytanto/${judgment.year}/${judgment.number}/${judgment.level}`
61-
}
62-
6376
const handleSelect = (event: React.SyntheticEvent) => {
6477
const currentValue = (event.target as HTMLInputElement).value
6578
setLan(currentValue)
@@ -78,11 +91,11 @@ const KeywordJudgmentListPage = ({ language }: KeywordPageType) => {
7891
</div>
7992
<div style={contentStyle} id="contentdiv">
8093
<div id="contentDiv" style={contentContainerStyle}>
81-
<h1>{title} - {judgments.length > 0 && ` ${judgments[0].keyword}`}</h1>
82-
{Array.isArray(judgments) && judgments.map(judgment => (
83-
<div style={listStyle} key={`${judgment.level}-${judgment.number}-${judgment.year}`}>
84-
<a href={prepareLink(judgment)}>
85-
<b>{judgment.level.toUpperCase()} {judgment.number}/{judgment.year}</b>
94+
<h1>{title} - {items.length > 0 && ` ${items[0].keyword}`}</h1>
95+
{Array.isArray(items) && items.map(item => (
96+
<div style={listStyle} key={getItemKey(item)}>
97+
<a href={buildLink(item)}>
98+
{formatLabel(item)}
8699
</a>
87100
</div>
88101
))}
@@ -92,4 +105,4 @@ const KeywordJudgmentListPage = ({ language }: KeywordPageType) => {
92105
)
93106
}
94107

95-
export default KeywordJudgmentListPage
108+
export default KeywordResultsBase

0 commit comments

Comments
 (0)