# Handling conflicting filters - Thurs 1st Oct, 2020

In the app, there are situations where we don't want to allow the user to be able to select certain combinations of feed filters.

UI wise, we handle this by showing a confirmation modal, asking the user if they want to apply this conflicting filter and informing them that doing this will reset their exisiting selected filter choices.

I think the below solution is quite elegant. Before settng a filter, check if `hasConflictingFilter`. If there is one, show the confirmation modal before calling the `onValueChange` method.

interface FilterOptionProps {
    name: string
    checked: boolean
    onValueChange: (value: boolean) => void
    hasConflictingFilter: boolean
    variant?: 'switch' | 'radio'
}

export const FilterOption: React.FC<FilterOptionProps> = ({
    name,
    checked,
    onValueChange,
    hasConflictingFilter,
    variant = 'switch',
}) => {
    const { colors } = useContext(ThemeContext)
    const [enabled, setEnabled] = useState(checked)

    useEffect(() => setEnabled(checked), [checked])

    const handleOnValueChange = (val: boolean) => {
        if (!hasConflictingFilter) {
            onValueChange(val)
        }
        setEnabled(val)
    }
    return (
        <>
            <Wrapper flexDirection="row" alignItems="center">
                {variant === 'radio' && (
                    <Radio colorScheme="light" checked={enabled} onValueChange={handleOnValueChange} />
                )}
                {variant === 'switch' && (
                    <Switch value={enabled} ios_backgroundColor={colors.blue} onValueChange={handleOnValueChange} />
                )}
                <P mb={0} ml="md">
                    {name}
                </P>
            </Wrapper>
            {hasConflictingFilter && enabled && (
                <FilterConfirmationModal
                    value={enabled}
                    onConfirm={() => onValueChange(enabled)}
                    onCancel={() => setEnabled(false)}
                />
            )}
        </>
    )
}

I also had a fun bug where all the API calls in the iOS TestFlight and Android internal test track C+ builds were failing. I use the `sed` command to inject in variables to my .env depending on the environment.

For example: `sed -i "" "s ^API_URL=.* API_URL=${API_URL} g" .env`

It turned out, I simply had a typo, and was using `APP_URL` instead of `API_URL`! D'oh!

###### tags: `programmingjournal` `2020` `C+` `filters` `gocd` `typo` `app_url`