-
Notifications
You must be signed in to change notification settings - Fork 1
/
useWidgetsLayoutStore.tsx
122 lines (108 loc) · 2.9 KB
/
useWidgetsLayoutStore.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import { Reducer, useReducer } from 'react';
import produce from 'immer';
import { Layout } from 'react-grid-layout';
import { isEmpty } from 'lodash';
import {
WidgetSettings,
WidgetSettingsData,
} from '../../../components/WidgetsLayout/WidgetsLayout';
import { PersistableSettings } from '../../Dashboard/hooks/useSettings';
export interface WidgetsLayoutState {
layout: Layout[];
widgets: WidgetSettings[];
}
export type WidgetsLayoutAction =
| {
type: 'SET_LAYOUT';
payload: { layout: Layout[]; widgets: WidgetSettings[] };
}
| { type: 'UPDATE_LAYOUT'; payload: { layout: Layout[] } }
| {
type: 'ADD_WIDGET';
payload: { layout: Layout[]; widget: WidgetSettings };
}
| {
type: 'REMOVE_WIDGET';
payload: { id: string };
}
| {
type: 'UPDATE_WIDGET';
payload: { id: string; settings: WidgetSettingsData };
};
export const persistedSettings = JSON.parse(
window.localStorage.getItem('STATE_LAYOUT') ?? '{}'
) as PersistableSettings;
const persistedInitialState: WidgetsLayoutState = {
...persistedSettings.widgetLayout,
};
export const defaultValues: WidgetsLayoutState = {
layout: [
{
x: 0,
y: 0,
w: 4,
h: 3,
i: '0',
},
],
widgets: [
{
name: 'TokenBalanceWidget',
id: '0',
settings: {
token: '0',
historicalPeriod: '7d',
},
},
],
};
export const initialWidgetsLayoutState: WidgetsLayoutState = !isEmpty(
persistedInitialState
)
? persistedInitialState
: defaultValues;
export const widgetsLayoutReducer: Reducer<
WidgetsLayoutState,
WidgetsLayoutAction
> = (state, action) => {
switch (action.type) {
case 'SET_LAYOUT':
return produce(state, (draft) => {
draft.layout = action.payload.layout;
draft.widgets = action.payload.widgets;
});
case 'UPDATE_LAYOUT':
return produce(state, (draft) => {
draft.layout = action.payload.layout;
});
case 'ADD_WIDGET':
return produce(state, (draft) => {
draft.layout = action.payload.layout;
draft.widgets = [...state.widgets, action.payload.widget];
});
case 'REMOVE_WIDGET':
return produce(state, (draft) => {
draft.layout = state.layout.filter(
(item) => item.i !== action.payload.id
);
draft.widgets = state.widgets.filter(
(item) => item.id !== action.payload.id
);
});
case 'UPDATE_WIDGET':
return produce(state, (draft) => {
draft.widgets = draft.widgets.map((widget) => {
if (widget.id === action.payload.id) {
widget.settings = action.payload.settings;
}
return widget;
});
});
default:
return state;
}
};
export const useWidgetsLayoutStore = (): [
WidgetsLayoutState,
React.Dispatch<WidgetsLayoutAction>
] => useReducer(widgetsLayoutReducer, initialWidgetsLayoutState);