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 all 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)}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 };
8 changes: 8 additions & 0 deletions app/components/EmissionListItem/__tests__/EmissionListItem.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import { create } from "react-test-renderer";
import { GlobalizeProvider } from "react-native-globalize";
import * as reactRedux from "react-redux";
import {
FoodType,
TransportType,
Expand All @@ -11,6 +12,7 @@ import {
MealType,
} from "carbon-footprint";

import { userPreferences } from "ducks";
import { ui } from "utils";
import { EmissionModelType } from "interfaces";

Expand All @@ -29,6 +31,12 @@ const props = {
},
};

const useSelectorMock = jest.spyOn(reactRedux, "useSelector");

beforeEach(() => {
useSelectorMock.mockImplementation(userPreferences.selectors.getUseMetricUnits);
});

it("EmissionListItem renders correctly if mitigated", () => {
const tree = create(
<GlobalizeProvider locale="en">
Expand Down
66 changes: 44 additions & 22 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 @@ -78,7 +78,8 @@ exports[`EmissionListItem renders correctly if mitigated 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
<Text.Tertiary
lightGray={true}
Expand Down Expand Up @@ -184,7 +185,8 @@ exports[`EmissionListItem renders correctly with audio icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -280,7 +282,8 @@ exports[`EmissionListItem renders correctly with boat icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -376,7 +379,8 @@ exports[`EmissionListItem renders correctly with bus icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -472,7 +476,8 @@ exports[`EmissionListItem renders correctly with car icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -568,7 +573,8 @@ exports[`EmissionListItem renders correctly with card icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -664,7 +670,8 @@ exports[`EmissionListItem renders correctly with chocolate icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -760,7 +767,8 @@ exports[`EmissionListItem renders correctly with coffee icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -856,7 +864,8 @@ exports[`EmissionListItem renders correctly with electricity icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -952,7 +961,8 @@ exports[`EmissionListItem renders correctly with fish icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1048,7 +1058,8 @@ exports[`EmissionListItem renders correctly with full hd video icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1144,7 +1155,8 @@ exports[`EmissionListItem renders correctly with hd video icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1240,7 +1252,8 @@ exports[`EmissionListItem renders correctly with longHaulFlight icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1336,7 +1349,8 @@ exports[`EmissionListItem renders correctly with meal icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1432,7 +1446,8 @@ exports[`EmissionListItem renders correctly with mediumHaulFlight icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1528,7 +1543,8 @@ exports[`EmissionListItem renders correctly with motorbike icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1624,7 +1640,8 @@ exports[`EmissionListItem renders correctly with redMeat icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1720,7 +1737,8 @@ exports[`EmissionListItem renders correctly with shirt icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1816,7 +1834,8 @@ exports[`EmissionListItem renders correctly with shortHaulFlight icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -1912,7 +1931,8 @@ exports[`EmissionListItem renders correctly with train icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -2008,7 +2028,8 @@ exports[`EmissionListItem renders correctly with ultra hd video icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down Expand Up @@ -2104,7 +2125,8 @@ exports[`EmissionListItem renders correctly with whiteMeat icon 1`] = `
maximumFractionDigits={2}
value={2.1}
/>
kgCO2
kg
CO2eq
</Text.Tertiary>
</View>
</View>
Expand Down
23 changes: 23 additions & 0 deletions app/components/ListItemSwitch/ListItemSwitch.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { StyleSheet } from "react-native";

import { Colors } from "style";

export default StyleSheet.create({
container: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
flex: 1,
},
text: {
paddingVertical: 18,
},
topLine: {
borderTopColor: Colors.grey10,
borderTopWidth: 1.6,
},
bottomLine: {
borderBottomColor: Colors.grey10,
borderBottomWidth: 1.6,
},
});
Loading