From cb34114543108795bf349d955749e96f5382d2fd Mon Sep 17 00:00:00 2001 From: sylenien Date: Tue, 23 Aug 2022 12:40:28 +0200 Subject: [PATCH] fix(ui): clean up typings for mobx stores --- frontend/app/mstore/dashboardStore.ts | 92 +++-------------------- frontend/app/mstore/index.tsx | 8 +- frontend/app/mstore/metricStore.ts | 37 +-------- frontend/app/mstore/types/dashboard.ts | 33 +------- frontend/app/mstore/types/filter.ts | 19 +---- frontend/app/mstore/types/funnel.ts | 15 +--- frontend/app/mstore/types/role.ts | 13 +--- frontend/app/mstore/types/session.ts | 20 +---- frontend/app/mstore/types/user.ts | 23 +----- frontend/app/mstore/types/widget.ts | 52 +------------ frontend/app/services/DashboardService.ts | 33 ++------ frontend/app/services/FunnelService.ts | 18 +---- frontend/app/services/MetricService.ts | 25 ++---- frontend/app/services/index.ts | 14 ++-- frontend/app/styles/colors-autogen.css | 4 + 15 files changed, 54 insertions(+), 352 deletions(-) diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts index 3f77bace4..c99d48ecd 100644 --- a/frontend/app/mstore/dashboardStore.ts +++ b/frontend/app/mstore/dashboardStore.ts @@ -2,8 +2,8 @@ import { makeAutoObservable, runInAction, } from "mobx"; -import Dashboard, { IDashboard } from "./types/dashboard"; -import Widget, { IWidget } from "./types/widget"; +import Dashboard from "./types/dashboard"; +import Widget from "./types/widget"; import { dashboardService, metricService } from "App/services"; import { toast } from "react-toastify"; import Period, { @@ -11,96 +11,24 @@ import Period, { LAST_7_DAYS, } from "Types/app/period"; import { getChartFormatter } from "Types/dashboard/helper"; -import Filter, { IFilter } from "./types/filter"; +import Filter from "./types/filter"; import Funnel from "./types/funnel"; import Session from "./types/session"; import Error from "./types/error"; import { FilterKey } from "Types/filter/filterType"; -export interface IDashboardStore { - dashboards: IDashboard[]; - selectedDashboard: IDashboard | null; - dashboardInstance: IDashboard; - selectedWidgets: IWidget[]; - startTimestamp: number; - endTimestamp: number; - period: Period; - drillDownFilter: IFilter; - drillDownPeriod: Period; - - siteId: any; - currentWidget: Widget; - widgetCategories: any[]; - widgets: Widget[]; - metricsPage: number; - metricsPageSize: number; - metricsSearch: string; - - isLoading: boolean; - loadingTemplates: boolean; - isSaving: boolean; - isDeleting: boolean; - fetchingDashboard: boolean; - sessionsLoading: boolean; - - showAlertModal: boolean; - - page: number - pageSize: number - dashboardsSearch: string - sort: any - - selectWidgetsByCategory: (category: string) => void; - toggleAllSelectedWidgets: (isSelected: boolean) => void; - removeSelectedWidgetByCategory(category: Record): void; - toggleWidgetSelection(widget: IWidget): void; - - initDashboard(dashboard?: IDashboard): void; - updateKey(key: string, value: any): void; - resetCurrentWidget(): void; - editWidget(widget: any): void; - fetchList(): Promise; - fetch(dashboardId: string): Promise; - save(dashboard: IDashboard): Promise; - deleteDashboard(dashboard: IDashboard): Promise; - toJson(): void; - fromJson(json: any): void; - addDashboard(dashboard: IDashboard): void; - removeDashboard(dashboard: IDashboard): void; - getDashboard(dashboardId: string): IDashboard | null; - getDashboardCount(): void; - updateDashboard(dashboard: IDashboard): void; - selectDashboardById(dashboardId: string): void; - getDashboardById(dashboardId: string): boolean; - setSiteId(siteId: any): void; - - saveMetric(metric: IWidget, dashboardId?: string): Promise; - fetchTemplates(hardRefresh: boolean): Promise; - deleteDashboardWidget(dashboardId: string, widgetId: string): Promise; - addWidgetToDashboard(dashboard: IDashboard, metricIds: any): Promise; - setDrillDownPeriod(period: any): void; - - fetchMetricChartData( - metric: IWidget, - data: any, - isWidget: boolean, - period: Period - ): Promise; - setPeriod(period: any): void; -} -export default class DashboardStore implements IDashboardStore { +export default class DashboardStore { siteId: any = null; - // Dashbaord / Widgets dashboards: Dashboard[] = []; selectedDashboard: Dashboard | null = null; dashboardInstance: Dashboard = new Dashboard(); - selectedWidgets: IWidget[] = []; + selectedWidgets: Widget[] = []; currentWidget: Widget = new Widget(); widgetCategories: any[] = []; widgets: Widget[] = []; - period: Period = Period({ rangeName: LAST_24_HOURS }); + period: Record = Period({ rangeName: LAST_24_HOURS }); drillDownFilter: Filter = new Filter(); - drillDownPeriod: Period = Period({ rangeName: LAST_7_DAYS }); + drillDownPeriod: Record = Period({ rangeName: LAST_7_DAYS }); startTimestamp: number = 0; endTimestamp: number = 0; @@ -341,7 +269,7 @@ export default class DashboardStore implements IDashboardStore { ); } - getDashboard(dashboardId: string): IDashboard | null { + getDashboard(dashboardId: string): Dashboard | null { return ( this.dashboards.find((d) => d.dashboardId === dashboardId) || null ); @@ -389,7 +317,7 @@ export default class DashboardStore implements IDashboardStore { this.siteId = siteId; }; - fetchTemplates(hardRefresh): Promise { + fetchTemplates(hardRefresh: boolean): Promise { this.loadingTemplates = true return new Promise((resolve, reject) => { if (this.widgetCategories.length > 0 && !hardRefresh) { @@ -474,7 +402,7 @@ export default class DashboardStore implements IDashboardStore { metric: IWidget, data: any, isWidget: boolean = false, - period: Period + period: Record ): Promise { period = period.toTimestamps(); const params = { ...period, ...data, key: metric.predefinedKey }; diff --git a/frontend/app/mstore/index.tsx b/frontend/app/mstore/index.tsx index 0d7c5ce5d..26533ee4f 100644 --- a/frontend/app/mstore/index.tsx +++ b/frontend/app/mstore/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import DashboardStore, { IDashboardStore } from './dashboardStore'; -import MetricStore, { IMetricStore } from './metricStore'; +import DashboardStore from './dashboardStore'; +import MetricStore from './metricStore'; import UserStore from './userStore'; import RoleStore from './roleStore'; import APIClient from 'App/api_client'; @@ -13,8 +13,8 @@ import ErrorStore from './errorStore'; import SessionStore from './sessionStore'; export class RootStore { - dashboardStore: IDashboardStore; - metricStore: IMetricStore; + dashboardStore: DashboardStore; + metricStore: MetricStore; funnelStore: FunnelStore; settingsStore: SettingsStore; userStore: UserStore; diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts index 6a8a9f63a..5551d587b 100644 --- a/frontend/app/mstore/metricStore.ts +++ b/frontend/app/mstore/metricStore.ts @@ -4,42 +4,7 @@ import { metricService, errorService } from "App/services"; import { toast } from 'react-toastify'; import Error from "./types/error"; -export interface IMetricStore { - paginatedList: any; - - isLoading: boolean - isSaving: boolean - - metrics: IWidget[] - instance: IWidget - - page: number - pageSize: number - metricsSearch: string - sort: any - - sessionsPage: number - sessionsPageSize: number - - // State Actions - init(metric?: IWidget|null): void - updateKey(key: string, value: any): void - merge(object: any): void - reset(meitricId: string): void - addToList(metric: IWidget): void - updateInList(metric: IWidget): void - findById(metricId: string): void - removeById(metricId: string): void - fetchError(errorId: string): Promise - - // API - save(metric: IWidget, dashboardId?: string): Promise - fetchList(): void - fetch(metricId: string, period?: any): Promise - delete(metric: IWidget): Promise -} - -export default class MetricStore implements IMetricStore { +export default class MetricStore { isLoading: boolean = false isSaving: boolean = false diff --git a/frontend/app/mstore/types/dashboard.ts b/frontend/app/mstore/types/dashboard.ts index 440303d4c..cb631ad9c 100644 --- a/frontend/app/mstore/types/dashboard.ts +++ b/frontend/app/mstore/types/dashboard.ts @@ -4,36 +4,7 @@ import { dashboardService } from "App/services" import { toast } from 'react-toastify'; import { DateTime } from 'luxon'; -export interface IDashboard { - dashboardId: any - name: string - description: string - isPublic: boolean - widgets: IWidget[] - metrics: any[] - isValid: boolean - currentWidget: IWidget - config: any - createdAt: Date - - update(data: any): void - toJson(): any - fromJson(json: any): void - validate(): void - addWidget(widget: IWidget): void - removeWidget(widgetId: string): void - updateWidget(widget: IWidget): void - getWidget(widgetId: string): void - getWidgetIndex(widgetId: string): IWidget - getWidgetByIndex(index: number): void - getWidgetCount(): void - getWidgetIndexByWidgetId(widgetId: string): void - swapWidgetPosition(positionA: number, positionB: number): Promise - sortWidgets(): void - exists(): boolean - toggleMetrics(metricId: string): void -} -export default class Dashboard implements IDashboard { +export default class Dashboard { public static get ID_KEY():string { return "dashboardId" } dashboardId: any = undefined name: string = "Untitled Dashboard" @@ -121,7 +92,7 @@ export default class Dashboard implements IDashboard { return this.widgets.findIndex(w => w.widgetId === widgetId) } - swapWidgetPosition(positionA, positionB): Promise { + swapWidgetPosition(positionA: number, positionB: number): Promise { const widgetA = this.widgets[positionA] const widgetB = this.widgets[positionB] this.widgets[positionA] = widgetB diff --git a/frontend/app/mstore/types/filter.ts b/frontend/app/mstore/types/filter.ts index 8d6576909..549a0ad29 100644 --- a/frontend/app/mstore/types/filter.ts +++ b/frontend/app/mstore/types/filter.ts @@ -1,24 +1,7 @@ import { makeAutoObservable, runInAction, observable, action } from "mobx" import FilterItem from "./filterItem" -export interface IFilter { - filterId: string - name: string - filters: FilterItem[] - eventsOrder: string - startTimestamp: number - endTimestamp: number - - merge: (filter: any) => void - addFilter: (filter: FilterItem) => void - updateFilter: (index:number, filter: any) => void - updateKey: (key: any, value: any) => void - removeFilter: (index: number) => void - fromJson: (json: any) => void - toJson: () => any - toJsonDrilldown: () => any -} -export default class Filter implements IFilter { +export default class Filter { public static get ID_KEY():string { return "filterId" } filterId: string = '' name: string = '' diff --git a/frontend/app/mstore/types/funnel.ts b/frontend/app/mstore/types/funnel.ts index 3678f43d1..1b9cf9a71 100644 --- a/frontend/app/mstore/types/funnel.ts +++ b/frontend/app/mstore/types/funnel.ts @@ -1,17 +1,6 @@ import FunnelStage from './funnelStage' -export interface IFunnel { - affectedUsers: number; - totalConversions: number; - totalConversionsPercentage: number; - conversionImpact: number - lostConversions: number - lostConversionsPercentage: number - isPublic: boolean - fromJSON: (json: any) => void -} - -export default class Funnel implements IFunnel { +export default class Funnel { affectedUsers: number = 0 totalConversions: number = 0 conversionImpact: number = 0 @@ -48,4 +37,4 @@ export default class Funnel implements IFunnel { return this } -} \ No newline at end of file +} diff --git a/frontend/app/mstore/types/role.ts b/frontend/app/mstore/types/role.ts index 5d8da871a..041648192 100644 --- a/frontend/app/mstore/types/role.ts +++ b/frontend/app/mstore/types/role.ts @@ -1,16 +1,7 @@ import { makeAutoObservable, observable, runInAction } from "mobx"; -export interface IRole { - roleId: string; - name: string; - description: string; - isProtected: boolean; - fromJson(json: any); - toJson(): any; -} - -export default class Role implements IRole { +export default class Role { roleId: string = ''; name: string = ''; description: string = ''; @@ -42,4 +33,4 @@ export default class Role implements IRole { description: this.description, } } -} \ No newline at end of file +} diff --git a/frontend/app/mstore/types/session.ts b/frontend/app/mstore/types/session.ts index 337e7009b..12b031d8a 100644 --- a/frontend/app/mstore/types/session.ts +++ b/frontend/app/mstore/types/session.ts @@ -14,23 +14,7 @@ function hashString(s: string): number { return hash; } -export interface ISession { - sessionId: string - viewed: boolean - duration: number - metadata: any, - startedAt: number - userBrowser: string - userOs: string - userId: string - userDeviceType: string - userCountry: string - eventsCount: number - userNumericHash: number - userDisplayName: string -} - -export default class Session implements ISession { +export default class Session { sessionId: string = ""; viewed: boolean = false duration: number = 0 @@ -76,4 +60,4 @@ export default class Session implements ISession { }) return this } -} \ No newline at end of file +} diff --git a/frontend/app/mstore/types/user.ts b/frontend/app/mstore/types/user.ts index 3c005f0e6..9b5a06b43 100644 --- a/frontend/app/mstore/types/user.ts +++ b/frontend/app/mstore/types/user.ts @@ -2,26 +2,7 @@ import { runInAction, makeAutoObservable, observable } from 'mobx' import { DateTime } from 'luxon'; import { validateEmail, validateName } from 'App/validate'; -export interface IUser { - userId: string - email: string - createdAt: string - isAdmin: boolean - isSuperAdmin: boolean - isJoined: boolean - isExpiredInvite: boolean - roleId: string - roleName: string - invitationLink: string - - - updateKey(key: string, value: any): void - fromJson(json: any): IUser - toJson(): any - toSave(): any -} - -export default class User implements IUser { +export default class User { userId: string = ''; name: string = ''; email: string = ''; @@ -102,4 +83,4 @@ export default class User implements IUser { exists() { return !!this.userId; } -} \ No newline at end of file +} diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts index 3d824c68f..d0a50800f 100644 --- a/frontend/app/mstore/types/widget.ts +++ b/frontend/app/mstore/types/widget.ts @@ -8,55 +8,7 @@ import { issueOptions } from 'App/constants/filterOptions'; import { FilterKey } from 'Types/filter/filterType'; import Period, { LAST_24_HOURS, LAST_30_DAYS } from 'Types/app/period'; -export interface IWidget { - metricId: any - widgetId: any - name: string - metricType: string - metricOf: string - metricValue: string - metricFormat: string - viewType: string - series: FilterSeries[] - sessions: [] - isPublic: boolean - owner: string - lastModified: Date - dashboards: any[] - dashboardIds: any[] - config: any - - sessionsLoading: boolean - - position: number - data: any - isLoading: boolean - isValid: boolean - dashboardId: any - colSpan: number - predefinedKey: string - - page: number - limit: number - params: any - period: any - hasChanged: boolean - - updateKey(key: string, value: any): void - removeSeries(index: number): void - addSeries(): void - fromJson(json: any): void - toJsonDrilldown(): void - toJson(): any - validate(): void - update(data: any): void - exists(): boolean - toWidget(): any - setData(data: any): void - fetchSessions(metricId: any, filter: any): Promise - setPeriod(period: any): void -} -export default class Widget implements IWidget { +export default class Widget { public static get ID_KEY():string { return "metricId" } metricId: any = undefined widgetId: any = undefined @@ -79,7 +31,7 @@ export default class Widget implements IWidget { limit: number = 5 params: any = { density: 70 } - period: any = Period({ rangeName: LAST_24_HOURS }) // temp value in detail view + period: Record = Period({ rangeName: LAST_24_HOURS }) // temp value in detail view hasChanged: boolean = false sessionsLoading: boolean = false diff --git a/frontend/app/services/DashboardService.ts b/frontend/app/services/DashboardService.ts index 311830387..4c16c4e76 100644 --- a/frontend/app/services/DashboardService.ts +++ b/frontend/app/services/DashboardService.ts @@ -1,27 +1,8 @@ -import { IDashboard } from "App/mstore/types/dashboard"; +import Dashboard from "App/mstore/types/dashboard"; import APIClient from 'App/api_client'; -import { IWidget } from "App/mstore/types/widget"; +import Widget from "App/mstore/types/widget"; -export interface IDashboardService { - initClient(client?: APIClient) - getWidgets(dashboardId: string): Promise - - getDashboards(): Promise - getDashboard(dashboardId: string): Promise - - saveDashboard(dashboard: IDashboard): Promise - deleteDashboard(dashboardId: string): Promise - - saveMetric(metric: IWidget, dashboardId?: string): Promise - - addWidget(dashboard: IDashboard, metricIds: []): Promise - saveWidget(dashboardId: string, widget: IWidget): Promise - deleteWidget(dashboardId: string, widgetId: string): Promise - -} - - -export default class DashboardService implements IDashboardService { +export default class DashboardService { private client: APIClient; constructor(client?: APIClient) { @@ -70,7 +51,7 @@ export default class DashboardService implements IDashboardService { * @param dashboard Required * @returns {Promise} */ - saveDashboard(dashboard: IDashboard): Promise { + saveDashboard(dashboard: Dashboard): Promise { const data = dashboard.toJson(); if (dashboard.dashboardId) { return this.client.put(`/dashboards/${dashboard.dashboardId}`, data) @@ -89,7 +70,7 @@ export default class DashboardService implements IDashboardService { * @param metricIds * @returns */ - addWidget(dashboard: IDashboard, metricIds: any): Promise { + addWidget(dashboard: Dashboard, metricIds: any): Promise { const data = dashboard.toJson() data.metrics = metricIds return this.client.put(`/dashboards/${dashboard.dashboardId}`, data) @@ -114,7 +95,7 @@ export default class DashboardService implements IDashboardService { * @param dashboardId Optional * @returns {Promise} */ - saveMetric(metric: IWidget, dashboardId?: string): Promise { + saveMetric(metric: Widget, dashboardId?: string): Promise { const data = metric.toJson(); const path = dashboardId ? `/dashboards/${dashboardId}/metrics` : '/metrics'; if (metric.widgetId) { @@ -140,7 +121,7 @@ export default class DashboardService implements IDashboardService { * @param widget Required * @returns {Promise} */ - saveWidget(dashboardId: string, widget: IWidget): Promise { + saveWidget(dashboardId: string, widget: Widget): Promise { if (widget.widgetId) { return this.client.put(`/dashboards/${dashboardId}/widgets/${widget.widgetId}`, widget.toWidget()) .then(response => response.json()) diff --git a/frontend/app/services/FunnelService.ts b/frontend/app/services/FunnelService.ts index 676d7fb3f..7387c0aab 100644 --- a/frontend/app/services/FunnelService.ts +++ b/frontend/app/services/FunnelService.ts @@ -1,19 +1,7 @@ -import { IFunnel } from "App/mstore/types/funnel" +import IFunnel from "App/mstore/types/funnel" import APIClient from 'App/api_client'; -export interface IFunnelService { - initClient(client?: APIClient) - all(): Promise - one(funnelId: string): Promise - save(funnel: IFunnel): Promise - delete(funnelId: string): Promise - - fetchInsights(funnelId: string, payload: any): Promise - fetchIssues(funnelId?: string, payload?: any): Promise - fetchIssue(funnelId: string, issueId: string): Promise -} - -export default class FunnelService implements IFunnelService { +export default class FunnelService { private client: APIClient; constructor(client?: APIClient) { @@ -62,4 +50,4 @@ export default class FunnelService implements IFunnelService { .then(response => response.json()) .then(response => response.data || {}); } -} \ No newline at end of file +} diff --git a/frontend/app/services/MetricService.ts b/frontend/app/services/MetricService.ts index 991418c62..a5734aff0 100644 --- a/frontend/app/services/MetricService.ts +++ b/frontend/app/services/MetricService.ts @@ -1,23 +1,8 @@ -import Widget, { IWidget } from "App/mstore/types/widget"; +import Widget from "App/mstore/types/widget"; import APIClient from 'App/api_client'; -import { IFilter } from "App/mstore/types/filter"; import { fetchErrorCheck } from "App/utils"; -export interface IMetricService { - initClient(client?: APIClient): void; - - getMetrics(): Promise; - getMetric(metricId: string): Promise; - saveMetric(metric: IWidget, dashboardId?: string): Promise; - deleteMetric(metricId: string): Promise; - - getTemplates(): Promise; - getMetricChartData(metric: IWidget, data: any, isWidget: boolean): Promise; - fetchSessions(metricId: string, filter: any): Promise - fetchIssues(filter: string): Promise; -} - -export default class MetricService implements IMetricService { +export default class MetricService { private client: APIClient; constructor(client?: APIClient) { @@ -54,7 +39,7 @@ export default class MetricService implements IMetricService { * @param metric * @returns */ - saveMetric(metric: IWidget, dashboardId?: string): Promise { + saveMetric(metric: Widget, dashboardId?: string): Promise { const data = metric.toJson() const isCreating = !data[Widget.ID_KEY]; const method = isCreating ? 'post' : 'put'; @@ -86,7 +71,7 @@ export default class MetricService implements IMetricService { .then((response: { data: any; }) => response.data || []); } - getMetricChartData(metric: IWidget, data: any, isWidget: boolean = false): Promise { + getMetricChartData(metric: Widget, data: any, isWidget: boolean = false): Promise { const path = isWidget ? `/metrics/${metric.metricId}/chart` : `/metrics/try`; return this.client.post(path, data) .then(fetchErrorCheck) @@ -115,4 +100,4 @@ export default class MetricService implements IMetricService { .then((response: { json: () => any; }) => response.json()) .then((response: { data: any; }) => response.data || {}); } -} \ No newline at end of file +} diff --git a/frontend/app/services/index.ts b/frontend/app/services/index.ts index 78328b6ff..add371643 100644 --- a/frontend/app/services/index.ts +++ b/frontend/app/services/index.ts @@ -6,10 +6,10 @@ import UserService from "./UserService"; import AuditService from './AuditService'; import ErrorService from "./ErrorService"; -export const dashboardService: IDashboardService = new DashboardService(); -export const metricService: IMetricService = new MetricService(); -export const sessionService: SessionSerivce = new SessionSerivce(); -export const userService: UserService = new UserService(); -export const funnelService: IFunnelService = new FunnelService(); -export const auditService: AuditService = new AuditService(); -export const errorService: ErrorService = new ErrorService(); +export const dashboardService = new DashboardService(); +export const metricService = new MetricService(); +export const sessionService = new SessionSerivce(); +export const userService = new UserService(); +export const funnelService = new FunnelService(); +export const auditService = new AuditService(); +export const errorService = new ErrorService(); diff --git a/frontend/app/styles/colors-autogen.css b/frontend/app/styles/colors-autogen.css index d1fd5a0a9..42ae94dab 100644 --- a/frontend/app/styles/colors-autogen.css +++ b/frontend/app/styles/colors-autogen.css @@ -35,6 +35,7 @@ .fill-light-blue-bg { fill: $light-blue-bg } .fill-white { fill: $white } .fill-borderColor { fill: $borderColor } +.fill-figmaColors { fill: $figmaColors } /* color */ .color-main { color: $main } @@ -71,6 +72,7 @@ .color-light-blue-bg { color: $light-blue-bg } .color-white { color: $white } .color-borderColor { color: $borderColor } +.color-figmaColors { color: $figmaColors } /* hover color */ .hover-main:hover { color: $main } @@ -107,6 +109,7 @@ .hover-light-blue-bg:hover { color: $light-blue-bg } .hover-white:hover { color: $white } .hover-borderColor:hover { color: $borderColor } +.hover-figmaColors:hover { color: $figmaColors } .border-main { border-color: $main } .border-gray-light-shade { border-color: $gray-light-shade } @@ -142,3 +145,4 @@ .border-light-blue-bg { border-color: $light-blue-bg } .border-white { border-color: $white } .border-borderColor { border-color: $borderColor } +.border-figmaColors { border-color: $figmaColors }