Sid Gifari File Manager
🏠 Root
/
home
/
genremedia08
/
musicjukebox.overlookedtracks.com
/
resources
/
client
/
admin
/
albums-datatable-page
/
Editing: update-album-page.tsx
import {useForm} from 'react-hook-form'; import React from 'react'; import {CrupdateResourceLayout} from '@common/admin/crupdate-resource-layout'; import {Trans} from '@common/i18n/trans'; import {useAlbum} from '@app/web-player/albums/requests/use-album'; import {Album} from '@app/web-player/albums/album'; import { UpdateAlbumPayload, useUpdateAlbum, } from '@app/admin/albums-datatable-page/requests/use-update-album'; import {AlbumForm} from '@app/admin/albums-datatable-page/album-form/album-form'; import {PageStatus} from '@common/http/page-status'; import { FileUploadProvider, useFileUploadStore, } from '@common/uploads/uploader/file-upload-provider'; import {Navigate} from 'react-router-dom'; import {useAlbumPermissions} from '@app/web-player/albums/use-album-permissions'; interface Props { wrapInContainer?: boolean; } export function UpdateAlbumPage({wrapInContainer}: Props) { const query = useAlbum({ forEditing: true, with: 'tags,genres,artists,fullTracks', }); if (query.data) { return ( <FileUploadProvider> <PageContent album={query.data.album} wrapInContainer={wrapInContainer} /> </FileUploadProvider> ); } return <PageStatus query={query} loaderClassName="absolute inset-0 m-auto" />; } interface PageContentProps { album: Album; wrapInContainer?: boolean; } function PageContent({album, wrapInContainer}: PageContentProps) { const {canEdit} = useAlbumPermissions(album); const uploadIsInProgress = !!useFileUploadStore(s => s.activeUploadsCount); const form = useForm<UpdateAlbumPayload>({ defaultValues: { image: album.image, name: album.name, release_date: album.release_date, artists: album.artists, genres: album.genres, tags: album.tags, description: album.description, spotify_id: album.spotify_id, tracks: album.tracks, }, }); const updateAlbum = useUpdateAlbum(form, album.id); if (!canEdit) { return <Navigate to="/" replace />; } return ( <CrupdateResourceLayout form={form} onSubmit={values => { updateAlbum.mutate(values); }} title={<Trans message="Edit “:name“ album" values={{name: album.name}} />} isLoading={updateAlbum.isLoading || uploadIsInProgress} disableSaveWhenNotDirty wrapInContainer={wrapInContainer} > <AlbumForm showExternalIdFields /> </CrupdateResourceLayout> ); }
Save
Cancel