Add button to remove conference from recents list

Fixes #313, #283, #322, #127, #334
This commit is contained in:
freddytuxworth 2020-06-18 13:46:47 +01:00 committed by GitHub
parent 044c864cde
commit 111a1ef884
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 77 additions and 2 deletions

View File

@ -0,0 +1,10 @@
/**
* The type of (redux) action that is dispatched when a conference is removed from the recents list.
*
* @type {
* type: CONFERENCE_REMOVED,
* conference: Object
* }
*/
export const CONFERENCE_REMOVED = Symbol('CONFERENCE_REMOVED');

View File

@ -0,0 +1,19 @@
// @flow
import { CONFERENCE_REMOVED } from './actionTypes';
/**
* Notifies that conference is removed from recents list.
*
* @param {Object} conference - Conference Details.
* @returns {{
* type: CONFERENCE_REMOVED,
* conference: Object
* }}
*/
export function conferenceRemoved(conference: Object) {
return {
type: CONFERENCE_REMOVED,
conference
};
}

View File

@ -6,6 +6,7 @@ import { connect } from 'react-redux';
import type { Dispatch } from 'redux';
import { push } from 'react-router-redux';
import { conferenceRemoved } from '../actions';
import {
ConferenceCard,
ConferenceTitle,
@ -13,6 +14,8 @@ import {
TruncatedText
} from '../styled';
import type { RecentListItem } from '../types';
import Button from '@atlaskit/button';
import CrossIcon from '@atlaskit/icon/glyph/cross';
type Props = {
@ -58,6 +61,20 @@ class RecentList extends Component<Props, *> {
return () => this.props.dispatch(push('/conference', conference));
}
/**
* Creates a handler for removing a conference from the recents list.
*
* @param {RecentListItem} conference - Conference Details.
* @returns {void}
*/
_onRemoveConference(conference: RecentListItem) {
return e => {
this.props.dispatch(conferenceRemoved(conference));
e.stopPropagation();
};
}
/**
* Renders the conference card.
*
@ -81,6 +98,11 @@ class RecentList extends Component<Props, *> {
<TruncatedText>
{ this._renderDuration(conference) }
</TruncatedText>
<Button
appearance = 'subtle'
iconBefore = { <CrossIcon primaryColor = 'white' /> }
onClick = { this._onRemoveConference(conference) }
spacing = 'none' />
</ConferenceCard>
);
}

View File

@ -1,6 +1,7 @@
// @flow
import { CONFERENCE_ENDED, CONFERENCE_JOINED } from '../conference';
import { CONFERENCE_REMOVED } from './actionTypes';
import type { RecentListItem } from './types';
@ -34,6 +35,12 @@ export default (state: State = DEFAULT_STATE, action: Object) => {
recentList: _insertConference(state.recentList, action.conference)
};
case CONFERENCE_REMOVED:
return {
...state,
recentList: _removeConference(state.recentList, action.conference)
};
default:
return state;
}
@ -65,6 +72,21 @@ function _insertConference(
return newRecentList;
}
/**
* Remove a conference from the recent list array.
*
* @param {Array<RecentListItem>} recentList - Previous recent list array.
* @param {RecentListItem} toRemove - Conference to be removed.
* @returns {Array<RecentListItem>} - Updated recent list array.
*/
function _removeConference(
recentList: Array<RecentListItem>,
toRemove: RecentListItem
): Array<RecentListItem> {
return recentList.filter(
(conference: RecentListItem) => conference !== toRemove);
}
/**
* Update the EndTime of the last conference.
*

View File

@ -6,8 +6,10 @@ export default styled.div`
background: #1754A9;
border-radius: 0.5em;
color: white;
display: flex;
flex-direction: column;
display: grid;
grid-template-rows: repeat(4, auto);
grid-template-columns: 1fr auto;
grid-auto-flow: column;
font-size: 0.9em;
margin: 0.5em;
padding: 1em;