openreplay/frontend/app/mstore/funnelStore.ts

import { makeAutoObservable, action } from 'mobx';
import { funnelService } from 'App/services';
import Period, { LAST_7_DAYS } from 'Types/app/period';
import Funnel, { IFunnel } from './types/funnel';
import Session from './types/session';
import FunnelIssue from './types/funnelIssue';

export default class FunnelStore {
  isLoading: boolean = false;

  isSaving: boolean = false;

  list: IFunnel[] = [];

  instance: IFunnel | null = null;

  period: Period = Period({ rangeName: LAST_7_DAYS });

  search: string = '';

  page: number = 1;

  pageSize: number = 10;

  issues: any[] = [];

  isLoadingIssues: boolean = false;

  issuesFilter: any = [];

  issueInstance: FunnelIssue | null = null;

  issuesSort = {
    sort: 'afectedUsers',
    order: 'desc',
  };

  constructor() {
    makeAutoObservable(this, {
      updateKey: action,
      fetchFunnels: action,
      fetchFunnel: action,
      saveFunnel: action,
      deleteFunnel: action,
    });
    this.issues = sampleIssues.map((i) => new FunnelIssue().fromJSON(i));
  }

  updateKey(key: string, value: any) {
    this[key] = value;
  }

  fetchFunnels(): Promise<any> {
    this.isLoading = true;
    return new Promise((resolve, reject) => {
      funnelService
        .all()
        .then((response) => {
          this.list = response;
          resolve(response);
        })
        .catch((error) => {
          reject(error);
        })
        .finally(() => {
          this.isLoading = false;
        });
    });
  }

  fetchFunnel(funnelId: string): Promise<any> {
    this.isLoading = true;
    return new Promise((resolve, reject) => {
      funnelService
        .one(funnelId)
        .then((response) => {
          const _funnel = new Funnel().fromJSON(response);
          this.instance = _funnel;
          resolve(_funnel);
        })
        .catch((error) => {
          reject(error);
        })
        .finally(() => {
          this.isLoading = false;
        });
    });
  }

  saveFunnel(funnel: IFunnel): Promise<any> {
    this.isSaving = true;
    const wasCreating = !funnel.funnelId;
    return new Promise((resolve, reject) => {
      funnelService
        .save(funnel)
        .then((response) => {
          const _funnel = new Funnel().fromJSON(response);
          if (wasCreating) {
            this.list.push(_funnel);
          }
          resolve(_funnel);
        })
        .catch((error) => {
          reject(error);
        })
        .finally(() => {
          this.isSaving = false;
        });
    });
  }

  deleteFunnel(funnelId: string): Promise<any> {
    this.isSaving = true;
    return new Promise((resolve, reject) => {
      funnelService
        .delete(funnelId)
        .then((response) => {
          this.list = this.list.filter(
            (funnel) => funnel.funnelId !== funnelId,
          );
          resolve(funnelId);
        })
        .catch((error) => {
          reject(error);
        })
        .finally(() => {
          this.isSaving = false;
        });
    });
  }

  fetchIssues(funnelId?: string): Promise<any> {
    this.isLoadingIssues = true;
    return new Promise((resolve, reject) => {
      funnelService
        .fetchIssues(funnelId, this.period.toTimestamps())
        .then((response) => {
          this.issues = response.map((i) => new FunnelIssue().fromJSON(i));
          resolve(this.issues);
        })
        .catch((error) => {
          reject(error);
        })
        .finally(() => {
          this.isLoadingIssues = false;
        });
    });
  }

  fetchIssue(funnelId: string, issueId: string): Promise<any> {
    this.isLoadingIssues = true;
    return new Promise((resolve, reject) => {
      // funnelService.fetchIssue(funnelId, issueId)
      funnelService
        .fetchIssue('143', '91515f9118ed803291f87133e2cb49a16ea')
        .then((response) => {
          this.issueInstance = new FunnelIssue().fromJSON(response.issue);
          this.issueInstance.sessions = response.sessions.sessions.map((i) =>
            new Session().fromJson(i),
          );
          resolve(this.issueInstance);
        })
        .catch((error) => {
          reject(error);
        })
        .finally(() => {
          this.isLoadingIssues = false;
        });
    });
  }
}

const sampleIssues = [
  {
    type: 'missing_resource',
    title: 'Missing Image',
    affectedSessions: 1,
    unaffectedSessions: 59,
    lostConversions: 0,
    affectedUsers: 1,
    conversionImpact: 11,
    contextString: 'https://openreplay.com/images/assist-story-4.svg',
    issueId: '9157d556854f17cc25df3510bf7a980fd4d',
  },
  {
    type: 'click_rage',
    title: 'Click Rage',
    affectedSessions: 1,
    unaffectedSessions: 59,
    lostConversions: 0,
    affectedUsers: 1,
    conversionImpact: 11,
    contextString:
      'Back More Info 0:40 78:02 Pause Back Skip to Issue 1x Skip Inactivity Network Fetch 6 Redux 2 Consol',
    issueId: '91502c2c13f69c09a68503c61b0fd4461ca',
  },
  {
    type: 'missing_resource',
    title: 'Missing Image',
    affectedSessions: 1,
    unaffectedSessions: 59,
    lostConversions: 0,
    affectedUsers: 1,
    conversionImpact: 11,
    contextString: 'https://openreplay.com/images/icn-slack.svg',
    issueId: '915b1b3a25c5f1127ec762235be7f896c3a',
  },
  {
    type: 'dead_click',
    title: 'Dead Click',
    affectedSessions: 1,
    unaffectedSessions: 59,
    lostConversions: 0,
    affectedUsers: 1,
    conversionImpact: 11,
    contextString: 'py-1 px-2 bg-white border border-gray-light rounded w-16',
    issueId: '9159e30220bb6a6a31afcaa1979a0c7d69c',
  },
  {
    type: 'dead_click',
    title: 'Dead Click',
    affectedSessions: 4,
    unaffectedSessions: 56,
    lostConversions: 2,
    affectedUsers: 2,
    conversionImpact: 61,
    contextString:
      'OpenReplay App New Project SESSIONS ASSIST ERRORS DASHBOARDS Billing Details Announcements There are',
    issueId: '91515f9118ed803291f87133e2cb49a16ea',
  },
  {
    type: 'dead_click',
    title: 'Dead Click',
    affectedSessions: 2,
    unaffectedSessions: 58,
    lostConversions: 0,
    affectedUsers: 1,
    conversionImpact: 20,
    contextString: 'Type to search',
    issueId: '915832d68d21f03f83af1bfc758a1dda50b',
  },
  {
    type: 'missing_resource',
    title: 'Missing Image',
    affectedSessions: 1,
    unaffectedSessions: 59,
    lostConversions: 0,
    affectedUsers: 1,
    conversionImpact: 11,
    contextString: 'https://openreplay.com/images/icn-linkedin.svg',
    issueId: '91506bb929c2cb3679f8b01c228d8a0b5c8',
  },
  {
    type: 'dead_click',
    title: 'Dead Click',
    affectedSessions: 3,
    unaffectedSessions: 57,
    lostConversions: 0,
    affectedUsers: 2,
    conversionImpact: 31,
    contextString:
      'Search sessions using any captured event (click, input, page, error...)',
    issueId: '9157be39a537e81243a2ff44ad74867941f',
  },
  {
    type: 'cpu',
    title: 'High CPU',
    affectedSessions: 1,
    unaffectedSessions: 59,
    lostConversions: 0,
    affectedUsers: 1,
    conversionImpact: 11,
    contextString: '',
    issueId: '915a68d6bb4448b5822836dbc797bafadf9',
  },
  {
    type: 'dead_click',
    title: 'Dead Click',
    affectedSessions: 1,
    unaffectedSessions: 59,
    lostConversions: 0,
    affectedUsers: 1,
    conversionImpact: 11,
    contextString:
      "Back More Info Report Issue This session's issues 10:35 83:19 Play Back Skip to Issue 4x Skip Inacti",
    issueId: '915b43e81f8da042f70ea47bd9ad14a3bb8',
  },
  {
    type: 'missing_resource',
    title: 'Missing Image',
    affectedSessions: 1,
    unaffectedSessions: 59,
    lostConversions: 0,
    affectedUsers: 1,
    conversionImpact: 11,
    contextString: 'https://openreplay.com/images/icn-git.svg',
    issueId: '915f7f277daa7a695d5bf9e233c43af7f02',
  },
  {
    type: 'click_rage',
    title: 'Click Rage',
    affectedSessions: 1,
    unaffectedSessions: 59,
    lostConversions: 0,
    affectedUsers: 1,
    conversionImpact: 11,
    contextString:
      'Back More Info 0:35 78:02 Pause Back Skip to Issue 1x Skip Inactivity Network Fetch 6 Redux 2 Consol',
    issueId: '915788d9976c9f80c6f599e3e5816f2c7be',
  },
  {
    type: 'missing_resource',
    title: 'Missing Image',
    affectedSessions: 1,
    unaffectedSessions: 59,
    lostConversions: 0,
    affectedUsers: 1,
    conversionImpact: 11,
    contextString: 'https://openreplay.com/images/icn-twitter.svg',
    issueId: '915ab993784a0432c39b4a4e9248dfe6acd',
  },
  {
    type: 'missing_resource',
    title: 'Missing Image',
    affectedSessions: 1,
    unaffectedSessions: 59,
    lostConversions: 0,
    affectedUsers: 1,
    conversionImpact: 11,
    contextString: 'https://openreplay.com/images/logo-open-replay.svg',
    issueId: '915ac8719c95392adb8b79d2d5eae1063b9',
  },
];