cordis/src/client/webapp/elements/require/guild-subscriptions.ts

import * as electronRemote from '@electron/remote';
const electronConsole = electronRemote.getGlobal('console') as Console;
import Logger from '../../../../logger/logger';
const LOG = Logger.create(__filename, electronConsole);

import { Changes, GuildMetadata, Member, Message, Resource } from "../../data-types";
import CombinedGuild from "../../guild-combined";

import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
import { AutoVerifierChangesType } from "../../auto-verifier";
import { Conflictable, Connectable } from "../../guild-types";
import { IDQuery, PartialMessageListQuery } from '../../auto-verifier-with-args';
import { Token, Channel } from '../../data-types';
import { useIsMountedRef, useOneTimeAsyncAction } from './react-helper';
import Globals from '../../globals';
import ElementsUtil from './elements-util';

// Abuse closures to get state in case it changed after an await call
function getStateAfterAwait<T>(setState: Dispatch<SetStateAction<T>>): T {
	let x: unknown;
	setState(state => {
		x = state;
		return state;
	});
	return x as T;
}

export type SingleSubscriptionEvents = {
	'fetch': () => void;
	'updated': () => void;
	'conflict': () => void;
	'fetch-error': () => void;
}

export type MultipleSubscriptionEvents<T> = {
	'fetch': () => void;
	'fetch-error': () => void;
	'new': (newValues: T[]) => void;
	'updated': (updatedValues: T[]) => void;
	'removed': (removedValues: T[]) => void;
	'conflict': (changes: Changes<T>) => void;
}

interface EffectParams<T> {
	guild: CombinedGuild;
	// TODO: I changed this from value: T | null to just value: T. I think
	// this file (and potentially some others) has a bunch of spots that use .value?.xxx
	// where it doesn't need to. Maybe there is an ESLint thing for this?
	onFetch: (value: T, valueGuild: CombinedGuild) => void;
	onFetchError: (e: unknown) => void;
	bindEventsFunc: () => void;
	unbindEventsFunc: () => void;
}

type Arguments<T> = T extends (...args: infer A) => unknown ? A : never;

export interface SubscriptionResult<T> {
	value: T;
	guild: CombinedGuild;
}

export function isNonNullAndHasValue<T>(subscriptionResult: SubscriptionResult<T | null> | null): subscriptionResult is SubscriptionResult<T> {
	return !!(subscriptionResult !== null && subscriptionResult.value !== null);
}

interface SingleEventMappingParams<T, UE extends keyof Connectable, CE extends keyof Conflictable> {
	updatedEventName: UE;
	updatedEventArgsMap: (...args: Arguments<Connectable[UE]>) => T;
	conflictEventName: CE;
	conflictEventArgsMap: (...args: Arguments<Conflictable[CE]>) => T;
}

interface MultipleEventMappingParams<
	T,
	NE extends keyof Connectable,
	UE extends keyof Connectable,
	RE extends keyof Connectable,
	CE extends keyof Conflictable
> {
	newEventName: NE;
	newEventArgsMap: (...args: Arguments<Connectable[NE]>) => T[]; // list of new elements
	updatedEventName: UE;
	updatedEventArgsMap: (...args: Arguments<Connectable[UE]>) => T[]; // list of updated elements
	removedEventName: RE;
	removedEventArgsMap: (...args: Arguments<Connectable[RE]>) => T[]; // list of removed elements

	conflictEventName: CE;
	conflictEventArgsMap: (...args: Arguments<Conflictable[CE]>) => Changes<T>;

	sortFunc: (a: T, b: T) => number; // Friendly reminder that v8 uses timsort so this is O(n) for pre-sorted stuff
}


/**
 * Core function to subscribe to a general fetchable guild function
 * @param subscriptionParams Event callback functions
 * @param fetchFunc Function that can be called to fetch the data for the subscription. This function will be called automatically if it is changed.
 *         Typically, this function will be set up in a useCallback with a dependency on at least the guild.
 *         If the fetch function returns null, this will not call "onFetch". This allows results to stay until the guilds are updated.
 */
function useGuildSubscriptionEffect<T>(
	subscriptionParams: EffectParams<T>,
	fetchFunc: () => Promise<T | null>
): [ fetchRetryCallable: () => Promise<void> ] {
	const { guild, onFetch, onFetchError, bindEventsFunc, unbindEventsFunc } = subscriptionParams;

	const isMounted = useIsMountedRef();
	const guildRef = useRef<CombinedGuild>(guild);
	guildRef.current = guild;

	const fetchManagerFunc = useCallback(async () => {
		if (!isMounted.current) return;
		if (guildRef.current !== guild) return;
		try {
			const value = await fetchFunc();
			if (!isMounted.current) return;
			if (guildRef.current !== guild) return; // Don't even call onFetch if we changed guilds. TODO: Test this
			if (!value) return; // we decided not to fetch, typically since there are conflicting guilds
			onFetch(value, guild);
		} catch (e: unknown) {
			LOG.error('error fetching for subscription', e);
			if (!isMounted.current) return;
			if (guildRef.current !== guild) return;
			onFetchError(e);
		}
	}, [ fetchFunc ]);

	useEffect(() => {
		// Bind guild events to make sure we have the most up to date information
		guild.on('connect', fetchManagerFunc);
		guild.on('disconnect', fetchManagerFunc);
		bindEventsFunc();

		// Fetch the data once
		fetchManagerFunc();

		return () => {
			// Unbind the events so that we don't have any memory leaks
			guild.off('connect', fetchManagerFunc);
			guild.off('disconnect', fetchManagerFunc);
			unbindEventsFunc();
		}
	}, [ fetchManagerFunc ]);

	return [ fetchManagerFunc ];
}

/**
 * Subscribe to a fetchable guild function that returns a single element (i.e. GuildMetadata)
 * @param guild The guild to listen for changes on
 * @param eventMappingParams The events to use to listen for changes (such as updates and conflicts)
 * @param fetchFunc The function to call to fetch initial data
 */
function useSingleGuildSubscription<T, UE extends keyof Connectable, CE extends keyof Conflictable>(
	guild: CombinedGuild,
	eventMappingParams: SingleEventMappingParams<T, UE, CE>,
	fetchFunc: () => Promise<T | null>
): [lastResult: SubscriptionResult<T> | null, fetchError: unknown | null] {
	const { updatedEventName, updatedEventArgsMap, conflictEventName, conflictEventArgsMap } = eventMappingParams;

	const isMounted = useIsMountedRef();

	const [ fetchError, setFetchError ] = useState<unknown | null>(null);
	const [ lastResult, setLastResult ] = useState<{ value: T, guild: CombinedGuild } | null>(null);

	const onFetch = useCallback((fetchValue: T | null, fetchValueGuild: CombinedGuild) => {
		setLastResult(fetchValue ? { value: fetchValue, guild: fetchValueGuild } : null);
		setFetchError(null);
	}, []);

	const onFetchError = useCallback((e: unknown) => {
		setFetchError(e);
		setLastResult(null)
	}, []);

	// I think the typed EventEmitter class isn't ready for this level of insane type safety
	// otherwise, I may have done this wrong. Forcing it to work with these calls
	const boundUpdateFunc = useCallback((...args: Arguments<Connectable[UE]>): void => {
		if (!isMounted.current) return;
		const value = updatedEventArgsMap(...args);
		setLastResult(lastResult => {
			if (guild !== lastResult?.guild) return lastResult;
			return { value: value, guild: guild };
		});
	}, [ guild ]) as (Connectable & Conflictable)[UE];
	const boundConflictFunc = useCallback((...args: Arguments<Conflictable[CE]>): void => {
		if (!isMounted.current) return;
		const value = conflictEventArgsMap(...args);
		setLastResult(lastResult => {
			if (guild !== lastResult?.guild) return lastResult;
			return { value: value, guild: guild };
		});
	}, [ guild ]) as (Connectable & Conflictable)[CE];

	const bindEventsFunc = useCallback(() => {
		guild.on(updatedEventName, boundUpdateFunc);
		guild.on(conflictEventName, boundConflictFunc);
	}, [ boundUpdateFunc, boundConflictFunc ]);
	const unbindEventsFunc = useCallback(() => {
		guild.off(updatedEventName, boundUpdateFunc);
		guild.off(conflictEventName, boundConflictFunc);
	}, [ boundUpdateFunc, boundConflictFunc ]);

	useGuildSubscriptionEffect({
		guild,
		onFetch,
		onFetchError,
		bindEventsFunc,
		unbindEventsFunc
	}, fetchFunc);

	return [ lastResult, fetchError ];
}

function useMultipleGuildSubscription<
	T extends { id: string },
	NE extends keyof Connectable,
	UE extends keyof Connectable,
	RE extends keyof Connectable,
	CE extends keyof Conflictable
>(
	guild: CombinedGuild,
	eventMappingParams: MultipleEventMappingParams<T, NE, UE, RE, CE>,
	fetchFunc: () => Promise<T[] | null>
): [
	fetchRetryCallable: () => Promise<void>,
	lastResult: SubscriptionResult<T[]> | null,
	fetchError: unknown | null,
] {
	const {
		newEventName, newEventArgsMap,
		updatedEventName, updatedEventArgsMap,
		removedEventName, removedEventArgsMap,
		conflictEventName, conflictEventArgsMap,
		sortFunc
	} = eventMappingParams;

	const isMounted = useIsMountedRef();

	const [ fetchError, setFetchError ] = useState<unknown | null>(null);
	const [ lastResult, setLastResult ] = useState<{ value: T[], guild: CombinedGuild } | null>(null);

	const onFetch = useCallback((fetchValue: T[], fetchValueGuild: CombinedGuild) => {
		if (fetchValue) fetchValue.sort(sortFunc);
		/* LOG.debug('onFetch', { valueType: (fetchValue?.length && (fetchValue[0] as T).constructor.name) ?? 'null', guild: fetchValueGuild.id }); */
		setLastResult({ value: fetchValue, guild: fetchValueGuild });
		setFetchError(null);
	}, [ sortFunc ]);

	const onFetchError = useCallback((e: unknown) => {
		setFetchError(e);
		setLastResult(null)
	}, []);

	// I think the typed EventEmitter class isn't ready for this level of insane type safety
	// otherwise, I may have done this wrong. Forcing it to work with these calls
	const boundNewFunc = useCallback((...args: Arguments<Connectable[NE]>): void => {
		if (!isMounted.current) return;
		const newElements = newEventArgsMap(...args);
		setLastResult((lastResult) => {
			// TODO: There's a bug in this and other functions like it in the file where if you switch
			// from one guild and then back again, there is potential for the new/add to be triggered twice
			// if the add result happens slowly. This could be mitigated by adding some sort of "selection id"
			// each time the guild changes. For our purposes so far, this "bug" should be OK to leave in.
			// In the incredibly rare case where this does happen, you will see things duplicated
			if (guild !== lastResult?.guild) return lastResult; // prevent changes from a different guild
			if (!lastResult) { LOG.warn('got onNew with no lastResult'); return null; } // Sanity check
			return { value: (lastResult.value ?? []).concat(newElements).sort(sortFunc), guild: guild };
		});
	}, [ guild, newEventArgsMap ]) as (Connectable & Conflictable)[NE];
	const boundUpdateFunc = useCallback((...args: Arguments<Connectable[UE]>): void => {
		if (!isMounted.current) return;
		if (guild !== lastResult?.guild) return;
		const updatedElements = updatedEventArgsMap(...args);
		setLastResult((lastResult) => {
			if (!lastResult) { LOG.warn('got onUpdated with no lastResult'); return null; } // Sanity check
			return { value: (lastResult.value ?? []).map(element => updatedElements.find(updatedElement => updatedElement.id === element.id) ?? element).sort(sortFunc), guild: guild };
		});
	}, [ guild, updatedEventArgsMap ]) as (Connectable & Conflictable)[UE];
	const boundRemovedFunc = useCallback((...args: Arguments<Connectable[RE]>): void => {
		if (!isMounted.current) return;
		if (guild !== lastResult?.guild) return;
		const removedElements = removedEventArgsMap(...args);
		setLastResult((lastResult) => {
			if (!lastResult) { LOG.warn('got onRemoved with no lastResult'); return null; } // Sanity check
			const deletedIds = new Set(removedElements.map(deletedElement => deletedElement.id));
			return { value: (lastResult.value ?? []).filter(element => !deletedIds.has(element.id)), guild: guild };
		});
	}, [ guild, removedEventArgsMap ]) as (Connectable & Conflictable)[RE];
	const boundConflictFunc = useCallback((...args: Arguments<Conflictable[CE]>): void => {
		if (!isMounted.current) return;
		const changes = conflictEventArgsMap(...args);
		setLastResult((lastResult) => {
			if (!lastResult) { LOG.warn('got onConflict with no lastResult'); return null; } // Sanity check
			const deletedIds = new Set(changes.deleted.map(deletedElement => deletedElement.id));
			return {
				value: (lastResult.value ?? [])
					.concat(changes.added) // Added
					.map(element => changes.updated.find(change => change.newDataPoint.id === element.id)?.newDataPoint ?? element) // Updated
					.filter(element => !deletedIds.has(element.id)) // Deleted
					.sort(sortFunc),
				guild: guild
			};
		});
	}, [ guild, conflictEventArgsMap ]) as (Connectable & Conflictable)[CE];

	const bindEventsFunc = useCallback(() => {
		guild.on(newEventName, boundNewFunc);
		guild.on(updatedEventName, boundUpdateFunc);
		guild.on(removedEventName, boundRemovedFunc);
		guild.on(conflictEventName, boundConflictFunc);
	}, [ boundNewFunc, boundUpdateFunc, boundRemovedFunc, boundConflictFunc ]);
	const unbindEventsFunc = useCallback(() => {
		guild.off(newEventName, boundNewFunc);
		guild.off(updatedEventName, boundUpdateFunc);
		guild.off(removedEventName, boundRemovedFunc);
		guild.off(conflictEventName, boundConflictFunc);
	}, [ boundNewFunc, boundUpdateFunc, boundRemovedFunc, boundConflictFunc ]);

	const [ fetchRetryCallable ] = useGuildSubscriptionEffect({
		guild,
		onFetch,
		onFetchError,
		bindEventsFunc,
		unbindEventsFunc
	}, fetchFunc);

	return [ fetchRetryCallable, lastResult, fetchError ];
}

function useMultipleGuildSubscriptionScrolling<
	T extends { id: string },
	NE extends keyof Connectable,
	UE extends keyof Connectable,
	RE extends keyof Connectable,
	CE extends keyof Conflictable
>(
	guild: CombinedGuild,
	eventMappingParams: MultipleEventMappingParams<T, NE, UE, RE, CE>,
	maxElements: number,
	maxFetchElements: number,
	fetchFunc: () => Promise<T[] | null>,
	fetchAboveFunc: ((reference: T) => Promise<T[] | null>),
	fetchBelowFunc: ((reference: T) => Promise<T[] | null>),
): [
	fetchRetryCallable: () => Promise<void>,
	fetchAboveCallable: () => Promise<{ hasMoreAbove: boolean, removedFromBottom: boolean }>,
	fetchBelowCallable: () => Promise<{ hasMoreBelow: boolean, removedFromTop: boolean }>,
	setScrollRatio: Dispatch<SetStateAction<number>>,
	fetchResult: { hasMoreAbove: boolean, hasMoreBelow: boolean } | null,
	lastResult: SubscriptionResult<T[]> | null,
	fetchError: unknown | null,
	fetchAboveError: unknown | null,
	fetchBelowError: unknown | null,
] {
	const {
		newEventName, newEventArgsMap,
		updatedEventName, updatedEventArgsMap,
		removedEventName, removedEventArgsMap,
		conflictEventName, conflictEventArgsMap,
		sortFunc
	} = eventMappingParams;

	const isMounted = useIsMountedRef();

	// TODO: lastResult.value should really be only T[] instead of | null since we set it to [] anyway in the onUpdate, etc functions
	const [ lastResult, setLastResult ] = useState<{ value: T[], guild: CombinedGuild } | null>(null);

	const [ fetchError, setFetchError ] = useState<unknown | null>(null);
	const [ fetchAboveError, setFetchAboveError ] = useState<unknown | null>(null);
	const [ fetchBelowError, setFetchBelowError ] = useState<unknown | null>(null);

	const [ fetchResult, setFetchResult ] = useState<{ hasMoreAbove: boolean, hasMoreBelow: boolean } | null>(null);

	// Percentage of scroll from top. i.e. 300px from top of 1000px scroll = 0.3 scroll ratio
	const [ scrollRatio, setScrollRatio ] = useState<number>(0.5);

	// Gets the number of elements to remove from the top or bottom. Tries to optimise so that if 10 elements
	// are removed and we're 30% scrolled down, 3 get removed from the top and 7 are removed from the bottom.
	// TBH, this function is pretty overkill but that's important
	const getRemoveCounts = useCallback((toRemove: number): { fromTop: number, fromBottom: number } => {
		// Make sure we round toward the side of the scrollbar that we are not closest to
		// this is important for the most common case of 1 removed element.
		const topRoundFunc    = scrollRatio > 0.5 ? Math.ceil : Math.floor;
		const bottomRoundFunc = scrollRatio > 0.5 ? Math.floor : Math.ceil;
		return {
			fromTop: topRoundFunc(toRemove * scrollRatio),
			fromBottom: bottomRoundFunc(toRemove * scrollRatio)
		}
	}, [ scrollRatio ]);

	function removeByCounts<T>(elements: T[], counts: { fromTop: number, fromBottom: number }): T[] {
		const { fromTop, fromBottom } = counts;
		return elements.slice(fromTop, elements.length - fromBottom);
	}

	const fetchAboveCallable = useCallback(async (): Promise<{ hasMoreAbove: boolean, removedFromBottom: boolean }> => {
		if (!isMounted.current) return { hasMoreAbove: false, removedFromBottom: false };
		if (!lastResult || !lastResult.value || lastResult.value.length === 0) return { hasMoreAbove: false, removedFromBottom: false };
		if (guild !== lastResult.guild) return { hasMoreAbove: false, removedFromBottom: false };

		try {
			const reference = lastResult.value[0] as T;
			const aboveElements = await fetchAboveFunc(reference);
			const lastResultAfterAwait = getStateAfterAwait(setLastResult);
			if (!isMounted.current) return { hasMoreAbove: false, removedFromBottom: false };
			if (!lastResultAfterAwait || guild !== lastResultAfterAwait.guild) return { hasMoreAbove: false, removedFromBottom: false };
			setFetchAboveError(null);
			if (aboveElements) {
				const hasMoreAbove = aboveElements.length >= maxFetchElements;
				let removedFromBottom = false;
				setLastResult((lastResult) => {
					if (!lastResult) return null;
					let newValue = aboveElements.concat(lastResult.value ?? []).sort(sortFunc);
					if (newValue.length > maxElements) {
						newValue = newValue.slice(0, maxElements);
						removedFromBottom = true;
					}
					return { value: newValue, guild: lastResult.guild };
				});
				return { hasMoreAbove, removedFromBottom };
			} else {
				return { hasMoreAbove: false, removedFromBottom: false };
			}
		} catch (e: unknown) {
			LOG.error('error fetching above for subscription', e);
			const lastResultAfterAwait = getStateAfterAwait(setLastResult);
			if (!isMounted.current) return { hasMoreAbove: false, removedFromBottom: false };
			if (!lastResultAfterAwait || guild !== lastResultAfterAwait.guild) return { hasMoreAbove: false, removedFromBottom: false };
			setFetchAboveError(e);
			return { hasMoreAbove: true, removedFromBottom: false };
		}
	}, [ guild, lastResult, fetchAboveFunc, maxFetchElements ]);

	const fetchBelowCallable = useCallback(async (): Promise<{ hasMoreBelow: boolean, removedFromTop: boolean }> => {
		if (!isMounted.current) return { hasMoreBelow: false, removedFromTop: false };
		if (!lastResult || !lastResult.value || lastResult.value.length === 0) return { hasMoreBelow: false, removedFromTop: false };
		if (guild !== lastResult.guild) return { hasMoreBelow: false, removedFromTop: false };
		try {
			const reference = lastResult.value[lastResult.value.length - 1] as T;
			const belowElements = await fetchBelowFunc(reference);
			const lastResultAfterAwait = getStateAfterAwait(setLastResult);
			if (!isMounted.current) return { hasMoreBelow: false, removedFromTop: false };
			if (!lastResultAfterAwait || guild !== lastResultAfterAwait.guild) return { hasMoreBelow: false, removedFromTop: false };
			setFetchBelowError(null);
			if (belowElements) {
				const hasMoreBelow = belowElements.length >= maxFetchElements;
				let removedFromTop = false;
				setLastResult((lastResult) => {
					if (!lastResult) return null;
					let newValue = (lastResult.value ?? []).concat(belowElements).sort(sortFunc);
					if (newValue.length > maxElements) {
						newValue = newValue.slice(Math.max(newValue.length - maxElements, 0));
						removedFromTop = true;
					}
					return { value: newValue, guild: lastResult.guild };
				})
				return { hasMoreBelow, removedFromTop };
			} else {
				return { hasMoreBelow: false, removedFromTop: false };
			}
		} catch (e: unknown) {
			LOG.error('error fetching below for subscription', e);
			const lastResultAfterAwait = getStateAfterAwait(setLastResult);
			if (!isMounted.current) return { hasMoreBelow: false, removedFromTop: false };
			if (!lastResultAfterAwait || guild !== lastResultAfterAwait.guild) return { hasMoreBelow: false, removedFromTop: false };
			setFetchBelowError(e);
			return { hasMoreBelow: true, removedFromTop: false };
		}
	}, [ lastResult, fetchBelowFunc, maxFetchElements ]);

	const onFetch = useCallback((fetchValue: T[], fetchValueGuild: CombinedGuild) => {
		let hasMoreAbove = false;
		if (fetchValue) {
			if (fetchValue.length >= maxFetchElements) hasMoreAbove = true;
			fetchValue = fetchValue.slice(Math.max(fetchValue.length - maxElements)).sort(sortFunc);
		}
		//LOG.debug('Got items: ', { fetchValueLength: fetchValue?.length ?? '<empty>' })
		setFetchResult({ hasMoreAbove, hasMoreBelow: false });
		setLastResult({ value: fetchValue, guild: fetchValueGuild });
		setFetchError(null);
	}, [ sortFunc, maxFetchElements, maxElements ]);

	const onFetchError = useCallback((e: unknown) => {
		setFetchError(e);
		setLastResult(null);
	}, []);

	// I think the typed EventEmitter class isn't ready for this level of insane type safety
	// otherwise, I may have done this wrong. Forcing it to work with these calls
	const boundNewFunc = useCallback((...args: Arguments<Connectable[NE]>): void => {
		if (!isMounted.current) return;
		if (guild !== lastResult?.guild) return; // Cancel calls when the guild changes
		const newElements = newEventArgsMap(...args);
		setLastResult((lastResult) => {
			if (lastResult === null) return null;
			let newValue = (lastResult.value ?? []).concat(newElements).sort(sortFunc);
			if (newValue.length > maxElements) {
				// Remove in a way that tries to keep the scrollbar position consistent
				newValue = removeByCounts(newValue, getRemoveCounts(newValue.length - maxElements));
			}
			return { value: newValue, guild: guild };
		});
	}, [ guild, newEventArgsMap ]) as (Connectable & Conflictable)[NE];
	const boundUpdateFunc = useCallback((...args: Arguments<Connectable[UE]>): void => {
		if (!isMounted.current) return;
		if (guild !== lastResult?.guild) return; // Cancel calls when the guild changes
		const updatedElements = updatedEventArgsMap(...args);
		setLastResult((lastResult) => {
			if (lastResult === null) return null;
			return { value: (lastResult.value ?? []).map(element => updatedElements.find(updatedElement => updatedElement.id === element.id) ?? element).sort(sortFunc), guild: guild };
		});
	}, [ guild, updatedEventArgsMap ]) as (Connectable & Conflictable)[UE];
	const boundRemovedFunc = useCallback((...args: Arguments<Connectable[RE]>): void => {
		if (!isMounted.current) return;
		if (guild !== lastResult?.guild) return; // Cancel calls when the guild changes
		const removedElements = removedEventArgsMap(...args);
		setLastResult((lastResult) => {
			if (lastResult === null) return null;
			const deletedIds = new Set(removedElements.map(removedElement => removedElement.id));
			return { value: (lastResult.value ?? []).filter(element => !deletedIds.has(element.id)), guild: guild };
		});
	}, [ guild, removedEventArgsMap ]) as (Connectable & Conflictable)[RE];
	const boundConflictFunc = useCallback((...args: Arguments<Conflictable[CE]>): void => {
		if (!isMounted.current) return;
		if (guild !== lastResult?.guild) return; // Cancel calls when the guild changes
		const changes = conflictEventArgsMap(...args);
		setLastResult((lastResult) => {
			if (lastResult === null) return null;
			const deletedIds = new Set(changes.deleted.map(deletedElement => deletedElement.id));
			let newValue = (lastResult.value ?? [])
				.concat(changes.added)
				.map(element => changes.updated.find(change => change.newDataPoint.id === element.id)?.newDataPoint ?? element)
				.filter(element => !deletedIds.has(element.id))
				.sort(sortFunc);
			if (newValue.length > maxElements) {
				newValue = removeByCounts(newValue, getRemoveCounts(newValue.length - maxElements));
			}
			return { value: newValue, guild: guild };
		});
	}, [ guild, conflictEventArgsMap ]) as (Connectable & Conflictable)[CE];

	const bindEventsFunc = useCallback(() => {
		guild.on(newEventName, boundNewFunc);
		guild.on(updatedEventName, boundUpdateFunc);
		guild.on(removedEventName, boundRemovedFunc);
		guild.on(conflictEventName, boundConflictFunc);
	}, [ boundNewFunc, boundUpdateFunc, boundRemovedFunc, boundConflictFunc ]);
	const unbindEventsFunc = useCallback(() => {
		guild.off(newEventName, boundNewFunc);
		guild.off(updatedEventName, boundUpdateFunc);
		guild.off(removedEventName, boundRemovedFunc);
		guild.off(conflictEventName, boundConflictFunc);
	}, [ boundNewFunc, boundUpdateFunc, boundRemovedFunc, boundConflictFunc ]);

	const [ fetchRetryCallable ] = useGuildSubscriptionEffect({
		guild,
		onFetch,
		onFetchError,
		bindEventsFunc,
		unbindEventsFunc
	}, fetchFunc);

	return [
		fetchRetryCallable,
		fetchAboveCallable,
		fetchBelowCallable,
		setScrollRatio,
		fetchResult,
		lastResult,
		fetchError,
		fetchAboveError,
		fetchBelowError,
	];
}

export function useGuildMetadataSubscription(guild: CombinedGuild) {
	const fetchMetadataFunc = useCallback(async () => {
		//LOG.silly('fetching metadata for subscription');
		return await guild.fetchMetadata();
	}, [ guild ]);
	return useSingleGuildSubscription<GuildMetadata, 'update-metadata', 'conflict-metadata'>(guild, {
		updatedEventName: 'update-metadata',
		updatedEventArgsMap: (guildMeta: GuildMetadata) => guildMeta,
		conflictEventName: 'conflict-metadata',
		conflictEventArgsMap: (_changesType: AutoVerifierChangesType, _oldGuildMeta: GuildMetadata, newGuildMeta: GuildMetadata) => newGuildMeta
	}, fetchMetadataFunc);
}

export function useResourceSubscription(guild: CombinedGuild, resourceId: string | null, resourceIdGuild: CombinedGuild | null) {
	const fetchResourceFunc = useCallback(async () => {
		//LOG.silly('fetching resource for subscription (resourceId: ' + resourceId + ')');
		// Note: Returning null skips the load. This will prevent a null resourceResult
		if (resourceId === null) return null;
		if (resourceIdGuild === null) return null;
		if (resourceIdGuild !== guild) return null;
		const fetchResource = await guild.fetchResource(resourceId);
		return fetchResource;
	}, [ guild, resourceIdGuild, resourceId ]); // Explicitly do NOT want lastFetchResource since it would cause a re-fetch after fetching successfully
	return useSingleGuildSubscription<Resource, 'update-resource', 'conflict-resource'>(guild, {
		updatedEventName: 'update-resource',
		updatedEventArgsMap: (resource: Resource) => resource,
		conflictEventName: 'conflict-resource',
		conflictEventArgsMap: (_query: IDQuery, _changesType: AutoVerifierChangesType, _oldResource: Resource, newResource: Resource) => newResource
	}, fetchResourceFunc);
}

export function useSoftImageSrcResourceSubscription(guild: CombinedGuild, resourceId: string | null, resourceIdGuild: CombinedGuild | null): [
	imgSrc: string,
	resourceResult: SubscriptionResult<Resource> | null,
	fetchError: unknown | null 
] {
	const [ resourceResult, fetchError ] = useResourceSubscription(guild, resourceId, resourceIdGuild);

	const [ imgSrc ] = useOneTimeAsyncAction(
		async () => {
			//LOG.debug(`Fetching soft imgSrc for g#${guild.id} r#${resource?.id ?? '<null>'}`, { fetchError });
			if (fetchError) return './img/error.png';
			if (!resourceResult) return './img/loading.svg';
			return await ElementsUtil.getImageSrcFromBufferFailSoftly(resourceResult.value.data);
		},
		'./img/loading.svg',
		[ resourceResult, fetchError ]
	);

	return [ imgSrc, resourceResult, fetchError ];
}

export function useChannelsSubscription(guild: CombinedGuild) {
	const fetchChannelsFunc = useCallback(async () => {
		return await guild.fetchChannels();
	}, [ guild ]);
	return useMultipleGuildSubscription<Channel, 'new-channels', 'update-channels', 'remove-channels', 'conflict-channels'>(guild, {
		newEventName: 'new-channels',
		newEventArgsMap: (channels: Channel[]) => channels,
		updatedEventName: 'update-channels',
		updatedEventArgsMap: (updatedChannels: Channel[]) => updatedChannels,
		removedEventName: 'remove-channels',
		removedEventArgsMap: (removedChannels: Channel[]) => removedChannels,
		conflictEventName: 'conflict-channels',
		conflictEventArgsMap: (_changesType: AutoVerifierChangesType, changes: Changes<Channel>) => changes,
		sortFunc: Channel.sortByIndex
	}, fetchChannelsFunc);
}

export function useMembersSubscription(guild: CombinedGuild) {
	const fetchMembersFunc = useCallback(async () => {
		const members = await guild.fetchMembers();
		return members;
		//return await guild.fetchMembers();
	}, [ guild ]);
	return useMultipleGuildSubscription<Member, 'new-members', 'update-members', 'remove-members', 'conflict-members'>(guild, {
		newEventName: 'new-members',
		newEventArgsMap: (members: Member[]) => members,
		updatedEventName: 'update-members',
		updatedEventArgsMap: (updatedMembers: Member[]) => updatedMembers,
		removedEventName: 'remove-members',
		removedEventArgsMap: (removedMembers: Member[]) => removedMembers,
		conflictEventName: 'conflict-members',
		conflictEventArgsMap: (_changesType: AutoVerifierChangesType, changes: Changes<Member>) => changes,
		sortFunc: Member.sortForList
	}, fetchMembersFunc);
}

export function useSelfMemberSubscription(guild: CombinedGuild): [
	selfMemberResult: SubscriptionResult<Member | null> | null
] {
	const [ _fetchRetryCallable, membersResult, _fetchError ] = useMembersSubscription(guild);
	
	// TODO: Show an error if we can't fetch and allow retry

	const [ selfMemberResult, setSelfMemberResult ] = useState<SubscriptionResult<Member | null> | null>(null);

	useEffect(() => {
		if (isNonNullAndHasValue(membersResult) && membersResult.guild === guild) {
			const member = membersResult.value.find(m => m.id === guild.memberId);
			if (!member) {
				LOG.warn('unable to find self in members');
				setSelfMemberResult({ value: null, guild: membersResult.guild });
			} else {
				setSelfMemberResult({ value: member, guild: membersResult.guild });
			}
		}
	}, [ membersResult ]);

	return [ selfMemberResult ];
}

export function useTokensSubscription(guild: CombinedGuild) {
	const fetchTokensFunc = useCallback(async () => {
		//LOG.silly('fetching tokens for subscription');
		return await guild.fetchTokens();
	}, [ guild ]);
	return useMultipleGuildSubscription<Token, 'new-tokens', 'update-tokens', 'remove-tokens', 'conflict-tokens'>(guild, {
		newEventName: 'new-tokens',
		newEventArgsMap: (tokens: Token[]) => tokens,
		updatedEventName: 'update-tokens',
		updatedEventArgsMap: (updatedTokens: Token[]) => updatedTokens,
		removedEventName: 'remove-tokens',
		removedEventArgsMap: (removedTokens: Token[]) => removedTokens,
		conflictEventName: 'conflict-tokens',
		conflictEventArgsMap: (_changesType: AutoVerifierChangesType, changes: Changes<Token>) => changes,
		sortFunc: Token.sortRecentCreatedFirst
	}, fetchTokensFunc);
}

export function useMessagesScrollingSubscription(guild: CombinedGuild, channel: Channel, channelGuild: CombinedGuild) {
	const maxFetchElements = Globals.MESSAGES_PER_REQUEST;
	const maxElements = Globals.MAX_CURRENT_MESSAGES;
	const fetchMessagesFunc = useCallback(async () => {
		if (guild !== channelGuild) {
			return null; // Note: This skips the load so that we don't have to clear the message list
		}
		return await guild.fetchMessagesRecent(channel.id, maxFetchElements);
	}, [ guild, channelGuild, channel.id, maxFetchElements ]);
	const fetchAboveFunc = useCallback(async (reference: Message) => {
		if (guild !== channelGuild) return [];
		return await guild.fetchMessagesBefore(channel.id, reference.id, maxFetchElements);
	}, [ guild, channelGuild, channel.id, maxFetchElements ]);
	const fetchBelowFunc = useCallback(async (reference: Message) => {
		if (guild !== channelGuild) return [];
		return await guild.fetchMessagesAfter(channel.id, reference.id, maxFetchElements);
	}, [ guild, channelGuild, channel.id, maxFetchElements ]);
	return useMultipleGuildSubscriptionScrolling(
		guild, {
			newEventName: 'new-messages',
			newEventArgsMap: (messages: Message[]) => messages,
			updatedEventName: 'update-messages',
			updatedEventArgsMap: (updatedMessages) => updatedMessages,
			removedEventName: 'remove-messages',
			removedEventArgsMap: (removedMessages) => removedMessages,
			conflictEventName: 'conflict-messages',
			conflictEventArgsMap: (_query: PartialMessageListQuery, _changesType: AutoVerifierChangesType, changes: Changes<Message>) => changes,
			sortFunc: Message.sortOrder
		},
		maxElements, maxFetchElements,
		fetchMessagesFunc, fetchAboveFunc, fetchBelowFunc
	)
}