WrKEETeA

1import {
2  createStore,
3  combine,
4  createEvent,
5  sample,
6  createStoreObject,
7  forward
8} from 'effector';
9
10import { fetchDisplaysConfig, setDisplaysConfig } from '../api';
11
12function forwardProp({ from, to, prop }) {
13  forward({
14    from: from.map(st => st && st[prop]),
15    to
16  });
17}
18
19export const changeDisplayOrientation = createEvent();
20export const changeDisplayResolution = createEvent();
21export const changePositionMode = createEvent();
22export const changeTouchDevice = createEvent();
23export const sendDefaultConfig = createEvent();
24export const changePosition = createEvent();
25export const changeDisplay = createEvent();
26export const turnDisplay = createEvent();
27export const reset = createEvent();
28
29export const $displays = createStore({});
30export const $positionMode = createStore(null);
31export const $currentDisplay = createStore('0');
32export const $displaysPosition = createStore(null);
33const $savedDisplayConfig = createStore(null);
34
35export const $currentDisplayInfo = combine(
36  $currentDisplay,
37  $displays,
38  (key, store) => (store ? store[key] : null)
39);
40
41export const $displaysConfig = createStoreObject({
42  displays: $displays,
43  positionMode: $positionMode,
44  displaysPosition: $displaysPosition
45});
46
47$savedDisplayConfig.on(fetchDisplaysConfig.done, (_, { result }) => result);
48
49$displaysConfig.on($savedDisplayConfig, (_, state) => state);
50
51$positionMode.on(changePositionMode, (_, positionMode) => positionMode);
52
53$displaysPosition.on(changePosition, (state, payload) => ({
54  ...state,
55  ...payload
56}));
57
58$currentDisplay.on(changeDisplay, (_, key) => key);
59
60
61// $displaysConfig
62//   .on($displays, (state, displays) => ({ ...state, displays }))
63//   .on($positionMode, (state, positionMode) => ({
64//     ...state,
65//     positionMode
66//   }))
67//   .on($displaysPosition, (state, displaysPosition) => ({
68//     ...state,
69//     displaysPosition
70//   }));
71
72$currentDisplayInfo
73  .on(changeDisplayOrientation, (state, orientation) => ({
74    ...state,
75    rotation: orientation
76  }))
77  .on(turnDisplay, (state, checked) => ({ ...state, turnedOn: checked }))
78  .on(changeDisplayResolution, (state, resolution) => ({
79    ...state,
80    currentResolution: resolution
81  }));
82
83forwardProp({ from: $displaysConfig, to: $displays, prop: 'displays' });
84forwardProp({
85  from: $displaysConfig,
86  to: $positionMode,
87  prop: 'positionMode'
88});
89forwardProp({
90  from: $displaysConfig,
91  to: $displaysPosition,
92  prop: 'displaysPosition'
93});
94
95sample({
96  source: $displaysConfig,
97  clock: sendDefaultConfig,
98  target: setDisplaysConfig
99});
100
101sample({
102  source: $savedDisplayConfig,
103  clock: reset,
104  target: $displaysConfig
105});
106
107sample({
108  source: {
109    displays: $displays,
110    currentDisplay: $currentDisplay
111  },
112  clock: $currentDisplayInfo,
113  target: $displays,
114  fn: ({ displays, currentDisplay }, currentInfo) => {
115    return Object.assign(displays, { [currentDisplay]: { ...currentInfo } });
116  }
117});
118
119sample({
120  source: {
121    displays: $displays,
122    currentDisplay: $currentDisplay
123  },
124  clock: changeTouchDevice,
125  target: $displays,
126  fn: ({ displays, currentDisplay }, touchDeviceId) => {
127    return Object.keys(displays).reduce((acc, displayID) => {
128      if (displayID === currentDisplay) {
129        return {
130          ...acc,
131          [currentDisplay]: {
132            ...displays[currentDisplay],
133            touchDevice: touchDeviceId
134          }
135        };
136      }
137
138      if (displays[displayID].touchDevice === touchDeviceId) {
139        return {
140          ...acc,
141          [displayID]: {
142            ...displays[displayID],
143            touchDevice: ''
144          }
145        };
146      }
147
148      return acc;
149    }, displays);
150  }
151});
152
153$savedDisplayConfig.watch(state => console.log('$savedDisplayConfig', state));
154$displaysConfig.watch(state => console.log('$displaysConfig', state));
155reset.watch(() => console.log('reset'))