From 325562996b2ffcef7e3ebfa8ed31429b962fc4ca Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Wed, 18 May 2022 17:16:32 -0500
Subject: [PATCH] replace useUniqueId() with useId()

there should only be one way to do a thing...
---
 src/editor/Editor.tsx                          |  6 +++---
 src/explorer/newFileWizard/NewFileWizard.tsx   |  4 ++--
 .../UnexpectedErrorNotification.tsx            |  4 ++--
 src/utils/react.ts                             | 18 ------------------
 4 files changed, 7 insertions(+), 25 deletions(-)
 delete mode 100644 src/utils/react.ts

diff --git a/src/editor/Editor.tsx b/src/editor/Editor.tsx
index c10de490..b1b779c5 100644
--- a/src/editor/Editor.tsx
+++ b/src/editor/Editor.tsx
@@ -20,6 +20,7 @@ import { I18n, useI18n } from '@shopify/react-i18n';
 import tomorrowNightEightiesTheme from 'monaco-themes/themes/Tomorrow-Night-Eighties.json';
 import xcodeTheme from 'monaco-themes/themes/Xcode_default.json';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useId } from 'react-aria';
 import MonacoEditor, {
     ChangeHandler,
     EditorDidMount,
@@ -34,7 +35,6 @@ import { compile } from '../mpy/actions';
 import { useSelector } from '../reducers';
 import { useSettingIsShowDocsEnabled } from '../settings/hooks';
 import { isMacOS } from '../utils/os';
-import { useUniqueId } from '../utils/react';
 import { editorActivateFile, editorCloseFile } from './actions';
 import { I18nId } from './i18n';
 import * as pybricksMicroPython from './pybricksMicroPython';
@@ -94,7 +94,7 @@ type EditorContextMenuItemProps = Readonly<{
 const EditorContextMenuItem: React.VoidFunctionComponent<
     EditorContextMenuItemProps
 > = ({ label, icon, keyboardShortcut, disabled, editor, editorAction }) => {
-    const labelId = useUniqueId('pb-editor');
+    const labelId = useId();
 
     return (
         <MenuItem
@@ -201,7 +201,7 @@ const EditorTabs: React.VoidFunctionComponent<EditorTabsProps> = ({
         [dispatch, onChange],
     );
 
-    const labelId = useUniqueId('pb-editor');
+    const labelId = useId();
 
     // close tab when delete key is pressed
     const handleKeyDown = useCallback(
diff --git a/src/explorer/newFileWizard/NewFileWizard.tsx b/src/explorer/newFileWizard/NewFileWizard.tsx
index 22c7d921..e79b9a44 100644
--- a/src/explorer/newFileWizard/NewFileWizard.tsx
+++ b/src/explorer/newFileWizard/NewFileWizard.tsx
@@ -11,6 +11,7 @@ import {
 } from '@blueprintjs/core';
 import { useI18n } from '@shopify/react-i18n';
 import React, { useCallback, useRef, useState } from 'react';
+import { useId } from 'react-aria';
 import { useDispatch } from 'react-redux';
 import { useFileStorageMetadata } from '../../fileStorage/hooks';
 import {
@@ -19,7 +20,6 @@ import {
     validateFileName,
 } from '../../pybricksMicropython/lib';
 import { useSelector } from '../../reducers';
-import { useUniqueId } from '../../utils/react';
 import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
 import { Hub, newFileWizardDidAccept, newFileWizardDidCancel } from './actions';
 import { I18nId } from './i18n';
@@ -56,7 +56,7 @@ const NewFileWizard: React.VoidFunctionComponent = () => {
         dispatch(newFileWizardDidCancel());
     }, [dispatch]);
 
-    const acceptButtonLabelId = useUniqueId('pybricks-explorer');
+    const acceptButtonLabelId = useId();
 
     return (
         <Dialog
diff --git a/src/notifications/UnexpectedErrorNotification.tsx b/src/notifications/UnexpectedErrorNotification.tsx
index 66705e38..7880d929 100644
--- a/src/notifications/UnexpectedErrorNotification.tsx
+++ b/src/notifications/UnexpectedErrorNotification.tsx
@@ -7,7 +7,7 @@ import './UnexpectedErrorNotification.scss';
 import { AnchorButton, Button, ButtonGroup, Collapse, Intent } from '@blueprintjs/core';
 import { useI18n } from '@shopify/react-i18n';
 import React, { useState } from 'react';
-import { useUniqueId } from '../utils/react';
+import { useId } from 'react-aria';
 import { I18nId } from './i18n';
 
 type UnexpectedErrorNotificationProps = {
@@ -21,7 +21,7 @@ const UnexpectedErrorNotification: React.VoidFunctionComponent<
     // istanbul ignore next: babel-loader rewrites this line
     const [i18n] = useI18n();
     const [isExpanded, setIsExpanded] = useState(false);
-    const labelId = useUniqueId('pb-notification');
+    const labelId = useId();
 
     return (
         <>
diff --git a/src/utils/react.ts b/src/utils/react.ts
deleted file mode 100644
index 7f681433..00000000
--- a/src/utils/react.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// helper functions for React components
-
-import { useState } from 'react';
-import { createCountFunc } from './iter';
-
-const nextId = createCountFunc();
-
-/**
- * React hook to get a unique identifier, e.g. for linking components via
- * aria-labelledby.
- *
- * @param prefix A namespace prefix for the identifier.
- * @returns A unique identifier in the form "prefix-N"
- */
-export const useUniqueId = (prefix: string): string => {
-    const [uniqueId] = useState(`${prefix}-${nextId()}`);
-    return uniqueId;
-};