@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1602

package/components/app/providers/ModalProvider.js

@@ -1,10 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ConfirmDeleteModal from '@cccsaurora/howler-ui/components/elements/display/modals/ConfirmDeleteModal';
 import { createContext, useCallback, useEffect, useState } from 'react';
+import { missingContext } from './contextUtils';
 const defaultOptions = {
     disableClose: false
 };
-export const ModalContext = createContext(null);
+const DEFAULT_MODAL_CONTEXT = {
+    showModal: () => missingContext('ModalContext'),
+    withConfirmDeleteModal: () => missingContext('ModalContext'),
+    setContent: () => missingContext('ModalContext'),
+    close: () => missingContext('ModalContext')
+};
+export const ModalContext = createContext(DEFAULT_MODAL_CONTEXT);
 const ModalProvider = ({ children }) => {
     const [content, setContent] = useState(null);
     const [options, setOptions] = useState(defaultOptions);

package/components/app/providers/OverviewProvider.js

@@ -1,7 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import api from '@cccsaurora/howler-ui/api';
 import { createContext, useCallback, useState } from 'react';
-export const OverviewContext = createContext(null);
+import { missingContext } from './contextUtils';
+const DEFAULT_OVERVIEW_CONTEXT = {
+    overviews: [],
+    getOverviews: () => missingContext('OverviewContext'),
+    getMatchingOverview: () => missingContext('OverviewContext'),
+    refresh: () => missingContext('OverviewContext'),
+    loaded: false
+};
+export const OverviewContext = createContext(DEFAULT_OVERVIEW_CONTEXT);
 const OverviewProvider = ({ children }) => {
     const [fetching, setFetching] = useState(false);
     const [loaded, setLoaded] = useState(false);
@@ -13,7 +21,7 @@ const OverviewProvider = ({ children }) => {
         else {
             try {
                 setFetching(true);
-                const result = await api.overview.get();
+                const result = (await api.overview.get()) ?? [];
                 setOverviews(result);
                 setLoaded(true);
                 return result;

package/components/app/providers/ParameterProvider.d.ts

@@ -1,7 +1,7 @@
 import type { SearchIndex } from '@cccsaurora/howler-ui/api/v2/search';
 import type { FC, PropsWithChildren } from 'react';
 export interface ParameterContextType {
-    selected?: string;
+    selected?: string | null;
     query?: string;
     offset: number;
     trackTotalHits: boolean;
@@ -9,10 +9,10 @@ export interface ParameterContextType {
     span?: string;
     indexes?: SearchIndex[];
     filters?: string[];
-    startDate?: string;
-    endDate?: string;
+    startDate?: string | null;
+    endDate?: string | null;
     views?: string[];
-    setSelected: (id: string) => void;
+    setSelected: (id: string | null) => void;
     setQuery: (id: string) => void;
     setOffset: (offset: string | number) => void;
     setSort: (sort: string) => void;
@@ -33,15 +33,15 @@ export interface ParameterContextType {
     resetViews: () => void;
 }
 interface SearchValues {
-    selected: string;
+    selected: string | null;
     query: string;
     sort: string;
     span: string;
     indexes: SearchIndex[];
     filters: string[];
     views: string[];
-    startDate: string;
-    endDate: string;
+    startDate: string | null;
+    endDate: string | null;
     offset: number;
     trackTotalHits: boolean;
 }

package/components/app/providers/ParameterProvider.js

@@ -1,17 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { identity, isEmpty, isEqual, isUndefined, omitBy, uniq } from 'lodash-es';
+import { identity, isEmpty, isEqual, isNil, isUndefined, omitBy, uniq } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useLocation, useParams, useSearchParams } from 'react-router-dom';
+import { useLocation, useParams, useSearchParams } from 'react-router';
 import { createContext, useContextSelector } from 'use-context-selector';
 import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
-export const ParameterContext = createContext(null);
+import { missingContext } from './contextUtils';
 const DEFAULT_VALUES = {
     query: DEFAULT_QUERY,
     sort: 'event.created desc',
     span: 'date.range.1.month',
     indexes: ['hit']
 };
+const DEFAULT_PARAMETER_CONTEXT = {
+    ...DEFAULT_VALUES,
+    selected: null,
+    offset: 0,
+    trackTotalHits: false,
+    filters: [],
+    startDate: null,
+    endDate: null,
+    views: [],
+    setSelected: () => missingContext('ParameterContext'),
+    setQuery: () => missingContext('ParameterContext'),
+    setOffset: () => missingContext('ParameterContext'),
+    setSort: () => missingContext('ParameterContext'),
+    setSpan: () => missingContext('ParameterContext'),
+    setCustomSpan: () => missingContext('ParameterContext'),
+    addFilter: () => missingContext('ParameterContext'),
+    removeFilter: () => missingContext('ParameterContext'),
+    setFilter: () => missingContext('ParameterContext'),
+    resetFilters: () => missingContext('ParameterContext'),
+    addIndex: () => missingContext('ParameterContext'),
+    removeIndex: () => missingContext('ParameterContext'),
+    setIndex: () => missingContext('ParameterContext'),
+    setIndexes: () => missingContext('ParameterContext'),
+    resetIndexes: () => missingContext('ParameterContext'),
+    addView: () => missingContext('ParameterContext'),
+    removeView: () => missingContext('ParameterContext'),
+    setView: () => missingContext('ParameterContext'),
+    resetViews: () => missingContext('ParameterContext')
+};
+export const ParameterContext = createContext(DEFAULT_PARAMETER_CONTEXT);
 /** Scalar URL params that map 1:1 to a state key */
 const PARAM_MAPPINGS = [
     ['query', 'query'],
@@ -36,6 +66,9 @@ const parseOffset = (_offset) => {
     if (typeof _offset === 'number') {
         return _offset;
     }
+    if (!_offset) {
+        return 0;
+    }
     const candidate = parseInt(_offset);
     return isNaN(candidate) ? 0 : candidate;
 };
@@ -140,7 +173,11 @@ const useUrlSync = (values, defaults, _setValues, params, setParams, pathname, s
         const changes = {};
         // Scalar params: fall back to default when absent from URL
         PARAM_MAPPINGS.forEach(([urlKey, stateKey]) => {
-            const urlValue = params.has(urlKey) ? params.get(urlKey) : (defaults[stateKey] ?? undefined);
+            const urlValue = params.has(urlKey)
+                ? params.get(urlKey)
+                : stateKey === 'startDate' || stateKey === 'endDate'
+                    ? null
+                    : (defaults[stateKey] ?? undefined);
             if (urlValue !== values[stateKey]) {
                 changes[stateKey] = urlValue;
             }
@@ -179,7 +216,7 @@ const useUrlSync = (values, defaults, _setValues, params, setParams, pathname, s
                     newParams.delete(key);
                     value.forEach(val => newParams.append(key, val));
                 }
-                else if (value === null || value === undefined) {
+                else if (isNil(value)) {
                     newParams.delete(key);
                 }
                 else {

package/components/app/providers/ParameterProvider.test.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
 import { useContextSelector } from 'use-context-selector';

package/components/app/providers/RecordProvider.js

@@ -55,7 +55,13 @@ const RecordProvider = ({ children }) => {
                 query: `howler.id:${id}`,
                 rows: 1,
                 metadata: ['template', 'dossiers', 'analytic', 'overview']
-            })).then(result => result.items[0]);
+            })).then(result => {
+                const record = result?.items[0];
+                if (!record) {
+                    throw new Error(`Unable to retrieve record ${id}.`);
+                }
+                return record;
+            });
             const newRecord = await recordRequests.current[id];
             setRecords(_records => ({ ..._records, [id]: newRecord }));
         }

package/components/app/providers/RecordSearchProvider.d.ts

@@ -1,5 +1,4 @@
 import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
@@ -18,7 +17,7 @@ export interface RecordSearchContextType {
     search: (query: string, appendResults?: boolean) => void;
     getFilters: () => Promise<string[]>;
     queryHistory: QueryEntry;
-    setQueryHistory: ReturnType<typeof useMyLocalStorageItem>[1];
+    setQueryHistory: (value: Record<string, string>) => void;
 }
 export declare const RecordSearchContext: import("use-context-selector").Context<RecordSearchContextType>;
 declare const RecordSearchProvider: FC<PropsWithChildren>;

package/components/app/providers/RecordSearchProvider.js

@@ -4,15 +4,15 @@ import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMyLocalStorage, { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import dayjs from 'dayjs';
 import i18n from '@cccsaurora/howler-ui/i18n';
-import { cloneDeep, isNil } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 import isNull from 'lodash-es/isNull';
 import isUndefined from 'lodash-es/isUndefined';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { createContext, useContextSelector } from 'use-context-selector';
 import { DEFAULT_QUERY, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
-import { convertCustomDateRangeToLucene, convertDateToLucene } from '@cccsaurora/howler-ui/utils/utils';
+import { convertCustomDateRangeToLucene, convertDateToLucene, notNil } from '@cccsaurora/howler-ui/utils/utils';
 import { ParameterContext } from './ParameterProvider';
 import { RecordContext } from './RecordProvider';
 import { ViewContext } from './ViewProvider';
@@ -47,7 +47,7 @@ const RecordSearchProvider = ({ children }) => {
         'howler.id: *': new Date().toISOString()
     });
     const [fzfSearch, setFzfSearch] = useState(false);
-    const filters = useMemo(() => allFilters.filter(filter => !filter.endsWith('*')), [allFilters]);
+    const filters = useMemo(() => (allFilters ?? []).filter(filter => !filter.endsWith('*')), [allFilters]);
     // On load check to filter out any queries older than one month
     useEffect(() => {
         const filterQueryTime = dayjs().subtract(1, 'month').toISOString();
@@ -56,10 +56,10 @@ const RecordSearchProvider = ({ children }) => {
     }, []);
     // Inject default view into URL when no views present
     useEffect(() => {
-        if (views.length === 0 && defaultView) {
+        if (views?.length === 0 && defaultView) {
             addView(defaultView);
         }
-    }, [views.length, defaultView, addView]);
+    }, [views?.length, defaultView, addView]);
     const getFilters = useCallback(async () => {
         const _filters = cloneDeep(filters);
         // Add span filter
@@ -70,16 +70,17 @@ const RecordSearchProvider = ({ children }) => {
             _filters.push(`event.created:${convertCustomDateRangeToLucene(startDate, endDate)}`);
         }
         // Fetch all view queries
-        if (views.length > 0) {
+        if (views?.length) {
             const viewObjects = await getCurrentViews({ views });
             // Filter out null/undefined views and extract queries
-            viewObjects
-                .filter(view => view?.query)
-                .map(view => view.query)
-                .forEach(viewQuery => _filters.push(viewQuery));
+            viewObjects.forEach(view => {
+                if (view?.query) {
+                    _filters.push(view.query);
+                }
+            });
         }
         return _filters;
-    }, [endDate, filters, getCurrentViews, span, startDate, views]);
+    }, [views, endDate, filters, getCurrentViews, span, startDate]);
     const search = useCallback(async (_query, appendResults) => {
         THROTTLER.debounce(async () => {
             if (_query === 'woof!') {
@@ -99,8 +100,12 @@ const RecordSearchProvider = ({ children }) => {
             setSearching(true);
             setError(null);
             try {
-                const _response = await dispatchApi(api.v2.search.post(indexes, {
-                    offset: appendResults && !isNil(response?.rows) ? response.rows : offset,
+                if (!indexes?.length) {
+                    setResponse(null);
+                    return;
+                }
+                const responseResult = await dispatchApi(api.v2.search.post(indexes, {
+                    offset: appendResults && notNil(response?.rows) ? response.rows : offset,
                     rows: pageCount,
                     query: _query || DEFAULT_QUERY,
                     sort,
@@ -108,26 +113,30 @@ const RecordSearchProvider = ({ children }) => {
                     track_total_hits: trackTotalHits,
                     metadata: ['template', 'overview', 'analytic']
                 }), { showError: false, throwError: true });
-                if (_response.total < offset) {
+                if (!responseResult) {
+                    setResponse(null);
+                    return;
+                }
+                if (responseResult.total < offset) {
                     setOffset(0);
                 }
-                loadHits(_response.items);
+                loadHits(responseResult.items);
                 if (!appendResults) {
-                    setResponse(_response);
+                    setResponse(responseResult);
                 }
                 else {
                     setResponse(_existingResponse => _existingResponse
                         ? {
-                            ..._response,
+                            ...responseResult,
                             offset: _existingResponse.offset,
-                            rows: Math.min(_existingResponse.rows + _response.rows, _response.total),
-                            items: [..._existingResponse.items, ..._response.items]
+                            rows: Math.min(_existingResponse.rows + responseResult.rows, responseResult.total),
+                            items: [..._existingResponse.items, ...responseResult.items]
                         }
-                        : _response);
+                        : responseResult);
                 }
             }
             catch (e) {
-                setError(e.message);
+                setError(e instanceof Error ? e.message : String(e));
             }
             finally {
                 setSearching(false);
@@ -155,7 +164,7 @@ const RecordSearchProvider = ({ children }) => {
         if (span?.endsWith('custom') && (!startDate || !endDate)) {
             return;
         }
-        if (views.length > 0 || (query && query !== DEFAULT_QUERY) || offset > 0 || filters.length > 0) {
+        if (views?.length || (query && query !== DEFAULT_QUERY) || offset > 0 || filters.length > 0) {
             void search(query);
         }
         else {

package/components/app/providers/RecordSearchProvider.test.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { hpost } from '@cccsaurora/howler-ui/api';
 import { cloneDeep } from 'lodash-es';
@@ -12,7 +13,7 @@ import { ViewContext } from './ViewProvider';
 vi.mock('api', { spy: true });
 setupContextSelectorMock();
 const mockLocalStorage = setupLocalStorageMock();
-import { useLocation, useParams, useSearchParams } from 'react-router-dom';
+import { useLocation, useParams, useSearchParams } from 'react-router';
 const mockSetParams = vi.fn();
 const mockParams = vi.mocked(useParams);
 const mockLocation = vi.mocked(useLocation());

package/components/app/providers/SearchResponseProvider.d.ts

@@ -1,21 +1,24 @@
 import type { HowlerSearchRequest, HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
 import type { DispatchApiConfig } from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { type PropsWithChildren } from 'react';
+import { type Context, type PropsWithChildren } from 'react';
 export type SearchResponseState<T> = HowlerSearchResponse<T> & {
     removeCount: number;
 };
-export type SearchResponseContextType<T, R = HowlerSearchResponse<T>> = {
+export type SearchResponseContextType<T> = {
     push: (item: T) => void;
     remove: (id: string) => void;
     replace: (id: string, item: T) => void;
-    request: (endpoint: (request: HowlerSearchRequest) => Promise<R>, requestData: HowlerSearchRequest, config?: DispatchApiConfig) => Promise<R>;
+    request: <Request extends HowlerSearchRequest>(endpoint: (request: Request) => Promise<HowlerSearchResponse<T> | undefined>, requestData: Request, config?: DispatchApiConfig) => Promise<HowlerSearchResponse<T>>;
     getSearchRequestData: (requestData: Partial<HowlerSearchRequest>) => Partial<HowlerSearchRequest>;
-    response: SearchResponseState<T> | null;
+    response?: SearchResponseState<T>;
 };
-export declare const SearchResponseContext: import("react").Context<SearchResponseContextType<any, HowlerSearchResponse<any>>>;
+export type SearchResponseContext<T> = Context<SearchResponseContextType<T> | null>;
+export declare const createSearchResponseContext: <T>() => SearchResponseContext<T>;
+export declare const useSearchResponseContext: <T>(context: SearchResponseContext<T>) => SearchResponseContextType<T>;
 type SearchResponseProviderProps<T> = PropsWithChildren<{
+    context: SearchResponseContext<T>;
     idField: string;
     initialResponse?: SearchResponseState<T>;
 }>;
-declare const SearchResponseProvider: <T>({ children, idField, initialResponse }: SearchResponseProviderProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchResponseProvider: <T>({ children, context, idField, initialResponse }: SearchResponseProviderProps<T>) => import("react").JSX.Element;
 export default SearchResponseProvider;

package/components/app/providers/SearchResponseProvider.js

@@ -1,22 +1,39 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { createContext, useCallback, useState } from 'react';
-export const SearchResponseContext = createContext(null);
-const SearchResponseProvider = ({ children, idField, initialResponse = null }) => {
+import { isNil } from 'lodash-es';
+import { createContext, useCallback, useContext, useState } from 'react';
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
+export const createSearchResponseContext = () => createContext(null);
+export const useSearchResponseContext = (context) => {
+    const value = useContext(context);
+    if (isNil(value)) {
+        throw new Error('useSearchResponseContext must be used within a SearchResponseProvider');
+    }
+    return value;
+};
+const SearchResponseProvider = ({ children, context, idField, initialResponse }) => {
     const { dispatchApi } = useMyApi();
     const [response, setResponse] = useState(initialResponse);
+    // T has no known shape, so the id field lookup has to go through an untyped index access.
+    const getFieldValue = useCallback((item) => item[idField], [idField]);
     const request = useCallback(async (endpoint, requestData, config) => {
         const _response = await dispatchApi(endpoint(requestData), config);
+        const searchResponse = _response ?? {
+            items: [],
+            offset: requestData.offset ?? 0,
+            rows: requestData.rows ?? 0,
+            total: 0
+        };
         setResponse(_prevResponse => ({
-            ..._response,
-            removeCount: _response.offset <= _prevResponse?.offset ? 0 : (_prevResponse?.removeCount ?? 0)
+            ...searchResponse,
+            removeCount: searchResponse.offset <= (_prevResponse?.offset ?? 0) ? 0 : (_prevResponse?.removeCount ?? 0)
         }));
-        return _response;
+        return searchResponse;
     }, [dispatchApi]);
     const getSearchRequestData = useCallback((requestData) => {
         const modifiedRequest = { ...requestData };
         if (response?.removeCount) {
-            if (response.offset < modifiedRequest.offset) {
+            if (notNil(response.offset) && notNil(modifiedRequest.offset) && response.offset < modifiedRequest.offset) {
                 modifiedRequest.offset = Math.max(0, modifiedRequest.offset - response.removeCount);
             }
         }
@@ -24,10 +41,10 @@ const SearchResponseProvider = ({ children, idField, initialResponse = null }) =
     }, [response]);
     const push = useCallback((item) => {
         setResponse(_response => {
-            if (_response === null) {
+            if (isNil(_response)) {
                 return _response;
             }
-            const filteredItems = _response.items.filter(v => v[idField] !== item[idField]);
+            const filteredItems = _response.items.filter(v => getFieldValue(v) !== getFieldValue(item));
             const itemExists = filteredItems.length < _response.items.length;
             filteredItems.push(item);
             return {
@@ -38,34 +55,34 @@ const SearchResponseProvider = ({ children, idField, initialResponse = null }) =
                 removeCount: itemExists ? _response.removeCount : Math.max(_response.removeCount - 1, 0)
             };
         });
-    }, [idField]);
+    }, [getFieldValue]);
     const replace = useCallback((id, item) => {
-        if (item[idField] !== undefined && id !== item[idField]) {
+        if (notNil(getFieldValue(item)) && id !== getFieldValue(item)) {
             throw new Error('Item id is defined but id does not match the id provided to replace function');
         }
         const newItem = {
             ...item,
-            [idField]: item[idField] !== undefined ? item[idField] : id
+            [idField]: notNil(getFieldValue(item)) ? getFieldValue(item) : id
         };
         setResponse(_response => {
-            if (_response === null) {
+            if (isNil(_response)) {
                 return _response;
             }
             return {
-                items: _response.items.map(v => (v[idField] === id ? newItem : v)),
+                items: _response.items.map(v => (getFieldValue(v) === id ? newItem : v)),
                 offset: _response.offset,
                 rows: _response.rows,
                 total: _response.total,
                 removeCount: _response.removeCount
             };
         });
-    }, [idField]);
+    }, [idField, getFieldValue]);
     const remove = useCallback((id) => {
         setResponse(_response => {
-            if (_response === null) {
+            if (isNil(_response)) {
                 return _response;
             }
-            const filteredItems = _response.items.filter(v => v[idField] !== id);
+            const filteredItems = _response.items.filter(v => getFieldValue(v) !== id);
             const itemExists = filteredItems.length < _response.items.length;
             return {
                 items: filteredItems,
@@ -75,7 +92,8 @@ const SearchResponseProvider = ({ children, idField, initialResponse = null }) =
                 removeCount: itemExists ? _response.removeCount + 1 : _response.removeCount
             };
         });
-    }, [idField]);
-    return (_jsx(SearchResponseContext.Provider, { value: { push, remove, replace, request, getSearchRequestData, response }, children: children }));
+    }, [getFieldValue]);
+    const Provider = context.Provider;
+    return _jsx(Provider, { value: { push, remove, replace, request, getSearchRequestData, response }, children: children });
 };
 export default SearchResponseProvider;

package/components/app/providers/SearchResponseProvider.test.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
 import { act, renderHook } from '@testing-library/react';
-import { useContext } from 'react';
-import SearchResponseProvider, { SearchResponseContext } from './SearchResponseProvider';
+import SearchResponseProvider, { createSearchResponseContext, useSearchResponseContext } from './SearchResponseProvider';
 const TEST_PAGE_SIZE = 25;
 const TEST_TOTAL_COUNT = 100;
+const SearchResponseContext = createSearchResponseContext();
 const makeWrapper = (initialResponse) => {
-    const Wrapper = ({ children }) => (_jsx(SearchResponseProvider, { idField: "id", initialResponse: initialResponse, children: children }));
+    const Wrapper = ({ children }) => (_jsx(SearchResponseProvider, { context: SearchResponseContext, idField: "id", initialResponse: initialResponse, children: children }));
     return Wrapper;
 };
 const renderProvider = (initialResponse) => {
-    return renderHook(() => useContext(SearchResponseContext), {
+    return renderHook(() => useSearchResponseContext(SearchResponseContext), {
         wrapper: makeWrapper(initialResponse)
     });
 };
@@ -105,12 +106,12 @@ describe('push', () => {
         expect(hook.result.current.response).not.toBeNull();
         expect(hook.result.current.response.removeCount).toBe(1);
     });
-    it('should keep response null if it is uninitiated', () => {
+    it('should keep response undefined if it is uninitiated', () => {
         const hook = renderProvider();
         act(() => {
             hook.result.current.push({ id: '0', name: 'test' });
         });
-        expect(hook.result.current.response).toBeNull();
+        expect(hook.result.current.response).toBeUndefined();
     });
 });
 describe('remove', () => {
@@ -155,12 +156,12 @@ describe('remove', () => {
             removeCount: 0
         });
     });
-    it('should keep response null if it is uninitiated', () => {
+    it('should keep response undefined if it is uninitiated', () => {
         const hook = renderProvider();
         act(() => {
             hook.result.current.remove('0');
         });
-        expect(hook.result.current.response).toBeNull();
+        expect(hook.result.current.response).toBeUndefined();
     });
 });
 describe('replace', () => {
@@ -203,12 +204,12 @@ describe('replace', () => {
             removeCount: 0
         });
     });
-    it('should keep response null if it is uninitiated', () => {
+    it('should keep response undefined if it is uninitiated', () => {
         const hook = renderProvider();
         act(() => {
             hook.result.current.replace('0', { id: '0', name: 'new' });
         });
-        expect(hook.result.current.response).toBeNull();
+        expect(hook.result.current.response).toBeUndefined();
     });
     it('should throw error if item id does not match the id provided', () => {
         const hook = renderProvider({
@@ -259,6 +260,31 @@ describe('request', () => {
             removeCount: 0
         });
     });
+    it('should use an empty response when the request returns null', async () => {
+        const hook = renderProvider({
+            items: [{ id: '0', name: 'item' }],
+            offset: 0,
+            rows: TEST_PAGE_SIZE,
+            total: TEST_TOTAL_COUNT,
+            removeCount: 5
+        });
+        const request = {
+            query: 'test',
+            rows: TEST_PAGE_SIZE,
+            offset: TEST_PAGE_SIZE
+        };
+        apiSearchMock.mockResolvedValue(null);
+        await act(async () => {
+            await hook.result.current.request(apiSearchMock, request);
+        });
+        expect(hook.result.current.response).toEqual({
+            items: [],
+            offset: TEST_PAGE_SIZE,
+            rows: TEST_PAGE_SIZE,
+            total: 0,
+            removeCount: 5
+        });
+    });
     it.for([
         { description: 'before', offset: 0 },
         { description: 'the same as', offset: TEST_PAGE_SIZE }
@@ -336,7 +362,7 @@ describe('request', () => {
             await hook.result.current.request(apiSearchMock, request).catch(() => { });
         });
         expect(apiSearchMock).toHaveBeenCalledWith(request);
-        expect(hook.result.current.response).toBeNull();
+        expect(hook.result.current.response).toBeUndefined();
     });
     it('should keep response unchanged if the request fails', async () => {
         const initialResponse = {

package/components/app/providers/SocketProvider.js

@@ -22,7 +22,7 @@ const SocketProvider = ({ children }) => {
     const { get } = useMyLocalStorage();
     const { dispatchApi } = useMyApi();
     // In order to persist the connection through state changes, we use a ref
-    const socket = useRef();
+    const socket = useRef(undefined);
     // Due to react setState race conditions, listeners are also stored in a ref
     const listeners = useRef({});
     // We will need to use the app token to authenticate.
@@ -120,8 +120,9 @@ const SocketProvider = ({ children }) => {
             return;
         }
         // If we aren't retrying or we don't have an app token we can use, we don't continue
-        if (!retry || !appToken)
+        if (!retry || !appToken) {
             return;
+        }
         setRetry(false);
         // Here we go!
         setStatus(Status.CONNECTING);
@@ -171,8 +172,9 @@ const SocketProvider = ({ children }) => {
     }, [listeners, status]);
     // Handler for when the socket closes
     useEffect(() => {
-        if (!socket.current)
+        if (!socket.current) {
             return;
+        }
         if ([Status.CLOSED, Status.CLOSING].includes(status)) {
             socket.current.removeEventListener('close', onClose);
             socket.current.removeEventListener('error', onWsError);
@@ -181,7 +183,7 @@ const SocketProvider = ({ children }) => {
             listeners.current = {};
             window.removeEventListener('beforeunload', onBeforeUnload);
             socket.current.close();
-            socket.current = null;
+            socket.current = undefined;
         }
     }, [status, socket, appToken, onBeforeUnload, onClose, onWsError, onMessageError]);
     const addListener = useCallback((key, callback) => {

package/components/app/providers/UserListProvider.d.ts

@@ -5,7 +5,7 @@ interface UserListContextType {
         [id: string]: HowlerUser;
     };
     searchUsers: (query: string) => void;
-    fetchUsers: (ids: Set<string>) => void;
+    fetchUsers: (ids: Iterable<string>) => void;
 }
 export declare const UserListContext: import("react").Context<UserListContextType>;
 declare const UserListProvider: FC<PropsWithChildren>;