Skip to content

Commit e24c7a1

Browse files
gregorydlogangregorydlogan
committed
Merge branch 'reduce-duplicate-code-tablepage' of Arnei/opencast-admin-interface into r/18.x
Pull request #1369 Reduce duplicate code in main page
2 parents 57614f1 + 87386cc commit e24c7a1

File tree

16 files changed

+482
-1014
lines changed

16 files changed

+482
-1014
lines changed

‎src/components/About.tsx

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
import { useEffect, useState } from "react";
2-
import Header from "./Header";
3-
import NavBar from "./NavBar";
4-
import Footer from "./Footer";
52
import { useTranslation } from "react-i18next";
63
import { useLocation } from "react-router";
74
import axios from "axios";
85
import i18n from "../i18n/i18n";
96
import DOMPurify from "dompurify";
7+
import MainPage from "./shared/MainPage";
108

119
const About = () => {
1210
const { t } = useTranslation();
1311
const location = useLocation();
1412

15-
const [displayNavigation, setNavigation] = useState(false);
1613
const [aboutContent, setAboutContent] = useState<string>("");
1714

1815
useEffect(() => {
@@ -35,34 +32,29 @@ const About = () => {
3532
setAboutContent(t("ABOUT.NOCONTENT").toString());
3633
});
3734
});
38-
// eslint-disable-next-line react-hooks/exhaustive-deps
35+
// eslint-disable-next-line react-hooks/exhaustive-deps
3936
}, [location.pathname]); // Listen to changes in pathname
4037

38+
4139
return (
42-
<span>
43-
<Header />
44-
<NavBar
45-
displayNavigation={displayNavigation}
46-
setNavigation={setNavigation}
47-
links={[
48-
{
49-
path: "/about/imprint",
50-
accessRole: "ROLE_UI_USERS_VIEW",
51-
text: "ABOUT.IMPRINT",
52-
},
53-
{
54-
path: "/about/privacy",
55-
accessRole: "ROLE_UI_GROUPS_VIEW",
56-
text: "ABOUT.PRIVACY",
57-
},
58-
]}
59-
>
60-
</NavBar>
40+
<MainPage
41+
navBarLinks={[
42+
{
43+
path: "/about/imprint",
44+
accessRole: "ROLE_UI_USERS_VIEW",
45+
text: "ABOUT.IMPRINT",
46+
},
47+
{
48+
path: "/about/privacy",
49+
accessRole: "ROLE_UI_GROUPS_VIEW",
50+
text: "ABOUT.PRIVACY",
51+
},
52+
]}
53+
>
6154
<div className="about">
6255
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(aboutContent) }} ></div>
6356
</div>
64-
<Footer />
65-
</span>
57+
</MainPage>
6658
);
6759
};
6860

‎src/components/NavBar.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,13 @@ import BaseButton from "./shared/BaseButton";
1515
/**
1616
* Component that renders the nav bar
1717
*/
18-
type CreateType = {
18+
export type NavBarLink = {
19+
path: string
20+
accessRole: string
21+
text: ParseKeys
22+
}
23+
24+
export type CreateType = {
1925
accessRole: string
2026
onShowModal?: () => Promise<void>
2127
onHideModal?: () => void
@@ -38,11 +44,7 @@ const NavBar = ({
3844
navAriaLabel?: ParseKeys
3945
displayNavigation: boolean
4046
setNavigation: React.Dispatch<React.SetStateAction<boolean>>
41-
links: {
42-
path: string
43-
accessRole: string
44-
text: ParseKeys
45-
}[]
47+
links: NavBarLink[]
4648
create?: CreateType
4749
}) => {
4850
const { t } = useTranslation();

‎src/components/configuration/Themes.tsx

Lines changed: 21 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,34 @@
1-
import { useEffect, useState } from "react";
2-
import { useTranslation } from "react-i18next";
3-
import TableFilters from "../shared/TableFilters";
4-
import Table from "../shared/Table";
5-
import { fetchFilters } from "../../slices/tableFilterSlice";
61
import { themesTemplateMap } from "../../configs/tableConfigs/themesTableMap";
72
import { getTotalThemes } from "../../selectors/themeSelectors";
83
import { loadThemesIntoTable } from "../../thunks/tableThunks";
9-
import Notifications from "../shared/Notifications";
10-
import Header from "../Header";
11-
import NavBar from "../NavBar";
12-
import MainView from "../MainView";
13-
import Footer from "../Footer";
14-
import { useAppDispatch, useAppSelector } from "../../store";
154
import { fetchThemes } from "../../slices/themeSlice";
16-
import { resetTableProperties } from "../../slices/tableSlice";
5+
import TablePage from "../shared/TablePage";
176

187
/**
198
* This component renders the table view of events
209
*/
2110
const Themes = () => {
22-
const { t } = useTranslation();
23-
const dispatch = useAppDispatch();
24-
25-
const [displayNavigation, setNavigation] = useState(false);
26-
27-
const themes = useAppSelector(state => getTotalThemes(state));
28-
29-
useEffect(() => {
30-
// State variable for interrupting the load function
31-
let allowLoadIntoTable = true;
32-
33-
// Clear table of previous data
34-
dispatch(resetTableProperties());
35-
36-
dispatch(fetchFilters("themes"));
37-
38-
// Load themes on mount
39-
const loadThemes = async () => {
40-
// Fetching themes from server
41-
await dispatch(fetchThemes());
42-
43-
// Load users into table
44-
if (allowLoadIntoTable) {
45-
dispatch(loadThemesIntoTable());
46-
}
47-
};
48-
loadThemes();
49-
50-
// Fetch themes every minute
51-
const fetchThemesInterval = setInterval(loadThemes, 5000);
52-
53-
return () => {
54-
allowLoadIntoTable = false;
55-
clearInterval(fetchThemesInterval);
56-
};
57-
// eslint-disable-next-line react-hooks/exhaustive-deps
58-
}, []);
59-
6011
return (
61-
<>
62-
<Header />
63-
<NavBar
64-
displayNavigation={displayNavigation}
65-
setNavigation={setNavigation}
66-
links={[
67-
{
68-
path: "/configuration/themes",
69-
accessRole: "ROLE_UI_THEMES_VIEW",
70-
text: "CONFIGURATION.NAVIGATION.THEMES",
71-
},
72-
]}
73-
create={{
74-
accessRole: "ROLE_UI_THEMES_CREATE",
75-
text: "CONFIGURATION.ACTIONS.ADD_THEME",
76-
resource: "themes",
77-
}}
78-
/>
79-
80-
<MainView open={displayNavigation}>
81-
{/* Include notifications component */}
82-
<Notifications context={"other"}/>
83-
84-
<div className="controls-container">
85-
{/* Include filters component */}
86-
<TableFilters
87-
loadResource={fetchThemes}
88-
loadResourceIntoTable={loadThemesIntoTable}
89-
resource={"themes"}
90-
/>
91-
<h1>{t("CONFIGURATION.THEMES.TABLE.CAPTION")}</h1>
92-
<h4>{t("TABLE_SUMMARY", { numberOfRows: themes })}</h4>
93-
</div>
94-
{/* Include table component */}
95-
<Table templateMap={themesTemplateMap} />
96-
</MainView>
97-
<Footer />
98-
</>
12+
<TablePage
13+
resource={"themes"}
14+
fetchResource={fetchThemes}
15+
loadResourceIntoTable={loadThemesIntoTable}
16+
getTotalResources={getTotalThemes}
17+
navBarLinks={[
18+
{
19+
path: "/configuration/themes",
20+
accessRole: "ROLE_UI_THEMES_VIEW",
21+
text: "CONFIGURATION.NAVIGATION.THEMES",
22+
},
23+
]}
24+
navBarCreate={{
25+
accessRole: "ROLE_UI_THEMES_CREATE",
26+
text: "CONFIGURATION.ACTIONS.ADD_THEME",
27+
resource: "themes",
28+
}}
29+
caption={"CONFIGURATION.THEMES.TABLE.CAPTION"}
30+
templateMap={themesTemplateMap}
31+
/>
9932
);
10033
};
10134

0 commit comments

Comments
 (0)