Initial commit

src/bootstrap/hooks/useInitializeTourPrompt.ts

@@ -0,0 +1,49 @@
+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;