Storage improve (#6976)

* wip * wip * wip * wip * wip * Update storage.ts * wip * wip * wip * wip * Update storage.ts * Update storage.ts * wip * wip * wip * wip * wip * wip * wip * Update storage.ts * wip * wip * wip * wip * 🍕 * wip * wip * wip * wip * wip * wip * Update deck-storage.ts * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * Update store.ts * wip * wip * wip * wip * Update init.ts * wip * wip * Update pizzax.ts * wip * wip * Update timeline.vue * Update init.ts * wip * wip * Update init.ts
2020-12-19 10:55:52 +09:00
parent 57d0c19a98
commit 43930e6a84
146 changed files with 1458 additions and 1519 deletions
--- a/src/client/pizzax.ts
+++ b/src/client/pizzax.ts
@@ -0,0 +1,124 @@
+import { Ref, ref, watch } from 'vue';
+import { $i } from './account';
+import { api } from './os';
+
+type StateDef = Record<string, {
+	where: 'account' | 'device' | 'deviceAccount';
+	default: any;
+}>;
+
+type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
+
+export class Storage<T extends StateDef> {
+	public readonly key: string;
+
+	public readonly def: T;
+
+	// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
+	public readonly state: { [K in keyof T]: T[K]['default'] };
+	public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> };
+
+	constructor(key: string, def: T) {
+		this.key = 'pizzax::' + key;
+		this.def = def;
+
+		// TODO: indexedDBにする
+		const deviceState = JSON.parse(localStorage.getItem(this.key) || '{}');
+		const deviceAccountState = $i ? JSON.parse(localStorage.getItem(this.key + '::' + $i.id) || '{}') : {};
+
+		const state = {};
+		const reactiveState = {};
+		for (const [k, v] of Object.entries(def)) {
+			if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
+				state[k] = deviceState[k];
+			} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call($i.clientData, k)) {
+				state[k] = $i.clientData[k];
+			} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
+				state[k] = deviceAccountState[k];
+			} else {
+				state[k] = v.default;
+				if (_DEV_) console.log('Use default value', k, v.default);
+			}
+		}
+		for (const [k, v] of Object.entries(state)) {
+			reactiveState[k] = ref(v);
+		}
+		this.state = state as any;
+		this.reactiveState = reactiveState as any;
+
+		if ($i) {
+			watch($i, () => {
+				if (_DEV_) console.log('$i updated');
+
+				for (const [k, v] of Object.entries(def)) {
+					if (v.where === 'account' && Object.prototype.hasOwnProperty.call($i!.clientData, k)) {
+						state[k] = $i!.clientData[k];
+						reactiveState[k].value = $i!.clientData[k];
+					}
+				}
+			});
+		}
+	}
+
+	public set<K extends keyof T>(key: K, value: T[K]['default']): void {
+		if (_DEV_) console.log('set', key, value);
+
+		this.state[key] = value;
+		this.reactiveState[key].value = value;
+
+		switch (this.def[key].where) {
+			case 'device': {
+				const deviceState = JSON.parse(localStorage.getItem(this.key) || '{}');
+				deviceState[key] = value;
+				localStorage.setItem(this.key, JSON.stringify(deviceState));
+				break;
+			}
+			case 'deviceAccount': {
+				if ($i == null) break;
+				const deviceAccountState = JSON.parse(localStorage.getItem(this.key + '::' + $i.id) || '{}');
+				deviceAccountState[key] = value;
+				localStorage.setItem(this.key + '::' + $i.id, JSON.stringify(deviceAccountState));
+				break;
+			}
+			case 'account': {
+				api('i/update-client-setting', {
+					name: key,
+					value: value
+				});
+				break;
+			}
+		}
+	}
+
+	public push<K extends keyof T>(key: K, value: ArrayElement<T[K]['default']>): void {
+		const currentState = this.state[key];
+		this.set(key, [...currentState, value]);
+	}
+
+	public reset(key: keyof T) {
+		this.set(key, this.def[key].default);
+	}
+
+	/**
+	 * 特定のキーの、簡易的なgetter/setterを作ります
+	 * 主にvue場で設定コントロールのmodelとして使う用
+	 */
+	public makeGetterSetter<K extends keyof T>(key: K, getter?: (v: T[K]) => unknown, setter?: (v: unknown) => T[K]) {
+		// TODO: VueのcustomRef使うと良い感じになるかも
+		const valueRef = ref(this.state[key]);
+		return {
+			get: () => {
+				if (getter) {
+					return getter(valueRef.value);
+				} else {
+					return valueRef.value;
+				}
+			},
+			set: (value: unknown) => {
+				const val = setter ? setter(value) : value;
+				this.set(key, val);
+				valueRef.value = val;
+			}
+		};
+	}
+}