Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FW-5197 Part 1 - Separate Video Selector from Image Selector #598

Merged
merged 9 commits into from
Sep 17, 2024
Merged

FW-5197 Part 1 - Separate Video Selector from Image Selector #598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
40c21f1
Rename AudioSelector
gmcauliffe Sep 13, 2024
ab72abe
Separate visual media selectors
gmcauliffe Sep 13, 2024
537974b
Rename EntrySelector
gmcauliffe Sep 13, 2024
eebab1e
Extract Searchbox from SearchSelector and remove need for headerSection
gmcauliffe Sep 13, 2024
6f850f5
Extract results section wrapper from SearchSelector
gmcauliffe Sep 13, 2024
bbb627b
Replace SearchSelector with smaller components in DashboardMedia
gmcauliffe Sep 13, 2024
c3edc6f
Replace SearchSelector with smaller components in Selectors
gmcauliffe Sep 13, 2024
fd5d6ba
Delete SearchSelector no longer in use
gmcauliffe Sep 13, 2024
8010bd1
Merge branch 'dev' into FW-5197-add-shared-image-results-to-the-image…
gmcauliffe Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/AddAudioModal/AddAudioModalContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'

// FPCC
import UploadAudio from 'components/UploadAudio'
import AudioSelector from 'components/AudioSelector'
import SelectorAudio from 'components/SelectorAudio'
import useArrayStateManager from 'common/hooks/useArrayStateManager'
import AddMediaModalWrapper from 'components/AddMediaModalWrapper'
import { TYPE_AUDIO } from 'common/constants'
Expand Down Expand Up @@ -49,7 +49,7 @@ function AddAudioModalContainer({
<UploadAudio setSelectedMedia={setSelectedItems} />
)}
{selectedTab.id === 'search-tab' && (
<AudioSelector.Container
<SelectorAudio.Container
savedMedia={savedMedia}
selectedMedia={selectedItems}
mediaSelectHandler={handleSelectAdditionalItems}
Expand Down
5 changes: 2 additions & 3 deletions src/components/AddImageModal/AddImageModalContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
// FPCC
import { TYPE_IMAGE } from 'common/constants'
import UploadVisualMedia from 'components/UploadVisualMedia'
import VisualMediaSelector from 'components/VisualMediaSelector'
import SelectorImages from 'components/SelectorImages'
import useArrayStateManager from 'common/hooks/useArrayStateManager'
import AddMediaModalWrapper from 'components/AddMediaModalWrapper'

Expand Down Expand Up @@ -53,8 +53,7 @@ function AddImageModalContainer({
/>
)}
{selectedTab.id === 'search-tab' && (
<VisualMediaSelector.Container
type={TYPE_IMAGE}
<SelectorImages.Container
savedMedia={savedMedia}
selectedMedia={selectedItems}
mediaSelectHandler={handleSelectAdditionalItems}
Expand Down
5 changes: 2 additions & 3 deletions src/components/AddVideoModal/AddVideoModalContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
import VideoLinkForm from 'components/VideoLinkForm'
import { TYPE_VIDEO } from 'common/constants'
import UploadVisualMedia from 'components/UploadVisualMedia'
import VisualMediaSelector from 'components/VisualMediaSelector'
import SelectorVideos from 'components/SelectorVideos'
import useArrayStateManager from 'common/hooks/useArrayStateManager'
import AddMediaModalWrapper from 'components/AddMediaModalWrapper'

Expand Down Expand Up @@ -67,8 +67,7 @@ function AddVideoModalContainer({
/>
)}
{selectedTab.id === 'search-tab' && (
<VisualMediaSelector.Container
type={TYPE_VIDEO}
<SelectorVideos.Container
savedMedia={savedMedia}
selectedMedia={selectedItems}
mediaSelectHandler={handleSelectAdditionalItems}
Expand Down
69 changes: 0 additions & 69 deletions src/components/AudioSelector/AudioSelectorContainer.js
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions src/components/AudioSelector/index.js
View file
Open in desktop

This file was deleted.

54 changes: 28 additions & 26 deletions src/components/DashboardMediaAudio/DashboardMediaAudioContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import React from 'react'
// FPCC
import DashboardMediaAudioPresentation from 'components/DashboardMediaAudio/DashboardMediaAudioPresentation'
import useMediaSearch from 'common/dataHooks/useMediaSearch'
import MediaDetails from 'components/MediaDetails'
import SearchSelector from 'components/SearchSelector'
import { TYPE_AUDIO } from 'common/constants'
import SelectorSearchbox from 'components/SelectorSearchbox'
import SelectorResultsWrapper from 'components/SelectorResultsWrapper'

function DashboardMediaAudioContainer() {
const {
Expand All @@ -21,40 +21,42 @@ function DashboardMediaAudioContainer() {
loadLabel,
} = useMediaSearch({ type: TYPE_AUDIO })

const hasResults = !!(media?.pages !== undefined && media?.pages?.[0]?.results?.length > 0)
const hasResults = !!(
media?.pages !== undefined && media?.pages?.[0]?.results?.length > 0
)

return (
<SearchSelector.Presentation
searchQuery={searchValue}
searchPromptText="Search all audio"
setSearchQuery={handleTextFieldChange}
search={handleSearchSubmitWithUrlSync}
headerSection=""
resultsSection={
<div className="grid grid-cols-3 w-full">
<main className="col-span-2 pt-4 mx-2">
<section className="p-2 h-full" aria-labelledby="results-header">
<h1 id="results-header" className="capitalize flex text-2xl font-bold text-fv-charcoal mb-4">
Audio
</h1>
<div
data-testid="DashboardMediaAudioContainer"
className="h-full bg-gray-50"
>
<div className="h-full w-full flex flex-col">
<div className="w-full">
<SelectorSearchbox.Presentation
onSearchChange={handleTextFieldChange}
onSearchSubmit={handleSearchSubmitWithUrlSync}
searchPlaceholder="Search all audio"
searchValue={searchValue}
/>
</div>
<div>
<SelectorResultsWrapper.Presentation
hasResults={hasResults}
isLoading={isLoadingEntries}
loadRef={loadRef}
resultsSection={
<DashboardMediaAudioPresentation
data={media}
infiniteScroll={infiniteScroll}
currentFile={currentFile}
setCurrentFile={setCurrentFile}
loadLabel={loadLabel}
/>
</section>
</main>
<aside className="col-span-1 bg-white p-8 border-1 border-gray-200">
<MediaDetails.Audio file={currentFile} docType={TYPE_AUDIO} />
</aside>
}
/>
</div>
}
isLoadingEntries={isLoadingEntries}
hasResults={hasResults}
loadRef={loadRef}
/>
</div>
</div>
)
}

Expand Down
144 changes: 82 additions & 62 deletions src/components/DashboardMediaAudio/DashboardMediaAudioPresentation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import PropTypes from 'prop-types'

// FPCC
import AudioNative from 'components/AudioNative'
import MediaDetails from 'components/MediaDetails'
import { TYPE_AUDIO } from 'common/constants'

function DashboardMediaAudioPresentation({
data,
Expand All @@ -17,69 +19,87 @@ function DashboardMediaAudioPresentation({
'px-6 py-3 text-center text-xs font-medium text-fv-charcoal uppercase tracking-wider'

return (
<div id="DashboardMediaAudioPresentation">
<div>
<table className="w-full table-fixed divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th scope="col" className={headerClass}>
Audio
</th>
<th scope="col" className={headerClass}>
Title
</th>
<th scope="col" className={headerClass}>
Description
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{data?.pages?.[0]?.results?.length &&
data?.pages?.map((page) => (
<React.Fragment key={page?.pageNumber}>
{page.results.map((audioFile) => (
<tr
key={audioFile?.id}
className={`${
audioFile?.id === currentFile?.id
? 'ring-2 ring-offset-2 ring-primary'
: ''
} rounded-lg relative`}
onClick={() => setCurrentFile(audioFile)}
>
<td
className="px-2 py-2 overflow-visible w-80 text-sm text-fv-charcoal"
aria-label="list"
>
<AudioNative
styling="w-full "
audioObject={audioFile}
/>
</td>
<td className="px-6 py-4 text-center whitespace-nowrap text-sm text-fv-charcoal truncate">
{audioFile.title}
</td>
<td className="px-6 py-4 whitespace-normal text-sm text-fv-charcoal text-left truncate">
{audioFile?.description}
</td>
</tr>
))}
</React.Fragment>
))}
</tbody>
</table>
<div className="pt-10 text-center text-fv-charcoal font-medium print:hidden">
<button
data-testid="load-btn"
type="button"
className={!hasNextPage ? 'cursor-text' : ''}
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
<div
id="DashboardMediaAudioPresentation"
className="grid grid-cols-3 w-full"
>
<main className="col-span-2 pt-4 mx-2">
<section className="p-2 h-full" aria-labelledby="results-header">
<h1
id="results-header"
className="capitalize flex text-2xl font-bold text-fv-charcoal mb-4"
>
{loadLabel}
</button>
</div>
</div>
Audio
</h1>
<div>
<div>
<table className="w-full table-fixed divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th scope="col" className={headerClass}>
Audio
</th>
<th scope="col" className={headerClass}>
Title
</th>
<th scope="col" className={headerClass}>
Description
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{data?.pages?.[0]?.results?.length &&
data?.pages?.map((page) => (
<React.Fragment key={page?.pageNumber}>
{page.results.map((audioFile) => (
<tr
key={audioFile?.id}
className={`${
audioFile?.id === currentFile?.id
? 'ring-2 ring-offset-2 ring-primary'
: ''
} rounded-lg relative`}
onClick={() => setCurrentFile(audioFile)}
>
<td
className="px-2 py-2 overflow-visible w-80 text-sm text-fv-charcoal"
aria-label="list"
>
<AudioNative
styling="w-full "
audioObject={audioFile}
/>
</td>
<td className="px-6 py-4 text-center whitespace-nowrap text-sm text-fv-charcoal truncate">
{audioFile.title}
</td>
<td className="px-6 py-4 whitespace-normal text-sm text-fv-charcoal text-left truncate">
{audioFile?.description}
</td>
</tr>
))}
</React.Fragment>
))}
</tbody>
</table>
<div className="pt-10 text-center text-fv-charcoal font-medium print:hidden">
<button
data-testid="load-btn"
type="button"
className={!hasNextPage ? 'cursor-text' : ''}
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
>
{loadLabel}
</button>
</div>
</div>
</div>
</section>
</main>
<aside className="col-span-1 bg-white p-8 border-1 border-gray-200">
<MediaDetails.Audio file={currentFile} docType={TYPE_AUDIO} />
</aside>
</div>
)
}
Expand Down
Loading