Show connected/disconnected messages

components/log/index.js

@@ -17,29 +17,43 @@ const { connect } = require('react-redux');
 
 const weakmapId = require('../../utils/weakmap-id');
 
+const { pulse: pulseActions } = require('../../actions');
+
+const actionTypeText = {
+	[pulseActions.ready]: 'Connected to PulseAudio',
+	[pulseActions.close]: 'Disconnected from PulseAudio',
+};
+
 class Log extends React.Component {
 	constructor(props) {
 		super(props);
 
 		this.state = {
-			removedErrors: [],
+			removedItems: [],
 		};
 	}
 
-	removeError(error) {
+	removeItem(item) {
 		this.setState({
-			removedErrors: takeLast(10, this.state.removedErrors.concat(weakmapId(error))),
+			removedItems: takeLast(10, this.state.removedItems.concat(weakmapId(item))),
 		});
 	}
 
-	shouldShowError(error) {
+	shouldShowItem(item) {
-		return !this.state.removedErrors.includes(weakmapId(error));
+		return !this.state.removedItems.includes(weakmapId(item));
+	}
+
+	itemText(item) {
+		if (item.type === 'error') {
+			return `${item.error.name}: ${item.error.message}`;
+		}
+		return actionTypeText[item.action] || item.action;
 	}
 
 	componentDidUpdate(prevProps) {
-		const newErrors = differenceWith((a, b) => a === b, this.props.log.errors, prevProps.log.errors);
+		const newItems = differenceWith((a, b) => a === b, this.props.log.items, prevProps.log.items);
-		newErrors.forEach(error => setTimeout(() => {
+		newItems.forEach(item => setTimeout(() => {
-			this.removeError(error);
+			this.removeItem(item);
 		}, this.props.itemLifetime));
 	}
 
@@ -51,12 +65,16 @@ class Log extends React.Component {
 			transitionEnterTimeout: 300,
 			transitionLeaveTimeout: 2000,
 		}, compose(
-			map(e => r.div({
+			map(item => r.div({
-				key: weakmapId(e),
+				key: weakmapId(item),
-				className: 'log-item-error',
+				classSet: {
-			}, `${e.name}: ${e.message}`)),
+					'log-item': true,
-			filter(e => this.shouldShowError(e)),
+					'log-item-error': item.type === 'error',
-		)(this.props.log.errors)));
+					'log-item-info': item.type === 'info',
+				},
+			}, this.itemText(item))),
+			filter(item => this.shouldShowItem(item)),
+		)(this.props.log.items)));
 	}
 }
 

reducers/pulse.js

@@ -26,9 +26,11 @@ const initialState = {
 	objects: fromPairs(map(({ key }) => [ key, {} ], things)),
 	infos: fromPairs(map(({ key }) => [ key, {} ], things)),
 
-	log: { errors: [] },
+	log: { items: [] },
 };
 
+const logMaxItems = 3;
+
 const reducer = combineReducers({
 	state: handleActions({
 		[pulse.ready]: always('ready'),
@@ -110,9 +112,20 @@ const reducer = combineReducers({
 	}, initialState.infos[key]) ], things))),
 
 	log: combineReducers({
-		errors: handleActions({
+		items: handleActions({
-			[pulse.error]: (state, { payload }) => takeLast(3, state.concat(payload)),
+			[pulse.error]: (state, { payload }) => takeLast(logMaxItems, state.concat({
-		}, initialState.log.errors),
+				type: 'error',
+				error: payload,
+			})),
+			[pulse.close]: (state, { type }) => takeLast(logMaxItems, state.concat({
+				type: 'info',
+				action: type,
+			})),
+			[pulse.ready]: (state, { type }) => takeLast(logMaxItems, state.concat({
+				type: 'info',
+				action: type,
+			})),
+		}, initialState.log.items),
 	}),
 });