I have a react native native app and I am fetching the state of the toggle buttons from an API and then putting them into redux state. I do not like the way I have implemented it cause it seems very messy and was wondering if anyone would have any suggestions on how to refactor the code.
Below is screen that calls my redux state for each toggle switch.
const SiteSettingsDashboard = (props) => {
const dispatch = useDispatch();
const alarmNotificationsToggle = useSelector(
(state) => state.registration.alarmNotifications
);
const armingNotificationToggle = useSelector(
(state) => state.registration.armingNotifications
);
const faultsNotificationToggle = useSelector(
(state) => state.registration.faultsNotifications
);
const engineerNotificationToggle = useSelector(
(state) => state.registration.engineerNotifications
);
const techZoneNotificationToggle = useSelector(
(state) => state.registration.techZoneNotifications
);
const eventTimerNotificationToggle = useSelector(
(state) => state.registration.eventTimerNotifications
);
const noCommsNotificationToggle = useSelector(
(state) => state.registration.noCommsNotifications
);
const ToggleSwitchInput = (value) => {
dispatch(registrationActions.toggleNotificationInput(value));
};
return (
<View>
<View style={{ flexDirection: "row" }}>
<Text>{IMLocalized("Arming")}</Text>
<Switch
style={styles.right}
trackColor={{ false: "#FF0000", true: "#008000" }}
thumbColor={armingNotificationToggle ? "#008000" : "#FF0000"}
ios_backgroundColor="#3e3e3e"
onValueChange={() => ToggleSwitchInput("arming")}
value={armingNotificationToggle}
/>
</View>
<Card.Divider />
<View style={{ flexDirection: "row" }}>
<Text>{IMLocalized("Faults")}</Text>
<Switch
style={styles.right}
trackColor={{ false: "#FF0000", true: "#008000" }}
thumbColor={faultsNotificationToggle ? "#008000" : "#FF0000"}
ios_backgroundColor="#3e3e3e"
onValueChange={() => ToggleSwitchInput("faults")}
value={faultsNotificationToggle}
/>
</View>
<Card.Divider />
<View style={{ flexDirection: "row" }}>
<Text>{IMLocalized("Engineer")}</Text>
<Switch
style={styles.right}
trackColor={{ false: "#FF0000", true: "#008000" }}
thumbColor={engineerNotificationToggle ? "#008000" : "#FF0000"}
ios_backgroundColor="#3e3e3e"
onValueChange={() => ToggleSwitchInput("engineer")}
value={engineerNotificationToggle}
/>
</View>
<Card.Divider />
<View style={{ flexDirection: "row" }}>
<Text>{IMLocalized("TechZone")}</Text>
<Switch
style={styles.right}
trackColor={{ false: "#FF0000", true: "#008000" }}
thumbColor={techZoneNotificationToggle ? "#008000" : "#FF0000"}
ios_backgroundColor="#3e3e3e"
onValueChange={() => ToggleSwitchInput("techZone")}
value={techZoneNotificationToggle}
/>
</View>
<Card.Divider />
<View style={{ flexDirection: "row" }}>
<Text>{IMLocalized("EventTimers")}</Text>
<Switch
style={styles.right}
trackColor={{ false: "#FF0000", true: "#008000" }}
thumbColor={eventTimerNotificationToggle ? "#008000" : "#FF0000"}
ios_backgroundColor="#3e3e3e"
onValueChange={() => ToggleSwitchInput("eventTimer")}
value={eventTimerNotificationToggle}
/>
</View>
<Card.Divider />
<View style={{ flexDirection: "row" }}>
<Text>{IMLocalized("NoComms")}</Text>
<Switch
style={styles.right}
trackColor={{ false: "#FF0000", true: "#008000" }}
thumbColor={noCommsNotificationToggle ? "#008000" : "#FF0000"}
ios_backgroundColor="#3e3e3e"
onValueChange={() => ToggleSwitchInput("noComms")}
value={noCommsNotificationToggle}
/>
</View>
<Card.Divider />
</Card>
</View>
);
};
const styles = StyleSheet.create({
errorText: {
color: "red",
},
right: {
flex: 1,
},
});
export default SiteSettingsDashboard;
I have the state of each of the buttons declared in redux.
export const types = Object.freeze({
ToggleAlarmNotification: "TOGGLE_ALARM_NOTIFICATION",
ToggleArmingNotification: "TOGGLE_ARMING_NOTIFICATION",
ToggleFaultsNotification: "TOGGLE_FAULTS_NOTIFICATION",
ToggleEngineerNotification: "TOGGLE_Engineer_NOTIFICATION",
ToggleTechZoneNotification: "TOGGLE_TECH_ZONE_NOTIFICATION",
ToggleEventTimerNotification: "TOGGLE_EVENT_TIMER_NOTIFICATION",
ToggleNoCommsNotification: "TOGGLE_NO_COMMS_NOTIFICATION",
});
const initialState = {
isRequestingLogoImage: false,
alarmNotifications: false,
armingNotifications: false,
faultsNotifications: false,
engineerNotifications: false,
techZoneNotifications: false,
eventTimerNotifications: false,
noCommsNotifications: false,
};
And here is my reducer file. I do this for all of the toggle buttons.
case types.ToggleNoCommsNotification:
return {
...state,
noCommsNotifications: !state.noCommsNotifications,
};
ToggleSwitchInput
, but not with your action types or your selectors. You don't need to have a separate action type constant for every toggle. You can use the payload to pass the toggle name. \$\endgroup\$Card
components are essentially the same! I can get this code down to half the size if not less. But I need to go to bed first. \$\endgroup\$