Poll history: detail screen (#10172)

* basic navigation to focused poll

* add tooltip

* drill permalinkCreator down to poll history

* render poll tile and link to timeline

* tidy and lint

* unit test poll detail

* add view poll link to ended pollliste item

* strict fix

* pr improvements

* pass room as prop

* permalinkcreator ts assertion
This commit is contained in:
Kerry 2023-02-28 09:39:55 +13:00 committed by GitHub
parent 9b2b3ca42e
commit f57495d3cd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 588 additions and 104 deletions

View file

@ -16,19 +16,23 @@ limitations under the License.
import React, { useState } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { MatrixEvent, Poll } from "matrix-js-sdk/src/matrix";
import { MatrixEvent, Poll, Room } from "matrix-js-sdk/src/matrix";
import { _t } from "../../../../languageHandler";
import BaseDialog from "../BaseDialog";
import { IDialogProps } from "../IDialogProps";
import { PollHistoryList } from "./PollHistoryList";
import { PollHistoryFilter } from "./types";
import { PollDetailHeader } from "./PollDetailHeader";
import { PollDetail } from "./PollDetail";
import { RoomPermalinkCreator } from "../../../../utils/permalinks/Permalinks";
import { usePollsWithRelations } from "./usePollHistory";
import { useFetchPastPolls } from "./fetchPastPolls";
type PollHistoryDialogProps = Pick<IDialogProps, "onFinished"> & {
roomId: string;
room: Room;
matrixClient: MatrixClient;
permalinkCreator: RoomPermalinkCreator;
};
const sortEventsByLatest = (left: MatrixEvent, right: MatrixEvent): number => right.getTs() - left.getTs();
@ -46,25 +50,42 @@ const filterAndSortPolls = (polls: Map<string, Poll>, filter: PollHistoryFilter)
.sort(sortEventsByLatest);
};
export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({ roomId, matrixClient, onFinished }) => {
const room = matrixClient.getRoom(roomId)!;
const { isLoading } = useFetchPastPolls(room, matrixClient);
const { polls } = usePollsWithRelations(roomId, matrixClient);
export const PollHistoryDialog: React.FC<PollHistoryDialogProps> = ({
room,
matrixClient,
permalinkCreator,
onFinished,
}) => {
const { polls } = usePollsWithRelations(room.roomId, matrixClient);
const [filter, setFilter] = useState<PollHistoryFilter>("ACTIVE");
const [focusedPollId, setFocusedPollId] = useState<string | null>(null);
const { isLoading } = useFetchPastPolls(room, matrixClient);
const pollStartEvents = filterAndSortPolls(polls, filter);
const isLoadingPollResponses = [...polls.values()].some((poll) => poll.isFetchingResponses);
const focusedPoll = focusedPollId ? polls.get(focusedPollId) : undefined;
const title = focusedPoll ? (
<PollDetailHeader filter={filter} onNavigateBack={() => setFocusedPollId(null)} />
) : (
_t("Polls history")
);
return (
<BaseDialog title={_t("Polls history")} onFinished={onFinished}>
<BaseDialog title={title} onFinished={onFinished}>
<div className="mx_PollHistoryDialog_content">
<PollHistoryList
pollStartEvents={pollStartEvents}
isLoading={isLoading || isLoadingPollResponses}
polls={polls}
filter={filter}
onFilterChange={setFilter}
/>
{focusedPoll ? (
<PollDetail poll={focusedPoll} permalinkCreator={permalinkCreator} requestModalClose={onFinished} />
) : (
<PollHistoryList
pollStartEvents={pollStartEvents}
isLoading={isLoading || isLoadingPollResponses}
polls={polls}
filter={filter}
onFilterChange={setFilter}
onItemClick={setFocusedPollId}
/>
)}
</div>
</BaseDialog>
);