jiti-meet/react/features/polls/components/AbstractPollCreate.js

136 lines
3.8 KiB
JavaScript

// @flow
import React, { useCallback, useState } from 'react';
import type { AbstractComponent } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { getParticipantDisplayName } from '../../base/participants';
import { COMMAND_NEW_POLL } from '../constants';
/**
* The type of the React {@code Component} props of inheriting component.
*/
type InputProps = {
setCreateMode: boolean => void,
};
/*
* Props that will be passed by the AbstractPollCreate to its
* concrete implementations (web/native).
**/
export type AbstractProps = InputProps & {
answers: Array<string>,
question: string,
setQuestion: string => void,
setAnswer: (number, string) => void,
addAnswer: ?number => void,
moveAnswer: (number, number) => void,
removeAnswer: number => void,
onSubmit: Function,
isSubmitDisabled: boolean,
t: Function,
};
/**
* Higher Order Component taking in a concrete PollCreate component and
* augmenting it with state/behavior common to both web and native implementations.
*
* @param {React.AbstractComponent} Component - The concrete component.
* @returns {React.AbstractComponent}
*/
const AbstractPollCreate = (Component: AbstractComponent<AbstractProps>) => (props: InputProps) => {
const { setCreateMode } = props;
const [ question, setQuestion ] = useState('');
const [ answers, setAnswers ] = useState([ '', '' ]);
const setAnswer = useCallback((i, answer) => {
const newAnswers = [ ...answers ];
newAnswers[i] = answer;
setAnswers(newAnswers);
});
const addAnswer = useCallback((i: ?number) => {
const newAnswers = [ ...answers ];
newAnswers.splice(typeof i === 'number' ? i : answers.length, 0, '');
setAnswers(newAnswers);
});
const moveAnswer = useCallback((i, j) => {
const newAnswers = [ ...answers ];
const answer = answers[i];
newAnswers.splice(i, 1);
newAnswers.splice(j, 0, answer);
setAnswers(newAnswers);
});
const removeAnswer = useCallback(i => {
if (answers.length <= 2) {
return;
}
const newAnswers = [ ...answers ];
newAnswers.splice(i, 1);
setAnswers(newAnswers);
});
const conference = useSelector(state => state['features/base/conference'].conference);
const myId = conference.myUserId();
const myName = useSelector(state => getParticipantDisplayName(state, myId));
const onSubmit = useCallback(ev => {
if (ev) {
ev.preventDefault();
}
const filteredAnswers = answers.filter(answer => answer.trim().length > 0);
if (filteredAnswers.length < 2) {
return;
}
conference.sendMessage({
type: COMMAND_NEW_POLL,
pollId: Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(36),
senderId: myId,
senderName: myName,
question,
answers: filteredAnswers
});
setCreateMode(false);
}, [ conference, question, answers ]);
// Check if the poll create form can be submitted i.e. if the send button should be disabled.
const isSubmitDisabled
= question.trim().length <= 0 // If no question is provided
|| answers.filter(answer => answer.trim().length > 0).length < 2; // If not enough options are provided
const { t } = useTranslation();
return (<Component
addAnswer = { addAnswer }
answers = { answers }
isSubmitDisabled = { isSubmitDisabled }
moveAnswer = { moveAnswer }
onSubmit = { onSubmit }
question = { question }
removeAnswer = { removeAnswer }
setAnswer = { setAnswer }
setCreateMode = { setCreateMode }
setQuestion = { setQuestion }
t = { t } />);
};
export default AbstractPollCreate;