50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
|
import { useContext, useEffect } from 'react';
|
||
|
|
import { useDispatch, useSelector } from 'react-redux';
|
||
|
|
import NotificationsActions from '../../providers/notifications/notifications.actions';
|
||
|
|
import { NotificationsDispatchContext } from '../../providers/notifications/notifications.provider';
|
||
|
|
import TourActions from '../../providers/tour/tour.actions';
|
||
|
|
import { TourDispatchContext } from '../../providers/tour/tour.provider';
|
||
|
|
import { internalPropertiesSet } from '../../redux/actions/internal-properties';
|
||
|
|
import State from '../../redux/state';
|
||
|
|
|
||
|
|
function useInitializeTourPrompt() {
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
const notificationsDispatch = useContext(NotificationsDispatchContext);
|
||
|
|
const tourDispatch = useContext(TourDispatchContext);
|
||
|
|
const hasShownTourPrompt = useSelector<State, boolean>(
|
||
|
|
(state) => state.internalProperties.HasShownTourPrompt.value,
|
||
|
|
);
|
||
|
|
|
||
|
|
useEffect(
|
||
|
|
() => {
|
||
|
|
if (!hasShownTourPrompt) {
|
||
|
|
notificationsDispatch({
|
||
|
|
type: NotificationsActions.Push,
|
||
|
|
payload: {
|
||
|
|
title: 'Welcome!',
|
||
|
|
body: 'WebSocket King is a client for developing, testing and debugging WebSocket connections. Would you like to learn the basics?',
|
||
|
|
actions: [
|
||
|
|
{
|
||
|
|
label: 'No thanks',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Take tour',
|
||
|
|
theme: 'primary',
|
||
|
|
onClick: () => tourDispatch!({
|
||
|
|
type: TourActions.Open,
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
});
|
||
|
|
dispatch(
|
||
|
|
internalPropertiesSet('HasShownTourPrompt', true),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[],
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default useInitializeTourPrompt;
|