Skip to content

Commit

Permalink
fix warning
Browse files Browse the repository at this point in the history
  • Loading branch information
@gigitux
gigitux committed Sep 9, 2024
1 parent c053a9a commit 57faa8f
Showing 1 changed file with 77 additions and 83 deletions.
160 changes: 77 additions & 83 deletions packages/edit-site/src/components/post-fields/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
useState,
useCallback,
useRef,
useEffect,
} from '@wordpress/element';
import { dateI18n, getDate, getSettings } from '@wordpress/date';
import {
Expand Down Expand Up @@ -92,65 +91,16 @@ const getFormattedDate = ( dateToDisplay ) =>
getDate( dateToDisplay )
);

function PostStatusField( { item } ) {
const status = STATUSES.find( ( { value } ) => value === item.status );
const label = status?.label || item.status;
const icon = status?.icon;
return (
<HStack alignment="left" spacing={ 0 }>
{ icon && (
<div className="edit-site-post-list__status-icon">
<Icon icon={ icon } />
</div>
) }
<span>{ label }</span>
</HStack>
);
}
function FeaturedImage( { item, viewType } ) {
const mediaId = item.featured_media;

function PostAuthorField( { item } ) {
const { text, imageUrl } = useSelect(
const media = useSelect(
( select ) => {
const { getUser } = select( coreStore );
const user = getUser( item.author );
return {
imageUrl: user?.avatar_urls?.[ 48 ],
text: user?.name,
};
const { getEntityRecord } = select( coreStore );
return getEntityRecord( 'root', 'media', mediaId );
},
[ item ]
);
const [ isImageLoaded, setIsImageLoaded ] = useState( false );
return (
<HStack alignment="left" spacing={ 0 }>
{ !! imageUrl && (
<div
className={ clsx( 'page-templates-author-field__avatar', {
'is-loaded': isImageLoaded,
} ) }
>
<img
onLoad={ () => setIsImageLoaded( true ) }
alt={ __( 'Author avatar' ) }
src={ imageUrl }
/>
</div>
) }
{ ! imageUrl && (
<div className="page-templates-author-field__icon">
<Icon icon={ authorIcon } />
</div>
) }
<span className="page-templates-author-field__name">{ text }</span>
</HStack>
[ mediaId ]
);
}

function FeaturedImage( { item, viewType, getFeaturedMediaUrl } ) {
const mediaId = item.featured_media;

const media = getFeaturedMediaUrl( mediaId );

const url = media?.source_url;
const title = media?.title?.rendered;

Expand Down Expand Up @@ -213,23 +163,72 @@ function FeaturedImage( { item, viewType, getFeaturedMediaUrl } ) {
);
}

function usePostFields( viewType ) {
const { records: authors, isResolving: isLoadingAuthors } =
useEntityRecords( 'root', 'user', { per_page: -1 } );
function PostStatusField( { item } ) {
const status = STATUSES.find( ( { value } ) => value === item.status );
const label = status?.label || item.status;
const icon = status?.icon;
return (
<HStack alignment="left" spacing={ 0 }>
{ icon && (
<div className="edit-site-post-list__status-icon">
<Icon icon={ icon } />
</div>
) }
<span>{ label }</span>
</HStack>
);
}

const { frontPageId, postsPageId, getFeaturedMediaUrl } = useSelect(
function PostAuthorField( { item } ) {
const { text, imageUrl } = useSelect(
( select ) => {
const { getEntityRecord } = select( coreStore );
const siteSettings = getEntityRecord( 'root', 'site' );
const { getUser } = select( coreStore );
const user = getUser( item.author );
return {
frontPageId: siteSettings?.page_on_front,
postsPageId: siteSettings?.page_for_posts,
getFeaturedMediaUrl: ( id ) =>
getEntityRecord( 'root', 'media', id ),
imageUrl: user?.avatar_urls?.[ 48 ],
text: user?.name,
};
},
[]
[ item ]
);
const [ isImageLoaded, setIsImageLoaded ] = useState( false );
return (
<HStack alignment="left" spacing={ 0 }>
{ !! imageUrl && (
<div
className={ clsx( 'page-templates-author-field__avatar', {
'is-loaded': isImageLoaded,
} ) }
>
<img
onLoad={ () => setIsImageLoaded( true ) }
alt={ __( 'Author avatar' ) }
src={ imageUrl }
/>
</div>
) }
{ ! imageUrl && (
<div className="page-templates-author-field__icon">
<Icon icon={ authorIcon } />
</div>
) }
<span className="page-templates-author-field__name">{ text }</span>
</HStack>
);
}

function usePostFields( viewType ) {
const { records: authors, isResolving: isLoadingAuthors } =
useEntityRecords( 'root', 'user', { per_page: -1 } );

const { frontPageId, postsPageId } = useSelect( ( select ) => {
const { getEntityRecord } = select( coreStore );
const siteSettings = getEntityRecord( 'root', 'site' );
return {
frontPageId: siteSettings?.page_on_front,
postsPageId: siteSettings?.page_for_posts,
};
}, [] );

const fields = useMemo(
() => [
Expand All @@ -238,16 +237,20 @@ function usePostFields( viewType ) {
label: __( 'Featured Image' ),
type: 'image',
render: ( { item } ) => (
<FeaturedImage
item={ item }
viewType={ viewType }
getFeaturedMediaUrl={ getFeaturedMediaUrl }
/>
<FeaturedImage item={ item } viewType={ viewType } />
),
Edit: ( { field, onChange, data } ) => {
const { id } = field;

const value = field.getValue( { item: data } ) ?? '';
const value = field.getValue( { item: data } );

const media = useSelect(
( select ) => {
const { getEntityRecord } = select( coreStore );
return getEntityRecord( 'root', 'media', value );
},
[ value ]
);

const onChangeControl = useCallback(
( newValue ) =>
Expand All @@ -257,22 +260,13 @@ function usePostFields( viewType ) {
[ id, onChange ]
);

const media = getFeaturedMediaUrl( value );

const url = media?.source_url;
const title = media?.title?.rendered;
const filename =
media?.media_details?.file?.match( '([^/]+$)' )[ 0 ];

const ref = useRef( null );

// Focus to the media upload button when the component mounts.
useEffect( () => {
if ( ref.current ) {
ref.current.focus();
}
}, [] );

return (
<fieldset className="edit-site-dataviews-controls__featured-image">
<div className="edit-side-dataviews-controls__featured-image-container">
Expand Down Expand Up @@ -565,7 +559,7 @@ function usePostFields( viewType ) {
],
},
],
[ authors, getFeaturedMediaUrl, viewType, frontPageId, postsPageId ]
[ authors, viewType, frontPageId, postsPageId ]
);

return {
Expand Down

0 comments on commit 57faa8f

Please sign in to comment.