hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

frontend: housekeeping and clean up Store code

Browse source
This commit is contained in:
hippoz 2022-05-07 04:04:54 +03:00
parent e3b4e28428
commit d1654546fa
Signed by: hippoz
GPG key ID: 7C52899193467641
7 changed files with 23 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/components/overlays/CreateAccount.svelte
View file

@ -1,10 +1,9 @@
<script> <script>
import { fly } from "svelte/transition";
import { quintInOut } from "svelte/easing"; import { quintInOut } from "svelte/easing";
import { overlayStore } from "../../stores"; import { overlayStore } from "../../stores";
import request from "../../request"; import request from "../../request";
import { apiRoute } from "../../storage"; import { apiRoute } from "../../storage";
import { maybeFly } from "../../animations"; import { maybeFly } from "../../animations";
let username = ""; let username = "";
let password = ""; let password = "";

3
frontend/src/components/overlays/CreateChannel.svelte
View file

@ -1,10 +1,9 @@
<script> <script>
import { fade, fly } from "svelte/transition";
import { quintInOut } from "svelte/easing"; import { quintInOut } from "svelte/easing";
import { overlayStore } from "../../stores"; import { overlayStore } from "../../stores";
import request from "../../request"; import request from "../../request";
import { apiRoute } from "../../storage"; import { apiRoute } from "../../storage";
import { maybeFade, maybeFly } from "../../animations"; import { maybeFade, maybeFly } from "../../animations";
let channelName = ""; let channelName = "";
let createButtonEnabled = true; let createButtonEnabled = true;

1
frontend/src/components/overlays/EditChannel.svelte
View file

@ -1,5 +1,4 @@
<script> <script>
import { fade, fly } from "svelte/transition";
import { maybeFade, maybeFly } from "../../animations"; import { maybeFade, maybeFly } from "../../animations";
import { quintInOut } from "svelte/easing"; import { quintInOut } from "svelte/easing";
import { overlayStore } from "../../stores"; import { overlayStore } from "../../stores";

3
frontend/src/components/overlays/EditMessage.svelte
View file

@ -1,10 +1,9 @@
<script> <script>
import { fade, fly } from "svelte/transition";
import { quintInOut } from "svelte/easing"; import { quintInOut } from "svelte/easing";
import { overlayStore } from "../../stores"; import { overlayStore } from "../../stores";
import request from "../../request"; import request from "../../request";
import { apiRoute } from "../../storage"; import { apiRoute } from "../../storage";
import { maybeFade, maybeFly } from "../../animations"; import { maybeFade, maybeFly } from "../../animations";
export let message; export let message;

3
frontend/src/components/overlays/Login.svelte
View file

@ -1,11 +1,10 @@
<script> <script>
import { fly } from "svelte/transition";
import { quintInOut } from "svelte/easing"; import { quintInOut } from "svelte/easing";
import { overlayStore } from "../../stores"; import { overlayStore } from "../../stores";
import request from "../../request"; import request from "../../request";
import { apiRoute } from "../../storage"; import { apiRoute } from "../../storage";
import { authWithToken } from "../../auth"; import { authWithToken } from "../../auth";
import { maybeFly } from "../../animations"; import { maybeFly } from "../../animations";
let username = ""; let username = "";
let password = ""; let password = "";

3
frontend/src/components/overlays/Toast.svelte
View file

@ -1,8 +1,7 @@
<script> <script>
import { XIcon } from "svelte-feather-icons"; import { XIcon } from "svelte-feather-icons";
import { quintInOut } from "svelte/easing"; import { quintInOut } from "svelte/easing";
import { fly } from "svelte/transition"; import { maybeFly } from "../../animations";
import { maybeFly } from "../../animations";
import { overlayStore } from "../../stores"; import { overlayStore } from "../../stores";
export let message; export let message;

32
frontend/src/stores.js
View file

@ -6,26 +6,24 @@ import { apiRoute, getItem, setItem } from "./storage";
const storeLog = logger("Store"); const storeLog = logger("Store");
class Store { class Store {
constructor(value=null, name="[unnamed]") { constructor(value=null, name="[no name]") {
this._handlers = []; this._handlers = [];
this.value = value; this.value = value;
this.name = name; this.name = name;
} }
// like subscribe, but without initially calling it // like subscribe, but without initially calling the handler
watch(handler) { watch(handler) {
const newLength = this._handlers.push(handler); const handlerIndex = this._handlers.push(handler) - 1;
const handlerIndex = newLength - 1; storeLog(`(${this.name}) (watch/handler) New handler`, this.value);
storeLog(`(${this.name}) Calling handler (watch/initial)`, this.value);
return () => { return () => {
this._handlers.splice(handlerIndex, 1); this._handlers.splice(handlerIndex, 1);
}; };
} }
subscribe(handler) { subscribe(handler) {
const newLength = this._handlers.push(handler); const handlerIndex = this._handlers.push(handler) - 1;
const handlerIndex = newLength - 1; storeLog(`(${this.name}) (subscribe/initial) Calling handler`, this.value);
storeLog(`(${this.name}) Calling handler (subscribe/initial)`, this.value);
handler(this.value); handler(this.value);
return () => { return () => {
this._handlers.splice(handlerIndex, 1); this._handlers.splice(handlerIndex, 1);
@ -33,15 +31,18 @@ class Store {
} }
set(value) { set(value) {
if (value === this.value)
return;
this.value = value; this.value = value;
this.updated(); this.updated();
} }
updated() { updated() {
storeLog(`(${this.name}) Calling all (${this._handlers.length}) handlers (updated)`, this.value); storeLog(`(${this.name}) (updated) Calling all (${this._handlers.length}) handlers`, this.value);
this._handlers.forEach(e => { for (let i = this._handlers.length - 1; i >= 0; i--) {
e(this.value); this._handlers[i](this.value);
}); }
} }
} }
@ -307,15 +308,18 @@ class OverlayStore extends Store {
} }
close(name) { close(name) {
if (!this.value[name])
return;
this.value[name] = null; this.value[name] = null;
this.updated(); this.updated();
} }
} }
export const selectedChannel = new Store({ id: getItem("app:cache:openChannelId"), name: "none", creator_id: -1 }, "selectedChannel"); export const selectedChannel = new Store({ id: getItem("app:cache:openChannelId"), name: "none", creator_id: -1 }, "selectedChannel");
export const showSidebar = new Store(false, "showSidebar"); export const showSidebar = new Store(true, "showSidebar");
export const showChannelView = new Store(true, "showChannelView");
export const smallViewport = new Store(false, "smallViewport"); export const smallViewport = new Store(false, "smallViewport");
export const showChannelView = new Store(true, "showChannelView");
export const theme = new StorageItemStore("app:visual:theme"); export const theme = new StorageItemStore("app:visual:theme");
export const doAnimations = new StorageItemStore("app:behavior:doAnimations"); export const doAnimations = new StorageItemStore("app:behavior:doAnimations");
export const channels = new ChannelsStore(); export const channels = new ChannelsStore();