From 8e6eb8ac1bb2251598288fa955bb22e832c2a03d Mon Sep 17 00:00:00 2001 From: sylenien Date: Wed, 28 Dec 2022 11:55:04 +0100 Subject: [PATCH] change(ui): remove config(report) reducer, add mobx store --- frontend/app/components/Client/Client.js | 3 - .../Client/Notifications/Notifications.js | 50 --------- .../Client/Notifications/Notifications.tsx | 39 +++++++ frontend/app/duck/config.js | 61 ----------- frontend/app/duck/index.ts | 6 -- frontend/app/duck/member.js | 8 -- frontend/app/duck/target.js | 33 ------ frontend/app/duck/watchdogs.js | 101 ------------------ frontend/app/mstore/index.tsx | 5 + .../app/mstore/weeklyReportConfigStore.ts | 32 ++++++ frontend/app/services/BaseService.ts | 1 + frontend/app/services/ConfigService.ts | 17 +++ frontend/app/services/index.ts | 2 + 13 files changed, 96 insertions(+), 262 deletions(-) delete mode 100644 frontend/app/components/Client/Notifications/Notifications.js create mode 100644 frontend/app/components/Client/Notifications/Notifications.tsx delete mode 100644 frontend/app/duck/config.js delete mode 100644 frontend/app/duck/target.js delete mode 100644 frontend/app/duck/watchdogs.js create mode 100644 frontend/app/mstore/weeklyReportConfigStore.ts create mode 100644 frontend/app/services/ConfigService.ts diff --git a/frontend/app/components/Client/Client.js b/frontend/app/components/Client/Client.js index b2a6d8f7f..ab16c6b40 100644 --- a/frontend/app/components/Client/Client.js +++ b/frontend/app/components/Client/Client.js @@ -1,9 +1,7 @@ import React from 'react'; -import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; import { Switch, Route, Redirect } from 'react-router'; import { CLIENT_TABS, client as clientRoute } from 'App/routes'; -import { fetchList as fetchMemberList } from 'Duck/member'; import ProfileSettings from './ProfileSettings'; import Integrations from './Integrations'; @@ -18,7 +16,6 @@ import PreferencesMenu from './PreferencesMenu'; import Notifications from './Notifications'; import Roles from './Roles'; -@connect(null, { fetchMemberList, }) @withRouter export default class Client extends React.PureComponent { constructor(props){ diff --git a/frontend/app/components/Client/Notifications/Notifications.js b/frontend/app/components/Client/Notifications/Notifications.js deleted file mode 100644 index 88855dd45..000000000 --- a/frontend/app/components/Client/Notifications/Notifications.js +++ /dev/null @@ -1,50 +0,0 @@ -import React, { useEffect } from 'react'; -import cn from 'classnames'; -import stl from './notifications.module.css'; -import { Checkbox, Toggler } from 'UI'; -import { connect } from 'react-redux'; -import { withRequest } from 'HOCs'; -import { fetch as fetchConfig, edit as editConfig, save as saveConfig } from 'Duck/config'; -import withPageTitle from 'HOCs/withPageTitle'; - -function Notifications(props) { - const { config } = props; - - useEffect(() => { - props.fetchConfig(); - }, []); - - const onChange = () => { - const _config = { weeklyReport: !config.weeklyReport }; - props.editConfig(_config); - props.saveConfig(_config); - }; - - return ( -
-
{

{'Notifications'}

}
-
-
Weekly project summary
-
Receive wekly report for each project on email.
- - {/* */} - {/* */} -
-
- ); -} - -export default connect( - (state) => ({ - config: state.getIn(['config', 'options']), - }), - { fetchConfig, editConfig, saveConfig } -)(withPageTitle('Notifications - OpenReplay Preferences')(Notifications)); diff --git a/frontend/app/components/Client/Notifications/Notifications.tsx b/frontend/app/components/Client/Notifications/Notifications.tsx new file mode 100644 index 000000000..4a5d9a542 --- /dev/null +++ b/frontend/app/components/Client/Notifications/Notifications.tsx @@ -0,0 +1,39 @@ +import React, { useEffect } from 'react'; +import cn from 'classnames'; +import stl from './notifications.module.css'; +import { Toggler } from 'UI'; +import { useStore } from "App/mstore"; +import { observer } from 'mobx-react-lite' +import withPageTitle from 'HOCs/withPageTitle'; + +function Notifications() { + const { weeklyReportStore } = useStore() + + + useEffect(() => { + void weeklyReportStore.fetchReport() + }, []); + + const onChange = () => { + const newValue = !weeklyReportStore.weeklyReport + void weeklyReportStore.fetchEditReport(newValue) + }; + + return ( +
+
{

{'Notifications'}

}
+
+
Weekly project summary
+
Receive weekly report for each project on email.
+ +
+
+ ); +} + +export default withPageTitle('Notifications - OpenReplay Preferences')(observer(Notifications)) \ No newline at end of file diff --git a/frontend/app/duck/config.js b/frontend/app/duck/config.js deleted file mode 100644 index a445e3f50..000000000 --- a/frontend/app/duck/config.js +++ /dev/null @@ -1,61 +0,0 @@ -import { Map } from 'immutable'; -import { saveType, fetchType, editType } from './funcTools/crud/types'; -import { mergeReducers, success, array } from './funcTools/tools'; -import { createRequestReducer } from './funcTools/request'; - -const name = 'config' - -const FETCH = fetchType(name); -const SAVE = saveType(name); -const EDIT = editType(name); - -const FETCH_SUCCESS = success(FETCH); -const SAVE_SUCCESS = success(SAVE); - -const initialState = Map({ - options: { - weeklyReport: false - }, -}); - -const reducer = (state = initialState, action = {}) => { - switch(action.type) { - case FETCH_SUCCESS: - return state.set('options', action.data) - case SAVE_SUCCESS: - return state - case EDIT: - return state.set('options', action.config) - default: - return state; - } -} - -export const fetch = () => { - return { - types: array(FETCH), - call: client => client.get(`/config/weekly_report`), - } -} - -export const save = (config) => { - return { - types: array(SAVE), - call: client => client.post(`/config/weekly_report`, config), - } -} - -export const edit = (config) => { - return { - type: EDIT, - config - } -} - -export default mergeReducers( - reducer, - createRequestReducer({ - fetchRequest: FETCH, - saveRequest: SAVE, - }), -) \ No newline at end of file diff --git a/frontend/app/duck/index.ts b/frontend/app/duck/index.ts index d33de09a0..1c62c36ff 100644 --- a/frontend/app/duck/index.ts +++ b/frontend/app/duck/index.ts @@ -5,7 +5,6 @@ import jwt from './jwt'; import user from './user'; import sessions from './sessions'; import assignments from './assignments'; -import target from './target'; import targetCustom from './targetCustom'; import filters from './filters'; import funnelFilters from './funnelFilters'; @@ -19,12 +18,10 @@ import site from './site'; import customFields from './customField'; import webhooks from './webhook'; import integrations from './integrations'; -import watchdogs from './watchdogs'; import rehydrate from './rehydrate'; import announcements from './announcements'; import errors from './errors'; import funnels from './funnels'; -import config from './config'; import roles from './roles'; import customMetrics from './customMetrics'; import search from './search'; @@ -35,7 +32,6 @@ const rootReducer = combineReducers({ user, sessions, assignments, - target, targetCustom, filters, funnelFilters, @@ -48,12 +44,10 @@ const rootReducer = combineReducers({ site, customFields, webhooks, - watchdogs, rehydrate, announcements, errors, funnels, - config, roles, customMetrics, search, diff --git a/frontend/app/duck/member.js b/frontend/app/duck/member.js index 31cccb395..290b53f3a 100644 --- a/frontend/app/duck/member.js +++ b/frontend/app/duck/member.js @@ -37,12 +37,4 @@ export function save(instance) { }; } -export function generateInviteLink(instance) { - return { - types: GENERATE_LINK.toArray(), - call: client => client.get(`/client/members/${ instance.id }/reset`), - id: instance.id - }; -} - export default reduceDucks(crudDuck, { initialState, reducer }).reducer; diff --git a/frontend/app/duck/target.js b/frontend/app/duck/target.js deleted file mode 100644 index b1f0e337b..000000000 --- a/frontend/app/duck/target.js +++ /dev/null @@ -1,33 +0,0 @@ -import { Map } from 'immutable'; -import Target from 'Types/target'; -import { RequestTypes } from 'Duck/requestStateCreator'; -import crudDuckGenerator from 'Duck/tools/crudDuck'; -import { reduceDucks } from 'Duck/tools'; - -const FETCH_DEFINED = new RequestTypes('targets/FETCH_DEFINED'); - -const initialState = Map({ - definedPercent: 0, -}); - -const reducer = (state = initialState, action = {}) => { - switch (action.type) { - case FETCH_DEFINED.SUCCESS: - return state.set( - 'definedPercent', - Math.round((action.data.labeled / action.data.total) * 100), - ); - } - return state; -}; - -const crudDuck = crudDuckGenerator('target', Target); -export const { fetchList, init, edit, save, remove } = crudDuck.actions; -export default reduceDucks(crudDuck, { initialState, reducer }).reducer; - -export function fetchDefinedTargetsCount() { - return { - types: FETCH_DEFINED.toArray(), - call: client => client.get('/targets/count'), - }; -} diff --git a/frontend/app/duck/watchdogs.js b/frontend/app/duck/watchdogs.js deleted file mode 100644 index 87966264a..000000000 --- a/frontend/app/duck/watchdogs.js +++ /dev/null @@ -1,101 +0,0 @@ -import { List, Map } from 'immutable'; -import Watchdog from 'Types/watchdog'; -import { mergeReducers, success, array, request } from './funcTools/tools'; -import { createRequestReducer } from './funcTools/request'; -import { - createCRUDReducer, - getCRUDRequestTypes, - createFetchList, - createInit, - createEdit, - createRemove, - createSave, -} from './funcTools/crud'; - -const name = 'issue_type'; -const idKey = 'id'; -const SET_ACTIVE_TAB = 'watchdogs/SET_ACTIVE_TAB'; -const FETCH_WATCHDOG_STATUS = 'watchdogs/FETCH_WATCHDOG_STATUS'; -const FETCH_WATCHDOG_STATUS_SUCCESS = success(FETCH_WATCHDOG_STATUS); -const FETCH_RULES = 'watchdogs/FETCH_RULES'; -const FETCH_RULES_SUCCESS = success(FETCH_RULES); -const SAVE_CAPTURE_RATE = 'watchdogs/SAVE_CAPTURE_RATE'; -const EDIT_CAPTURE_RATE = 'watchdogs/SAVE_CAPTURE_RATE'; - -const initialState = Map({ - activeTab: Map(), - instance: Watchdog(), - list: List(), - rules: List(), - captureRate: Map() -}); - -const reducer = (state = initialState, action = {}) => { - switch (action.type) { - case SET_ACTIVE_TAB: - return state.set('activeTab', action.instance); - case FETCH_RULES_SUCCESS: - return state.set('rules', action.data); - case FETCH_WATCHDOG_STATUS_SUCCESS: - case success(SAVE_CAPTURE_RATE): - return state.set('captureRate', Map(action.data)); - case request(SAVE_CAPTURE_RATE): - return state.mergeIn(['captureRate'], action.params); - case EDIT_CAPTURE_RATE: - return state.mergeIn(['captureRate'], {rate: action.rate}); - } - return state; -}; - - -export const fetchList = createFetchList(name); -export const init = createInit(name); -export const edit = createEdit(name); -export const save = createSave(name); -export const remove = createRemove(name); - -export function setActiveTab(instance) { - return { - type: SET_ACTIVE_TAB, - instance, - }; -} - -export const fetchRules = () => { - return { - types: array(FETCH_RULES), - call: client => client.get(`/watchdogs/rules`), - }; -} - -export default mergeReducers( - reducer, - createCRUDReducer(name, Watchdog, idKey), - createRequestReducer({ - fetchWatchdogStatus: FETCH_WATCHDOG_STATUS, - savingCaptureRate: SAVE_CAPTURE_RATE, - ...getCRUDRequestTypes(name), - }), -); - -export const saveCaptureRate = (params) => { - return { - params, - types: array(SAVE_CAPTURE_RATE), - call: client => client.post(`/sample_rate`, params), - } -} - -export const editCaptureRate = rate => { - return { - type: EDIT_CAPTURE_RATE, - rate - } -} - -export const fetchWatchdogStatus = () => { - return { - types: array(FETCH_WATCHDOG_STATUS), - call: client => client.get('/sample_rate'), - }; -} diff --git a/frontend/app/mstore/index.tsx b/frontend/app/mstore/index.tsx index a4fdbe884..707fb175a 100644 --- a/frontend/app/mstore/index.tsx +++ b/frontend/app/mstore/index.tsx @@ -15,6 +15,7 @@ import { errorService, notesService, recordingsService, + configService, } from 'App/services'; import SettingsStore from './settingsStore'; import AuditStore from './auditStore'; @@ -25,6 +26,7 @@ import NotesStore from './notesStore'; import BugReportStore from './bugReportStore' import RecordingsStore from './recordingsStore' import AssistMultiviewStore from './assistMultiviewStore'; +import WeeklyReportStore from './weeklyReportConfigStore' export class RootStore { dashboardStore: DashboardStore; @@ -41,6 +43,7 @@ export class RootStore { bugReportStore: BugReportStore; recordingsStore: RecordingsStore; assistMultiviewStore: AssistMultiviewStore; + weeklyReportStore: WeeklyReportStore constructor() { this.dashboardStore = new DashboardStore(); @@ -57,6 +60,7 @@ export class RootStore { this.bugReportStore = new BugReportStore(); this.recordingsStore = new RecordingsStore(); this.assistMultiviewStore = new AssistMultiviewStore(); + this.weeklyReportStore = new WeeklyReportStore(); } initClient() { @@ -70,6 +74,7 @@ export class RootStore { errorService.initClient(client); notesService.initClient(client) recordingsService.initClient(client); + configService.initClient(client); } } diff --git a/frontend/app/mstore/weeklyReportConfigStore.ts b/frontend/app/mstore/weeklyReportConfigStore.ts new file mode 100644 index 000000000..7b0eec8a6 --- /dev/null +++ b/frontend/app/mstore/weeklyReportConfigStore.ts @@ -0,0 +1,32 @@ +import { makeAutoObservable }from "mobx" +import { configService } from "App/services"; + +export default class weeklyReportConfigStore { + public weeklyReport = false + + constructor() { + makeAutoObservable(this) + } + + setReport(value: boolean) { + this.weeklyReport = value + } + + async fetchReport() { + try { + const { weeklyReport } = await configService.fetchWeeklyReport() + return this.setReport(weeklyReport) + } catch (e) { + console.error(e) + } + } + + async fetchEditReport(value: boolean) { + try { + const { weeklyReport } = await configService.editWeeklyReport({ weeklyReport: value }) + return this.setReport(weeklyReport) + } catch (e) { + console.error(e) + } + } +} \ No newline at end of file diff --git a/frontend/app/services/BaseService.ts b/frontend/app/services/BaseService.ts index 2af1897f8..5cca28d4e 100644 --- a/frontend/app/services/BaseService.ts +++ b/frontend/app/services/BaseService.ts @@ -1,4 +1,5 @@ import APIClient from 'App/api_client'; + export default class BaseService { client: APIClient; diff --git a/frontend/app/services/ConfigService.ts b/frontend/app/services/ConfigService.ts new file mode 100644 index 000000000..6afda4858 --- /dev/null +++ b/frontend/app/services/ConfigService.ts @@ -0,0 +1,17 @@ +import BaseService from './BaseService'; + +export interface WeeklyReport { + weeklyReport: boolean +} + +export default class ConfigService extends BaseService { + async fetchWeeklyReport(): Promise { + return this.client.get('/config/weekly_report') + .then(r => r.json()).then(j => j.data) + } + + async editWeeklyReport(config: WeeklyReport): Promise { + return this.client.post('/config/weekly_report', config) + .then(r => r.json()).then(j => j.data) + } +} \ No newline at end of file diff --git a/frontend/app/services/index.ts b/frontend/app/services/index.ts index 2bcf5981e..5033c4ed3 100644 --- a/frontend/app/services/index.ts +++ b/frontend/app/services/index.ts @@ -7,6 +7,7 @@ import AuditService from './AuditService'; import ErrorService from "./ErrorService"; import NotesService from "./NotesService"; import RecordingsService from "./RecordingsService"; +import ConfigService from './ConfigService' export const dashboardService = new DashboardService(); export const metricService = new MetricService(); @@ -17,3 +18,4 @@ export const auditService = new AuditService(); export const errorService = new ErrorService(); export const notesService = new NotesService(); export const recordingsService = new RecordingsService(); +export const configService = new ConfigService(); \ No newline at end of file