use switch

website/src/edit-word-audio.tsx

@@ -1,18 +1,21 @@
 import { ReactElement } from "react"
-import { UserRole, useUserRole } from "./auth"
+import { UserRole, useCognitoUserGroups, useUserRole } from "./auth"
 import { ContributorEditWordAudio } from "./edit-word-audio-contributor"
 import { EditorEditWordAudio } from "./edit-word-audio-editor"
 import * as Dailp from "./graphql/dailp"
 
 export const EditWordAudio = (p: {
   word: Dailp.FormFieldsFragment
 }): ReactElement => {
-  // const userRole = useUserRole()
-  const userRole = UserRole.CONTRIBUTOR
+  const userRole = useUserRole()
+  // const userRole = UserRole.CONTRIBUTOR
 
-  if (userRole === UserRole.CONTRIBUTOR)
-    return <ContributorEditWordAudio word={p.word} />
-  else if (userRole === UserRole.EDITOR)
-    return <EditorEditWordAudio word={p.word} />
-  else return <div>You do not have permission to edit word audio.</div>
+  switch (userRole) {
+    case UserRole.CONTRIBUTOR:
+      return <ContributorEditWordAudio word={p.word} />
+    case UserRole.EDITOR:
+      return <EditorEditWordAudio word={p.word} />
+    case UserRole.READER:
+      return <div>You do not have permission to edit word audio.</div>
+  }
 }