Add Task Radio and Select Many buttons - peophins-plasmas/pawsome-app GitHub Wiki

Early attempts at radio buttons (such as React Native Paper component) did not adequately show where user should click to select a radio feature.

After all pets and all associated users are set to state in OwnedPets and AllAssociatedUsers useStates, home-made radio buttons may be utilized. Both features use the <Pressable> component wrapper from React Native to function.

Radio Our radio buttons use the [checked, setChecked] useState.

The ownedPets array is mapped. Each pet array has as its first element the petName and as its second element the pet's unique database ID. A View sets base styles of the radio button. The Pressable component acts as a wrapper around a text object, allowing the Text to take an onPress function, and the Pressable also sets conditional styling ( <Pressable style={() => [ styles.radioPress, { backgroundColor: pet[1] === checked ? colors.pawsomeblue : "white", borderWidth: pet[1] === checked ? 3 : 0, borderColor: pet[1] === checked ? colors.yellow : "black", }, ]} onPress={() => { setChecked(pet[1]); setEntityPetId(pet[1]); setEntityPetName(pet[0]); }} > ). When the Text is touched, it calls setChecked to set the pet's unique id as the checked pet. Since the pet is reset with each press, only one pet can ever be selected. The conditional styling allows the single selected pet to visibly different from any other rendered pet in the radio set. There is also conditional styling on the Text element to handle styles that only work within Text components.

Select Many Select Many for assigning users to the newly entered task uses the [checkedUserIds, setCheckedUserIds] = useState([]) state. As this useState hook is initiated with an empty array, it is intended to take many assigned users. The allAssociatedUsers array contains user objects, each of which has a firstName, lastName, and id. This array is mapped to render a select button for each user associated with the current user, including the current user.

These buttons also use a View wrapping a Pressable wrapping a Text component. The major difference is in styling (to create a visual difference between 'select one' and 'select many' components, for a better user experience) and in the onPress function. The onPress function creates a copy of the current checkedUserIds array and pushes the id of the button-selected user into the array. Because the system throws an error at attempting to slice an empty array, if the checkedUserIds array is empty, a default empty array is created instead, and used in the same way. In either case, the array with the newly pushed id is set to checkedUserIds.

Three additional buttons are included for convenience: Add owners only, Add all users, and Clear all users, which allow quick selection of subsets of people instead of selecting each manually, and also resetting to checkedUserIds to an empty array (clearing all selected) in case of mistakes. The Add owners only adds the user and any co-owners (future feature) by directly setting the checkedUserIds array with those ids.