Skip to content

Commit 6038858

Browse files
simisonsimison
committed
Rebase unread/read action
1 parent e93367a commit 6038858

File tree

3 files changed

+55
-212
lines changed

3 files changed

+55
-212
lines changed

‎projects/packages/forms/src/dashboard/components/response-actions/index.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import {
1313
moveToTrashAction,
1414
restoreAction,
1515
deleteAction,
16+
markAsReadAction,
17+
markAsUnreadAction,
1618
} from '../../inbox/dataviews/actions';
1719
/**
1820
* Types
@@ -21,11 +23,13 @@ import type { FormResponse } from '../../../types';
2123

2224
type ResponseNavigationProps = {
2325
onActionComplete?: ( id: string ) => void;
26+
onMarkAsRead?: ( id: number | false ) => void;
2427
response: FormResponse;
2528
};
2629

2730
const ResponseActions = ( {
2831
onActionComplete,
32+
onMarkAsRead,
2933
response,
3034
}: ResponseNavigationProps ): JSX.Element => {
3135
const [ isMarkingAsSpam, setIsMarkingAsSpam ] = useState( false );
@@ -71,10 +75,47 @@ const ResponseActions = ( {
7175
onActionComplete?.( response.id.toString() );
7276
}, [ response, registry, onActionComplete ] );
7377

78+
const handleMarkAsRead = useCallback( () => {
79+
markAsReadAction.callback( [ response ], { registry } );
80+
}, [ response, registry ] );
81+
82+
const handleMarkAsUnread = useCallback( () => {
83+
onMarkAsRead( response.id );
84+
markAsUnreadAction.callback( [ response ], { registry } );
85+
}, [ response, registry, onMarkAsRead ] );
86+
87+
const readUnreadButtons = onMarkAsRead ? (
88+
<>
89+
{ response.is_unread && (
90+
<Button
91+
variant="tertiary"
92+
onClick={ handleMarkAsRead }
93+
showTooltip={ true }
94+
label={ markAsReadAction.label }
95+
iconSize={ 24 }
96+
icon={ markAsReadAction.icon }
97+
size="compact"
98+
></Button>
99+
) }
100+
{ ! response.is_unread && (
101+
<Button
102+
variant="tertiary"
103+
onClick={ handleMarkAsUnread }
104+
showTooltip={ true }
105+
label={ markAsUnreadAction.label }
106+
iconSize={ 24 }
107+
icon={ markAsUnreadAction.icon }
108+
size="compact"
109+
></Button>
110+
) }
111+
</>
112+
) : null;
113+
74114
switch ( response.status ) {
75115
case 'spam':
76116
return (
77117
<>
118+
{ readUnreadButtons }
78119
<Button
79120
variant="tertiary"
80121
onClick={ handleMarkAsNotSpam }
@@ -101,6 +142,7 @@ const ResponseActions = ( {
101142
case 'trash':
102143
return (
103144
<>
145+
{ readUnreadButtons }
104146
<Button
105147
variant="tertiary"
106148
onClick={ handleRestore }
@@ -127,6 +169,7 @@ const ResponseActions = ( {
127169
default: // 'publish' (inbox) or any other status
128170
return (
129171
<>
172+
{ readUnreadButtons }
130173
<Button
131174
variant="tertiary"
132175
onClick={ handleMarkAsSpam }

‎projects/packages/forms/src/dashboard/inbox/response.js‎

Lines changed: 10 additions & 212 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
1515
__experimentalVStack as VStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
1616
} from '@wordpress/components';
17-
import { useRegistry, useDispatch } from '@wordpress/data';
17+
import { useDispatch } from '@wordpress/data';
1818
import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
1919
import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
2020
import { decodeEntities } from '@wordpress/html-entities';
@@ -29,15 +29,6 @@ import Gravatar from '../components/gravatar';
2929
import ResponseActions from '../components/response-actions';
3030
import ResponseNavigation from '../components/response-navigation';
3131
import { useMarkAsSpam } from '../hooks/use-mark-as-spam';
32-
import {
33-
markAsSpamAction,
34-
markAsNotSpamAction,
35-
moveToTrashAction,
36-
restoreAction,
37-
deleteAction,
38-
markAsReadAction,
39-
markAsUnreadAction,
40-
} from './dataviews/actions';
4132
import { getPath, updateMenuCounter } from './utils';
4233

4334
const getDisplayName = response => {
@@ -199,11 +190,6 @@ const InboxResponse = ( {
199190
const [ isPreviewModalOpen, setIsPreviewModalOpen ] = useState( false );
200191
const [ previewFile, setPreviewFile ] = useState( null );
201192
const [ isImageLoading, setIsImageLoading ] = useState( true );
202-
const [ isMarkingAsSpam, setIsMarkingAsSpam ] = useState( false );
203-
const [ isMarkingAsNotSpam, setIsMarkingAsNotSpam ] = useState( false );
204-
const [ isMovingToTrash, setIsMovingToTrash ] = useState( false );
205-
const [ isRestoring, setIsRestoring ] = useState( false );
206-
const [ isDeleting, setIsDeleting ] = useState( false );
207193
const [ hasMarkedSelfAsRead, setHasMarkedSelfAsRead ] = useState( false );
208194

209195
const { editEntityRecord } = useDispatch( 'core' );
@@ -240,202 +226,6 @@ const InboxResponse = ( {
240226
}
241227
}, [ onModalStateChange, setIsPreviewModalOpen, setIsImageLoading ] );
242228

243-
const handleMarkAsSpam = useCallback( async () => {
244-
setIsMarkingAsSpam( true );
245-
await markAsSpamAction.callback( [ response ], { registry } );
246-
setIsMarkingAsSpam( false );
247-
onActionComplete?.( response.id.toString() );
248-
}, [ response, registry, onActionComplete ] );
249-
250-
const handleMarkAsNotSpam = useCallback( async () => {
251-
setIsMarkingAsNotSpam( true );
252-
await markAsNotSpamAction.callback( [ response ], { registry } );
253-
setIsMarkingAsNotSpam( false );
254-
onActionComplete?.( response.id.toString() );
255-
}, [ response, registry, onActionComplete ] );
256-
257-
const handleMoveToTrash = useCallback( async () => {
258-
setIsMovingToTrash( true );
259-
await moveToTrashAction.callback( [ response ], { registry } );
260-
setIsMovingToTrash( false );
261-
onActionComplete?.( response.id.toString() );
262-
}, [ response, registry, onActionComplete ] );
263-
264-
const handleRestore = useCallback( async () => {
265-
setIsRestoring( true );
266-
await restoreAction.callback( [ response ], { registry } );
267-
setIsRestoring( false );
268-
onActionComplete?.( response.id.toString() );
269-
}, [ response, registry, onActionComplete ] );
270-
271-
const handleDelete = useCallback( async () => {
272-
setIsDeleting( true );
273-
await deleteAction.callback( [ response ], { registry } );
274-
setIsDeleting( false );
275-
onActionComplete?.( response.id.toString() );
276-
}, [ response, registry, onActionComplete ] );
277-
278-
const handleMarkAsRead = useCallback( () => {
279-
markAsReadAction.callback( [ response ], { registry } );
280-
}, [ response, registry ] );
281-
282-
const handleMarkAsUnread = useCallback( () => {
283-
setHasMarkedSelfAsRead( response.id );
284-
markAsUnreadAction.callback( [ response ], { registry } );
285-
}, [ response, registry ] );
286-
const readUnreadButtons = (
287-
<>
288-
{ response.is_unread && (
289-
<Button
290-
variant="tertiary"
291-
onClick={ handleMarkAsRead }
292-
showTooltip={ true }
293-
label={ markAsReadAction.label }
294-
iconSize={ 24 }
295-
icon={ markAsReadAction.icon }
296-
size="compact"
297-
></Button>
298-
) }
299-
{ ! response.is_unread && (
300-
<Button
301-
variant="tertiary"
302-
onClick={ handleMarkAsUnread }
303-
showTooltip={ true }
304-
label={ markAsUnreadAction.label }
305-
iconSize={ 24 }
306-
icon={ markAsUnreadAction.icon }
307-
size="compact"
308-
></Button>
309-
) }
310-
</>
311-
);
312-
313-
const renderActionButtons = () => {
314-
switch ( response.status ) {
315-
case 'spam':
316-
return (
317-
<>
318-
{ readUnreadButtons }
319-
<Button
320-
variant="tertiary"
321-
onClick={ handleMarkAsNotSpam }
322-
isBusy={ isMarkingAsNotSpam }
323-
showTooltip={ true }
324-
label={ markAsNotSpamAction.label }
325-
iconSize={ 24 }
326-
icon={ markAsNotSpamAction.icon }
327-
size="compact"
328-
></Button>
329-
<Button
330-
variant="tertiary"
331-
onClick={ handleMoveToTrash }
332-
isBusy={ isMovingToTrash }
333-
showTooltip={ true }
334-
label={ moveToTrashAction.label }
335-
iconSize={ 24 }
336-
icon={ moveToTrashAction.icon }
337-
size="compact"
338-
></Button>
339-
</>
340-
);
341-
342-
case 'trash':
343-
return (
344-
<>
345-
{ readUnreadButtons }
346-
<Button
347-
variant="tertiary"
348-
onClick={ handleRestore }
349-
isBusy={ isRestoring }
350-
showTooltip={ true }
351-
label={ restoreAction.label }
352-
iconSize={ 24 }
353-
icon={ restoreAction.icon }
354-
size="compact"
355-
></Button>
356-
<Button
357-
variant="tertiary"
358-
onClick={ handleDelete }
359-
showTooltip={ true }
360-
isBusy={ isDeleting }
361-
label={ deleteAction.label }
362-
iconSize={ 24 }
363-
icon={ deleteAction.icon }
364-
size="compact"
365-
></Button>
366-
</>
367-
);
368-
369-
default: // 'publish' (inbox) or any other status
370-
return (
371-
<>
372-
{ readUnreadButtons }
373-
<Button
374-
variant="tertiary"
375-
onClick={ handleMarkAsSpam }
376-
isBusy={ isMarkingAsSpam }
377-
showTooltip={ true }
378-
label={ markAsSpamAction.label }
379-
iconSize={ 24 }
380-
icon={ markAsSpamAction.icon }
381-
size="compact"
382-
></Button>
383-
<Button
384-
variant="tertiary"
385-
onClick={ handleMoveToTrash }
386-
isBusy={ isMovingToTrash }
387-
showTooltip={ true }
388-
label={ moveToTrashAction.label }
389-
iconSize={ 24 }
390-
icon={ moveToTrashAction.icon }
391-
size="compact"
392-
></Button>
393-
</>
394-
);
395-
}
396-
};
397-
398-
const renderNavigationButtons = () => {
399-
return (
400-
<>
401-
{ onPrevious && (
402-
<Button
403-
accessibleWhenDisabled={ true }
404-
variant="tertiary"
405-
onClick={ onPrevious }
406-
disabled={ ! hasPrevious }
407-
showTooltip={ true }
408-
label={ __( 'Previous', 'jetpack-forms' ) }
409-
icon={ chevronLeft }
410-
size="compact"
411-
></Button>
412-
) }
413-
{ onNext && (
414-
<Button
415-
accessibleWhenDisabled={ true }
416-
variant="tertiary"
417-
onClick={ onNext }
418-
disabled={ ! hasNext }
419-
showTooltip={ true }
420-
label={ __( 'Next', 'jetpack-forms' ) }
421-
icon={ chevronRight }
422-
size="compact"
423-
></Button>
424-
) }
425-
{ ! isMobile && onClose && (
426-
<Button
427-
variant="tertiary"
428-
onClick={ onClose }
429-
showTooltip={ true }
430-
label={ __( 'Close', 'jetpack-forms' ) }
431-
icon={ close }
432-
size="compact"
433-
></Button>
434-
) }
435-
</>
436-
);
437-
};
438-
439229
const renderFieldValue = value => {
440230
if ( isImageSelectField( value ) ) {
441231
return (
@@ -562,6 +352,10 @@ const InboxResponse = ( {
562352
} );
563353
}, [ response, editEntityRecord, hasMarkedSelfAsRead ] );
564354

355+
const onMarkAsRead = useCallback( responseId => {
356+
setHasMarkedSelfAsRead( responseId );
357+
}, [] );
358+
565359
const handelImageLoaded = useCallback( () => {
566360
return setIsImageLoading( false );
567361
}, [ setIsImageLoading ] );
@@ -587,7 +381,11 @@ const InboxResponse = ( {
587381
{ ! isMobile && (
588382
<HStack spacing="0" justify="space-between" className="jp-forms__inbox-response-actions">
589383
<HStack alignment="left">
590-
<ResponseActions onActionComplete={ onActionComplete } response={ response } />
384+
<ResponseActions
385+
onActionComplete={ onActionComplete }
386+
onMarkAsRead={ onMarkAsRead }
387+
response={ response }
388+
/>
591389
</HStack>
592390
<HStack alignment="right">
593391
<ResponseNavigation

‎projects/packages/forms/src/types/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,8 @@ export interface FormResponse {
9898
has_file: boolean;
9999
/** The fields of the response. */
100100
fields: Record< string, unknown >;
101+
/** Whether the response has been read. */
102+
is_unread: boolean;
101103
}
102104

103105
/**

0 commit comments

Comments
 (0)