blog-post-first-component.js

define(function(require) {
  var _                 = require('lodash');
  var app               = require('app');
  var enums             = require('utils/enums');
  var auth              = require('services/auth');
  var router            = require('services/router');

  var getAccount = require('flux/getters/account');

  return {
    data: {
      account: null,
      activeProjects: [],
      experimentsMessage: '',
      /**
       * @var {Array.<{
       *  id: <number>,
       *  can_edit: <boolean>,
       *  description: <string>,
       *  has_started: <boolean>
       * }>}
       */
      experiments: [],
    },
    computed: {
      dashboardLink: function() {
        if (this.currentProjectId) {
          return router.dashboardTab(this.currentProjectId);
        }
        return router.dashboard();
      },
      /**
       * Determines whether the currently active account has an active web projects.
       * @returns {boolean}
       */
      hasActiveWebProject: function() {
        var filteredProjects = _.filter(this.activeProjects, function(project) {
          // An empty project_platforms list we treat as a web project (it just hasn't been migrated yet)
          return (
            project.project_platforms.length === 0 ||
            project.project_platforms.indexOf(enums.ProjectPlatformType.WEB) !== -1
          )
        });
        return filteredProjects.length > 0;
      },
      showSignInLink: function() {
        return window.location.pathname() !== router.signIn();
      },
      showDashboardLink: function() {
        return !this._isOnboarding() && window.location.pathname() !== router.dashboard();
      },
      isNewDashboard: function() {
        return window.location.pathname().indexOf('projects') !== -1;
      },
      showExperimentsDropdown: function() {
        return !this._isOnboarding() && !this.isNewDashboard;
      }
    },
    methods: {
      // expose logout functionality
      logout: auth.logout,
      /**
       * Takes an experiment and returns the edit url
       */
      editUrl: function(experiment) {
        return router.experimentEdit({
          experimentId: experiment.id
        });
      },
      dashboardUrl: function(account){
        return router.dashboard()
      },
      /**
       * Shows the dialogs/get-feedback component.
       */
      showGetFeedbackDialog: function() {
        var config = {
          component: 'dialogs/get-feedback'
        };
        app.$broadcast('showDialog', config);
      },
    },
    ready: function() {
      if (this.account.isSignedIn) {
        this._loadExperiments();
      }
      // Copy and modify the activeProjects property of optly/account.js so that we can keep track of
      // active projects in this component.
      this.activeProjects = _.map(_.keys(this.account.activeProjects), (function(project_id) {
        return {
          id: project_id,
          project_platforms: this.account.activeProjects[project_id].project_platforms
        }
      }).bind(this));

      // whenever account info changes reload experiments
      this.$watch('account', function(account) {
        if (flux.store('account').isSignedIn()) {
          this._loadExperiments();
        }
      });
      // when an experiment is saved update recent experiments
      this.$on('experimentSaved', this._loadExperiments);
      // when a project is archived
      this.$on('activeProjectsChanged', this._handleActiveProjectsChanged.bind(this));
    },
  }
})