Merge pull request #396 from NEU-DSG/readers-hide-edit-buttons

Readers hide edit buttons

website/src/edit-doc-data-panel.tsx

@@ -76,13 +76,9 @@ export const EditDocPanel = (props: { document?: Dailp.AnnotatedDoc }) => {
 
   const handleDateChange = (e: any) => {
     const selectedDateValue = e as Date
-    // console.log("selected date = " + selectedDateValue)
 
     if (selectedDateValue) {
       setSelectedDate(selectedDateValue)
-      // console.log(selectedDate?.getDate());
-      // console.log(selectedDate?.getMonth());
-      // console.log(selectedDate?.getFullYear());
 
       const selectedDay = selectedDateValue.getDate()
       const selectedMonth = selectedDateValue.getMonth() + 1
@@ -104,12 +100,6 @@ export const EditDocPanel = (props: { document?: Dailp.AnnotatedDoc }) => {
     }
   }, [day, month, year])
 
-  /* TODO (NOTE): While we could disable the edit button for "Document Info" to non-editors,
-  in the near future we will want users with the Contributor and Editor roles
-  to be able to add people to the "Contributors" list in the document info.
-  We want the above functionality in order to support in-person work teams who prefer working
-  on paper or through discussion, then putting everything in the computer at once 
-  via one DAILP user account. */
   let userRole = useUserRole()
 
   return (

website/src/pages/documents/document-info.tsx

@@ -1,51 +1,15 @@
-import { DialogContent, DialogOverlay } from "@reach/dialog"
 import "@reach/dialog/styles.css"
-import React, { Fragment, useEffect, useState } from "react"
-import { isMobile } from "react-device-detect"
+import React, { Fragment } from "react"
 import { Helmet } from "react-helmet"
-import { MdSettings } from "react-icons/md/index"
-import { RiArrowUpCircleFill } from "react-icons/ri/index"
-import {
-  Dialog,
-  DialogBackdrop,
-  unstable_Form as Form,
-  Tab,
-  TabList,
-  TabPanel,
-  useDialogState,
-} from "reakit"
-import { navigate } from "vite-plugin-ssr/client/router"
+import { unstable_Form as Form } from "reakit"
 import { useCredentials } from "src/auth"
-import { AudioPlayer, Breadcrumbs, Button, Link } from "src/components"
-import { useMediaQuery } from "src/custom-hooks"
-import { FormProvider, useForm } from "src/edit-doc-data-form-context"
+import { Link } from "src/components"
+import { useForm } from "src/edit-doc-data-form-context"
 import EditDocPanel, { EditButton } from "src/edit-doc-data-panel"
 import * as Dailp from "src/graphql/dailp"
-import Layout from "src/layout"
-import { drawerBg } from "src/menu.css"
-import { MorphemeDetails } from "src/morpheme"
-import { PanelDetails, PanelLayout, PanelSegment } from "src/panel-layout"
-import { usePreferences } from "src/preferences-context"
-import { useLocation } from "src/renderer/PageShell"
-import {
-  chapterRoute,
-  collectionWordPath,
-  documentDetailsRoute,
-  documentRoute,
-} from "src/routes"
-import { useScrollableTabState } from "src/scrollable-tabs"
-import { AnnotatedForm, DocumentPage } from "src/segment"
-import { mediaQueries } from "src/style/constants"
 import { fullWidth } from "src/style/utils.css"
-import { BasicMorphemeSegment, LevelOfDetail } from "src/types"
-import PageImages from "../../page-image"
 import * as css from "./document.css"
 
-enum TabType {
-  InfoTab,
-  EditInfoTab,
-}
-
 export type TabSegment = Dailp.DocumentMetadataUpdate | Document
 
 export type Document = NonNullable<Dailp.AnnotatedDocumentQuery["document"]>
@@ -60,12 +24,6 @@ export const DocumentInfo = ({ doc }: { doc: Document }) => {
   }
   const token = useCredentials()
   const { form, isEditing } = useForm()
-  // const [showEditDialog, setShowEditDialog] = useState(false)
-  // const handleButtonClick = () => setShowEditDialog(!showEditDialog)
-  // let editButton = null
-  // if (token) {
-  //   editButton = <EditButton />
-  // }
 
   const contributorsList = (
     <>
@@ -107,7 +65,6 @@ export const DocumentInfo = ({ doc }: { doc: Document }) => {
       )}
     </>
   )
-  // console.log(docData.id)
   return (
     <Fragment>
       <>{panel}</>
@@ -128,15 +85,3 @@ export const DocumentInfo = ({ doc }: { doc: Document }) => {
 const EditDocPanel2: React.FC = () => {
   return <div>Component Content</div>
 }
-
-// export const TabContent = (t: {
-//   tab: TabType
-//   doc: Dailp.DocumentMetadataUpdate
-// }) => {
-//   const TabComponent =
-//     t.tab === TabType.EditInfoTab ? EditDocPanel : DocumentInfo
-
-//     return(
-//       TabComponent
-//     )
-// }

website/src/pages/documents/document.page.tsx

@@ -1,10 +1,8 @@
 import { DialogContent, DialogOverlay } from "@reach/dialog"
 import "@reach/dialog/styles.css"
-import React, { useEffect, useRef, useState } from "react"
+import React, { useEffect, useState } from "react"
 import { isMobile } from "react-device-detect"
 import { Helmet } from "react-helmet"
-import { HiPencilAlt } from "react-icons/hi"
-import { IoCheckmarkSharp } from "react-icons/io5"
 import {
   MdOutlineBookmarkAdd,
   MdOutlineBookmarkRemove,
@@ -14,7 +12,6 @@ import { RiArrowUpCircleFill } from "react-icons/ri/index"
 import {
   Dialog,
   DialogBackdrop,
-  unstable_Form as Form,
   Tab,
   TabList,
   TabPanel,
@@ -23,10 +20,9 @@ import {
 import { navigate } from "vite-plugin-ssr/client/router"
 import { useUser } from "src/auth"
 import { AudioPlayer, Breadcrumbs, Button, Link } from "src/components"
-import { IconButton, IconTextButton } from "src/components/button"
+import { IconTextButton } from "src/components/button"
 import { useMediaQuery } from "src/custom-hooks"
 import { FormProvider as FormProviderDoc } from "src/edit-doc-data-form-context"
-import { EditButton } from "src/edit-word-feature"
 import { FormProvider, useForm } from "src/edit-word-form-context"
 import * as Dailp from "src/graphql/dailp"
 import Layout from "src/layout"
@@ -36,16 +32,10 @@ import { DocumentInfo } from "src/pages/documents/document-info"
 import { PanelDetails, PanelLayout, PanelSegment } from "src/panel-layout"
 import { usePreferences } from "src/preferences-context"
 import { useLocation } from "src/renderer/PageShell"
-import {
-  chapterRoute,
-  collectionWordPath,
-  documentDetailsRoute,
-  documentRoute,
-} from "src/routes"
+import { chapterRoute, collectionWordPath } from "src/routes"
 import { useScrollableTabState } from "src/scrollable-tabs"
 import { AnnotatedForm, DocumentPage } from "src/segment"
 import { mediaQueries } from "src/style/constants"
-import { fullWidth } from "src/style/utils.css"
 import { BasicMorphemeSegment, LevelOfDetail } from "src/types"
 import PageImages from "../../page-image"
 import * as css from "./document.css"

website/src/panel-layout.tsx

@@ -14,17 +14,13 @@ import { OnChangeValue } from "react-select"
 import { Disclosure, DisclosureContent, useDisclosureState } from "reakit"
 import { unstable_Form as Form, unstable_FormInput as FormInput } from "reakit"
 import * as Dailp from "src/graphql/dailp"
-import { useCredentials } from "./auth"
+import { useCognitoUserGroups, useCredentials } from "./auth"
 import CommentPanel from "./comment-panel"
 import { AudioPlayer, Button, IconButton } from "./components"
 import { CommentSection } from "./components/comment-section"
 import { CustomCreatable } from "./components/creatable"
 import { EditWordAudio } from "./components/edit-word-audio"
 import { SubtleButton } from "./components/subtle-button"
-import {
-  subtleButton,
-  subtleButtonActive,
-} from "./components/subtle-button.css"
 import { EditButton, EditWordFeature } from "./edit-word-feature"
 import { formInput } from "./edit-word-feature.css"
 import { useForm } from "./edit-word-form-context"
@@ -57,7 +53,9 @@ export const PanelLayout = (p: {
   }
 
   const { form, isEditing } = useForm()
+
   const token = useCredentials()
+  const userGroups = useCognitoUserGroups()
 
   // Get all global glosses / matching tags to display.
   const { cherokeeRepresentation } = usePreferences()
@@ -103,10 +101,10 @@ export const PanelLayout = (p: {
   } else if (p.segment.__typename === "AnnotatedForm") {
     panel = (
       <>
-        {/* If the user is logged in, then display an edit button on the word
+        {/* If the user belongs to any groups, then display an edit button on the word
         panel along with its corresponding formatted header. Otherwise, display
         the normal word panel. */}
-        {token ? (
+        {userGroups.length > 0 ? (
           <header className={css.wordPanelHeader}>
             <div className={css.headerButtons}>
               {!isEditing && (