From 8351d63ff6b36d1854bf6f1c44250106f752b453 Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Sun, 27 Jun 2021 19:17:44 -0400 Subject: [PATCH] impl usetoggle --- src/components/Group.tsx | 8 +++----- src/components/NewUI/Event.tsx | 18 ++++++------------ src/components/NewUI/EventCreatorLink.tsx | 7 ++----- src/components/NewUI/GroupCreatorLink.tsx | 7 ++----- src/components/NewUI/GroupJoinerLink.tsx | 6 ++---- src/components/NewUI/GroupSettingsLink.tsx | 6 ++---- src/components/NewUI/useToggle.ts | 2 +- 7 files changed, 18 insertions(+), 36 deletions(-) diff --git a/src/components/Group.tsx b/src/components/Group.tsx index 0a280c8..a1b0745 100644 --- a/src/components/Group.tsx +++ b/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(); const [pools, setPools] = useState([]); - 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() {
- {createPoolVisible && } diff --git a/src/components/NewUI/Event.tsx b/src/components/NewUI/Event.tsx index bd39638..98332c7 100644 --- a/src/components/NewUI/Event.tsx +++ b/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(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 ( @@ -286,9 +282,7 @@ export default function Event({ event }: { event: IEvent }) { cursor: 'pointer', userSelect: 'none', }} - onClick={() => { - setHaveRide((h) => !h); - }} + onClick={toggleHaveRide} > { - setOpen((open) => !open); - }, []); + const [open, toggle] = useToggle(false); return (
diff --git a/src/components/NewUI/GroupCreatorLink.tsx b/src/components/NewUI/GroupCreatorLink.tsx index 3ff8e62..e9f1ae5 100644 --- a/src/components/NewUI/GroupCreatorLink.tsx +++ b/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 (
diff --git a/src/components/NewUI/GroupJoinerLink.tsx b/src/components/NewUI/GroupJoinerLink.tsx index f42688c..7ac38d5 100644 --- a/src/components/NewUI/GroupJoinerLink.tsx +++ b/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 ( <> diff --git a/src/components/NewUI/GroupSettingsLink.tsx b/src/components/NewUI/GroupSettingsLink.tsx index 4903cde..e9f0daf 100644 --- a/src/components/NewUI/GroupSettingsLink.tsx +++ b/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 (
diff --git a/src/components/NewUI/useToggle.ts b/src/components/NewUI/useToggle.ts index 5189579..d8b3e0c 100644 --- a/src/components/NewUI/useToggle.ts +++ b/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; }