How to use @codesandbox/notifications - 10 common examples

export function showUserSurveyIfNeeded({ state, controller, api }) {
  if (state.get('user.sendSurvey')) {
    // Let the server know that we've seen the survey
    api.post('/users/survey-seen', {});

    notificationState.addNotification({
      title: 'Help improve CodeSandbox',
      message:
        "We'd love to hear your thoughts, it's 7 questions and will only take 2 minutes.",
      status: NotificationStatus.NOTICE,
      sticky: true,
      actions: {
        primary: [
          {
            label: 'Open Survey',
            run: () => {
              controller.getSignal('modalOpened')({
                modal: 'userSurvey',
              });
            },
          },
        ],
      },
    });
  }
}

export function showUserSurveyIfNeeded ({ state, controller, api }) {
  if (state.get('user.sendSurvey')) {
    // Let the server know that we've seen the survey
    api.post('/users/survey-seen', {})

    notificationState.addNotification({
      title: 'Help improve CodeSandbox',
      message:
        "We'd love to hear your thoughts, it's 7 questions and will only take 2 minutes.",
      status: NotificationStatus.NOTICE,
      sticky: true,
      actions: {
        primary: [
          {
            label: 'Open Survey',
            run: () => {
              controller.getSignal('modalOpened')({
                modal: 'userSurvey'
              })
            }
          }
        ]
      }
    })
  }
}

export const showUserSurveyIfNeeded: Action = ({ state, effects, actions }) => {
  if (state.user.sendSurvey) {
    // Let the server know that we've seen the survey
    effects.api.markSurveySeen();

    effects.notificationToast.add({
      title: 'Help improve CodeSandbox',
      message:
        "We'd love to hear your thoughts, it's 7 questions and will only take 2 minutes.",
      status: NotificationStatus.NOTICE,
      sticky: true,
      actions: {
        primary: [
          {
            label: 'Open Survey',
            run: () => {
              actions.modalOpened({
                modal: 'userSurvey',
              });
            },
          },
        ],
      },
    });
  }
};

run: () => {
        if (document.fullscreenElement) {
          document.exitFullscreen();
        } else {
          document.documentElement.requestFullscreen();

          this.addNotification({
            title: 'Fullscreen',
            message:
              'You are now in fullscreen mode. Press and hold ESC to exit',
            status: NotificationStatus.NOTICE,
            timeAlive: 5000,
          });

          if ('keyboard' in navigator) {
            // @ts-ignore - keyboard locking is experimental api
            navigator.keyboard.lock([
              'Escape',
              'KeyW',
              'KeyN',
              'KeyT',
              'ArrowLeft',
              'ArrowRight',
            ]);
          }
        }
      },

// TODO: What happening here? Is it not an array of users?
  // Check the running code and fix the type
  state.live.roomInfo.users = users as any;
  state.live.roomInfo.editorIds = data.editor_ids;
  state.live.roomInfo.ownerIds = data.owner_ids;

  if (data.joined_user_id === state.live.liveUserId) {
    return;
  }

  const user = data.users.find(u => u.id === data.joined_user_id);

  if (!state.live.notificationsHidden) {
    effects.notificationToast.add({
      message: `${user.username} joined the live session.`,
      status: NotificationStatus.NOTICE,
    });
  }
});

try {
      monaco.editor.defineTheme('CodeSandbox', {
        base: getBase(transformedTheme.type),
        inherit: true,
        colors: transformedTheme.colors,
        rules: transformedTheme.rules,
      });

      monaco.editor.setTheme('CodeSandbox');
    } catch (e) {
      console.error(e);

      notificationState.addNotification({
        message: `Problem initializing template in editor: ${e.message}`,
        status: NotificationStatus.ERROR,
      });
    }
  }
};

.then(text => {
      let theme;
      try {
        theme = parseTheme(text);
      } catch (e) {
        console.error(e);

        notificationState.addNotification({
          message: 'We had trouble loading the theme, error: \n' + e.message,
          status: NotificationStatus.ERROR,
        });
      }
      return theme;
    });
}

const findTheme = async (themeName, customTheme) => {
  if (customTheme) {
    try {
      return parseTheme(customTheme);
    } catch (e) {
      console.error(e);

      notificationState.addNotification({
        message:
          'We had trouble parsing your custom VSCode Theme, error: \n' +
          e.message,
        status: NotificationStatus.ERROR,
      });
    }
  }

  const foundTheme = themes.find(t => t.name === themeName);

  const fetchedTheme = await fetchTheme(foundTheme);

  return {
    ...fetchedTheme,
    type: (foundTheme && foundTheme.type) || fetchedTheme.type,
  };
};

path="/"
        render={({ location }) => {
          if (process.env.NODE_ENV === 'production') {
            routeDebugger(
              `Sending '${location.pathname + location.search}' to analytics.`
            );
            if (!DNT) {
              trackPageview();
            }
          }
          return null;
        }}
      />
      
      
        <content>
          </content>

},
    });
  } else if (
    error.message.startsWith(
      'You reached the limit of server sandboxes, we will increase the limit in the future. Please contact hello@codesandbox.io for more server sandboxes.'
    )
  ) {
    effects.analytics.track('Patron Server Sandbox Limit Reached', {
      errorMessage: error.message,
    });
  }

  effects.notificationToast.add({
    title: message,
    message: error.message,
    status: NotificationStatus.ERROR,
    ...(notificationActions.primary.length
      ? { actions: notificationActions }
      : {}),
  });
};