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

package/components/app/providers/SocketProvider.tsx

@@ -1,329 +0,0 @@
-/* eslint-disable no-console */
-import api from '@cccsaurora/howler-ui/api';
-import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import type { PropsWithChildren } from 'react';
-import { createContext, useCallback, useEffect, useRef, useState } from 'react';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import { getStored, setAxiosCache, setStored } from '@cccsaurora/howler-ui/utils/sessionStorage';
-import { isHitUpdate } from '@cccsaurora/howler-ui/utils/socketUtils';
-
-export type ListenerType<K extends keyof WebSocketEventMap> = (this: WebSocket, ev: WebSocketEventMap[K]) => void;
-
-/**
- * The type of the data returned from the server during a WebSocket connection.
- * The only guaranteed keys are error, message and status.
- */
-export type RecievedDataType<T = { [index: string]: any }> = T & {
-  error: boolean;
-  message: string;
-  type: string;
-  status: number;
-};
-
-/**
- * Enum to help track the status of the Websocket, since the corresponding websocket enums are directly on the object
- */
-export enum Status {
-  CLOSED = WebSocket.CLOSED,
-  CLOSING = WebSocket.CLOSING,
-  CONNECTING = WebSocket.CONNECTING,
-  OPEN = WebSocket.OPEN
-}
-
-interface SocketContextType {
-  /**
-   * Add a listener for events from the websocket connection.
-   * @param key The unique key used to track this listener
-   * @param v The listener function
-   */
-  addListener: <T = { [index: string]: any }>(key: string, v: (data: RecievedDataType<T>) => void) => void;
-
-  /**
-   * Remove a listener from the websocket connection.
-   * @param key The unique key used to track the listener we're removing
-   */
-  removeListener: (key: string) => void;
-
-  /**
-   * Wrapper function for WebSocket.send(...). Used to send data to the server.
-   */
-  emit: (data: any) => void;
-
-  /**
-   * The status of the websocket connection.
-   */
-  status: Status;
-
-  /**
-   * Manually attempt reconnecting to the server.
-   */
-  reconnect: () => void;
-
-  /**
-   * Helper function to tell if the socket is open
-   */
-  isOpen: () => boolean;
-}
-
-export const SocketContext = createContext<SocketContextType>(null);
-
-const SocketProvider: React.FC<PropsWithChildren> = ({ children }) => {
-  const { get } = useMyLocalStorage();
-
-  // In order to persist the connection through state changes, we use a ref
-  const socket = useRef<WebSocket>();
-
-  // Due to react setState race conditions, listeners are also stored in a ref
-  const listeners = useRef<{ [index: string]: ListenerType<'message'> }>({});
-
-  // We will need to use the app token to authenticate.
-  // Note the token MUST BE either an app token or a JWT - user/pass or apikey authentication isn't allowed
-  const appToken = get<string>(StorageKey.APP_TOKEN);
-
-  const [status, setStatus] = useState<Status>(Status.CLOSED);
-  // Track whether we should retry the connection to the server
-  const [retry, setRetry] = useState(true);
-  // Track the number of failed attempts when connecting to the server
-  const [failedAttempts, setFailedAttempts] = useState(0);
-
-  const onClose: ListenerType<'close'> = useCallback(
-    e => {
-      // https://www.rfc-editor.org/rfc/rfc6455:
-      // 1006 is a reserved value and MUST NOT be set as a status code in a
-      // Close control frame by an endpoint.  It is designated for use in
-      // applications expecting a status code to indicate that the
-      // connection was closed abnormally, e.g., without sending or
-      // receiving a Close control frame.
-      if (e.code === 1006) {
-        setTimeout(() => setRetry(true), 1000 * Math.pow(2, failedAttempts));
-        setFailedAttempts(failedAttempts + 1);
-      }
-      // https://www.rfc-editor.org/rfc/rfc6455:
-      // 1008 indicates that an endpoint is terminating the connection
-      // because it has received a message that violates its policy.  This
-      // is a generic status code that can be returned when there is no
-      // other more suitable status code (e.g., 1003 or 1009) or if there
-      // is a need to hide specific details about the policy.
-      //
-      // In our case, we use 1008 to indicate the connection did something wrong.
-      // For more granular error handling, we provide a status code equivalent
-      // To the HTTP status codes we know (400, 401, 403, etc.).
-      else if (e.code === 1008) {
-        try {
-          // Check to see if there's any data we can parse, or if it's just a bad connection
-          const data: RecievedDataType = JSON.parse(e.reason);
-
-          // If we are unauthorized, we can update the token through the usual process and tell
-          // the connection to retry with the new token
-          if (data.status === 401) {
-            api.user.whoami.get().then(() => setRetry(true));
-          } else {
-            console.error(data);
-            setRetry(false);
-          }
-        } catch (err) {
-          // There's no useful data, or the refresh attempt failed.
-          // Either way, we can't really do anything
-        }
-      }
-
-      setStatus(Status.CLOSED);
-    },
-    [failedAttempts]
-  );
-
-  /**
-   * Handler for errors with the websocket connection
-   */
-  const onWsError: ListenerType<'error'> = useCallback(() => {
-    setStatus(Status.CLOSING);
-    socket.current?.close();
-    setStatus(Status.CLOSED);
-
-    // Exponential fall off of connection attempts (1s, then 2, 4, 8, 16, etc.)
-    setTimeout(() => setRetry(true), 1000 * Math.pow(2, failedAttempts));
-    setFailedAttempts(failedAttempts + 1);
-  }, [failedAttempts]);
-
-  /**
-   * Handler for messages sent form the server NOT RELATED to the websocket connection itself
-   *
-   * i.e. We sent bad data, did something the server didn't like, etc.
-   */
-  const onMessageError: ListenerType<'message'> = useCallback(e => {
-    try {
-      const data: RecievedDataType = JSON.parse(e.data);
-
-      if (data?.error || data?.status >= 400) {
-        console.warn(data?.message || 'Websocket Error');
-      }
-    } catch (err) {
-      console.warn('Websocket Error');
-    }
-  }, []);
-
-  /**
-   * Handler called when the page unloads, used to gracefully close the socket.
-   *
-   * This isn't a hard requirement to run, but it's good form.
-   */
-  const onBeforeUnload = useCallback(() => socket.current?.close(), []);
-
-  // Effect used to start a connection to the websocket server
-  useEffect(() => {
-    // If the socket is already open, ovbviously we don't need to connect again
-    if ([Status.OPEN, Status.CONNECTING].includes(status)) {
-      if (status === Status.OPEN) {
-        setRetry(false);
-      }
-
-      return;
-    }
-
-    // If we aren't retrying or we don't have an app token we can use, we don't continue
-    if (!retry || !appToken) return;
-
-    setRetry(false);
-
-    // Here we go!
-    setStatus(Status.CONNECTING);
-
-    const host = window.location.host.includes('localhost') ? 'localhost:5000' : window.location.host;
-    const protocol = window.location.protocol.startsWith('http:') ? 'ws' : 'wss';
-    const ws = new WebSocket(`${protocol}://${host}/socket/v1/connect`);
-
-    // Add our listeners to the websocket
-    ws.addEventListener('close', onClose);
-    ws.addEventListener('error', onWsError);
-    ws.addEventListener('message', onMessageError);
-
-    ws.addEventListener('open', () => {
-      socket.current = ws;
-
-      // Hooray! The connection was successful.
-      // But we aren't done yet - we need to authenticate before doing anything else.
-      // So, we send the token
-      ws.send(appToken);
-
-      // Just for this first response, we add a custom listener to the socket.
-      // It waits for a response from our token message, and ensures the server accepted it
-      const onAuth: ListenerType<'message'> = e => {
-        ws.removeEventListener('message', onAuth);
-
-        const data: RecievedDataType = JSON.parse(e.data);
-
-        // If there's no error, the token was accepted and we're good to go!
-        if (!data.error) {
-          console.debug(data.message);
-          setStatus(Status.OPEN);
-          setRetry(false);
-          setFailedAttempts(0);
-
-          // If there is, the server will close the socket and the token refreshing code will take over
-        } else {
-          console.error(data.message);
-        }
-      };
-
-      ws.addEventListener('message', onAuth);
-    });
-
-    window.addEventListener('beforeunload', onBeforeUnload);
-  }, [appToken, status, onBeforeUnload, onClose, onWsError, onMessageError, retry]);
-
-  // Handler for when the socket opens
-  useEffect(() => {
-    // The socket is open, so we can add any listeners that were waiting for it to open
-    if (status === Status.OPEN) {
-      Object.values(listeners.current).forEach(l => {
-        socket.current?.removeEventListener('message', l);
-        socket.current?.addEventListener('message', l);
-      });
-    }
-  }, [listeners, status]);
-
-  // Handler for when the socket closes
-  useEffect(() => {
-    if (!socket.current) return;
-
-    if ([Status.CLOSED, Status.CLOSING].includes(status)) {
-      socket.current.removeEventListener('close', onClose);
-      socket.current.removeEventListener('error', onWsError);
-      socket.current.removeEventListener('message', onMessageError);
-
-      Object.values(listeners.current).forEach(l => socket.current.removeEventListener('message', l));
-      listeners.current = {};
-
-      window.removeEventListener('beforeunload', onBeforeUnload);
-
-      socket.current.close();
-      socket.current = null;
-    }
-  }, [status, socket, appToken, onBeforeUnload, onClose, onWsError, onMessageError]);
-
-  const addListener: SocketContextType['addListener'] = useCallback((key, callback) => {
-    // If a listener with the same key already exists, remove it.
-    if (listeners.current[key]) {
-      socket.current?.removeEventListener('message', listeners[key]);
-    }
-
-    // We wrap the callback so that all the listeners don't need to JSON.parse the data
-    const wrapped: ListenerType<'message'> = ev => {
-      const parsedData = JSON.parse(ev.data) as RecievedDataType;
-
-      if (isHitUpdate(parsedData) && parsedData.status < 300) {
-        setStored(StorageKey.ETAG, {
-          ...getStored(StorageKey.ETAG),
-          [parsedData.hit.howler.id]: parsedData.version
-        });
-
-        setAxiosCache(parsedData.version, {
-          api_response: parsedData.hit,
-          api_error_message: '',
-          api_server_version: '',
-          api_status_code: parsedData.status
-        });
-      }
-
-      callback(parsedData as RecievedDataType<any>);
-    };
-
-    socket.current?.addEventListener('message', wrapped);
-
-    listeners.current[key] = wrapped;
-  }, []);
-
-  const removeListener: SocketContextType['removeListener'] = useCallback((key: string) => {
-    socket.current?.removeEventListener('message', listeners.current[key]);
-
-    delete listeners.current[key];
-  }, []);
-
-  const emit: SocketContextType['emit'] = useCallback(
-    data => {
-      if (typeof data !== 'string') {
-        data = JSON.stringify(data);
-      }
-
-      if (status !== Status.OPEN || !socket.current) {
-        console.warn('socket closed, not sending');
-        return;
-      }
-
-      socket.current?.send(data);
-    },
-    [status]
-  );
-
-  const isOpen = useCallback(() => status === Status.OPEN, [status]);
-
-  const reconnect: SocketContextType['reconnect'] = useCallback(() => setRetry(true), []);
-
-  return (
-    <SocketContext.Provider value={{ addListener, removeListener, emit, status, reconnect, isOpen }}>
-      {children}
-    </SocketContext.Provider>
-  );
-};
-
-export default SocketProvider;

package/components/app/providers/UserListProvider.tsx

@@ -1,56 +0,0 @@
-import api from '@cccsaurora/howler-ui/api';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import type { FC, PropsWithChildren } from 'react';
-import { createContext, useCallback, useState } from 'react';
-
-interface UserListContextType {
-  users: { [id: string]: HowlerUser };
-  searchUsers: (query: string) => void;
-  fetchUsers: (ids: Set<string>) => void;
-}
-
-export const UserListContext = createContext<UserListContextType>(null);
-
-const UserListProvider: FC<PropsWithChildren> = ({ children }) => {
-  const { dispatchApi } = useMyApi();
-
-  const [users, setUsers] = useState<{ [id: string]: HowlerUser }>({});
-
-  const searchUsers = useCallback(
-    async (query: string) => {
-      const newUsers = (
-        await dispatchApi(api.search.user.post({ query, rows: 1000 }), {
-          throwError: false,
-          logError: false,
-          showError: false
-        })
-      )?.items?.reduce((dict, user) => ({ ...dict, [user.username]: user }), {});
-
-      setUsers(_users => ({
-        ..._users,
-        ...newUsers
-      }));
-    },
-    [dispatchApi]
-  );
-
-  const fetchUsers = useCallback(
-    async (ids: Set<string>) => {
-      ids.delete('Unknown');
-
-      const idsToGet = Array.from(ids.values()).filter(id => !Object.keys(users).includes(id));
-
-      if (idsToGet.length <= 0) {
-        return;
-      }
-
-      await searchUsers(`id:${[...idsToGet].join(' OR ')}`);
-    },
-    [searchUsers, users]
-  );
-
-  return <UserListContext.Provider value={{ users, fetchUsers, searchUsers }}>{children}</UserListContext.Provider>;
-};
-
-export default UserListProvider;

package/components/app/providers/ViewProvider.tsx

@@ -1,207 +0,0 @@
-import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import { has, omit } from 'lodash-es';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import type { View } from '@cccsaurora/howler-ui/models/entities/generated/View';
-import { useCallback, useEffect, useState, type FC, type PropsWithChildren } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
-import { createContext, useContextSelector } from 'use-context-selector';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-
-export interface ViewContextType {
-  defaultView: string;
-  setDefaultView: (viewId: string) => void;
-  views: { [viewId: string]: View };
-  addFavourite: (id: string) => Promise<void>;
-  removeFavourite: (id: string) => Promise<void>;
-  fetchViews: (ids?: string[]) => Promise<View[]>;
-  addView: (v: View) => Promise<View>;
-  editView: (id: string, newView: Partial<Omit<View, 'view_id' | 'owner'>>) => Promise<View>;
-  removeView: (id: string) => Promise<void>;
-  getCurrentView: (config?: { viewId?: string; lazy?: boolean }) => Promise<View>;
-}
-
-export const ViewContext = createContext<ViewContextType>(null);
-
-const ViewProvider: FC<PropsWithChildren> = ({ children }) => {
-  const { dispatchApi } = useMyApi();
-  const appUser = useAppUser<HowlerUser>();
-  const [defaultView, setDefaultView] = useMyLocalStorageItem<string>(StorageKey.DEFAULT_VIEW);
-  const location = useLocation();
-  const routeParams = useParams();
-
-  const [views, setViews] = useState<{ [viewId: string]: View }>({});
-
-  const fetchViews: ViewContextType['fetchViews'] = useCallback(
-    async (ids?: string[]) => {
-      if (!ids) {
-        const newViews = (await dispatchApi(api.view.get(), { throwError: false })) ?? [];
-
-        setViews(_views => ({
-          ..._views,
-          ...Object.fromEntries(newViews.map(_view => [_view.view_id, _view]))
-        }));
-
-        return newViews;
-      }
-
-      const missingIds = ids.filter(_id => !has(views, _id));
-
-      if (missingIds.length < 1) {
-        return ids.map(id => views[id]);
-      }
-
-      try {
-        const response = await dispatchApi(
-          api.search.view.post({
-            query: `view_id:(${missingIds.join(' OR ')})`,
-            rows: missingIds.length,
-            sort: 'title asc'
-          })
-        );
-
-        const newViews = Object.fromEntries(response.items.map(_view => [_view.view_id, _view]));
-
-        setViews(_views => ({
-          ..._views,
-          ...Object.fromEntries(missingIds.map(_view_id => [_view_id, null])),
-          ...newViews
-        }));
-
-        return ids.map(id => views[id] ?? newViews[id]);
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.warn(e);
-
-        return [];
-      }
-    },
-    [dispatchApi, views]
-  );
-
-  useEffect(() => {
-    if (!defaultView || has(views, defaultView)) {
-      return;
-    }
-
-    (async () => {
-      const result = await fetchViews([defaultView]);
-
-      if (!result.length) {
-        setDefaultView(undefined);
-      }
-    })();
-  }, [defaultView, fetchViews, setDefaultView, views]);
-
-  const getCurrentView: ViewContextType['getCurrentView'] = useCallback(
-    async ({ viewId, lazy = false } = {}) => {
-      if (!viewId) {
-        viewId = location.pathname.startsWith('/views') ? routeParams.id : defaultView;
-      }
-
-      if (!viewId) {
-        return null;
-      }
-
-      if (!has(views, viewId) && !lazy) {
-        return (await fetchViews([viewId]))[0];
-      }
-
-      return views[viewId];
-    },
-    [defaultView, fetchViews, location.pathname, routeParams.id, views]
-  );
-
-  const editView: ViewContextType['editView'] = useCallback(
-    async (id, partialView) => {
-      const result = await dispatchApi(api.view.put(id, partialView));
-
-      setViews(_views => ({
-        ..._views,
-        [id]: { ...(_views[id] ?? {}), ...partialView }
-      }));
-
-      return result;
-    },
-    [dispatchApi]
-  );
-
-  const addFavourite: ViewContextType['addFavourite'] = useCallback(
-    async (id: string) => {
-      await dispatchApi(api.view.favourite.post(id));
-
-      appUser.setUser({
-        ...appUser.user,
-        favourite_views: [...appUser.user.favourite_views, id]
-      });
-    },
-    [appUser, dispatchApi]
-  );
-
-  const addView: ViewContextType['addView'] = useCallback(
-    async (view: View) => {
-      const newView = await dispatchApi(api.view.post(view));
-
-      setViews(_views => ({ ..._views, [newView.view_id]: newView }));
-
-      addFavourite(newView.view_id);
-
-      return newView;
-    },
-    [addFavourite, dispatchApi]
-  );
-
-  const removeFavourite: ViewContextType['removeFavourite'] = useCallback(
-    async (id: string) => {
-      await dispatchApi(api.view.favourite.del(id));
-
-      appUser.setUser({
-        ...appUser.user,
-        favourite_views: appUser.user.favourite_views.filter(v => v !== id)
-      });
-    },
-    [appUser, dispatchApi]
-  );
-
-  const removeView: ViewContextType['removeView'] = useCallback(
-    async (id: string) => {
-      const result = await dispatchApi(api.view.del(id));
-
-      setViews(_views => omit(_views, id));
-
-      if (appUser.user?.favourite_views.includes(id)) {
-        removeFavourite(id);
-      }
-
-      return result;
-    },
-    [appUser.user?.favourite_views, dispatchApi, removeFavourite]
-  );
-
-  return (
-    <ViewContext.Provider
-      value={{
-        views,
-        addFavourite,
-        removeFavourite,
-        fetchViews,
-        addView,
-        editView,
-        removeView,
-        defaultView,
-        setDefaultView,
-        getCurrentView
-      }}
-    >
-      {children}
-    </ViewContext.Provider>
-  );
-};
-
-export const useViewContextSelector = <Selected,>(selector: (value: ViewContextType) => Selected): Selected => {
-  return useContextSelector<ViewContextType, Selected>(ViewContext, selector);
-};
-
-export default ViewProvider;