Poll history - filter by active or ended (#10098)

* wip

* remove dupe

* use poll model relations in all cases

* update mpollbody tests to use poll instance

* update poll fetching login in pinned messages card

* add pinned polls to room polls state

* add spinner while relations are still loading

* handle no poll in end poll dialog

* strict errors

* render a poll body that errors for poll end events

* add fetching logic to pollend tile

* extract poll testing utilities

* test mpollend

* strict fix

* more strict fix

* strict fix for forwardref

* add filter component

* update poll test utils

* add unstyled filter tab group

* filtertabgroup snapshot

* lint

* update test util setupRoomWithPollEvents to allow testing multiple polls in one room

* style filter tabs

* test error message for past polls

* sort polls list by latest

* move FilterTabGroup into generic components

* comments

* Update src/components/views/dialogs/polls/types.ts

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
Kerry 2023-02-13 09:19:45 +13:00 committed by GitHub
parent f0f50485d7
commit 18ab325eaf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 388 additions and 61 deletions

View file

@ -0,0 +1,57 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { FieldsetHTMLAttributes, ReactNode } from "react";
export type FilterTab<T> = {
label: string | ReactNode;
id: T;
};
type FilterTabGroupProps<T extends string = string> = FieldsetHTMLAttributes<any> & {
// group name used for radio buttons
name: string;
onFilterChange: (id: T) => void;
// active tab's id
value: T;
// tabs to display
tabs: FilterTab<T>[];
};
/**
* React component which styles a set of content filters as tabs
*
* This is used in displays which show a list of content items, and the user can select between one of several
* filters for those items. For example, in the Poll History dialog, the user can select between "Active" and "Ended"
* polls.
*
* Type `T` is used for the `value` attribute for the buttons in the radio group.
*/
export const FilterTabGroup = <T extends string = string>({
name,
value,
tabs,
onFilterChange,
...rest
}: FilterTabGroupProps<T>): JSX.Element => (
<fieldset {...rest} className="mx_FilterTabGroup">
{tabs.map(({ label, id }) => (
<label data-testid={`filter-tab-${name}-${id}`} key={id}>
<input type="radio" name={name} value={id} onChange={() => onFilterChange(id)} checked={value === id} />
<span>{label}</span>
</label>
))}
</fieldset>
);