implement usethrottle

src/components/NewUI/Event.tsx

@@ -1,8 +1,9 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import UIButton from './UIButton';
 import UIPlacesAutocomplete from './UIPlacesAutocomplete';
 import UISecondaryBox from './UISecondaryBox';
 import UISecondaryHeader from './UISecondaryHeader';
+import useThrottle from './useThrottle';
 
 const green = '#60f760';
 const lightgrey = '#e0e0e0';
@@ -201,6 +202,7 @@ const dummyPeopleData: IPerson[] = [
 ];
 function People({ event }: { event: IEvent }) {
 	const PADDING = '1rem';
+	// eslint-disable-next-line
 	const [people, setPeople] = useState(dummyPeopleData);
 	return (
 		<div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -242,7 +244,13 @@ export default function Event({ event }: { event: IEvent }) {
 	const { name, group, formattedAddress, startTime, endTime } = event;
 	const [haveRide, setHaveRide] = useState(false);
 	const [locationPlaceId, setLocationPlaceId] = useState<string>(null!);
-	const [interested, setInterested] = useState(false);
+	const [interested, toggleInterested] = useState(false);
+	const toggleInterestedThrottled = useThrottle(
+		useCallback(() => {
+			toggleInterested((i) => !i);
+		}, []),
+		500
+	);
 
 	return (
 		<UISecondaryBox>
@@ -250,7 +258,7 @@ export default function Event({ event }: { event: IEvent }) {
 			<GroupName name={group} />
 			<Details {...{ startTime, endTime, formattedAddress }} />
 			<UIButton
-				onClick={() => setInterested((i) => !i)}
+				onClick={toggleInterestedThrottled}
 				style={{
 					backgroundColor: interested ? green : lightgrey,
 					color: interested ? 'white' : 'black',

src/components/NewUI/useThrottle.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+
+function throttle<F extends (...args: any) => any, T>(
+	this: T,
+	callback: F,
+	limit: number,
+	thisArg?: T
+): F {
+	let waiting = false;
+	let pendingArgs: null | any[] = null;
+	const scope = thisArg ?? this;
+	// @ts-ignore
+	const fn = function (this: T, ...args: any[]) {
+		if (!waiting) {
+			callback.apply(this, args);
+			waiting = true;
+			setTimeout(() => {
+				if (pendingArgs !== null) {
+					callback.apply(this, pendingArgs);
+					pendingArgs = null;
+				}
+				waiting = false;
+			}, limit);
+		} else {
+			pendingArgs = args;
+		}
+	};
+	fn.bind(scope);
+	// @ts-ignore
+	return fn;
+}
+
+export default function useThrottle<F extends (...args: any) => any>(
+	fn: F,
+	limit: number
+) {
+	return useMemo(() => throttle(fn, limit), [fn, limit]);
+}

src/components/NewUI/useToggle.ts

@@ -0,0 +1,7 @@
+import { useCallback, useState } from 'react';
+
+export default function useToggle(initial: boolean) {
+	const [value, setValue] = useState(initial);
+	const toggle = useCallback(() => setValue((v) => !v), []);
+	return [value, toggle];
+}