Minor hook simplification

Author: davidje13

frontend/src/api/RetroTokenService.ts

@@ -36,13 +36,15 @@ export class RetroTokenService {
   public async getRetroTokenForUser(
     retroId: string,
     userToken: string,
+    signal: AbortSignal,
   ): Promise<string> {
     const response = await fetch(
       `${this.apiBase}/auth/tokens/${encodeURIComponent(retroId)}/user`,
       {
         method: 'GET',
         cache: 'no-cache',
         headers: { Authorization: `Bearer ${userToken}` },
+        signal,
       },
     );
     const body = await handleResponse(response);

frontend/src/components/RetroRouter.tsx

@@ -27,7 +27,7 @@ function useRetroReducer(
 ): RetroReducerState {
   const [location, setLocation] = useLocation();
   const [retroState, setRetroState] = useState<Retro | null>(null);
-  const [connected, setConnected] = useState<boolean>(false);
+  const [connected, setConnected] = useState(false);
   const [retroDispatch, setRetroDispatch] = useState<RetroDispatch | null>(
     null,
   );

frontend/src/components/attachments/giphy/GiphyButton.tsx

@@ -1,6 +1,7 @@
-import { useState, memo } from 'react';
+import { memo } from 'react';
 import { type RetroItemAttachment } from '../../../shared/api-entities';
 import { useEvent } from '../../../hooks/useEvent';
+import { useBoolean } from '../../../hooks/useBoolean';
 import { Popup } from '../../common/Popup';
 import { WrappedButton } from '../../common/WrappedButton';
 import { GiphyPopup } from './GiphyPopup';
@@ -12,11 +13,9 @@ interface PropsT {
 
 export const GiphyButton = memo(
   ({ defaultAttachment = null, onChange }: PropsT) => {
-    const [visible, setVisible] = useState(false);
-    const show = useEvent(() => setVisible(true));
-    const hide = useEvent(() => setVisible(false));
+    const visible = useBoolean(false);
     const handleSave = useEvent((newAttachment: RetroItemAttachment | null) => {
-      hide();
+      visible.setFalse();
       onChange(newAttachment);
     });
 
@@ -26,18 +25,18 @@ export const GiphyButton = memo(
           key="giphy"
           title="Add GIPHY image"
           className="open-giphy"
-          onClick={show}
+          onClick={visible.setTrue}
         />
         <Popup
           title="Insert Giphy Image"
-          keys={{ Escape: hide }}
-          isOpen={visible}
-          onClose={hide}
+          keys={{ Escape: visible.setFalse }}
+          isOpen={visible.value}
+          onClose={visible.setFalse}
         >
           <GiphyPopup
             defaultAttachment={defaultAttachment}
             onConfirm={handleSave}
-            onCancel={hide}
+            onCancel={visible.setFalse}
           />
         </Popup>
       </>

frontend/src/components/password/PasswordPage.tsx

@@ -1,4 +1,5 @@
-import { useState, useLayoutEffect, ReactElement } from 'react';
+import { useState, ReactElement } from 'react';
+import useAwaited from 'react-hook-awaited';
 import { Header } from '../common/Header';
 import { Input } from '../common/Input';
 import { useSubmissionCallback } from '../../hooks/useSubmissionCallback';
@@ -15,7 +16,6 @@ interface PropsT {
 export const PasswordPage = ({ slug, retroId }: PropsT): ReactElement => {
   const [password, setPassword] = useState('');
   const userToken = useUserToken();
-  const [checkingUser, setCheckingUser] = useState(false);
 
   const [handleSubmit, sending, error] = useSubmissionCallback(async () => {
     if (!password) {
@@ -29,31 +29,22 @@ export const PasswordPage = ({ slug, retroId }: PropsT): ReactElement => {
     retroTokenTracker.set(retroId, retroToken);
   });
 
-  useLayoutEffect(() => {
-    if (!userToken) {
-      setCheckingUser(false);
-      return;
-    }
-
-    setCheckingUser(true);
-    retroTokenService
-      .getRetroTokenForUser(retroId, userToken)
-      .then((retroToken) => {
-        retroTokenTracker.set(retroId, retroToken);
-        setCheckingUser(false);
-      })
-      .catch(() => {
-        setCheckingUser(false);
-      });
-  }, [
-    userToken,
-    setCheckingUser,
-    retroId,
-    retroTokenService,
-    retroTokenTracker,
-  ]);
+  const checkingUser = useAwaited(
+    async (signal) => {
+      if (!userToken) {
+        return;
+      }
+      const retroToken = await retroTokenService.getRetroTokenForUser(
+        retroId,
+        userToken,
+        signal,
+      );
+      retroTokenTracker.set(retroId, retroToken);
+    },
+    [userToken, retroId, retroTokenService, retroTokenTracker],
+  );
 
-  if (checkingUser) {
+  if (userToken && checkingUser.state === 'pending') {
     return (
       <article className="page-password-user">
         <Header

frontend/src/components/retro-formats/mood/actions/ActionItem.tsx

@@ -1,4 +1,4 @@
-import { useState, memo } from 'react';
+import { memo } from 'react';
 import { classNames } from '../../../../helpers/classNames';
 import {
   type RetroItem,
@@ -7,6 +7,7 @@ import {
 import { ItemEditor } from '../ItemEditor';
 import { WrappedButton } from '../../../common/WrappedButton';
 import { useEvent } from '../../../../hooks/useEvent';
+import { useBoolean } from '../../../../hooks/useBoolean';
 import Tick from '../../../../../resources/tick.svg';
 import TickBold from '../../../../../resources/tick-bold.svg';
 import './ActionItem.less';
@@ -27,17 +28,15 @@ export const ActionItem = memo(
     const handleToggleDone = useEvent(() => onSetDone?.(item.id, !done));
     const handleDelete = useEvent(() => onDelete?.(item.id));
 
-    const [editing, setEditing] = useState(false);
-    const handleBeginEdit = useEvent(() => setEditing(true));
-    const handleCancelEdit = useEvent(() => setEditing(false));
+    const editing = useBoolean(false);
     const handleSaveEdit = useEvent(
       (diff: Partial<UserProvidedRetroItemDetails>) => {
-        setEditing(false);
+        editing.setFalse();
         onEdit!(item.id, diff);
       },
     );
 
-    if (editing) {
+    if (editing.value) {
       return (
         <div className="action-item editing">
           <ItemEditor
@@ -50,7 +49,7 @@ export const ActionItem = memo(
             submitButtonTitle="Save changes"
             onSubmit={handleSaveEdit}
             onDelete={onDelete ? handleDelete : undefined}
-            onCancel={handleCancelEdit}
+            onCancel={editing.setFalse}
             autoFocus
           />
         </div>
@@ -74,7 +73,7 @@ export const ActionItem = memo(
           className="edit"
           disabled={!onEdit}
           hideIfDisabled
-          onClick={handleBeginEdit}
+          onClick={editing.setTrue}
         />
       </div>
     );

frontend/src/components/retro-formats/mood/categories/MoodItem.tsx

@@ -1,4 +1,4 @@
-import { useState, memo } from 'react';
+import { memo } from 'react';
 import {
   type RetroItem,
   type UserProvidedRetroItemDetails,
@@ -7,6 +7,7 @@ import { MoodItemPlain } from './MoodItemPlain';
 import { MoodItemFocused } from './MoodItemFocused';
 import { ItemEditor } from '../ItemEditor';
 import { useEvent } from '../../../../hooks/useEvent';
+import { useBoolean } from '../../../../hooks/useBoolean';
 import TickBold from '../../../../../resources/tick-bold.svg';
 import './MoodItem.less';
 
@@ -46,17 +47,15 @@ export const MoodItem = memo(
     const handleCancel = useEvent(() => onCancel?.(item.id));
     const handleContinue = useEvent(() => onContinue?.(item.id));
 
-    const [editing, setEditing] = useState(false);
-    const handleBeginEdit = useEvent(() => setEditing(true));
-    const handleCancelEdit = useEvent(() => setEditing(false));
+    const editing = useBoolean(false);
     const handleSaveEdit = useEvent(
       (diff: Partial<UserProvidedRetroItemDetails>) => {
-        setEditing(false);
+        editing.setFalse();
         onEdit!(item.id, diff);
       },
     );
 
-    if (editing) {
+    if (editing.value) {
       return (
         <div className="mood-item editing">
           <ItemEditor
@@ -69,7 +68,7 @@ export const MoodItem = memo(
             submitButtonTitle="Save changes"
             onSubmit={handleSaveEdit}
             onDelete={onDelete ? handleDelete : undefined}
-            onCancel={handleCancelEdit}
+            onCancel={editing.setFalse}
             allowAttachments
             autoFocus
           />
@@ -94,7 +93,7 @@ export const MoodItem = memo(
       <MoodItemPlain
         item={item}
         onVote={onVote ? handleVote : undefined}
-        onEdit={onEdit ? handleBeginEdit : undefined}
+        onEdit={onEdit ? editing.setTrue : undefined}
         onSelect={onSelect ? handleSelect : undefined}
       />
     );

frontend/src/components/retro/RetroPage.tsx

@@ -1,11 +1,12 @@
-import { useState, useRef, memo } from 'react';
+import { useRef, memo } from 'react';
 import { type Retro } from '../../shared/api-entities';
 import { type RetroPagePropsT } from '../RetroRouter';
 import { ArchivePopup } from './ArchivePopup';
 import { Header } from '../common/Header';
 import { Popup } from '../common/Popup';
 import { useEvent } from '../../hooks/useEvent';
 import { useWindowSize, type Size } from '../../hooks/env/useWindowSize';
+import { useBoolean } from '../../hooks/useBoolean';
 import { clearCovered } from '../../actions/retro';
 import { archiveService } from '../../api/api';
 import { OPTIONS } from '../../helpers/optionManager';
@@ -37,12 +38,8 @@ const isSmallScreen = ({ width }: Size) => width <= 800;
 export const RetroPage = memo(
   ({ retroToken, retro, retroDispatch, group }: PropsT) => {
     const smallScreen = useWindowSize(isSmallScreen);
-    const [archivePopupVisible, setArchivePopupVisible] = useState(false);
-    const showArchivePopup = useEvent(() => setArchivePopupVisible(true));
-    const hideArchivePopup = useEvent(() => setArchivePopupVisible(false));
-    const [invitePopupVisible, setInvitePopupVisible] = useState(false);
-    const showInvitePopup = useEvent(() => setInvitePopupVisible(true));
-    const hideInvitePopup = useEvent(() => setInvitePopupVisible(false));
+    const archivePopupVisible = useBoolean(false);
+    const invitePopupVisible = useBoolean(false);
 
     const isArchiving = useRef(false);
     const performArchive = useEvent(() => {
@@ -56,7 +53,7 @@ export const RetroPage = memo(
         .then(() => {
           isArchiving.current = false;
           retroDispatch!(clearCovered());
-          hideArchivePopup();
+          archivePopupVisible.setFalse();
         })
         .catch((e) => {
           // TODO: report failure to user
@@ -76,14 +73,16 @@ export const RetroPage = memo(
     );
 
     const links = [
-      { label: 'Invite', action: showInvitePopup },
+      { label: 'Invite', action: invitePopupVisible.setTrue },
       retroDispatch
         ? {
             label: 'Settings',
             action: `/retros/${encodeURIComponent(retro.slug)}/settings`,
           }
         : null,
-      canArchive ? { label: 'Create Archive', action: showArchivePopup } : null,
+      canArchive
+        ? { label: 'Create Archive', action: archivePopupVisible.setTrue }
+        : null,
       {
         label: 'Archives',
         action: `/retros/${encodeURIComponent(retro.slug)}/archives`,
@@ -112,28 +111,31 @@ export const RetroPage = memo(
           retroState={getState(group, retro)}
           group={group}
           dispatch={retroDispatch ?? undefined}
-          onComplete={canArchive ? showArchivePopup : undefined}
+          onComplete={canArchive ? archivePopupVisible.setTrue : undefined}
           archive={false}
         />
         <Popup
           title="Create Archive"
-          isOpen={Boolean(retroDispatch && archivePopupVisible)}
-          keys={{ Enter: performArchive, Escape: hideArchivePopup }}
-          onClose={hideArchivePopup}
+          isOpen={Boolean(retroDispatch) && archivePopupVisible.value}
+          keys={{ Enter: performArchive, Escape: archivePopupVisible.setFalse }}
+          onClose={archivePopupVisible.setFalse}
         >
           <ArchivePopup
             onConfirm={performArchive}
-            onCancel={hideArchivePopup}
+            onCancel={archivePopupVisible.setFalse}
           />
         </Popup>
         <Popup
           title="Invite"
           hideTitle
-          isOpen={invitePopupVisible}
-          keys={{ Enter: hideInvitePopup, Escape: hideInvitePopup }}
-          onClose={hideInvitePopup}
+          isOpen={invitePopupVisible.value}
+          keys={{
+            Enter: invitePopupVisible.setFalse,
+            Escape: invitePopupVisible.setFalse,
+          }}
+          onClose={invitePopupVisible.setFalse}
         >
-          <InvitePopup onClose={hideInvitePopup} />
+          <InvitePopup onClose={invitePopupVisible.setFalse} />
         </Popup>
       </article>
     );

frontend/src/hooks/useBoolean.ts

@@ -0,0 +1,10 @@
+import { useState } from 'react';
+
+export function useBoolean(initial: boolean) {
+  const [value, setValue] = useState(initial);
+  const [setters] = useState(() => ({
+    setTrue: () => setValue(true),
+    setFalse: () => setValue(false),
+  }));
+  return { value, setValue, ...setters };
+}