Skip to content

Commit d7c274b

Browse files
lukasbalslukasbals
committed
feat: Sort lists alphabetically
1 parent 054dab0 commit d7c274b

File tree

3 files changed

+102
-92
lines changed

3 files changed

+102
-92
lines changed

‎src/components/Forestry/Forestry.tsx

Lines changed: 40 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -78,42 +78,46 @@ export const Forestry = ({ config }: ForestryProps): JSX.Element => {
7878
</Tr>
7979
</Thead>
8080
<Tbody>
81-
{config.operationClasses.map((operationClass, index) => (
82-
<Tr key={index}>
83-
<Td>{operationClass.name}</Td>
84-
<Td align="right">
85-
{formatMessage(
86-
{
87-
id: 'units.ha',
88-
},
89-
{
90-
value: formatNumber(operationClass.areaInHectare, {
91-
minimumFractionDigits: 1,
92-
maximumFractionDigits: 1,
93-
}),
94-
}
95-
)}
96-
</Td>
97-
<Td align="right">
98-
{formatNumber(operationClassWithAreaInPercent[index].areaInPercent, {
99-
style: 'percent',
100-
minimumFractionDigits: 1,
101-
maximumFractionDigits: 1,
102-
})}
103-
</Td>
104-
<Td align="right">
105-
{formatMessage(
106-
{ id: 'units.vfmPerHa' },
107-
{
108-
value: formatNumber(normalStocksPerOperationClass[index], {
109-
minimumFractionDigits: 1,
110-
maximumFractionDigits: 1,
111-
}),
112-
}
113-
)}
114-
</Td>
115-
</Tr>
116-
))}
81+
{config.operationClasses
82+
.sort((operationClassA, operationClassB) =>
83+
operationClassA.name.localeCompare(operationClassB.name)
84+
)
85+
.map((operationClass, index) => (
86+
<Tr key={index}>
87+
<Td>{operationClass.name}</Td>
88+
<Td align="right">
89+
{formatMessage(
90+
{
91+
id: 'units.ha',
92+
},
93+
{
94+
value: formatNumber(operationClass.areaInHectare, {
95+
minimumFractionDigits: 1,
96+
maximumFractionDigits: 1,
97+
}),
98+
}
99+
)}
100+
</Td>
101+
<Td align="right">
102+
{formatNumber(operationClassWithAreaInPercent[index].areaInPercent, {
103+
style: 'percent',
104+
minimumFractionDigits: 1,
105+
maximumFractionDigits: 1,
106+
})}
107+
</Td>
108+
<Td align="right">
109+
{formatMessage(
110+
{ id: 'units.vfmPerHa' },
111+
{
112+
value: formatNumber(normalStocksPerOperationClass[index], {
113+
minimumFractionDigits: 1,
114+
maximumFractionDigits: 1,
115+
}),
116+
}
117+
)}
118+
</Td>
119+
</Tr>
120+
))}
117121
</Tbody>
118122
<Tfoot>
119123
<Tr>

‎src/components/OperationClass/OperationClass.tsx

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -101,60 +101,62 @@ export const OperationClass: React.FC<OperationClassProps> = ({
101101
</Tr>
102102
</Thead>
103103
<Tbody>
104-
{listOfSpecies.map((species, index) => (
105-
<Tr key={index}>
106-
<Td>{species.title}</Td>
107-
<Td>
108-
<BoemlyLink
109-
as="a"
110-
href={`${FOREST_DOCS_URI}/yieldTables/${species.yieldTable}`}
111-
>
112-
{yieldTables[species.yieldTable].meta.title}
113-
</BoemlyLink>
114-
</Td>
115-
{hasAreaInHectare && (
104+
{listOfSpecies
105+
.sort((speciesA, speciesB) => speciesA.title.localeCompare(speciesB.title))
106+
.map((species, index) => (
107+
<Tr key={index}>
108+
<Td>{species.title}</Td>
109+
<Td>
110+
<BoemlyLink
111+
as="a"
112+
href={`${FOREST_DOCS_URI}/yieldTables/${species.yieldTable}`}
113+
>
114+
{yieldTables[species.yieldTable].meta.title}
115+
</BoemlyLink>
116+
</Td>
117+
{hasAreaInHectare && (
118+
<Td align="right">
119+
{formatMessage(
120+
{
121+
id: 'units.ha',
122+
},
123+
{
124+
value: formatNumber(areaInHectarePerSpecies[index].areaInHectare, {
125+
minimumFractionDigits: 1,
126+
maximumFractionDigits: 1,
127+
}),
128+
}
129+
)}
130+
</Td>
131+
)}
132+
<Td align="right">
133+
{formatNumber(areasInPercentPerSpecies[index].areaInPercent, {
134+
style: 'percent',
135+
minimumFractionDigits: 1,
136+
maximumFractionDigits: 1,
137+
})}
138+
</Td>
139+
<Td align="right">
140+
{formatNumber(species.siteProductivity, {
141+
minimumFractionDigits: 1,
142+
maximumFractionDigits: 1,
143+
})}
144+
</Td>
116145
<Td align="right">
117146
{formatMessage(
118147
{
119-
id: 'units.ha',
148+
id: 'units.vfmPerHa',
120149
},
121150
{
122-
value: formatNumber(areaInHectarePerSpecies[index].areaInHectare, {
151+
value: formatNumber(normalStocks[index], {
123152
minimumFractionDigits: 1,
124153
maximumFractionDigits: 1,
125154
}),
126155
}
127156
)}
128157
</Td>
129-
)}
130-
<Td align="right">
131-
{formatNumber(areasInPercentPerSpecies[index].areaInPercent, {
132-
style: 'percent',
133-
minimumFractionDigits: 1,
134-
maximumFractionDigits: 1,
135-
})}
136-
</Td>
137-
<Td align="right">
138-
{formatNumber(species.siteProductivity, {
139-
minimumFractionDigits: 1,
140-
maximumFractionDigits: 1,
141-
})}
142-
</Td>
143-
<Td align="right">
144-
{formatMessage(
145-
{
146-
id: 'units.vfmPerHa',
147-
},
148-
{
149-
value: formatNumber(normalStocks[index], {
150-
minimumFractionDigits: 1,
151-
maximumFractionDigits: 1,
152-
}),
153-
}
154-
)}
155-
</Td>
156-
</Tr>
157-
))}
158+
</Tr>
159+
))}
158160
</Tbody>
159161
<Tfoot>
160162
<Tr>

‎src/components/OperationClasses/OperationClasses.tsx

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,23 @@ export const OperationClasses = ({ config }: OperationClassesProps): JSX.Element
1010
return (
1111
<>
1212
<Spacer height="4" />
13-
{config.operationClasses.map((operationClass, index) => {
14-
return (
15-
<Box key={`${operationClass.name.toLowerCase()}-${index}`}>
16-
<Heading>{operationClass.name}</Heading>
17-
<OperationClass
18-
rotationPeriod={operationClass.rotationPeriod}
19-
areaInHectare={operationClass.areaInHectare}
20-
listOfSpecies={operationClass.listOfSpecies}
21-
/>
22-
<Spacer height="4" />
23-
</Box>
24-
);
25-
})}
13+
{config.operationClasses
14+
.sort((operationClassA, operationClassB) =>
15+
operationClassA.name.localeCompare(operationClassB.name)
16+
)
17+
.map((operationClass, index) => {
18+
return (
19+
<Box key={`${operationClass.name.toLowerCase()}-${index}`}>
20+
<Heading>{operationClass.name}</Heading>
21+
<OperationClass
22+
rotationPeriod={operationClass.rotationPeriod}
23+
areaInHectare={operationClass.areaInHectare}
24+
listOfSpecies={operationClass.listOfSpecies}
25+
/>
26+
<Spacer height="4" />
27+
</Box>
28+
);
29+
})}
2630
</>
2731
);
2832
};

0 commit comments

Comments
 (0)