diff --git a/src/components/events/Feedback/style.module.scss b/src/components/events/Feedback/style.module.scss index 2079e21c..45c3e2a8 100644 --- a/src/components/events/Feedback/style.module.scss +++ b/src/components/events/Feedback/style.module.scss @@ -5,6 +5,8 @@ border-radius: 0.5rem; display: flex; flex-direction: column; + white-space: pre-wrap; + word-break: break-word; .header { align-items: center; @@ -69,8 +71,6 @@ flex: auto; flex-direction: column; gap: 0.5rem; - white-space: pre-wrap; - word-break: break-word; .date { color: var(--theme-text-on-background-2); diff --git a/src/pages/feedback.tsx b/src/pages/feedback.tsx index 06b931f9..bee995fa 100644 --- a/src/pages/feedback.tsx +++ b/src/pages/feedback.tsx @@ -16,11 +16,13 @@ import { useMemo, useState } from 'react'; type FilterOptions = { type: 'any' | FeedbackType; status: 'any' | FeedbackStatus; + sort: 'chronological' | 'submitted-first'; }; const DEFAULT_FILTER_STATE: FilterOptions = { type: 'any', status: 'any', + sort: 'chronological', }; const ROWS_PER_PAGE = 25; @@ -48,11 +50,16 @@ const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPagePro defaultValue: DEFAULT_FILTER_STATE.status, valid: status => status === 'any' || isEnum(FeedbackStatus, status), }, + sort: { + defaultValue: DEFAULT_FILTER_STATE.sort, + valid: sort => sort === 'chronological' || sort === 'submitted-first', + }, }, }); const typeFilter = states.type?.value || DEFAULT_FILTER_STATE.type; const statusFilter = states.status?.value || DEFAULT_FILTER_STATE.status; + const sortFilter = states.sort?.value || DEFAULT_FILTER_STATE.sort; const filteredFeedback = useMemo( () => @@ -63,8 +70,8 @@ const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPagePro (statusFilter === 'any' || feedback.status === statusFilter) ) .sort((a, b) => { - // If admin, put SUBMITTED feedback on top - if (isAdmin && a.status !== b.status) { + // Put SUBMITTED feedback on top + if (sortFilter === 'submitted-first' && a.status !== b.status) { return ( (a.status === FeedbackStatus.SUBMITTED ? 0 : 1) - (b.status === FeedbackStatus.SUBMITTED ? 0 : 1) @@ -73,7 +80,7 @@ const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPagePro // Otherwise, just put most recent first return +new Date(b.timestamp) - +new Date(a.timestamp); }), - [feedback, isAdmin, typeFilter, statusFilter] + [feedback, typeFilter, statusFilter, sortFilter] ); return ( @@ -115,6 +122,24 @@ const FeedbackPage = ({ user, feedback, token, initialFilters }: FeedbackPagePro }} /> + + {isAdmin ? ( +
+ { + setStates('sort', v); + setPage(0); + }} + /> +
+ ) : null} {filteredFeedback.slice(page * ROWS_PER_PAGE, (page + 1) * ROWS_PER_PAGE).map(feedback => (