feat(polls-history): control polls through local storage

lang/main.json

             "submit": "Submit"
         },
         "by": "By {{ name }}",
+        "closeButton": "Close poll",
         "create": {
             "addOption": "Add option",
             "answerPlaceholder": "Option {{index}}",

react/features/app/middlewares.any.ts

 import '../overlay/middleware';
 import '../participants-pane/middleware';
 import '../polls/middleware';
+import '../polls-history/middleware';
 import '../reactions/middleware';
 import '../recent-list/middleware';
 import '../recording/middleware';

react/features/app/reducers.any.ts

 import '../overlay/reducer';
 import '../participants-pane/reducer';
 import '../polls/reducer';
+import '../polls-history/reducer';
 import '../reactions/reducer';
 import '../recent-list/reducer';
 import '../recording/reducer';

react/features/app/types.ts

 import { IOverlayState } from '../overlay/reducer';
 import { IParticipantsPaneState } from '../participants-pane/reducer';
 import { IPollsState } from '../polls/reducer';
+import { IPollsHistoryState } from '../polls-history/reducer';
 import { IPowerMonitorState } from '../power-monitor/reducer';
 import { IPrejoinState } from '../prejoin/reducer';
 import { IReactionsState } from '../reactions/reducer';
     'features/overlay': IOverlayState;
     'features/participants-pane': IParticipantsPaneState;
     'features/polls': IPollsState;
+    'features/polls-history': IPollsHistoryState;
     'features/power-monitor': IPowerMonitorState;
     'features/prejoin': IPrejoinState;
     'features/reactions': IReactionsState;

react/features/base/conference/functions.ts

  */
 export const getConferenceState = (state: IReduxState) => state['features/base/conference'];
 
-/**
- * Is the conference joined or not.
- *
- * @param {IReduxState} state - Global state.
- * @returns {boolean}
- */
-export const getIsConferenceJoined = (state: IReduxState) => Boolean(getConferenceState(state).conference);
-
 /**
  * Attach a set of local tracks to a conference.
  *

react/features/polls-history/actionTypes.ts

+/**
+ * The type of the action which signals that we need to remove poll from the history(local storage).
+ *
+ * {
+ *     type: REMOVE_POLL_FROM_HISTORY,
+ *     meetingId: string,
+ *     pollId: string,
+ *     poll: IPoll
+ * }
+ */
+export const REMOVE_POLL_FROM_HISTORY = 'REMOVE_POLL_FROM_HISTORY';
+
+/**
+ * The type of the action triggered when the poll is saved in history(local storage).
+ *
+ * {
+ *     type: SAVE_POLL_IN_HISTORY,
+ *     poll: Poll,
+ *     pollId: string,
+ *     saved: boolean
+ * }
+ */
+export const SAVE_POLL_IN_HISTORY = 'SAVE_POLL_IN_HISTORY';

react/features/polls-history/actions.ts

+import { IPoll } from '../polls/types';
+
+import { REMOVE_POLL_FROM_HISTORY, SAVE_POLL_IN_HISTORY } from './actionTypes';
+
+/**
+ * Action to signal saving a poll in history(local storage).
+ *
+ * @param {string} meetingId - The id of the meeting in which polls get to be saved.
+ * @param {string} pollId - The id of the poll that gets to be saved.
+ * @param {IPoll} poll - The Poll object that gets to be saved.
+ * @returns {{
+ *     type: SAVE_POLL_IN_HISTORY,
+ *     meetingId: string,
+ *     pollId: string,
+ *     poll: IPoll
+ * }}
+ */
+export function savePollInHistory(meetingId: string | undefined, pollId: string, poll: IPoll) {
+    return {
+        type: SAVE_POLL_IN_HISTORY,
+        meetingId,
+        pollId,
+        poll
+    };
+}
+
+/**
+ * Action to signal that existing poll needs to be deleted from history(local storage).
+ *
+ * @param {string} meetingId - The id of the meeting in which poll gets to be removed.
+ * @param {string} pollId - The id of the poll that gets to be removed.
+ * @param {IPoll} poll - The incoming IPoll object.
+ * @returns {{
+ *     type: REMOVE_POLL_FROM_HISTORY,
+ *     meetingId: string,
+ *     pollId: string,
+ *     poll: IPoll
+ * }}
+ */
+export const removePollFromHistory = (meetingId: string | undefined, pollId: string, poll: IPoll) => {
+    return {
+        type: REMOVE_POLL_FROM_HISTORY,
+        meetingId,
+        pollId,
+        poll
+    };
+};

react/features/polls-history/middleware.ts

+import { CONFERENCE_JOINED } from '../base/conference/actionTypes';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { REMOVE_POLL, SAVE_POLL } from '../polls/actionTypes';
+import { savePoll } from '../polls/actions';
+
+import { removePollFromHistory, savePollInHistory } from './actions';
+
+MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
+    const result = next(action);
+    const { room: meetingId } = getState()['features/base/conference'];
+
+    switch (action.type) {
+
+    case CONFERENCE_JOINED: {
+        const state = getState();
+        const pollsHistory = meetingId && state['features/polls-history'].polls?.[meetingId];
+
+        if (!pollsHistory) {
+            return null;
+        }
+
+        for (const key in pollsHistory) {
+            if (pollsHistory.hasOwnProperty(key) && pollsHistory[key].saved) {
+                dispatch(savePoll(key, pollsHistory[key]));
+            }
+        }
+        break;
+    }
+
+    case REMOVE_POLL: {
+        const { poll, pollId } = action;
+
+        dispatch(removePollFromHistory(meetingId, pollId, poll));
+        break;
+    }
+
+    case SAVE_POLL: {
+        const { poll, pollId } = action;
+
+        dispatch(savePollInHistory(meetingId, pollId, poll));
+        break;
+    }
+    }
+
+    return result;
+});

react/features/polls-history/reducer.ts

+import PersistenceRegistry from '../base/redux/PersistenceRegistry';
+import ReducerRegistry from '../base/redux/ReducerRegistry';
+import { IPoll } from '../polls/types';
+
+import { REMOVE_POLL_FROM_HISTORY, SAVE_POLL_IN_HISTORY } from './actionTypes';
+
+const INITIAL_STATE = {
+    polls: {}
+};
+
+export interface IPollsHistoryState {
+    polls: {
+        [meetingId: string]: {
+            [pollId: string]: IPoll;
+        };
+    };
+}
+
+const STORE_NAME = 'features/polls-history';
+
+PersistenceRegistry.register(STORE_NAME, INITIAL_STATE);
+
+ReducerRegistry.register<IPollsHistoryState>(STORE_NAME, (state = INITIAL_STATE, action): IPollsHistoryState => {
+    switch (action.type) {
+
+    case REMOVE_POLL_FROM_HISTORY: {
+        if (Object.keys(state.polls[action.meetingId] ?? {})?.length === 1) {
+            delete state.polls[action.meetingId];
+        } else {
+            delete state.polls[action.meetingId]?.[action.pollId];
+        }
+
+        return state;
+    }
+
+    case SAVE_POLL_IN_HISTORY: {
+        return {
+            ...state,
+            polls: {
+                ...state.polls,
+                [action.meetingId]: {
+                    ...state.polls[action.meetingId],
+                    [action.pollId]: action.poll
+                }
+            }
+        };
+    }
+
+    default:
+        return state;
+    }
+});

react/features/polls/actionTypes.ts

 
 /**
  * The type of the action which signals that we need to clear all polls from the state.
- * For example we are moving to another conference.
+ * For example, we are moving to another conference.
  *
  * {
  *     type: CLEAR_POLLS
 export const REGISTER_VOTE = 'REGISTER_VOTE';
 
 /**
- * The type of the action which retracts a vote.
+ * The type of the action which signals that we need to remove poll.
  *
  * {
- *     type: RETRACT_VOTE,
+ *     type: REMOVE_POLL,
  *     pollId: string,
+ *     poll: IPoll
  * }
  */
-export const RETRACT_VOTE = 'RETRACT_VOTE';
+export const REMOVE_POLL = 'REMOVE_POLL';
 
 /**
  * The type of the action triggered when the poll tab in chat pane is closed

react/features/polls/actions.ts

     RECEIVE_ANSWER,
     RECEIVE_POLL,
     REGISTER_VOTE,
+    REMOVE_POLL,
     RESET_NB_UNREAD_POLLS,
-    RETRACT_VOTE,
     SAVE_POLL
 } from './actionTypes';
 import { IAnswer, IPoll } from './types';
  * }}
  */
 export const clearPolls = () => {
-    return { type: CLEAR_POLLS };
+    return {
+        type: CLEAR_POLLS
+    };
 };
 
 /**
  * @param {boolean} notify - Whether to send or not a notification.
  * @returns {{
  *     type: RECEIVE_POLL,
- *     poll: IPoll,
  *     pollId: string,
+ *     poll: IPoll,
  *     notify: boolean
  * }}
  */
 export const receivePoll = (pollId: string, poll: IPoll, notify: boolean) => {
     return {
         type: RECEIVE_POLL,
-        poll,
         pollId,
+        poll,
         notify
     };
 };
  * @param {IAnswer} answer - The incoming Answer object.
  * @returns {{
  *     type: RECEIVE_ANSWER,
- *     answer: IAnswer,
- *     pollId: string
+ *     pollId: string,
+ *     answer: IAnswer
  * }}
  */
 export const receiveAnswer = (pollId: string, answer: IAnswer) => {
     return {
         type: RECEIVE_ANSWER,
-        answer,
-        pollId
+        pollId,
+        answer
     };
 };
 
  * @param {?Array<boolean>} answers - The new answers.
  * @returns {{
  *     type: REGISTER_VOTE,
- *     answers: ?Array<boolean>,
- *     pollId: string
+ *     pollId: string,
+ *     answers: ?Array<boolean>
  * }}
  */
 export const registerVote = (pollId: string, answers: Array<boolean> | null) => {
     return {
         type: REGISTER_VOTE,
-        answers,
-        pollId
-    };
-};
-
-/**
- * Action to retract a vote on a poll.
- *
- * @param {string} pollId - The id of the poll.
- * @returns {{
- *     type: RETRACT_VOTE,
- *     pollId: string
- * }}
- */
-export const retractVote = (pollId: string) => {
-    return {
-        type: RETRACT_VOTE,
-        pollId
+        pollId,
+        answers
     };
 };
 
 /**
- * Action to signal the closing of the polls tab.
+ * Action to signal the number reset of unread polls.
  *
  * @returns {{
- *     type: POLL_TAB_CLOSED
+ *     type: RESET_NB_UNREAD_POLLS
  * }}
  */
 export function resetNbUnreadPollsMessages() {
  *
  * @param {string} pollId - The id of the poll that gets to be saved.
  * @param {IPoll} poll - The Poll object that gets to be saved.
- * @param {boolean} saved - Whether the poll is saved or not.
  * @returns {{
- *     type: RECEIVE_POLL,
- *     poll: IPoll,
+ *     type: SAVE_POLL,
+ *     meetingId: string,
  *     pollId: string,
- *     saved: boolean
+ *     poll: IPoll
  * }}
  */
-export function savePoll(pollId: string, poll: IPoll, saved: boolean) {
+export function savePoll(pollId: string, poll: IPoll) {
     return {
         type: SAVE_POLL,
         pollId,
-        poll: {
-            ...poll,
-            saved
-        }
+        poll
     };
 }
 
  * @param {string} pollId - The id of the poll that gets to be edited.
  * @param {boolean} editing - Whether the poll is in edit mode or not.
  * @returns {{
- *     type: RECEIVE_POLL,
+ *     type: EDIT_POLL,
  *     pollId: string,
  *     editing: boolean
  * }}
         editing
     };
 }
+
+/**
+ * Action to signal that existing polls needs to be removed.
+ *
+ * @param {string} pollId - The id of the poll that gets to be removed.
+ * @param {IPoll} poll - The incoming Poll object.
+ * @returns {{
+ *     type: REMOVE_POLL,
+ *     pollId: string,
+ *     poll: IPoll
+ * }}
+ */
+export const removePoll = (pollId: string, poll: IPoll) => {
+    return {
+        type: REMOVE_POLL,
+        pollId,
+        poll
+    };
+};

react/features/polls/components/AbstractPollAnswer.tsx

 import { IReduxState } from '../../app/types';
 import { getParticipantDisplayName } from '../../base/participants/functions';
 import { useBoundSelector } from '../../base/util/hooks';
-import { editPoll, registerVote, setVoteChanging } from '../actions';
+import { registerVote, removePoll, setVoteChanging } from '../actions';
 import { COMMAND_ANSWER_POLL, COMMAND_NEW_POLL } from '../constants';
+import { getPoll } from '../functions';
 import { IPoll } from '../types';
 
 /**
 
     const { pollId, setCreateMode } = props;
 
-    const conference: any = useSelector((state: IReduxState) => state['features/base/conference'].conference);
+    const { conference } = useSelector((state: IReduxState) => state['features/base/conference']);
 
-    const poll: IPoll = useSelector((state: IReduxState) => state['features/polls'].polls[pollId]);
+    const poll: IPoll = useSelector(getPoll(pollId));
 
     const { answers, lastVote, question, senderId } = poll;
 
     const dispatch = useDispatch();
 
     const submitAnswer = useCallback(() => {
-        conference.sendMessage({
+        conference?.sendMessage({
             type: COMMAND_ANSWER_POLL,
             pollId,
             answers: checkBoxStates
             answers: answers.map(answer => answer.name)
         });
 
-        dispatch(editPoll(pollId, false));
-
+        dispatch(removePoll(pollId, poll));
     }, [ conference, question, answers ]);
 
     const skipAnswer = useCallback(() => {

react/features/polls/components/AbstractPollCreate.tsx

         setAnswers(newAnswers);
     }, [ answers ]);
 
-    const conference = useSelector((state: IReduxState) => state['features/base/conference'].conference);
+    const { conference } = useSelector((state: IReduxState) => state['features/base/conference']);
 
     const dispatch = useDispatch();
 
             lastVote: null,
             question,
             answers: filteredAnswers,
-            saved: false,
+            saved: true,
             editing: false
         };
 
         if (editingPoll) {
-            dispatch(savePoll(editingPoll[0], poll, true));
+            dispatch(savePoll(editingPoll[0], poll));
         } else {
-            dispatch(savePoll(pollId, poll, true));
+            dispatch(savePoll(pollId, poll));
         }
 
         sendAnalytics(createPollEvent('created'));

react/features/polls/components/AbstractPollResults.tsx

 import { useBoundSelector } from '../../base/util/hooks';
 import { setVoteChanging } from '../actions';
 import { getPoll } from '../functions';
+import { IPoll } from '../types';
 
 /**
  * The type of the React {@code Component} props of inheriting component.
 const AbstractPollResults = (Component: ComponentType<AbstractProps>) => (props: InputProps) => {
     const { pollId } = props;
 
-    const pollDetails = useSelector(getPoll(pollId));
-    const participant = useBoundSelector(getParticipantById, pollDetails.senderId);
+    const poll: IPoll = useSelector(getPoll(pollId));
+    const participant = useBoundSelector(getParticipantById, poll.senderId);
     const reduxState = useSelector((state: IReduxState) => state);
 
     const [ showDetails, setShowDetails ] = useState(false);
         const allVoters = new Set();
 
         // Getting every voters ID that participates to the poll
-        for (const answer of pollDetails.answers) {
+        for (const answer of poll.answers) {
             // checking if the voters is an array for supporting old structure model
             const voters: string[] = answer.voters.length ? answer.voters : Object.keys(answer.voters);
 
             voters.forEach((voter: string) => allVoters.add(voter));
         }
 
-        return pollDetails.answers.map(answer => {
+        return poll.answers.map(answer => {
             const nrOfVotersPerAnswer = answer.voters ? Object.keys(answer.voters).length : 0;
             const percentage = allVoters.size > 0 ? Math.round(nrOfVotersPerAnswer / allVoters.size * 100) : 0;
 
                 voterCount: nrOfVotersPerAnswer
             };
         });
-    }, [ pollDetails.answers, showDetails ]);
+    }, [ poll.answers, showDetails ]);
 
     const dispatch = useDispatch();
     const changeVote = useCallback(() => {
             answers = { answers }
             changeVote = { changeVote }
             creatorName = { participant ? participant.name : '' }
-            haveVoted = { pollDetails.lastVote !== null }
-            question = { pollDetails.question }
+            haveVoted = { poll.lastVote !== null }
+            question = { poll.question }
             showDetails = { showDetails }
             t = { t }
             toggleIsDetailed = { toggleIsDetailed } />

react/features/polls/components/native/PollAnswer.tsx

 import { Text, TextStyle, View, ViewStyle } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { IconCloseLarge } from '../../../base/icons/svg';
 import { getLocalParticipant } from '../../../base/participants/functions';
 import Button from '../../../base/ui/components/native/Button';
+import IconButton from '../../../base/ui/components/native/IconButton';
 import Switch from '../../../base/ui/components/native/Switch';
 import { BUTTON_TYPES } from '../../../base/ui/constants.native';
-import { editPoll } from '../../actions';
+import { editPoll, removePoll } from '../../actions';
 import { isSubmitAnswerDisabled } from '../../functions';
 import AbstractPollAnswer, { AbstractProps } from '../AbstractPollAnswer';
 
 
     return (
         <>
-            <Text style = { dialogStyles.questionText as TextStyle } >{ poll.question }</Text>
-            <Text style = { dialogStyles.questionOwnerText as TextStyle } >{
-                t('polls.by', { name: localParticipant?.name })
-            }
-            </Text>
+            <View style = { dialogStyles.headerContainer as ViewStyle }>
+                <View>
+                    <Text style = { dialogStyles.questionText as TextStyle } >{ poll.question }</Text>
+                    <Text style = { dialogStyles.questionOwnerText as TextStyle } >{
+                        t('polls.by', { name: localParticipant?.name })
+                    }
+                    </Text>
+                </View>
+                {
+                    pollSaved && <IconButton
+                        onPress = { () => dispatch(removePoll(pollId, poll)) }
+                        src = { IconCloseLarge } />
+                }
+            </View>
             <View style = { pollsStyles.answerContent as ViewStyle }>
                 {
                     poll.answers.map((answer, index: number) => (

react/features/polls/components/native/styles.ts

 
 export const dialogStyles = createStyleSheet({
 
+    headerContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between'
+    },
+
     customContainer: {
         marginBottom: BaseTheme.spacing[3],
         marginHorizontal: BaseTheme.spacing[3],

react/features/polls/components/web/PollAnswer.tsx

 import { useDispatch } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
+import Icon from '../../../base/icons/components/Icon';
+import { IconCloseLarge } from '../../../base/icons/svg';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Button from '../../../base/ui/components/web/Button';
 import Checkbox from '../../../base/ui/components/web/Checkbox';
 import { BUTTON_TYPES } from '../../../base/ui/constants.web';
-import { editPoll } from '../../actions';
+import { editPoll, removePoll } from '../../actions';
 import { isSubmitAnswerDisabled } from '../../functions';
 import AbstractPollAnswer, { AbstractProps } from '../AbstractPollAnswer';
 
             borderRadius: '8px',
             wordBreak: 'break-word'
         },
+        closeBtn: {
+            cursor: 'pointer',
+            float: 'right'
+        },
         header: {
             marginBottom: '24px'
         },
 
     return (
         <div className = { classes.container }>
+            {
+                pollSaved && <Icon
+                    ariaLabel = { t('polls.closeButton') }
+                    className = { classes.closeBtn }
+                    onClick = { () => dispatch(removePoll(pollId, poll)) }
+                    role = 'button'
+                    src = { IconCloseLarge }
+                    tabIndex = { 0 } />
+            }
             <div className = { classes.header }>
                 <div className = { classes.question }>
                     { poll.question }

react/features/polls/components/web/PollsList.tsx

 const PollsList = ({ setCreateMode }: IPollListProps) => {
     const { t } = useTranslation();
     const { classes, theme } = useStyles();
+    const { polls } = useSelector((state: IReduxState) => state['features/polls']);
 
-    const polls = useSelector((state: IReduxState) => state['features/polls'].polls);
     const pollListEndRef = useRef<HTMLDivElement>(null);
 
     const scrollToBottom = useCallback(() => {

react/features/polls/middleware.ts

  */
 StateListenerRegistry.register(
     state => getCurrentConference(state),
-    (conference, { dispatch }, previousConference) => {
+    (conference, { dispatch }, previousConference): void => {
         if (conference !== previousConference) {
-            // conference changed, left or failed...
-            // clean old polls
             dispatch(clearPolls());
         }
     });
         }
         break;
     }
-
     }
 
     return result;
     }
 
     switch (data.type) {
+
     case COMMAND_NEW_POLL: {
         const { pollId, answers, senderId, question } = data;
 

react/features/polls/reducer.ts

     RECEIVE_ANSWER,
     RECEIVE_POLL,
     REGISTER_VOTE,
+    REMOVE_POLL,
     RESET_NB_UNREAD_POLLS,
-    RETRACT_VOTE,
     SAVE_POLL
 } from './actionTypes';
 import { IAnswer, IPoll } from './types';
     };
 }
 
-ReducerRegistry.register<IPollsState>('features/polls', (state = INITIAL_STATE, action): IPollsState => {
+const STORE_NAME = 'features/polls';
+
+ReducerRegistry.register<IPollsState>(STORE_NAME, (state = INITIAL_STATE, action): IPollsState => {
     switch (action.type) {
 
     case CHANGE_VOTE: {
     }
 
     // Reducer triggered when a poll is received or saved.
-    case RECEIVE_POLL:
-    case SAVE_POLL: {
+    case RECEIVE_POLL: {
         return {
             ...state,
             polls: {
         };
     }
 
+    case SAVE_POLL: {
+        return {
+            ...state,
+            polls: {
+                ...state.polls,
+                [action.pollId]: action.poll
+            }
+        };
+    }
+
     // Reducer triggered when an answer is received
     // The answer is added  to an existing poll
     case RECEIVE_ANSWER: {
         };
     }
 
-    case RETRACT_VOTE: {
-        const { pollId }: { pollId: string; } = action;
-
-        return {
-            ...state,
-            polls: {
-                ...state.polls,
-                [pollId]: {
-                    ...state.polls[pollId],
-                    showResults: false
-                }
-            }
-        };
-    }
-
     case RESET_NB_UNREAD_POLLS: {
         return {
             ...state,
         };
     }
 
+    case REMOVE_POLL: {
+        if (Object.keys(state.polls ?? {})?.length === 1) {
+            return {
+                ...state,
+                ...INITIAL_STATE
+            };
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { [action.pollId]: _removedPoll, ...newState } = state.polls;
+
+        return {
+            ...state,
+            polls: {
+                ...newState
+            }
+        };
+    }
+
     default:
         return state;
     }