Skip to content
Snippets Groups Projects
Commit adb748e2 authored by Remco Tukker's avatar Remco Tukker
Browse files

fix some code quality issues in the frontend

parent 975b3517
No related branches found
No related tags found
1 merge request!25Feature/comp 182 improved nren selection
Hide whitespace changes
Inline Side-by-side
webapp/src/App.tsx
+ 3
− 3
View file @ adb748e2
import React, { ReactElement, useState, useContext } from "react";
import React, { ReactElement, useState } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Landing from "./pages/Landing";
import ExternalPageNavBar from "./components/global/ExternalPageNavBar";
import GeantFooter from "./components/global/GeantFooter";
import DataAnalysis from "./pages/DataAnalysis";
import BudgetPage from "./pages/Budget";
import CompendiumData from "./pages/CompendiumData";
import FundingSourcePage from "./pages/FundingSource";
import ChargingStructurePage from "./pages/ChargingStructure";
......@@ -28,7 +28,7 @@ function App(): ReactElement {
<ExternalPageNavBar />
<SidebarProvider>
<Routes>
<Route path="/analysis" element={<DataAnalysis filterSelection={filterSelection} setFilterSelection={setFilterSelection} />} />
<Route path="/budget" element={<BudgetPage filterSelection={filterSelection} setFilterSelection={setFilterSelection} />} />
<Route path="/funding" element={<FundingSourcePage filterSelection={filterSelection} setFilterSelection={setFilterSelection} />} />
<Route path="/data/employment" element={<StaffGraph filterSelection={filterSelection} setFilterSelection={setFilterSelection} />} />
<Route path="/data/roles" element={<StaffGraph roles filterSelection={filterSelection} setFilterSelection={setFilterSelection} />} />
......
webapp/src/components/graphing/Filter.tsx
+ 4
− 6
View file @ adb748e2
......@@ -43,7 +43,7 @@ function Filter({ filterOptions, filterSelection, setFilterSelection, max1year =
const handleSelectAllNrensClick = () => {
setFilterSelection({
selectedYears: [...filterSelection.selectedYears],
selectedNrens: [...filterOptions.availableNrens.map(n => n.name)]
selectedNrens: filterOptions.availableNrens.map(n => n.name)
});
}
......@@ -94,15 +94,13 @@ function Filter({ filterOptions, filterSelection, setFilterSelection, max1year =
<Col>
<ButtonToolbar className="d-flex justify-content-end gap-2 m-3">
{ filterOptions.availableYears.sort().map(year => (
<ToggleButton
<Button
variant={ coloredYears ? "compendium-year-" + (year % 9) : "compendium-year"}
type="checkbox"
value={year}
key={year}
checked={filterSelection.selectedYears.includes(year)}
active={filterSelection.selectedYears.includes(year)}
onClick={() => (handleYearClick(year))}>
{year}
</ToggleButton>
</Button>
))}
</ButtonToolbar>
</Col>
......
webapp/src/helpers/dataconversion.tsx
+ 3
− 8
View file @ adb748e2
......@@ -206,19 +206,14 @@ export function createECProjectsDataLookup(projectEntries: ECProject[]) {
export function createPolicyDataLookup(policyEntries: Policy[]) {
const policyMap = new Map<string, Map<number, Policy[]>>();
const policyMap = new Map<string, Map<number, Policy>>();
policyEntries.forEach(entry => {
let nrenEntry = policyMap.get(entry.nren);
if (!nrenEntry) {
nrenEntry = new Map<number, Policy[]>();
nrenEntry = new Map<number, Policy>();
}
let policyList = nrenEntry.get(entry.year);
if (!policyList) {
policyList = [];
}
policyList.push(entry);
nrenEntry.set(entry.year, policyList);
nrenEntry.set(entry.year, entry);
policyMap.set(entry.nren, nrenEntry);
});
return policyMap;
......
webapp/src/pages/DataAnalysis.tsx → webapp/src/pages/Budget.tsx
+ 2
− 2
View file @ adb748e2
......@@ -26,7 +26,7 @@ interface inputProps {
setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>>
}
function DataAnalysis({ filterSelection, setFilterSelection }: inputProps): ReactElement {
function BudgetPage({ filterSelection, setFilterSelection }: inputProps): ReactElement {
const [budgetResponse, setBudget] = useState<Budget[]>();
......@@ -85,4 +85,4 @@ function DataAnalysis({ filterSelection, setFilterSelection }: inputProps): Reac
);
}
export default DataAnalysis;
export default BudgetPage;
webapp/src/pages/CompendiumData.tsx
+ 1
− 1
View file @ adb748e2
......@@ -29,7 +29,7 @@ function CompendiumData(): ReactElement {
<div className="collapsible-column">
<Row>
<Link to="/analysis" className="link-text-underline">
<Link to="/budget" className="link-text-underline">
<span>Budget of NRENs per Year</span>
</Link>
</Row>
......
webapp/src/pages/Policy.tsx
+ 20
− 59
View file @ adb748e2
......@@ -24,74 +24,35 @@ interface inputProps {
setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>>
}
function getJSXFromMap(data: Map<string, Map<number, Policy[]>>) {
function getJSXFromMap(data: Map<string, Map<number, Policy>>) {
const policies = [
['acceptable_use', 'Acceptable Use Policy'],
['connectivity', 'Connectivity Policy'],
['data_protection', 'Data Protection Policy'],
['environmental', 'Environmental Policy'],
['equal_opportunity', 'Equal Opportunity Policy'],
['privacy_notice', 'Privacy Notice'],
['strategic_plan', 'Strategic Plan']
];
return Array.from(data.entries()).map(([nren, nrenMap]) => {
return Array.from(nrenMap.entries()).map(([year, policies], yearIndex) => (
return Array.from(nrenMap.entries()).map(([year, policy], yearIndex) => (
<tr key={nren + year} className='dotted-border'>
<td className='pt-3 nren-column text-nowrap'>{yearIndex == 0 && nren}</td>
<td className='pt-3 year-column'>{year}</td>
<td className='pt-3 blue-column'>
{policies.map(policy => (
<ul>
{!!policy.acceptable_use && (
<li key={policy.acceptable_use}>
<a href={policy.acceptable_use} target="_blank" rel="noopener noreferrer"
<ul>
{policies.map(([key, text]) => (
!!policy[key] && (
<li key={key}>
<a href={policy[key]} target="_blank" rel="noopener noreferrer"
style={{ textDecoration: 'none' }}>
Acceptable Use Policy
{text}
</a>
</li>
)}
{!!policy.connectivity && (
<li key={policy.connectivity}>
<a href={policy.connectivity} target="_blank" rel="noopener noreferrer"
style={{ textDecoration: 'none' }}>
Connectivity Policy
</a>
</li>
)}
{!!policy.data_protection && (
<li key={policy.data_protection}>
<a href={policy.data_protection} target="_blank" rel="noopener noreferrer"
style={{ textDecoration: 'none' }}>
Data Protection Policy
</a>
</li>
)}
{!!policy.environmental && (
<li key={policy.environmental}>
<a href={policy.environmental} target="_blank" rel="noopener noreferrer"
style={{ textDecoration: 'none' }}>
Environmental Policy
</a>
</li>
)}
{!!policy.equal_opportunity && (
<li key={policy.equal_opportunity}>
<a href={policy.equal_opportunity} target="_blank" rel="noopener noreferrer"
style={{ textDecoration: 'none'}}>
Equal Opportunity Policy
</a>
</li>
)}
{!!policy.privacy_notice && (
<li key={policy.privacy_notice}>
<a href={policy.privacy_notice} target="_blank" rel="noopener noreferrer"
style={{ textDecoration: 'none' }}>
Privacy Notice Policy
</a>
</li>
)}
{!!policy.strategic_plan && (
<li key={policy.strategic_plan}>
<a href={policy.strategic_plan} target="_blank" rel="noopener noreferrer"
style={{ textDecoration: 'none' }}>
Strategic Plan Policy
</a>
</li>
)}
</ul>
)
))}
</ul>
</td>
</tr>
))
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment