From 3921d024a0da5136323d085db86f02a0ce1d7a9a Mon Sep 17 00:00:00 2001 From: Sahil Sharma Date: Tue, 24 Oct 2023 10:41:27 -0700 Subject: [PATCH 1/6] refactored MediaBrowserContainer to use the new APIs --- src/common/constants/misc.js | 1 + src/common/constants/searchParams.js | 1 + src/common/dataAdaptors/index.js | 1 + src/common/dataHooks/useSearchLoader.js | 16 +++- src/common/utils/stringHelpers.js | 36 ++++++++ .../DashboardMedia/DashboardMediaData.js | 11 +-- .../MediaBrowserContainerNonModal.js | 1 - .../MediaBrowser/MediaBrowserData.js | 87 +++++++------------ .../MediaItemsLayout/MediaItemsLayoutAudio.js | 12 +-- .../MediaItemsLayoutVisual.js | 12 +-- 10 files changed, 92 insertions(+), 86 deletions(-) diff --git a/src/common/constants/misc.js b/src/common/constants/misc.js index 1157be9d..c51f8221 100644 --- a/src/common/constants/misc.js +++ b/src/common/constants/misc.js @@ -7,6 +7,7 @@ export const DISPLAYABLE_PROPS_MEDIA = [ 'title', 'mimeType', 'acknowledgement', + 'description', ] export const ABOUT_LINK = 'https://firstvoices.atlassian.net/wiki/spaces/FIR1/pages/1704813/About+FirstVoices' diff --git a/src/common/constants/searchParams.js b/src/common/constants/searchParams.js index 4059e314..d28a0d47 100644 --- a/src/common/constants/searchParams.js +++ b/src/common/constants/searchParams.js @@ -28,6 +28,7 @@ export const TYPE_STORY = 'story' export const TYPE_WORD = 'word' export const TYPE_ENTRY = 'word,phrase,song,story' export const TYPE_DICTIONARY = 'word,phrase' +export const TYPE_MEDIA = 'audio,image,video' /* Param Keys Frontend ONLY */ export const CHAR = 'char' diff --git a/src/common/dataAdaptors/index.js b/src/common/dataAdaptors/index.js index e1389ba4..88318200 100644 --- a/src/common/dataAdaptors/index.js +++ b/src/common/dataAdaptors/index.js @@ -3,3 +3,4 @@ export * from './widgetAdaptors' export * from './storyAdaptors' export * from './songAdaptors' export * from './pageAdaptors' +export * from './mediaAdaptors' diff --git a/src/common/dataHooks/useSearchLoader.js b/src/common/dataHooks/useSearchLoader.js index e01fc100..30146bf1 100644 --- a/src/common/dataHooks/useSearchLoader.js +++ b/src/common/dataHooks/useSearchLoader.js @@ -7,13 +7,20 @@ import PropTypes from 'prop-types' import useIntersectionObserver from 'common/hooks/useIntersectionObserver' import api from 'services/api' import { + AUDIO, + IMAGE, + VIDEO, SEARCH, TYPE_PHRASE, TYPE_SONG, TYPE_STORY, TYPE_WORD, } from 'common/constants' -import { storySummaryAdaptor, songSummaryAdaptor } from 'common/dataAdaptors' +import { + storySummaryAdaptor, + songSummaryAdaptor, + mediaAdaptor, +} from 'common/dataAdaptors' /** * Calls search API and provides search results and infinite scroll info. @@ -64,6 +71,13 @@ function useSearchLoader({ searchParams }) { ...storySummaryAdaptor({ item: result?.entry }), ...baseObject, } + case AUDIO: + case IMAGE: + case VIDEO: + return { + ...mediaAdaptor({ type: result?.type, data: result?.entry }), + ...baseObject, + } default: return { ...baseObject, diff --git a/src/common/utils/stringHelpers.js b/src/common/utils/stringHelpers.js index d4ee1c84..0f5b9f31 100644 --- a/src/common/utils/stringHelpers.js +++ b/src/common/utils/stringHelpers.js @@ -20,6 +20,10 @@ import { TYPE_WORD, TYPE_STORY, TYPE_SONG, + TYPE_MEDIA, + AUDIO, + IMAGE, + VIDEO, UUID_REGEX, } from 'common/constants' @@ -235,6 +239,38 @@ export const getPresentationPropertiesForType = (type) => { slug: 'dictionary', color: 'word', } + case TYPE_MEDIA: + return { + uppercase: 'MEDIA', + singular: 'media', + plural: 'media', + slug: 'search', + color: 'primary', + } + case AUDIO: + return { + uppercase: 'AUDIO', + singular: 'audio', + plural: 'audio', + slug: 'audio', + color: 'primary', + } + case IMAGE: + return { + uppercase: 'IMAGE', + singular: 'image', + plural: 'images', + slug: 'image', + color: 'primary', + } + case VIDEO: + return { + uppercase: 'VIDEO', + singular: 'video', + plural: 'videos', + slug: 'video', + color: 'primary', + } case TYPE_ENTRY: default: return { diff --git a/src/components/DashboardMedia/DashboardMediaData.js b/src/components/DashboardMedia/DashboardMediaData.js index 990e6581..65078481 100644 --- a/src/components/DashboardMedia/DashboardMediaData.js +++ b/src/components/DashboardMedia/DashboardMediaData.js @@ -2,36 +2,33 @@ import { useSearchParams } from 'react-router-dom' // FPCC import { useSiteStore } from 'context/SiteContext' -import { getFriendlyDocType } from 'common/utils/stringHelpers' function DashboardMediaData() { const { site } = useSiteStore() const [searchParams] = useSearchParams() - const docType = searchParams.get('type') - ? getFriendlyDocType({ docType: searchParams.get('type') }) - : null + const docType = searchParams.get('types') || null const tileContent = [ { icon: 'Microphone', name: 'Audio', description: 'Manage your audio files', - href: 'browser?type=audio', + href: 'browser?types=audio', iconColor: 'songText', }, { icon: 'Images', name: 'Images', description: 'Manage your images', - href: 'browser?type=images', + href: 'browser?types=image', iconColor: 'wordText', }, { icon: 'Video', name: 'Videos', description: 'Manage your videos', - href: 'browser?type=videos', + href: 'browser?types=video', iconColor: 'storyText', }, ] diff --git a/src/components/MediaBrowser/MediaBrowserContainerNonModal.js b/src/components/MediaBrowser/MediaBrowserContainerNonModal.js index 97be29bb..43d8c454 100644 --- a/src/components/MediaBrowser/MediaBrowserContainerNonModal.js +++ b/src/components/MediaBrowser/MediaBrowserContainerNonModal.js @@ -52,7 +52,6 @@ function MediaBrowserContainerNonModal({ docType }) { { event.preventDefault() setSearchInputValue(event.target.value) @@ -42,55 +45,24 @@ function MediaBrowserData({ docType }) { setSearchTerm(searchInputValue) if (searchInputValue) { navigate( - `/${sitename}/dashboard/media/browser?type=${friendlyDocTypeLabel}&q=${searchInputValue}`, + `/${sitename}/dashboard/media/browser?type=${docType}&q=${searchInputValue}`, ) } else { - navigate( - `/${sitename}/dashboard/media/browser?type=${friendlyDocTypeLabel}`, - ) + navigate(`/${sitename}/dashboard/media/browser?type=${docType}`) } } - // Data fetch - const { - data, - fetchNextPage, - hasNextPage, - isError, - isFetchingNextPage, - isInitialLoading, - } = useInfiniteQuery( - [`${docType}-search`, searchTerm], - ({ pageParam = 1 }) => - api.media.get({ - sitename: site?.sitename, - docType: friendlyDocTypeLabel, - pageParam, - }), - { - // The query will not execute until the siteId exists - enabled: !!site?.id, - getNextPageParam: (lastPage) => lastPage.nextPage, - refetchOnWindowFocus: false, - refetchOnReconnect: false, - }, - ) - useEffect(() => { if (!currentFile && data?.pages?.[0]?.results) { - const firstFile = mediaAdaptor({ - type: docType, - data: data?.pages?.[0]?.results?.[0], - }) + const firstFile = data?.pages?.[0]?.results?.[0] setCurrentFile(firstFile) } }, [currentFile, data, docType]) - const infiniteScroll = { fetchNextPage, hasNextPage, isFetchingNextPage } useIntersectionObserver({ target: loadRef, - onIntersect: fetchNextPage, - enabled: hasNextPage, + onIntersect: infiniteScroll?.fetchNextPage, + enabled: infiniteScroll?.hasNextPage, }) const getLoadLabel = () => { @@ -115,7 +87,6 @@ function MediaBrowserData({ docType }) { currentFile, setCurrentFile, loadLabel: getLoadLabel(), - friendlyDocTypeLabel, } } diff --git a/src/components/MediaItemsLayout/MediaItemsLayoutAudio.js b/src/components/MediaItemsLayout/MediaItemsLayoutAudio.js index e648a03e..03926833 100644 --- a/src/components/MediaItemsLayout/MediaItemsLayoutAudio.js +++ b/src/components/MediaItemsLayout/MediaItemsLayoutAudio.js @@ -2,10 +2,8 @@ import React from 'react' import PropTypes from 'prop-types' // FPCC -import { mediaAdaptor } from 'common/dataAdaptors/mediaAdaptors' import AudioNative from 'components/AudioNative' import getIcon from 'common/utils/getIcon' -import { AUDIO } from 'common/constants' function MediaItemsLayoutAudio({ data, @@ -48,12 +46,8 @@ function MediaItemsLayoutAudio({ {data?.pages?.map((page) => ( - - {page.results.map((rawAudioDoc) => { - const audioFile = mediaAdaptor({ - type: AUDIO, - data: rawAudioDoc, - }) + + {page.results.map((audioFile) => { if ( savedMedia?.some((elemId) => elemId === audioFile?.id) ) { @@ -63,7 +57,7 @@ function MediaItemsLayoutAudio({ } return ( ( // eslint-disable-next-line react/no-array-index-key - {page.results.map((rawDocument) => { - const doc = mediaAdaptor({ - type: docType, - data: rawDocument, - }) + {page.results.map((doc) => { if (savedMedia?.some((elemId) => elemId === doc?.id)) { // If a media file is already attached to the document // it will not be presented as a choice in the selectMedia dialog box @@ -100,10 +93,9 @@ function MediaItemsLayoutVisual({ ) } // PROPTYPES -const { func, array, object, oneOf, string, bool } = PropTypes +const { func, array, object, string, bool } = PropTypes MediaItemsLayoutVisual.propTypes = { data: object, - docType: oneOf([IMAGE, VIDEO]), infiniteScroll: object, currentFile: object, setCurrentFile: func, From ac65dab1e7a2c3aea2a1172bcf96a5c1182cda3d Mon Sep 17 00:00:00 2001 From: Sahil Sharma Date: Tue, 24 Oct 2023 11:20:04 -0700 Subject: [PATCH 2/6] added back search bar to media browser --- .../MediaBrowserContainerNonModal.js | 6 +-- .../MediaBrowser/MediaBrowserData.js | 4 ++ .../SearchSelectorPresentation.js | 54 +++++++++---------- 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/src/components/MediaBrowser/MediaBrowserContainerNonModal.js b/src/components/MediaBrowser/MediaBrowserContainerNonModal.js index 43d8c454..de5f1575 100644 --- a/src/components/MediaBrowser/MediaBrowserContainerNonModal.js +++ b/src/components/MediaBrowser/MediaBrowserContainerNonModal.js @@ -20,7 +20,7 @@ function MediaBrowserContainerNonModal({ docType }) { isLoadingEntries, loadRef, loadLabel, - friendlyDocTypeLabel, + docTypePlural, } = MediaBrowserData({ docType }) const hasResults = !!( @@ -36,7 +36,7 @@ function MediaBrowserContainerNonModal({ docType }) { return ( - {friendlyDocTypeLabel} + {docTypePlural} {/* Content area */}
- {!['audio', 'image', 'video'].some((v) => - searchPromptText.includes(v), - ) && ( -
-
-
- - -
-
-
- )} +
+
+
+ + +
+
+
Date: Tue, 24 Oct 2023 14:28:19 -0700 Subject: [PATCH 3/6] fixed the search query for the new API in media search --- .../MediaBrowser/MediaBrowserData.js | 14 ++-- .../MediaItemsLayout/MediaItemsLayoutAudio.js | 69 +++++++++---------- 2 files changed, 40 insertions(+), 43 deletions(-) diff --git a/src/components/MediaBrowser/MediaBrowserData.js b/src/components/MediaBrowser/MediaBrowserData.js index db9b8b93..e7f01893 100644 --- a/src/components/MediaBrowser/MediaBrowserData.js +++ b/src/components/MediaBrowser/MediaBrowserData.js @@ -18,20 +18,18 @@ function MediaBrowserData({ docType }) { const urlSearchType = searchParams.get(TYPES) || TYPE_MEDIA - // eslint-disable-next-line no-unused-vars - const { searchType, setSearchTypeInUrl, getSearchTypeLabel } = - useSearchBoxNavigation({ - initialSearchType: urlSearchType, - }) + const { searchType } = useSearchBoxNavigation({ + initialSearchType: urlSearchType, + }) const searchParamsQuery = searchParams.get('q') || '' const [currentFile, setCurrentFile] = useState() // Used for the sidebar to display the current selected file - // eslint-disable-next-line no-unused-vars const [searchTerm, setSearchTerm] = useState(searchParamsQuery) const [searchInputValue, setSearchInputValue] = useState(searchParamsQuery) // Add search Term const _searchParams = new URLSearchParams({ + q: searchTerm, [TYPES]: searchType, }) @@ -48,10 +46,10 @@ function MediaBrowserData({ docType }) { setSearchTerm(searchInputValue) if (searchInputValue) { navigate( - `/${sitename}/dashboard/media/browser?type=${docType}&q=${searchInputValue}`, + `/${sitename}/dashboard/media/browser?types=${docType}&q=${searchInputValue}`, ) } else { - navigate(`/${sitename}/dashboard/media/browser?type=${docType}`) + navigate(`/${sitename}/dashboard/media/browser?types=${docType}`) } } diff --git a/src/components/MediaItemsLayout/MediaItemsLayoutAudio.js b/src/components/MediaItemsLayout/MediaItemsLayoutAudio.js index 03926833..0e707187 100644 --- a/src/components/MediaItemsLayout/MediaItemsLayoutAudio.js +++ b/src/components/MediaItemsLayout/MediaItemsLayoutAudio.js @@ -23,29 +23,29 @@ function MediaItemsLayoutAudio({ return (
- {data?.pages !== undefined && data?.pages?.[0]?.results?.length > 0 && ( -
- - - - {selection && ( - - )} +
+
- {selection} -
+ + + {selection && ( - - - - - - {data?.pages?.map((page) => ( + )} + + + + + + + {data?.pages?.[0]?.results?.length && + data?.pages?.map((page) => ( {page.results.map((audioFile) => { if ( @@ -84,7 +84,7 @@ function MediaItemsLayoutAudio({ audioObject={audioFile} /> - -
- Audio + {selection} - Title - - Description -
+ Audio + + Title + + Description +
+ {audioFile.title} @@ -95,20 +95,19 @@ function MediaItemsLayoutAudio({ })} ))} -
-
- -
+ + +
+
- )} +
) } From f18c4da5a4f6e21907a82a1004c960c85d339379 Mon Sep 17 00:00:00 2001 From: Sahil Sharma Date: Tue, 24 Oct 2023 15:28:23 -0700 Subject: [PATCH 4/6] added truncate to a few text display fields to not show overflowing text --- src/components/MediaDetails/MediaDetailsAudio.js | 4 +++- src/components/MediaDetails/MediaDetailsVisual.js | 4 +++- src/components/MediaItemsLayout/MediaItemsLayoutAudio.js | 4 ++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/MediaDetails/MediaDetailsAudio.js b/src/components/MediaDetails/MediaDetailsAudio.js index 3712615f..9f9dceda 100644 --- a/src/components/MediaDetails/MediaDetailsAudio.js +++ b/src/components/MediaDetails/MediaDetailsAudio.js @@ -37,7 +37,9 @@ function MediaDetailsAudio({ file }) { className="py-3 flex justify-between text-sm font-medium" >
{key}
-
{file[key]}
+
+ {file[key]} +
) } diff --git a/src/components/MediaDetails/MediaDetailsVisual.js b/src/components/MediaDetails/MediaDetailsVisual.js index 67222e99..ae9066b1 100644 --- a/src/components/MediaDetails/MediaDetailsVisual.js +++ b/src/components/MediaDetails/MediaDetailsVisual.js @@ -52,7 +52,9 @@ function MediaDetailsVisual({ file, docType }) {
{key.charAt(0).toUpperCase() + key.slice(1)}
-
{file[key]}
+
+ {file[key]} +
) } diff --git a/src/components/MediaItemsLayout/MediaItemsLayoutAudio.js b/src/components/MediaItemsLayout/MediaItemsLayoutAudio.js index 0e707187..8cae7305 100644 --- a/src/components/MediaItemsLayout/MediaItemsLayoutAudio.js +++ b/src/components/MediaItemsLayout/MediaItemsLayoutAudio.js @@ -84,10 +84,10 @@ function MediaItemsLayoutAudio({ audioObject={audioFile} /> - + {audioFile.title} - + {audioFile?.description} From 6d67a1a16b40218ec068b06b110dfe8c2dcdb893 Mon Sep 17 00:00:00 2001 From: Sahil Sharma Date: Wed, 25 Oct 2023 13:30:06 -0700 Subject: [PATCH 5/6] updated modal search with new BE apis --- src/components/MediaCrud/MediaCrudData.js | 103 ++++++---------------- 1 file changed, 26 insertions(+), 77 deletions(-) diff --git a/src/components/MediaCrud/MediaCrudData.js b/src/components/MediaCrud/MediaCrudData.js index ebc2ef53..14984437 100644 --- a/src/components/MediaCrud/MediaCrudData.js +++ b/src/components/MediaCrud/MediaCrudData.js @@ -1,12 +1,8 @@ -import { useState, useRef } from 'react' -import { useNavigate, useLocation, useParams } from 'react-router-dom' -import { useInfiniteQuery } from '@tanstack/react-query' +import { useState } from 'react' +import { useSearchParams } from 'react-router-dom' import PropTypes from 'prop-types' // FPCC -import { useSiteStore } from 'context/SiteContext' -import useIntersectionObserver from 'common/hooks/useIntersectionObserver' -import api from 'services/api' import { getFriendlyDocType } from 'common/utils/stringHelpers' import { SUPPORTED_IMAGE_EXTENSIONS, @@ -15,89 +11,38 @@ import { AUDIO, IMAGE, VIDEO, + TYPES, } from 'common/constants' +import useSearchLoader from 'common/dataHooks/useSearchLoader' +import { useSiteStore } from 'context/SiteContext' function MediaCrudData({ docType, maxFiles }) { const { site } = useSiteStore() - const { search } = useLocation() - const { sitename } = useParams() - const navigate = useNavigate() + const [searchParams] = useSearchParams() - const searchParamsQuery = new URLSearchParams(search).get('q') - ? new URLSearchParams(search).get('q') - : '' - const pluralDocTypeLabel = getFriendlyDocType({ - docType, - plural: true, - }) + const docTypePlural = getFriendlyDocType({ docType, plural: true }) const [selectedMedia, setSelectedMedia] = useState([]) + const searchParamsQuery = searchParams.get('q') || '' const [searchTerm, setSearchTerm] = useState(searchParamsQuery) const [searchInputValue, setSearchInputValue] = useState(searchParamsQuery) - // Data Fetch - const { - data, - fetchNextPage, - hasNextPage, - isFetchingNextPage, - isInitialLoading, - refetch, - } = useInfiniteQuery( - [`${pluralDocTypeLabel}-search`, searchTerm], - ({ pageParam = 1 }) => - api.media.get({ - sitename, - docType: pluralDocTypeLabel, - pageParam, - }), - { - // The query will not execute until the siteId exists - enabled: !!site?.id, - getNextPageParam: (lastPage) => lastPage.nextPage, - refetchOnWindowFocus: false, - refetchOnReconnect: false, - }, - ) - - const infiniteScroll = { fetchNextPage, hasNextPage, isFetchingNextPage } - - const loadRef = useRef(null) - useIntersectionObserver({ - target: loadRef, - onIntersect: fetchNextPage, - enabled: hasNextPage, + const _searchParams = new URLSearchParams({ + q: searchTerm, + [TYPES]: docType, + }) + const { data, infiniteScroll, isInitialLoading, loadRef } = useSearchLoader({ + searchParams: _searchParams, }) - - const getLoadLabel = () => { - if (infiniteScroll?.isFetchingNextPage) { - return 'Loading more...' - } - if (infiniteScroll?.hasNextPage) { - return 'Load more' - } - return 'End of results.' - } const handleTextFieldChange = (event) => { event.preventDefault() setSearchInputValue(event.target.value) } + const handleSearchSubmit = (event) => { event.preventDefault() setSearchTerm(searchInputValue) - if (docType) { - // If in modal trigger refetch NOT navigate - refetch() - } else if (searchInputValue) { - navigate( - `/${sitename}/dashboard/media/browser?type=${pluralDocTypeLabel}&q=${searchInputValue}`, - ) - } else if (!searchInputValue) { - navigate( - `/${sitename}/dashboard/media/browser?type=${pluralDocTypeLabel}`, - ) - } } const mediaSelectHandler = (docId) => { @@ -135,18 +80,21 @@ function MediaCrudData({ docType, maxFiles }) { } })() - const docTypeLabelPlural = getFriendlyDocType({ - docType, - plural: true, - isAnd: true, - }) + const getLoadLabel = () => { + if (infiniteScroll?.isFetchingNextPage) { + return 'Loading more...' + } + if (infiniteScroll?.hasNextPage) { + return 'Load more' + } + return 'End of results.' + } return { site, handleSearchSubmit, handleTextFieldChange, infiniteScroll, - isLoadingEntries: isInitialLoading, loadRef, fetchedMedia: data, searchValue: searchInputValue, @@ -155,7 +103,8 @@ function MediaCrudData({ docType, maxFiles }) { setSelectedMedia, mediaSelectHandler, clearSelectedMedia, - docTypeLabelPlural, + docTypeLabelPlural: docTypePlural, + isLoadingEntries: isInitialLoading, extensionList, } } From 7bb949ab5c88c6ca62c328f30b1b1a5510cd560f Mon Sep 17 00:00:00 2001 From: Sahil Sharma Date: Thu, 26 Oct 2023 09:28:40 -0700 Subject: [PATCH 6/6] added constants for media related to search usage --- src/common/constants/searchParams.js | 3 +++ src/common/dataHooks/useSearchLoader.js | 12 ++++++------ src/common/utils/stringHelpers.js | 12 ++++++------ .../DashboardMedia/DashboardMediaData.js | 14 ++++++++++---- 4 files changed, 25 insertions(+), 16 deletions(-) diff --git a/src/common/constants/searchParams.js b/src/common/constants/searchParams.js index d28a0d47..a3dd5c9f 100644 --- a/src/common/constants/searchParams.js +++ b/src/common/constants/searchParams.js @@ -29,6 +29,9 @@ export const TYPE_WORD = 'word' export const TYPE_ENTRY = 'word,phrase,song,story' export const TYPE_DICTIONARY = 'word,phrase' export const TYPE_MEDIA = 'audio,image,video' +export const TYPE_AUDIO = 'audio' +export const TYPE_IMAGE = 'image' +export const TYPE_VIDEO = 'video' /* Param Keys Frontend ONLY */ export const CHAR = 'char' diff --git a/src/common/dataHooks/useSearchLoader.js b/src/common/dataHooks/useSearchLoader.js index 30146bf1..c82f2dcd 100644 --- a/src/common/dataHooks/useSearchLoader.js +++ b/src/common/dataHooks/useSearchLoader.js @@ -7,14 +7,14 @@ import PropTypes from 'prop-types' import useIntersectionObserver from 'common/hooks/useIntersectionObserver' import api from 'services/api' import { - AUDIO, - IMAGE, - VIDEO, SEARCH, TYPE_PHRASE, TYPE_SONG, TYPE_STORY, TYPE_WORD, + TYPE_AUDIO, + TYPE_IMAGE, + TYPE_VIDEO, } from 'common/constants' import { storySummaryAdaptor, @@ -71,9 +71,9 @@ function useSearchLoader({ searchParams }) { ...storySummaryAdaptor({ item: result?.entry }), ...baseObject, } - case AUDIO: - case IMAGE: - case VIDEO: + case TYPE_AUDIO: + case TYPE_IMAGE: + case TYPE_VIDEO: return { ...mediaAdaptor({ type: result?.type, data: result?.entry }), ...baseObject, diff --git a/src/common/utils/stringHelpers.js b/src/common/utils/stringHelpers.js index 0f5b9f31..a76b885e 100644 --- a/src/common/utils/stringHelpers.js +++ b/src/common/utils/stringHelpers.js @@ -21,9 +21,9 @@ import { TYPE_STORY, TYPE_SONG, TYPE_MEDIA, - AUDIO, - IMAGE, - VIDEO, + TYPE_AUDIO, + TYPE_IMAGE, + TYPE_VIDEO, UUID_REGEX, } from 'common/constants' @@ -247,7 +247,7 @@ export const getPresentationPropertiesForType = (type) => { slug: 'search', color: 'primary', } - case AUDIO: + case TYPE_AUDIO: return { uppercase: 'AUDIO', singular: 'audio', @@ -255,7 +255,7 @@ export const getPresentationPropertiesForType = (type) => { slug: 'audio', color: 'primary', } - case IMAGE: + case TYPE_IMAGE: return { uppercase: 'IMAGE', singular: 'image', @@ -263,7 +263,7 @@ export const getPresentationPropertiesForType = (type) => { slug: 'image', color: 'primary', } - case VIDEO: + case TYPE_VIDEO: return { uppercase: 'VIDEO', singular: 'video', diff --git a/src/components/DashboardMedia/DashboardMediaData.js b/src/components/DashboardMedia/DashboardMediaData.js index 65078481..c39b9d2b 100644 --- a/src/components/DashboardMedia/DashboardMediaData.js +++ b/src/components/DashboardMedia/DashboardMediaData.js @@ -2,33 +2,39 @@ import { useSearchParams } from 'react-router-dom' // FPCC import { useSiteStore } from 'context/SiteContext' +import { + TYPE_AUDIO, + TYPE_IMAGE, + TYPE_VIDEO, + TYPES, +} from 'common/constants/searchParams' function DashboardMediaData() { const { site } = useSiteStore() const [searchParams] = useSearchParams() - const docType = searchParams.get('types') || null + const docType = searchParams.get(`${TYPES}`) || null const tileContent = [ { icon: 'Microphone', name: 'Audio', description: 'Manage your audio files', - href: 'browser?types=audio', + href: `browser?${TYPES}=${TYPE_AUDIO}`, iconColor: 'songText', }, { icon: 'Images', name: 'Images', description: 'Manage your images', - href: 'browser?types=image', + href: `browser?${TYPES}=${TYPE_IMAGE}`, iconColor: 'wordText', }, { icon: 'Video', name: 'Videos', description: 'Manage your videos', - href: 'browser?types=video', + href: `browser?${TYPES}=${TYPE_VIDEO}`, iconColor: 'storyText', }, ]