@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.271

package/components/app/providers/AvatarProvider.tsx

@@ -1,47 +0,0 @@
-import api from '@cccsaurora/howler-ui/api';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import type { FC, PropsWithChildren } from 'react';
-import { createContext, useCallback } from 'react';
-
-interface AvatarContextType {
-  getAvatar: (id: string) => Promise<string>;
-}
-
-export const AvatarContext = createContext<AvatarContextType>(null);
-
-/**
- * Because of the nature of requesting avatars, there's often LOTS of requests firing off in rapid succession,
- * too quickly for React to react (pardon the pun). To circumvent this, we just use a global object to remove race conditions.
- */
-const promises: { [index: string]: Promise<string> } = {};
-
-const AvatarProvider: FC<PropsWithChildren> = ({ children }) => {
-  const { dispatchApi } = useMyApi();
-
-  const getAvatar = useCallback(
-    (id: string) => {
-      if (!id) {
-        return Promise.resolve('');
-      }
-
-      if (promises[id]) {
-        return promises[id];
-      }
-
-      try {
-        promises[id] = dispatchApi(api.user.avatar.get(id), { logError: false, showError: false, throwError: false });
-
-        return promises[id];
-      } catch (e) {
-        promises[id] = api.user.get(id).then(user => user.name);
-
-        return promises[id];
-      }
-    },
-    [dispatchApi]
-  );
-
-  return <AvatarContext.Provider value={{ getAvatar }}>{children}</AvatarContext.Provider>;
-};
-
-export default AvatarProvider;

package/components/app/providers/CustomPluginProvider.tsx

@@ -1,19 +0,0 @@
-import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import type { FC, PropsWithChildren } from 'react';
-import { usePluginStore } from 'react-pluggable';
-
-const CustomPluginProvider: FC<PropsWithChildren> = ({ children }) => {
-  const pluginStore = usePluginStore();
-
-  return howlerPluginStore.plugins.reduce((_children, plugin) => {
-    const Provider = pluginStore.executeFunction(`${plugin}.provider`);
-
-    if (!Provider) {
-      return _children;
-    }
-
-    return <Provider>{_children}</Provider>;
-  }, children);
-};
-
-export default CustomPluginProvider;

package/components/app/providers/FavouritesProvider.tsx

@@ -1,157 +0,0 @@
-import { QueryStats, SavedSearch } from '@mui/icons-material';
-import type { AppLeftNavElement, AppLeftNavGroup } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
-import { useAppLeftNav, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { sortBy, uniq } from 'lodash-es';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import { createContext, useCallback, useContext, useEffect, type FC, type PropsWithChildren } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useContextSelector } from 'use-context-selector';
-import { AnalyticContext } from './AnalyticProvider';
-import { ViewContext } from './ViewProvider';
-
-export const FavouriteContext = createContext<object>(null);
-
-const FavouriteProvider: FC<PropsWithChildren> = ({ children }) => {
-  const { t } = useTranslation();
-  const leftNav = useAppLeftNav();
-  const appUser = useAppUser<HowlerUser>();
-  const analytics = useContext(AnalyticContext);
-
-  const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
-
-  const processViewElement = useCallback(async (): Promise<AppLeftNavElement> => {
-    const viewElement = leftNav.elements.find(el => el.element?.id === 'views');
-    const favourites = uniq(appUser.user?.favourite_views || []);
-
-    // There are no favourites and no nav elements - return
-    if (favourites.length < 1 && !viewElement) {
-      return null;
-    }
-
-    // There are no favourites, but the nav element exists - remove it
-    if (favourites.length < 1) {
-      return null;
-    }
-
-    // The favourite list is fully represented, skip
-    if (favourites.length === (viewElement?.element as AppLeftNavGroup)?.items?.length) {
-      return viewElement;
-    }
-
-    const savedViews = await fetchViews(favourites);
-
-    const items = sortBy(savedViews, 'title')
-      .filter(view => !!view)
-      .map(view => ({
-        id: view.view_id,
-        text: t(view.title),
-        route: `/views/${view.view_id}`,
-        nested: true
-      }));
-
-    if (viewElement) {
-      const newViewElement: AppLeftNavElement = {
-        type: 'group',
-        element: {
-          ...viewElement.element,
-          items
-        }
-      };
-
-      return newViewElement;
-    } else {
-      return {
-        type: 'group',
-        element: {
-          id: 'views',
-          i18nKey: 'route.views.saved',
-          icon: <SavedSearch />,
-          items
-        }
-      };
-    }
-  }, [appUser.user?.favourite_views, fetchViews, leftNav.elements, t]);
-
-  const processAnalyticElement = useCallback((): AppLeftNavElement => {
-    const analyticElement = leftNav.elements.find(el => el.element?.id === 'analytics');
-    const favourites = appUser.user?.favourite_analytics;
-
-    // There are no favourites and no nav elements - return
-    if (favourites.length < 1 && !analyticElement) {
-      return null;
-    }
-
-    // There are no favourites, but the nav element exists - remove it
-    if (favourites.length < 1) {
-      return null;
-    }
-
-    // The favourite list is fully represented, skip
-    if (favourites.length === (analyticElement?.element as AppLeftNavGroup)?.items?.length) {
-      return analyticElement;
-    }
-
-    const items = favourites
-      .map(aid => {
-        const analytic = analytics.analytics.find(v => v.analytic_id === aid);
-        return analytic
-          ? {
-              id: analytic.analytic_id,
-              text: t(analytic.name),
-              route: `/analytics/${analytic.analytic_id}`,
-              nested: true
-            }
-          : null;
-      })
-      .filter(v => !!v);
-
-    if (analyticElement) {
-      return {
-        type: 'group',
-        element: {
-          ...analyticElement.element,
-          items
-        }
-      };
-    } else {
-      return {
-        type: 'group',
-        element: {
-          id: 'analytics',
-          i18nKey: 'route.analytics.pinned',
-          icon: <QueryStats />,
-          items
-        }
-      };
-    }
-  }, [analytics.analytics, appUser.user?.favourite_analytics, leftNav, t]);
-
-  useEffect(() => {
-    if (!appUser.isReady() || !analytics.ready) {
-      return;
-    }
-
-    const newElements = leftNav.elements
-      .filter(el => !['views', 'analytics'].includes(el.element?.id as any))
-      .filter(el => !!el);
-
-    (async () => {
-      const analyticElement = processAnalyticElement();
-      if (analyticElement) {
-        newElements.splice(1, 0, analyticElement);
-      }
-
-      const viewElement = await processViewElement();
-      if (viewElement) {
-        newElements.splice(1, 0, viewElement);
-      }
-
-      leftNav.setElements(newElements);
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [analytics.ready, appUser]);
-
-  return <FavouriteContext.Provider value={{}}>{children}</FavouriteContext.Provider>;
-};
-
-export default FavouriteProvider;

package/components/app/providers/FieldProvider.tsx

@@ -1,34 +0,0 @@
-import api from '@cccsaurora/howler-ui/api';
-import type { SearchField } from '@cccsaurora/howler-ui/api/search/fields';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import type { FC, PropsWithChildren } from 'react';
-import { createContext, useCallback, useState } from 'react';
-
-interface FieldProviderType {
-  hitFields: SearchField[];
-  getHitFields: () => Promise<SearchField[]>;
-}
-
-export const FieldContext = createContext<FieldProviderType>(null);
-
-const FieldProvider: FC<PropsWithChildren> = ({ children }) => {
-  const { dispatchApi } = useMyApi();
-
-  const [hitFields, setHitFields] = useState<SearchField[]>([]);
-
-  const getHitFields = useCallback(async () => {
-    if (hitFields.length) {
-      return hitFields;
-    }
-
-    const fields = await dispatchApi(api.search.fields.hit.get());
-
-    setHitFields(fields);
-
-    return fields;
-  }, [dispatchApi, hitFields]);
-
-  return <FieldContext.Provider value={{ hitFields, getHitFields }}>{children}</FieldContext.Provider>;
-};
-
-export default FieldProvider;

package/components/app/providers/HitProvider.tsx

@@ -1,164 +0,0 @@
-import api from '@cccsaurora/howler-ui/api';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { uniq } from 'lodash-es';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { HitUpdate } from '@cccsaurora/howler-ui/models/socket/HitUpdate';
-import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
-import type { FC, PropsWithChildren } from 'react';
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { createContext, useContextSelector } from 'use-context-selector';
-import { SocketContext, type RecievedDataType } from './SocketProvider';
-
-interface HitProviderType {
-  hits: { [index: string]: Hit };
-  selectedHits: Hit[];
-  addHitToSelection: (id: string) => void;
-  removeHitFromSelection: (id: string) => void;
-  clearSelectedHits: (except?: string) => void;
-  loadHits: (hits: Hit[]) => void;
-  updateHit: (newHit: Hit) => void;
-  getHit: (id: string, force?: boolean) => Promise<WithMetadata<Hit>>;
-}
-
-export const HitContext = createContext<HitProviderType>(null);
-
-/**
- * Central repository for storing individual hit data across the application. Allows efficient retrieval of hits across componenents.
- */
-const HitProvider: FC<PropsWithChildren> = ({ children }) => {
-  const { dispatchApi } = useMyApi();
-  const { addListener, removeListener } = useContext(SocketContext);
-
-  /**
-   * The most immediate of two levels of caching, this ref stores the raw promises for each hit.
-   * Rapidly updates, good for uses in-context where parallel updates my be occurring, i.e.
-   * when two cards request the same hit that's missing from the store. Used in getHit for this reason.
-   */
-  const hitRequests = useRef<{ [id: string]: Promise<Hit> }>({});
-
-  /**
-   * The "Authoritative" store of hits. Changes here will trigger rerenders, and essentially
-   * caches the result of the above promises. Slower to update, so used outside of the hitcontext
-   * where parallel requests aren't an issue.
-   */
-  const [hits, setHits] = useState<{ [index: string]: Hit }>({});
-
-  const [selectedHitIds, setSelectedHitIds] = useState<string[]>([]);
-
-  // The central location where we propagate any changes from hits made via websockets into the repository. We just save every update,
-  // instead of caching it across many components inconsistently as before.
-  const handler = useMemo(
-    () => (data: RecievedDataType<HitUpdate>) => {
-      if (data.hit) {
-        // eslint-disable-next-line no-console
-        console.debug('Received websocket update for hit', data.hit.howler.id);
-        hitRequests.current[data.hit.howler.id] = Promise.resolve(data.hit);
-
-        setHits(_hits => ({
-          ..._hits,
-          [data.hit.howler.id]: {
-            ..._hits[data.hit.howler.id],
-            ...data.hit
-          }
-        }));
-      }
-    },
-    []
-  );
-
-  useEffect(() => {
-    addListener<HitUpdate>('hit_provider', handler);
-
-    return () => removeListener('hit_provider');
-  }, [addListener, handler, removeListener]);
-
-  /**
-   * A method to retrieve a hit from the context. It first checks the hit state,
-   * then checks for ongoing requests, then finally executes a new request if necessary.
-   */
-  const getHit = useCallback(
-    async (id: string, force = false) => {
-      if (!hitRequests.current[id] || force) {
-        hitRequests.current[id] = dispatchApi(api.hit.get(id, ['template', 'dossiers', 'analytic', 'overview']));
-        const newHit = await hitRequests.current[id];
-        setHits(_hits => ({ ..._hits, [id]: newHit }));
-      }
-
-      return hitRequests.current[id];
-    },
-    [dispatchApi]
-  );
-
-  /**
-   * Update a hit in the context locally
-   */
-  const updateHit = useCallback((newHit: Hit) => {
-    hitRequests.current[newHit.howler.id] = Promise.resolve(newHit);
-
-    setHits(_hits => ({ ..._hits, [newHit.howler.id]: newHit }));
-  }, []);
-
-  /**
-   * Add a large number of hits to the cache. Used for results of searches.
-   */
-  const loadHits = useCallback((newHits: Hit[]) => {
-    const mappedHits = newHits.map(hit => [hit.howler.id, hit] as [string, Hit]);
-
-    mappedHits.forEach(([id, hit]) => {
-      hitRequests.current[id] = Promise.resolve(hit);
-    });
-
-    setHits(_hits => ({ ..._hits, ...Object.fromEntries(mappedHits) }));
-  }, []);
-
-  const addHitToSelection: HitProviderType['addHitToSelection'] = useCallback((id: string) => {
-    setSelectedHitIds(_selected => uniq([..._selected, id]));
-  }, []);
-
-  const removeHitFromSelection: HitProviderType['removeHitFromSelection'] = useCallback((id: string) => {
-    setSelectedHitIds(_selected => _selected.filter(_id => _id !== id));
-  }, []);
-
-  const clearSelectedHits: HitProviderType['clearSelectedHits'] = useCallback((except: string) => {
-    setSelectedHitIds(!!except ? [except] : []);
-  }, []);
-
-  const selectedHits = useMemo(() => selectedHitIds.map(id => hits[id]).filter(hit => !!hit), [hits, selectedHitIds]);
-
-  useEffect(() => {
-    selectedHitIds.forEach(id => {
-      if (!hitRequests.current[id]) {
-        getHit(id);
-      }
-    });
-  }, [getHit, selectedHitIds]);
-
-  useEffect(() => {
-    Object.entries(hits).forEach(([id, hit]) => {
-      hitRequests.current[id] = Promise.resolve(hit);
-    });
-  }, [hits]);
-
-  return (
-    <HitContext.Provider
-      value={{
-        hits,
-        getHit,
-        updateHit,
-        selectedHits,
-        addHitToSelection,
-        removeHitFromSelection,
-        clearSelectedHits,
-        loadHits
-      }}
-    >
-      {children}
-    </HitContext.Provider>
-  );
-};
-
-export const useHitContextSelector = <Selected,>(selector: (value: HitProviderType) => Selected): Selected => {
-  return useContextSelector<HitProviderType, Selected>(HitContext, selector);
-};
-
-export default HitProvider;

package/components/app/providers/HitSearchProvider.tsx

@@ -1,248 +0,0 @@
-import api from '@cccsaurora/howler-ui/api';
-import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import useMyLocalStorage, { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import i18n from '@cccsaurora/howler-ui/i18n';
-import isNull from 'lodash-es/isNull';
-import isUndefined from 'lodash-es/isUndefined';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type Dispatch,
-  type FC,
-  type PropsWithChildren,
-  type SetStateAction
-} from 'react';
-import { isMobile } from 'react-device-detect';
-import { useLocation, useParams } from 'react-router-dom';
-import { createContext, useContextSelector } from 'use-context-selector';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import { getStored } from '@cccsaurora/howler-ui/utils/localStorage';
-import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
-import { convertCustomDateRangeToLucene, convertDateToLucene } from '@cccsaurora/howler-ui/utils/utils';
-import { HitContext } from './HitProvider';
-import { ParameterContext } from './ParameterProvider';
-import { ViewContext } from './ViewProvider';
-
-export interface QueryEntry {
-  [query: string]: string;
-}
-
-interface HitSearchProviderType {
-  layout: HitLayout;
-  displayType: 'list' | 'grid';
-  searching: boolean;
-  error: string | null;
-  response: HowlerSearchResponse<WithMetadata<Hit>> | null;
-  viewId: string | null;
-  bundleId: string | null;
-  queryHistory: QueryEntry;
-  fzfSearch: boolean;
-
-  setDisplayType: (type: 'list' | 'grid') => void;
-  setQueryHistory: Dispatch<SetStateAction<QueryEntry>>;
-  setFzfSearch: Dispatch<SetStateAction<boolean>>;
-  search: (query: string, appendResults?: boolean) => void;
-}
-
-export const HitSearchContext = createContext<HitSearchProviderType>(null);
-
-const THROTTLER = new Throttler(500);
-
-const HitSearchProvider: FC<PropsWithChildren> = ({ children }) => {
-  const { get } = useMyLocalStorage();
-  const routeParams = useParams();
-  const location = useLocation();
-  const { dispatchApi } = useMyApi();
-  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
-
-  const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
-  const defaultView = useContextSelector(ViewContext, ctx => ctx.defaultView);
-
-  const query = useContextSelector(ParameterContext, ctx => ctx.query);
-  const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
-  const offset = useContextSelector(ParameterContext, ctx => ctx.offset);
-  const setOffset = useContextSelector(ParameterContext, ctx => ctx.setOffset);
-  const trackTotalHits = useContextSelector(ParameterContext, ctx => ctx.trackTotalHits);
-  const sort = useContextSelector(ParameterContext, ctx => ctx.sort);
-  const span = useContextSelector(ParameterContext, ctx => ctx.span);
-  const filter = useContextSelector(ParameterContext, ctx => ctx.filter);
-  const startDate = useContextSelector(ParameterContext, ctx => ctx.startDate);
-  const endDate = useContextSelector(ParameterContext, ctx => ctx.endDate);
-
-  const loadHits = useContextSelector(HitContext, ctx => ctx.loadHits);
-
-  const [displayType, setDisplayType] = useState<'list' | 'grid'>(getStored(StorageKey.DISPLAY_TYPE) ?? 'list');
-  const [searching, setSearching] = useState<boolean>(false);
-  const [error, setError] = useState<string>(null);
-  const [response, setResponse] = useState<HowlerSearchResponse<WithMetadata<Hit>>>();
-  const [queryHistory, setQueryHistory] = useState<QueryEntry>(
-    JSON.parse(get(StorageKey.QUERY_HISTORY)) || { 'howler.id: *': new Date().toISOString() }
-  );
-  const [fzfSearch, setFzfSearch] = useState<boolean>(false);
-
-  const viewId = useMemo(
-    () => (location.pathname.startsWith('/views') ? routeParams.id : defaultView) ?? null,
-    [defaultView, location.pathname, routeParams.id]
-  );
-
-  const bundleId = useMemo(
-    () => (location.pathname.startsWith('/bundles') ? routeParams.id : null),
-    [location.pathname, routeParams.id]
-  );
-
-  const layout: HitLayout = useMemo(
-    () => (isMobile ? HitLayout.COMFY : (get(StorageKey.HIT_LAYOUT) ?? HitLayout.NORMAL)),
-    [get]
-  );
-
-  const search = useCallback(
-    async (_query?: string, appendResults?: boolean) => {
-      THROTTLER.debounce(async () => {
-        if (_query === 'woof!') {
-          i18n.changeLanguage('woof');
-          return;
-        }
-
-        if (isNull(sort) || isNull(span)) {
-          return;
-        }
-
-        if (!isNull(_query) && !isUndefined(_query) && _query !== query) {
-          setQuery(_query);
-        }
-
-        setSearching(true);
-        setError(null);
-
-        const filters: string[] = [];
-
-        if (span && !span.endsWith('custom')) {
-          filters.push(`event.created:${convertDateToLucene(span)}`);
-        } else if (startDate && endDate) {
-          filters.push(`event.created:${convertCustomDateRangeToLucene(startDate, endDate)}`);
-        }
-
-        if (filter) {
-          filters.push(filter);
-        }
-
-        try {
-          const bundle = location.pathname.startsWith('/bundles') && routeParams.id;
-
-          let fullQuery = _query || 'howler.id:*';
-          if (bundle) {
-            fullQuery = `(howler.bundles:${bundle}) AND (${fullQuery})`;
-          } else if (viewId) {
-            fullQuery = `(${(await getCurrentView({ viewId }))?.query || 'howler.id:*'}) AND (${fullQuery})`;
-          }
-
-          const _response = await dispatchApi(
-            api.search.hit.post({
-              offset: appendResults ? response.rows : offset,
-              rows: pageCount,
-              query: fullQuery,
-              sort,
-              filters,
-              track_total_hits: trackTotalHits,
-              metadata: ['template', 'overview', 'analytic']
-            }),
-            { showError: false, throwError: true }
-          );
-
-          if (_response.total < offset) {
-            setOffset(0);
-          }
-
-          loadHits(_response.items);
-
-          if (!appendResults) {
-            setResponse(_response);
-          } else {
-            setResponse(_existingResponse => ({
-              ..._response,
-              offset: _existingResponse.offset,
-              rows: Math.min(_existingResponse.rows + _response.rows, _response.total),
-              items: [..._existingResponse.items, ..._response.items]
-            }));
-          }
-        } catch (e) {
-          setError(e.message);
-        } finally {
-          setSearching(false);
-        }
-      });
-    },
-    // We skip reloading when the response changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      sort,
-      span,
-      query,
-      startDate,
-      endDate,
-      filter,
-      setQuery,
-      location.pathname,
-      routeParams.id,
-      viewId,
-      dispatchApi,
-      offset,
-      pageCount,
-      trackTotalHits,
-      loadHits,
-      getCurrentView,
-      setOffset
-    ]
-  );
-
-  // We only run this when ancillary properties (i.e. filters, sorting) change
-  useEffect(() => {
-    if (span.endsWith('custom') && (!startDate || !endDate)) {
-      return;
-    }
-
-    if (viewId || bundleId || (query && query !== 'howler.id:*') || offset > 0) {
-      search(query);
-    } else {
-      setResponse(null);
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filter, offset, pageCount, sort, span, bundleId, location.pathname, startDate, endDate, viewId]);
-
-  return (
-    <HitSearchContext.Provider
-      value={{
-        layout,
-        displayType,
-        setDisplayType,
-        search,
-        searching,
-        error,
-        response,
-        viewId,
-        bundleId,
-        setQueryHistory,
-        queryHistory,
-        fzfSearch,
-        setFzfSearch
-      }}
-    >
-      {children}
-    </HitSearchContext.Provider>
-  );
-};
-
-export const useHitSearchContextSelector = <Selected,>(
-  selector: (value: HitSearchProviderType) => Selected
-): Selected => {
-  return useContextSelector<HitSearchProviderType, Selected>(HitSearchContext, selector);
-};
-
-export default HitSearchProvider;