# C+ filters functionality - Tues 29th September, 2020

A good day today with lots of progress made on adding feed filters to C+.

I have a custom hook, `useFilters`, that is setting up the Formik state for managing the selected (checked) filters and managing the persistance and retrieval of applied filters to local storage so that the same filters are used across app reloads.

import { useEffect, useState } from 'react'
import { FormikHelpers, useFormik } from 'formik'

import RNSecureStorage, { ACCESSIBLE } from 'rn-secure-storage'

import { InitialValues } from 'blah'
import { extractSelectedFilters } from 'blah'

const initialValues: InitialValues = {
    myFilter: null,
    people: [],
    peopleOptions: [],
    groups: [],
    groupOptions: ['writtenBy', 'receivedBy'],
    subscribed: false,
    filterName: '',
    createFilter: false,
}
const getSavedFilters = async (): Promise<InitialValues> => {
    try {
        return await RNSecureStorage.get('filters').then((filters) => (filters ? JSON.parse(filters) : initialValues))
    } catch (error) {
        // eslint-disable-next-line no-console
        console.log('Error retrieving saved filters', error)
    }
    return initialValues
}

const persistFilters = async (filters: InitialValues): Promise<void> => {
    try {
        await RNSecureStorage.set('filters', JSON.stringify(filters), { accessible: ACCESSIBLE.WHEN_UNLOCKED })
    } catch (error) {
        // eslint-disable-next-line no-console
        console.log('Error persisting filters', error)
    }
}

export const useFilters = () => {
    const [filterParams, setFilterParams] = useState('')

    const onSubmit = (values: InitialValues, _formikHelpers: FormikHelpers<InitialValues>) => {
        persistFilters(values)
    }

    const formik = useFormik({ initialValues, onSubmit })

    useEffect(() => {
        getSavedFilters().then((state) => {
            formik.setFormikState((prevFormikState) => ({ ...prevFormikState, values: state }))
        })
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    useEffect(() => {
        const selectedFilters = extractSelectedFilters({
            groups: formik.values.groups,
            groupOptions: formik.values.groupOptions,
            myCompanyFilter: null,
            myFilter: formik.values.myFilter,
            people: formik.values.people,
            peopleOptions: formik.values.peopleOptions,
        })

        setFilterParams(selectedFilters)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [formik.values])

    return { ...formik, filterParams }
}

It's quite a neat way to abstact a lot of the filter logic away. This hook is then called inside a provider wrapping the feed, allowing the selected filters to be applied to the feed query there.

###### tags: `programmingjournal` `2020` `C+` `filters` `Formik`