Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Imperial Units Feature #365

Merged
merged 19 commits into from
Mar 10, 2023
Merged

Imperial Units Feature #365

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
ad539b5
cross-platform jest TZ fix and grammar error for gafa guide
ThomasLatham Dec 21, 2022
c3abd32
changing projectId back to original
ThomasLatham Dec 21, 2022
4d28a21
reverting to 'a ethical' for single-purpose PR
ThomasLatham Dec 22, 2022
9e2f2d0
switch list item component, units setting UI and redux, related trans…
ThomasLatham Dec 26, 2022
2df6b40
removed unused import
ThomasLatham Dec 26, 2022
dbccc70
Merge branch 'imperial-system'
ThomasLatham Dec 26, 2022
0af7c7e
Merge branch 'main' of https://github.com/NMF-earth/nmf-app
ThomasLatham Dec 26, 2022
59252fd
Merge branch 'main' of https://github.com/NMF-earth/nmf-app
ThomasLatham Jan 31, 2023
d03df83
applying unit preference state to emission adding
ThomasLatham Jan 31, 2023
c64bc6c
extracted displayUnits and corresponding value to own functions; some…
ThomasLatham Feb 14, 2023
d687255
updated snapshots for the change to ListItemSwitch's switch padding
ThomasLatham Feb 14, 2023
00551ad
Merge branch 'main' of https://github.com/NMF-earth/nmf-app into impe…
ThomasLatham Feb 14, 2023
f390d9f
adding tests for new unit-conversion functions
ThomasLatham Feb 14, 2023
efd101a
unit preference for EmissionListItem and MonthlyBudget slider; snapsh…
ThomasLatham Feb 14, 2023
6015200
snapshots actually updated
ThomasLatham Feb 14, 2023
f885e3f
adding translations for units
ThomasLatham Feb 15, 2023
33482d9
updating calculation tests for translations
ThomasLatham Feb 15, 2023
3533ca7
implementing unit preference in all the nooks and crannies; updated s…
ThomasLatham Feb 15, 2023
0abca19
switch center fix; units calc functions legibility; metric in snapshots
ThomasLatham Feb 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 45 additions & 31 deletions app/components/EmissionListItem/EmissionListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import React from "react";
import { View, TouchableOpacity } from "react-native";
import { useSelector } from "react-redux";
import { Ionicons } from "@expo/vector-icons";
import { FormattedNumber } from "react-native-globalize";

import { Colors } from "style";
import { userPreferences } from "ducks";
import { calculation } from "utils";
import { RecurringEmission, Emission, EmissionType } from "interfaces";

import Text from "../Text";
Expand All @@ -30,38 +33,49 @@ const EmissionListItem: React.FC<EmissionListItemProps> = ({
title = "",
co2value = 0,
onPress,
}) => (
<TouchableOpacity onPress={onPress} style={styles.container}>
<View style={styles.iconContainer}>
<View style={isMitigated ? styles.mitigatedCircle : styles.notMitigatedCircle} />
}) => {
const useMetricUnits = useSelector(userPreferences.selectors.getUseMetricUnits);
const getDisplayUnitsValue = calculation.getDisplayUnitsValue;
const getDisplayUnits = calculation.getDisplayUnits;

const displayValue: number = getDisplayUnitsValue(co2value, useMetricUnits);

return (
<TouchableOpacity onPress={onPress} style={styles.container}>
<View style={styles.iconContainer}>
<View style={isMitigated ? styles.mitigatedCircle : styles.notMitigatedCircle} />
<Ionicons
name={iconName as keyof typeof Ionicons.glyphMap}
size={22}
style={styles.icon}
color={isMitigated ? Colors.green50 : Colors.grey70}
/>
</View>
<View style={styles.textContainer}>
<Text.Primary numberOfLines={1}>{name.length ? name : title}</Text.Primary>
<View style={styles.detailsContainer}>
<Text.Tertiary numberOfLines={1} lightGray>
<FormattedNumber
maximumFractionDigits={displayValue >= 1 ? 2 : 4}
value={displayValue}
/>
{" " + getDisplayUnits(co2value, useMetricUnits)}CO2
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just realized that now : we are missing the eq for some reason 😅 {" " + getDisplayUnits(co2value, useMetricUnits)}CO2eq

</Text.Tertiary>
{isMitigated && (
<>
<Text.Tertiary lightGray>{" • "}</Text.Tertiary>
<Text.Tertiary green>{"Offset"}</Text.Tertiary>
</>
)}
</View>
</View>
<Ionicons
name={iconName as keyof typeof Ionicons.glyphMap}
size={22}
name={"ios-chevron-forward-outline"}
size={18}
style={styles.icon}
color={isMitigated ? Colors.green50 : Colors.grey70}
color={Colors.grey70}
/>
</View>
<View style={styles.textContainer}>
<Text.Primary numberOfLines={1}>{name.length ? name : title}</Text.Primary>
<View style={styles.detailsContainer}>
<Text.Tertiary numberOfLines={1} lightGray>
<FormattedNumber maximumFractionDigits={co2value >= 1 ? 2 : 4} value={co2value} /> kgCO2
</Text.Tertiary>
{isMitigated && (
<>
<Text.Tertiary lightGray>{" • "}</Text.Tertiary>
<Text.Tertiary green>{"Offset"}</Text.Tertiary>
</>
)}
</View>
</View>
<Ionicons
name={"ios-chevron-forward-outline"}
size={18}
style={styles.icon}
color={Colors.grey70}
/>
</TouchableOpacity>
);

</TouchableOpacity>
);
};
export { EmissionListItem, EmissionListItemProps };
110 changes: 66 additions & 44 deletions app/components/EmissionListItem/__tests__/__snapshots__/EmissionListItem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,10 @@ exports[`EmissionListItem renders correctly if mitigated 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer to keep the kg values in snapshots across the entire project, or create two snapshots files like EmissionListItem.metric.test.tsx.snap and EmissionListItem.imperial.test.tsx.snap thanks to EmissionListItem.metric.test.tsx and EmissionListItem.imperial.test.tsx

Copy link
Contributor Author

@ThomasLatham ThomasLatham Feb 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I put together a perhaps janky way to get this working, using the getUseMetricUnits selector to mock useSelector before each test in the affected snapshots. EmissionItemScreen I only mocked useSelector in this once per test since it uses other selectors, and this also required me to move the related line of code above all the other useSelector calls in order for it to receive the intended mocking

EDIT

I apologize for my unclear language here -- it's like 2 am, and I can't put my words together right now

/>
kgCO2
lb
CO2
</Text.Tertiary>
<Text.Tertiary
lightGray={true}
Expand Down Expand Up @@ -182,9 +183,10 @@ exports[`EmissionListItem renders correctly with audio icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -278,9 +280,10 @@ exports[`EmissionListItem renders correctly with boat icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -374,9 +377,10 @@ exports[`EmissionListItem renders correctly with bus icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -470,9 +474,10 @@ exports[`EmissionListItem renders correctly with car icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -566,9 +571,10 @@ exports[`EmissionListItem renders correctly with card icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -662,9 +668,10 @@ exports[`EmissionListItem renders correctly with chocolate icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -758,9 +765,10 @@ exports[`EmissionListItem renders correctly with coffee icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -854,9 +862,10 @@ exports[`EmissionListItem renders correctly with electricity icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -950,9 +959,10 @@ exports[`EmissionListItem renders correctly with fish icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1046,9 +1056,10 @@ exports[`EmissionListItem renders correctly with full hd video icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1142,9 +1153,10 @@ exports[`EmissionListItem renders correctly with hd video icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1238,9 +1250,10 @@ exports[`EmissionListItem renders correctly with longHaulFlight icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1334,9 +1347,10 @@ exports[`EmissionListItem renders correctly with meal icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1430,9 +1444,10 @@ exports[`EmissionListItem renders correctly with mediumHaulFlight icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1526,9 +1541,10 @@ exports[`EmissionListItem renders correctly with motorbike icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1622,9 +1638,10 @@ exports[`EmissionListItem renders correctly with redMeat icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1718,9 +1735,10 @@ exports[`EmissionListItem renders correctly with shirt icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1814,9 +1832,10 @@ exports[`EmissionListItem renders correctly with shortHaulFlight icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1910,9 +1929,10 @@ exports[`EmissionListItem renders correctly with train icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -2006,9 +2026,10 @@ exports[`EmissionListItem renders correctly with ultra hd video icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -2102,9 +2123,10 @@ exports[`EmissionListItem renders correctly with whiteMeat icon 1`] = `
>
<FormattedNumber
maximumFractionDigits={2}
value={2.1}
value={4.6305000000000005}
/>
kgCO2
lb
CO2
</Text.Tertiary>
</View>
</View>
Expand Down
Loading