impl usetoggle

src/components/Group.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { makeAPIGetCall } from '../api/utils';
 import CreatePool from './CreatePool';
+import useToggle from './NewUI/useToggle';
 import Pool from './Pool';
 
 // eslint-disable-next-line
@@ -40,7 +41,7 @@ export default function Group() {
 	const [error, setError] = useState(false);
 	const [group, setGroup] = useState<Carpool.Group>();
 	const [pools, setPools] = useState<Carpool.Pool[]>([]);
-	const [createPoolVisible, setCreatePoolVisible] = useState(false);
+	const [createPoolVisible, toggleCreatePoolVisible] = useToggle(false);
 
 	const fetchPools = useCallback(() => {
 		makeAPIGetCall(`/groups/${id}/pools`).then((res) => {
@@ -86,10 +87,7 @@ export default function Group() {
 			</Typography>
 			<div style={{ display: 'flex', flexDirection: 'column' }}>
 				<div>
-					<Button
-						onClick={() => setCreatePoolVisible((v) => !v)}
-						variant="contained"
-					>
+					<Button onClick={toggleCreatePoolVisible} variant="contained">
 						{createPoolVisible ? 'Cancel' : 'Create Pool'}
 					</Button>
 					{createPoolVisible && <CreatePool groupID={group._id} />}

src/components/NewUI/Event.tsx

@@ -1,9 +1,10 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import UIButton from './UIButton';
 import UIPlacesAutocomplete from './UIPlacesAutocomplete';
 import UISecondaryBox from './UISecondaryBox';
 import UISecondaryHeader from './UISecondaryHeader';
 import useThrottle from './useThrottle';
+import useToggle from './useToggle';
 
 const green = '#60f760';
 const lightgrey = '#e0e0e0';
@@ -242,15 +243,10 @@ function People({ event }: { event: IEvent }) {
 
 export default function Event({ event }: { event: IEvent }) {
 	const { name, group, formattedAddress, startTime, endTime } = event;
-	const [haveRide, setHaveRide] = useState(false);
+	const [haveRide, toggleHaveRide] = useToggle(false);
 	const [locationPlaceId, setLocationPlaceId] = useState<string>(null!);
-	const [interested, toggleInterested] = useState(false);
-	const toggleInterestedThrottled = useThrottle(
-		useCallback(() => {
-			toggleInterested((i) => !i);
-		}, []),
-		500
-	);
+	const [interested, toggleInterested] = useToggle(false);
+	const toggleInterestedThrottled = useThrottle(toggleInterested, 500);
 
 	return (
 		<UISecondaryBox>
@@ -286,9 +282,7 @@ export default function Event({ event }: { event: IEvent }) {
 								cursor: 'pointer',
 								userSelect: 'none',
 							}}
-							onClick={() => {
-								setHaveRide((h) => !h);
-							}}
+							onClick={toggleHaveRide}
 						>
 							<input
 								type="checkbox"

src/components/NewUI/EventCreatorLink.tsx

@@ -1,12 +1,9 @@
-import { useCallback, useState } from 'react';
 import EventCreator from './EventCreator';
 import { IGroup } from './Group';
+import useToggle from './useToggle';
 
 export default function EventCreatorLink({ group }: { group: IGroup }) {
-	const [open, setOpen] = useState(false);
-	const toggle = useCallback(() => {
-		setOpen((open) => !open);
-	}, []);
+	const [open, toggle] = useToggle(false);
 
 	return (
 		<div>

src/components/NewUI/GroupCreatorLink.tsx

@@ -1,11 +1,8 @@
-import { useCallback, useState } from 'react';
 import GroupCreator from './GroupCreator';
+import useToggle from './useToggle';
 
 export default function GroupCreatorLink() {
-	const [open, setOpen] = useState(false);
-	const toggle = useCallback(() => {
-		setOpen((open) => !open);
-	}, []);
+	const [open, toggle] = useToggle(false);
 
 	return (
 		<div style={{ width: '100%', textAlign: 'center' }}>

src/components/NewUI/GroupJoinerLink.tsx

@@ -3,6 +3,7 @@ import UIButton from './UIButton';
 import UIPressable from './UIPressable';
 import UISecondaryBox from './UISecondaryBox';
 import UITextInput from './UITextInput';
+import useToggle from './useToggle';
 
 function GroupJoiner() {
 	const [code, setCode] = useState('');
@@ -32,10 +33,7 @@ function GroupJoiner() {
 }
 
 export default function GroupJoinerLink() {
-	const [open, setOpen] = useState(false);
-	const toggle = useCallback(() => {
-		setOpen((open) => !open);
-	}, []);
+	const [open, toggle] = useToggle(false);
 
 	return (
 		<>

src/components/NewUI/GroupSettingsLink.tsx

@@ -3,6 +3,7 @@ import { IGroup } from './Group';
 import UILink from './UILink';
 import UIPressable from './UIPressable';
 import UISecondaryBox from './UISecondaryBox';
+import useToggle from './useToggle';
 
 function GroupSettings({ group }: { group: IGroup }) {
 	const [deletionSuccessful, setDeletionSuccessful] =
@@ -42,10 +43,7 @@ function GroupSettings({ group }: { group: IGroup }) {
 }
 
 export default function GroupSettingsLink({ group }: { group: IGroup }) {
-	const [open, setOpen] = useState(false);
-	const toggle = useCallback(() => {
-		setOpen((open) => !open);
-	}, []);
+	const [open, toggle] = useToggle(false);
 
 	return (
 		<div>

src/components/NewUI/useToggle.ts

@@ -3,5 +3,5 @@ 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];
+	return [value, toggle] as const;
 }