Implement Hook to clean up how query parameters are added to frontend API calls

[PThorpe92]

We should do something like this:

import { useState, useMemo } from 'react';

export interface QueryParams {
    page?: number;
    per_page?: number;
    visibility?: string;
    search?: string;
    category?: string;
    order_by?: string;
    order?: string;
    tags?: string[];
    facility_id?: number;
    user_id?: number;
    include?: string;
    all?: number;
    role?: string;
}

export function useQueryParams(initialParams: QueryParams = {}) {
    const [params, setParams] = useState<QueryParams>(initialParams);

    const updateQuery = (newParams: Partial<QueryParams>) => {
        setParams((prev) => ({ ...prev, ...newParams }));
    };

    const queryString = useMemo(() => {
        const searchParams = new URLSearchParams();
        Object.entries(params).forEach(([key, value]) => {
            if (value !== undefined && value !== null && value !== '') {
                searchParams.append(key, String(value));
            }
        });
        return searchParams.toString();
    }, [params]);

    return { updateQuery, queryString };
}

That would allow us to have something like this:

    const { updateQuery, queryString } = useQueryParams({
        page: 1,
        per_page: 20,
        visibility: getFilter(),
        search: '',
        role: role
    });
    const {
        data: libraries,
        mutate: mutateLibraries,
        error: librariesError,
        isLoading: librariesLoading
    } = useSWR<ServerResponseMany<Library>, AxiosError>(
        `/api/libraries?${queryString}`
    );

instead of currently we do:

    const [page, setPage] = useState<number>(1);
    const [perPage, setPerPage] = useState<number>(20);
    const [searchTerm, setSearchTerm] = useState<string>('');
    const [filterLibraries, setFilterLibraries] = useState<string>(
        FilterLibraries['All Libraries']
    );
    const [filterLibrariesAdmin, setFilterLibrariesAdmin] = useState<string>(
        LibraryAdminVisibility['All Libraries']
    );
    const [orderBy, setOrderBy] = useState<string>(
        FilterLibrariesVidsandHelpfulLinksAdmin['Title (A to Z)']
    );
        const {
        data: libraries,
        mutate: mutateLibraries,
        error: librariesError,
        isLoading: librariesLoading
    } = useSWR<ServerResponseMany<Library>, AxiosError>(
        `/api/libraries?page=${pageQuery}&per_page=${perPage}&visibility=${isAdministrator(user) && !adminWithStudentView() ? filterVisibilityAdmin : 'visible'}&search=${searchTerm}&${categoryQueryString}
    );```