🏗️ Major Refactor to Remove Label Button Services #1086
fix syntax errors and apply prettier
Prettier was not running on these files because they had syntax errors from bad merge conflicts. Fixes syntax on these and runs Prettier to clean up
- Loading branch information
commit 1b0169208dccdf913ad2f2bee0aa72a89aa09f8d
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,16 +2,32 @@ | |
| In the default configuration, these are the "Mode" and "Purpose" buttons. | ||
| Next to the buttons is a small checkmark icon, which marks inferrel labels as confirmed */ | ||
|
|
||
| import React, { useContext, useEffect, useState, useMemo } from 'react'; | ||
| import { getAngularService } from '../../angular-react-helper'; | ||
| import { View, Modal, ScrollView, Pressable, useWindowDimensions } from 'react-native'; | ||
| import { | ||
| IconButton, | ||
| Text, | ||
| Dialog, | ||
| useTheme, | ||
| RadioButton, | ||
| Button, | ||
| TextInput, | ||
| } from 'react-native-paper'; | ||
| import DiaryButton from '../../components/DiaryButton'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import LabelTabContext from '../../diary/LabelTabContext'; | ||
| import { displayErrorMsg, logDebug } from '../../plugin/logger'; | ||
| import { | ||
| getLabelInputDetails, | ||
| getLabelInputs, | ||
| inferFinalLabels, | ||
| labelInputDetailsForTrip, | ||
| labelKeyToRichMode, | ||
| readableLabelToKey, | ||
| verifiabilityForTrip, | ||
| } from './confirmHelper'; | ||
| import useAppConfig from '../../useAppConfig'; | ||
|
|
||
| const MultilabelButtonGroup = ({ trip, buttonsInline = false }) => { | ||
| const { colors } = useTheme(); | ||
|
|
@@ -78,40 +94,52 @@ const MultilabelButtonGroup = ({ trip, buttonsInline = false }) => { | |
| } | ||
|
|
||
| const tripInputDetails = labelInputDetailsForTrip(timelineLabelMap[trip._id.$oid], appConfig); | ||
| return ( | ||
| <> | ||
| <View style={{ flexDirection: 'row', alignItems: 'center' }}> | ||
| <View style={{ flex: 1, flexDirection: buttonsInline ? 'row' : 'column', columnGap: 8 }}> | ||
| {Object.keys(tripInputDetails).map((key, i) => { | ||
| const input = tripInputDetails[key]; | ||
| const inputIsConfirmed = timelineLabelMap[trip._id.$oid]?.[input.name]; | ||
| const inputIsInferred = inferFinalLabels(trip, timelineLabelMap[trip._id.$oid])[ | ||
| input.name | ||
| ]; | ||
| let fillColor, textColor, borderColor; | ||
| if (inputIsConfirmed) { | ||
| fillColor = colors.primary; | ||
| } else if (inputIsInferred) { | ||
| fillColor = colors.secondaryContainer; | ||
| borderColor = colors.secondary; | ||
| textColor = colors.onSecondaryContainer; | ||
| } | ||
| const btnText = inputIsConfirmed?.text || inputIsInferred?.text || input.choosetext; | ||
|
|
||
| return ( | ||
| <View key={i} style={{ flex: 1 }}> | ||
| <Text>{t(input.labeltext)}</Text> | ||
| <DiaryButton | ||
| fillColor={fillColor} | ||
| borderColor={borderColor} | ||
| textColor={textColor} | ||
| onPress={(e) => setModalVisibleFor(input.name)}> | ||
| {t(btnText)} | ||
| </DiaryButton> | ||
| </View> | ||
| ); | ||
| })} | ||
| </View> | ||
| {verifiabilityForTrip(trip, timelineLabelMap[trip._id.$oid]) == 'can-verify' && ( | ||
|
There was a problem hiding this comment. did we ever figure out the performance difference between calling functions and using fields in the TSX? As I said earlier, I am concerned that the overhead of a function call for each trip every time we scroll, for example. Does React handle this properly with caching? There was a problem hiding this comment. Theoretically, in a React project I think the difference should be negligible because React components are designed to only re-render when their state, or any stateful props, are explicitly updated. That's why React doesn't like mutations - if a value changes by any other way, the React component will not reflect the change because it doesn't know to re-render itself. One caveat here though: the way |
||
| <View style={{ marginTop: 16 }}> | ||
| <IconButton | ||
| icon="check-bold" | ||
| mode="outlined" | ||
| size={18} | ||
| onPress={verifyTrip} | ||
| containerColor={colors.secondaryContainer} | ||
| style={{ width: 24, height: 24, margin: 3, borderColor: colors.secondary }} | ||
| /> | ||
| </View> | ||
| )} | ||
| {trip.verifiability === 'can-verify' && ( | ||
| <View style={{ marginTop: 16 }}> | ||
| <IconButton | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ditto