Skip to content
Snippets Groups Projects
Commit 551d61c2 authored by Bjarke Madsen's avatar Bjarke Madsen
Browse files

Refactor ECProjects page code a bit to make it more readable

parent 7f7b4ca0
No related branches found
No related tags found
1 merge request!11merge feature/COMP-152-EC-PROJECTS-TABLE into develop
...@@ -32,6 +32,24 @@ interface inputProps { ...@@ -32,6 +32,24 @@ interface inputProps {
setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>> setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>>
} }
function getJSXFromMap(data: Map<number, Map<string, ECProject[]>>) {
return Array.from(data.entries()).map(([year, nrenMap]) => {
return Array.from(nrenMap.entries()).map(([nren, projects]) => (
<tr key={nren + year + projects.length}>
<td style={{ whiteSpace: 'nowrap' }}>{nren}</td>
<td>{year}</td>
<td>
<ul>
{projects.map(project => (
<li key={project.project}>{project.project}</li>
))}
</ul>
</td>
</tr>
))
})
}
function ECProjects({ filterSelection, setFilterSelection }: inputProps) { function ECProjects({ filterSelection, setFilterSelection }: inputProps) {
const [projectData, setProjectData] = useState<ECProject[]>(); const [projectData, setProjectData] = useState<ECProject[]>();
...@@ -45,31 +63,43 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) { ...@@ -45,31 +63,43 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) {
); );
const projectDataByYear = new Map<number, Map<string, ECProject[]>>(); const projectDataByYear = new Map<number, Map<string, ECProject[]>>();
// group ECProjects by year and nren // sort selectedData by year, descending
selectedData.sort((a, b) => {
return b.year - a.year
})
selectedData.forEach(project => { selectedData.forEach(project => {
if (!projectDataByYear.has(project.year)) { if (!projectDataByYear.has(project.year)) {
projectDataByYear.set(project.year, new Map<string, ECProject[]>()); projectDataByYear.set(project.year, new Map<string, ECProject[]>());
} }
const ecProjectsForYear = projectDataByYear.get(project.year)!; const ecProjectsForYear = projectDataByYear.get(project.year)!;
const nrenData = ecProjectsForYear.get(project.nren) || []; const nrenECProjects = ecProjectsForYear.get(project.nren) || [];
nrenData.push(project); nrenECProjects.push(project);
ecProjectsForYear.set(project.nren, nrenData); ecProjectsForYear.set(project.nren, nrenECProjects);
}); });
function nrensort(a: ECProject, b: ECProject) { function nrensort(a: [string, ECProject[]], b: [string, ECProject[]]) {
const byNREN = a.nren < b.nren ? -1 : a.nren > b.nren ? 1 : 0; const nrenAName = a[0];
const byYear = a.year < b.year ? -1 : a.year > b.year ? 1 : 0; const nrenBName = b[0];
return byYear || byNREN;
const byNREN = nrenAName < nrenBName ? -1 : nrenAName > nrenBName ? 1 : 0;
return byNREN;
} }
// sort projectDataByYear by year and nren, maps keep insertion order // iterate the year map, and update the order of NRENs in each nren map
// maps keep insertion order, so we can just sort the entries and re-insert them
projectDataByYear.forEach((nrenData, year) => { projectDataByYear.forEach((nrenData, year) => {
// create a new map that will be the sorted version of the original
const sortedNrenData = new Map<string, ECProject[]>(); const sortedNrenData = new Map<string, ECProject[]>();
[...nrenData.entries()].sort((a, b) => nrensort(a[1][0], b[1][0])).forEach(([nren, projects]) => {
// sort the entries by NREN name, and insert them into the new map
Array.from(nrenData.entries()).sort(nrensort).forEach(([nren, projects]) => {
sortedNrenData.set(nren, projects); sortedNrenData.set(nren, projects);
}); });
// replace the original NREN map for that year with the sorted one
projectDataByYear.set(year, sortedNrenData); projectDataByYear.set(year, sortedNrenData);
}); });
...@@ -109,21 +139,7 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) { ...@@ -109,21 +139,7 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) {
</tr> </tr>
</thead> </thead>
<tbody className='table-bg-highlighted'> <tbody className='table-bg-highlighted'>
{Array.from(projectDataByYear.keys()).sort().map((year) => { {getJSXFromMap(projectDataByYear)}
return projectDataByYear.get(year) && Array.from(projectDataByYear.get(year)!.entries()).map(([nren, projects]) => (
<tr key={nren + year + projects.length}>
<td style={{ whiteSpace: 'nowrap' }}>{nren}</td>
<td>{year}</td>
<td>
<ul>
{projects.map(project => (
<li key={project.project}>{project.project}</li>
))}
</ul>
</td>
</tr>
))
})}
</tbody> </tbody>
</Table> </Table>
</Row> </Row>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment