FW-6190 media selector bug (#647)

* Remove unused unselectItem function * Remove use of useModalSelector from AudioArrayField * Create custom modal hook that includes useFieldArray * Rename selectedTab to currentTab to reduce use of term selected * Rename savedMedia to formMedia for clarity * FW-6190 clear selected images when modal closes * Filter out existing related entries from search results
First-Peoples-Cultural-Council · Oct 23, 2024 · 46a21b7 · 46a21b7
1 parent e62fc23
commit 46a21b7
Show file tree

Hide file tree

Showing 20 changed files with 254 additions and 218 deletions.
diff --git a/src/common/hooks/useModalController.js b/src/common/hooks/useModalController.js
@@ -1,4 +1,7 @@
 import { useState } from 'react'
+import { useFieldArray } from 'react-hook-form'
+
+// FPCC
 
 function useModalController() {
   const [modalOpen, setModalOpen] = useState(false)
@@ -18,29 +21,35 @@ export function useModalControllerWithCallback({ onCloseCallback = () => {} }) {
     modalOpen,
     openModal,
     closeModal,
-    closeWithCallback: () => {
-      onCloseCallback()
+    closeWithCallback: (params) => {
+      onCloseCallback(params)
       closeModal()
     },
   }
 }
 
-export function useModalSelector(addItems, removeItem) {
+export function useModalWithFieldArray({ control, nameId }) {
   const { modalOpen, openModal, closeModal } = useModalController()
 
-  // Can be multiple ids for a list of documents
-  // or can be just one item's id
-  const selectItem = (ids, closeModalAfter = true) => {
-    addItems(ids)
-    if (closeModalAfter) {
-      closeModal()
-    }
-  }
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: nameId,
+    keyName: 'key', // https://github.com/react-hook-form/react-hook-form/issues/7562#issuecomment-1016379084
+  })
+
+  // Can be a single object or an array of objects
+  const appendToFormAndClose = (itemsToAppend) => {
+    append(itemsToAppend)
 
-  const unselectItem = (id) => {
-    removeItem(id)
     closeModal()
   }
 
-  return { selectItem, unselectItem, modalOpen, openModal, closeModal }
+  return {
+    fields,
+    appendToFormAndClose,
+    remove,
+    modalOpen,
+    openModal,
+    closeModal,
+  }
 }
diff --git a/src/components/AddAudioModal/AddAudioModalContainer.js b/src/components/AddAudioModal/AddAudioModalContainer.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 
 // FPCC
@@ -9,15 +9,22 @@ import AddMediaModalWrapper from 'components/AddMediaModalWrapper'
 import { TYPE_AUDIO } from 'common/constants'
 
 function AddAudioModalContainer({
-  savedMedia,
-  updateSavedMedia,
+  formMedia,
+  updateFormMedia,
   maxItems,
   modalOpen,
   closeModal,
 }) {
   const { selectedItems, setSelectedItems, handleSelectAdditionalItems } =
     useArrayStateManager({ maxItems })
 
+  // Clear the Selected items when the modal closes
+  useEffect(() => {
+    if (!modalOpen) {
+      setSelectedItems([])
+    }
+  }, [modalOpen, setSelectedItems])
+
   const tabOptions = [
     {
       id: 'upload-tab',
@@ -33,26 +40,26 @@ function AddAudioModalContainer({
     },
   ]
 
-  const [selectedTab, setSelectedTab] = useState(tabOptions[1])
+  const [currentTab, setCurrentTab] = useState(tabOptions[1])
 
   return (
     <AddMediaModalWrapper
       selectedMedia={selectedItems}
-      updateSavedMedia={updateSavedMedia}
+      updateFormMedia={updateFormMedia}
       type={TYPE_AUDIO}
       modalOpen={modalOpen}
       closeModal={closeModal}
       tabOptions={tabOptions}
-      selectedTab={selectedTab}
-      setSelectedTab={setSelectedTab}
+      currentTab={currentTab}
+      setCurrentTab={setCurrentTab}
     >
       <>
-        {selectedTab.id === 'upload-tab' && (
+        {currentTab.id === 'upload-tab' && (
           <UploadAudio setSelectedMedia={setSelectedItems} />
         )}
-        {selectedTab.id === 'search-tab' && (
+        {currentTab.id === 'search-tab' && (
           <SelectorAudio.Container
-            savedMedia={savedMedia}
+            formMedia={formMedia}
             selectedMedia={selectedItems}
             mediaSelectHandler={handleSelectAdditionalItems}
           />
@@ -65,8 +72,8 @@ function AddAudioModalContainer({
 const { array, bool, func, number } = PropTypes
 
 AddAudioModalContainer.propTypes = {
-  savedMedia: array,
-  updateSavedMedia: func,
+  formMedia: array,
+  updateFormMedia: func,
   maxItems: number,
   closeModal: func,
   modalOpen: bool,

diff --git a/src/components/AddImageModal/AddImageModalContainer.js b/src/components/AddImageModal/AddImageModalContainer.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 
 // FPCC
@@ -9,8 +9,8 @@ import useArrayStateManager from 'common/hooks/useArrayStateManager'
 import AddMediaModalWrapper from 'components/AddMediaModalWrapper'
 
 function AddImageModalContainer({
-  savedMedia,
-  updateSavedMedia,
+  formMedia,
+  updateFormMedia,
   maxItems,
   modalOpen,
   closeModal,
@@ -19,6 +19,13 @@ function AddImageModalContainer({
   const { selectedItems, setSelectedItems, handleSelectAdditionalItems } =
     useArrayStateManager({ maxItems })
 
+  // Clear the Selected items when the modal closes
+  useEffect(() => {
+    if (!modalOpen) {
+      setSelectedItems([])
+    }
+  }, [modalOpen, setSelectedItems])
+
   const tabOptions = [
     {
       id: 'upload-tab',
@@ -34,30 +41,30 @@ function AddImageModalContainer({
     },
   ]
 
-  const [selectedTab, setSelectedTab] = useState(tabOptions[1])
+  const [currentTab, setCurrentTab] = useState(tabOptions[1])
 
   return (
     <AddMediaModalWrapper
       selectedMedia={selectedItems}
-      updateSavedMedia={updateSavedMedia}
+      updateFormMedia={updateFormMedia}
       type={TYPE_IMAGE}
       modalOpen={modalOpen}
       closeModal={closeModal}
       tabOptions={tabOptions}
-      selectedTab={selectedTab}
-      setSelectedTab={setSelectedTab}
+      currentTab={currentTab}
+      setCurrentTab={setCurrentTab}
     >
       <>
-        {selectedTab.id === 'upload-tab' && (
+        {currentTab.id === 'upload-tab' && (
           <UploadVisualMedia
             setSelectedMedia={setSelectedItems}
             type={TYPE_IMAGE}
             maxItems={maxItems}
           />
         )}
-        {selectedTab.id === 'search-tab' && (
+        {currentTab.id === 'search-tab' && (
           <SelectorImages.Container
-            savedMedia={savedMedia}
+            formMedia={formMedia}
             selectedMedia={selectedItems}
             mediaSelectHandler={handleSelectAdditionalItems}
             hideSharedMedia={hideSharedMedia}
@@ -71,8 +78,8 @@ function AddImageModalContainer({
 const { array, bool, func, number } = PropTypes
 
 AddImageModalContainer.propTypes = {
-  savedMedia: array,
-  updateSavedMedia: func,
+  formMedia: array,
+  updateFormMedia: func,
   maxItems: number,
   closeModal: func,
   modalOpen: bool,

diff --git a/src/components/AddMediaModalWrapper/AddMediaModalWrapper.js b/src/components/AddMediaModalWrapper/AddMediaModalWrapper.js
@@ -9,37 +9,37 @@ import getIcon from 'common/utils/getIcon'
 
 function AddMediaModalWrapper({
   selectedMedia,
-  updateSavedMedia,
+  updateFormMedia,
   type,
   modalOpen,
   closeModal,
   tabOptions,
-  selectedTab,
-  setSelectedTab,
+  currentTab,
+  setCurrentTab,
   children,
 }) {
   const tabButton = (tab) => {
     const itemsSelected = selectedMedia.length > 0
-    const tabHasSelectedItems = itemsSelected && selectedTab.id === tab.id
+    const tabHasSelectedItems = itemsSelected && currentTab.id === tab.id
     // If no files are uploaded/selected, allow the user to switch tabs
     // otherwise switch to Insert Media button
     // allowing user to attach the selected/uploaded files to the document.
     const handleOnClick = () => {
-      if (tabHasSelectedItems) updateSavedMedia(selectedMedia)
-      setSelectedTab(tab)
+      if (tabHasSelectedItems) updateFormMedia(selectedMedia)
+      setCurrentTab(tab)
     }
     return (
       <button
         key={`${tab.id}-btn`}
         data-testid={`${tab.id}-btn`}
         type="button"
         className={`capitalize disabled:pointer-events-none disabled:bg-gray-100 disabled:opacity-50 ${
-          selectedTab.id === tab.id
+          currentTab.id === tab.id
             ? 'btn-contained'
             : 'btn-outlined hover:btn-contained'
         }`}
         onClick={handleOnClick}
-        disabled={itemsSelected && selectedTab.id !== tab.id}
+        disabled={itemsSelected && currentTab.id !== tab.id}
       >
         {getIcon(tabHasSelectedItems ? 'Add' : tab?.icon, 'btn-icon')}
         <span>
@@ -66,7 +66,7 @@ function AddMediaModalWrapper({
       >
         <div className="h-full flex flex-col space-y-4">
           <h2 className="text-center text-2xl font-bold text-fv-charcoal">
-            {selectedTab.title}
+            {currentTab.title}
           </h2>
           <div className="w-full bg-gray-50 flex justify-center space-x-4">
             {tabOptions.map((tab) => tabButton(tab))}
@@ -82,14 +82,14 @@ const { array, bool, func, node, object, oneOf } = PropTypes
 
 AddMediaModalWrapper.propTypes = {
   selectedMedia: array,
-  updateSavedMedia: func,
+  updateFormMedia: func,
   type: oneOf([TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO]),
   tabOptions: array,
   children: node,
   closeModal: func,
   modalOpen: bool,
-  selectedTab: object,
-  setSelectedTab: func,
+  currentTab: object,
+  setCurrentTab: func,
 }
 
 export default AddMediaModalWrapper
diff --git a/src/components/AddVideoModal/AddVideoModalContainer.js b/src/components/AddVideoModal/AddVideoModalContainer.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 
 // FPCC
@@ -10,8 +10,8 @@ import useArrayStateManager from 'common/hooks/useArrayStateManager'
 import AddMediaModalWrapper from 'components/AddMediaModalWrapper'
 
 function AddVideoModalContainer({
-  savedMedia,
-  updateSavedMedia,
+  formMedia,
+  updateFormMedia,
   maxItems,
   relatedVideoLinks,
   appendVideoLinks,
@@ -21,6 +21,13 @@ function AddVideoModalContainer({
   const { selectedItems, setSelectedItems, handleSelectAdditionalItems } =
     useArrayStateManager({ maxItems })
 
+  // Clear the Selected items when the modal closes
+  useEffect(() => {
+    if (!modalOpen) {
+      setSelectedItems([])
+    }
+  }, [modalOpen, setSelectedItems])
+
   let tabOptions = [
     {
       id: 'upload-tab',
@@ -48,35 +55,35 @@ function AddVideoModalContainer({
     ]
   }
 
-  const [selectedTab, setSelectedTab] = useState(tabOptions[1])
+  const [currentTab, setCurrentTab] = useState(tabOptions[1])
 
   return (
     <AddMediaModalWrapper
       selectedMedia={selectedItems}
-      updateSavedMedia={updateSavedMedia}
+      updateFormMedia={updateFormMedia}
       type={TYPE_VIDEO}
       modalOpen={modalOpen}
       closeModal={closeModal}
       tabOptions={tabOptions}
-      selectedTab={selectedTab}
-      setSelectedTab={setSelectedTab}
+      currentTab={currentTab}
+      setCurrentTab={setCurrentTab}
     >
       <>
-        {selectedTab.id === 'upload-tab' && (
+        {currentTab.id === 'upload-tab' && (
           <UploadVisualMedia
             setSelectedMedia={setSelectedItems}
             type={TYPE_VIDEO}
             maxItems={maxItems}
           />
         )}
-        {selectedTab.id === 'search-tab' && (
+        {currentTab.id === 'search-tab' && (
           <SelectorVideos.Container
-            savedMedia={savedMedia}
+            formMedia={formMedia}
             selectedMedia={selectedItems}
             mediaSelectHandler={handleSelectAdditionalItems}
           />
         )}
-        {selectedTab.id === 'video-link-tab' && (
+        {currentTab.id === 'video-link-tab' && (
           <VideoLinkForm
             relatedVideoLinks={relatedVideoLinks}
             appendVideoLinks={appendVideoLinks}
@@ -92,8 +99,8 @@ function AddVideoModalContainer({
 const { array, bool, func, number } = PropTypes
 
 AddVideoModalContainer.propTypes = {
-  savedMedia: array,
-  updateSavedMedia: func,
+  formMedia: array,
+  updateFormMedia: func,
   maxItems: number,
   relatedVideoLinks: array,
   appendVideoLinks: func,