Merge pull request #418 from NEU-DSG/cm/audio-ux

Clean up contributor audio user experience

website/src/auth.tsx

@@ -8,6 +8,7 @@ import {
 } from "amazon-cognito-identity-js"
 import React, { createContext, useContext, useEffect, useState } from "react"
 import { navigate } from "vite-plugin-ssr/client/router"
+import { UserGroup } from "./graphql/dailp"
 
 type UserContextType = {
   user: CognitoUser | null
@@ -320,24 +321,32 @@ export const useCredentials = () => {
   return creds ?? null
 }
 
-export const useCognitoUserGroups = () => {
+export const useCognitoUserGroups = (): UserGroup[] => {
   const { user } = useContext(UserContext)
   const groups: string[] =
     user?.getSignInUserSession()?.getIdToken().payload["cognito:groups"] ?? []
   return groups
+    .map((g) => g.toUpperCase())
+    .filter((g): g is UserGroup =>
+      Object.values(UserGroup).includes(g as UserGroup)
+    )
 }
 
+/**
+ * A user has one and only one `role`. A role is typically a users most
+ * permissive `group`, or `READER` if they have no `groups`.
+ */
 export enum UserRole {
-  READER = "READER",
-  CONTRIBUTOR = "CONTRIBUTOR",
-  EDITOR = "EDITOR",
+  Reader = "READER",
+  Contributor = "CONTRIBUTOR",
+  Editor = "EDITOR",
 }
 
 export function useUserRole(): UserRole {
   const groups = useCognitoUserGroups()
-  if (groups.includes("Editors")) return UserRole.EDITOR
-  else if (groups.includes("Contributors")) return UserRole.CONTRIBUTOR
-  else return UserRole.READER
+  if (groups.includes(UserGroup.Editors)) return UserRole.Editor
+  else if (groups.includes(UserGroup.Contributors)) return UserRole.Contributor
+  else return UserRole.Reader
 }
 
 export const useUserId = () => {

website/src/components/edit-word-audio/contributor-audio-panel.tsx

@@ -0,0 +1,79 @@
+import cx from "classnames"
+import { ReactElement, ReactNode } from "react"
+import { IconType } from "react-icons"
+import * as Dailp from "src/graphql/dailp"
+import { CollapsiblePanel } from "src/panel-layout"
+import * as css from "../../panel-layout.css"
+import {
+  contributeAudioContainer,
+  statusMessage,
+  statusMessageError,
+} from "./contributor.css"
+import { useAudioUpload } from "./utils"
+
+export function ContributeAudioPanel(p: {
+  panelTitle: string
+  Icon: IconType
+  Component: ContributeAudioComponent
+  word: Dailp.FormFieldsFragment
+}) {
+  return (
+    <CollapsiblePanel
+      title={p.panelTitle}
+      content={<ContributeAudioSection word={p.word} Component={p.Component} />}
+      icon={<p.Icon size={24} className={css.wordPanelButton.colpleft} />}
+    />
+  )
+}
+
+type ContributeAudioComponent = (p: {
+  uploadAudio: (blob: Blob) => Promise<boolean>
+}) => ReactElement
+
+/**
+ * This wrapper component provides upload functionality and feedback for an
+ * audio contribution component.
+ */
+function ContributeAudioSection(p: {
+  word: Dailp.FormFieldsFragment
+  Component: ContributeAudioComponent
+}): ReactElement {
+  const [uploadAudio, uploadState, clearUploadError] = useAudioUpload(p.word.id)
+
+  return (
+    <div className={contributeAudioContainer}>
+      <p.Component uploadAudio={uploadAudio} />
+
+      {uploadState === "uploading" && (
+        <StatusMessage>
+          <p>Uploading...</p>
+        </StatusMessage>
+      )}
+
+      {uploadState === "error" && (
+        <StatusMessage error>
+          <p>
+            Something went wrong with the upload{" "}
+            <button onClick={() => clearUploadError()}>Try again</button>
+          </p>
+        </StatusMessage>
+      )}
+    </div>
+  )
+}
+
+function StatusMessage({
+  children,
+  error = false,
+}: {
+  children: ReactNode
+  error?: boolean
+}) {
+  return (
+    <div
+      className={error ? cx(statusMessage, statusMessageError) : statusMessage}
+    >
+      {children}
+    </div>
+  )
+}

website/src/components/edit-word-audio/contributor.css.ts

@@ -23,7 +23,7 @@ export const statusMessage = style({
   bottom: 0,
   backgroundColor: "rgba(255,255,255,0.65)",
   color: "black",
-  padding: 40,
+  padding: 10,
   backdropFilter: "blur(2px)",
   border: "4px solid grey",
 })