jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): remove config(report) reducer, add mobx store

Browse source
This commit is contained in:
sylenien 2022-12-28 11:55:04 +01:00
parent 63857a2f01
commit 8e6eb8ac1b
13 changed files with 96 additions and 262 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/app/components/Client/Client.js
View file

@ -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){

50
frontend/app/components/Client/Notifications/Notifications.js
View file

@ -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 (
<div className="p-5">
<div className={stl.tabHeader}>{<h3 className={cn(stl.tabTitle, 'text-2xl')}>{'Notifications'}</h3>}</div>
<div className="">
<div className="text-lg font-medium">Weekly project summary</div>
<div className="mb-4">Receive wekly report for each project on email.</div>
<Toggler checked={config.weeklyReport} name="test" onChange={onChange} label={config.weeklyReport ? 'Yes' : 'No'} />
{/* <Checkbox
name="isPublic"
className="font-medium"
type="checkbox"
checked={config.weeklyReport}
onClick={onChange}
className="mr-8"
label="Send me a weekly report for each project."
/> */}
{/* <img src="/assets/img/img-newsletter.png" style={{ width: '400px'}}/> */}
</div>
</div>
);
}
export default connect(
(state) => ({
config: state.getIn(['config', 'options']),
}),
{ fetchConfig, editConfig, saveConfig }
)(withPageTitle('Notifications - OpenReplay Preferences')(Notifications));

39
frontend/app/components/Client/Notifications/Notifications.tsx Normal file
View file

@ -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 (
<div className="p-5">
<div className={stl.tabHeader}>{<h3 className={cn(stl.tabTitle, 'text-2xl')}>{'Notifications'}</h3>}</div>
<div className="">
<div className="text-lg font-medium">Weekly project summary</div>
<div className="mb-4">Receive weekly report for each project on email.</div>
<Toggler
checked={weeklyReportStore.weeklyReport}
name="test"
onChange={onChange}
label={weeklyReportStore.weeklyReport ? 'Yes' : 'No'}
/>
</div>
</div>
);
}
export default withPageTitle('Notifications - OpenReplay Preferences')(observer(Notifications))

61
frontend/app/duck/config.js
View file

@ -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,
}),
)

6
frontend/app/duck/index.ts
View file

@ -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,

8
frontend/app/duck/member.js
View file

@ -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;

33
frontend/app/duck/target.js
View file

@ -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'),
};
}

101
frontend/app/duck/watchdogs.js
View file

@ -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'),
};
}

5
frontend/app/mstore/index.tsx
View file

@ -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);
}
}

32
frontend/app/mstore/weeklyReportConfigStore.ts Normal file
View file

@ -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)
}
}
}

1
frontend/app/services/BaseService.ts
View file

@ -1,4 +1,5 @@
import APIClient from 'App/api_client';
export default class BaseService {
client: APIClient;

17
frontend/app/services/ConfigService.ts Normal file
View file

@ -0,0 +1,17 @@
import BaseService from './BaseService';
export interface WeeklyReport {
weeklyReport: boolean
}
export default class ConfigService extends BaseService {
async fetchWeeklyReport(): Promise<WeeklyReport> {
return this.client.get('/config/weekly_report')
.then(r => r.json()).then(j => j.data)
}
async editWeeklyReport(config: WeeklyReport): Promise<WeeklyReport> {
return this.client.post('/config/weekly_report', config)
.then(r => r.json()).then(j => j.data)
}
}

2
frontend/app/services/index.ts
View file

@ -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();