Add Redux and reducers.

Load i18n files and add dayjs.

src/redux/State.tsx

@@ -0,0 +1,32 @@
+import { store } from ".";
+import localForage from "localforage";
+import { Provider } from 'react-redux';
+import { Children } from "../types/Preact";
+import { useEffect, useState } from "preact/hooks";
+
+async function loadState() {
+    const state = await localForage.getItem("state");
+    if (state) {
+        store.dispatch({ type: "__INIT", state });
+    }
+}
+
+interface Props {
+    children: Children
+}
+
+export default function State(props: Props) {
+    const [loaded, setLoaded] = useState(false);
+
+    useEffect(() => {
+        loadState().then(() => setLoaded(true));
+    }, []);
+
+    if (!loaded) return null;
+    
+    return (
+        <Provider store={store}>
+            { props.children }
+        </Provider>
+    )
+}

src/redux/connector.tsx

@@ -0,0 +1,16 @@
+import { State } from ".";
+import { h } from "preact";
+//import { memo } from "preact/compat";
+import { connect, ConnectedComponent } from "react-redux";
+
+export function connectState<T>(
+    component: (props: any) => h.JSX.Element | null,
+    mapKeys: (state: State, props: T) => any,
+    useDispatcher?: boolean
+): ConnectedComponent<(props: any) => h.JSX.Element | null, T> {
+    return (
+        useDispatcher
+            ? connect(mapKeys, dispatcher => { return { dispatcher } })
+            : connect(mapKeys)
+    )(component);//(memo(component));
+}

src/redux/index.ts

@@ -0,0 +1,62 @@
+import { createStore } from "redux";
+import rootReducer from "./reducers";
+import localForage from "localforage";
+
+import { Typing } from "./reducers/typing";
+import { Drafts } from "./reducers/drafts";
+import { AuthState } from "./reducers/auth";
+import { Language } from "../context/Locale";
+import { Unreads } from "./reducers/unreads";
+import { SyncOptions } from "./reducers/sync";
+import { Settings } from "./reducers/settings";
+import { QueuedMessage } from "./reducers/queue";
+import { ExperimentOptions } from "./reducers/experiments";
+
+export type State = {
+    locale: Language;
+    auth: AuthState;
+    settings: Settings;
+    unreads: Unreads;
+    queue: QueuedMessage[];
+    typing: Typing;
+    drafts: Drafts;
+    sync: SyncOptions;
+    experiments: ExperimentOptions;
+};
+
+export const store = createStore((state: any, action: any) => {
+    if (process.env.NODE_ENV === "development") {
+        console.debug("State Update:", action);
+    }
+
+    if (action.type === "__INIT") {
+        return action.state;
+    }
+
+    return rootReducer(state, action);
+});
+
+// Save state using localForage.
+store.subscribe(() => {
+    const {
+        locale,
+        auth,
+        settings,
+        unreads,
+        queue,
+        drafts,
+        sync,
+        experiments
+    } = store.getState() as State;
+    
+    localForage.setItem("state", {
+        locale,
+        auth,
+        settings,
+        unreads,
+        queue,
+        drafts,
+        sync,
+        experiments
+    });
+});

src/redux/reducers/auth.ts

@@ -0,0 +1,48 @@
+import { Auth } from "revolt.js/dist/api/objects";
+
+export interface AuthState {
+    accounts: {
+        [key: string]: {
+            session: Auth.Session;
+        };
+    };
+    active?: string;
+}
+
+export type AuthAction =
+    | { type: undefined }
+    | {
+          type: "LOGIN";
+          session: Auth.Session;
+      }
+    | {
+          type: "LOGOUT";
+          user_id?: string;
+      };
+
+export function auth(
+    state = { accounts: {} } as AuthState,
+    action: AuthAction
+): AuthState {
+    switch (action.type) {
+        case "LOGIN":
+            return {
+                accounts: {
+                    ...state.accounts,
+                    [action.session.user_id]: {
+                        session: action.session
+                    }
+                },
+                active: action.session.user_id
+            };
+        case "LOGOUT":
+            const accounts = Object.assign({}, state.accounts);
+            action.user_id && delete accounts[action.user_id];
+
+            return {
+                accounts
+            };
+        default:
+            return state;
+    }
+}

src/redux/reducers/drafts.ts

@@ -0,0 +1,33 @@
+export type Drafts = { [key: string]: string };
+
+export type DraftAction =
+    | { type: undefined }
+    | {
+          type: "SET_DRAFT";
+          channel: string;
+          content: string;
+      }
+    | {
+          type: "CLEAR_DRAFT";
+          channel: string;
+      }
+    | {
+          type: "RESET";
+      };
+
+export function drafts(state: Drafts = {}, action: DraftAction): Drafts {
+    switch (action.type) {
+        case "SET_DRAFT":
+            return {
+                ...state,
+                [action.channel]: action.content
+            };
+        case "CLEAR_DRAFT":
+            const { [action.channel]: _, ...newState } = state;
+            return newState;
+        case "RESET":
+            return {};
+        default:
+            return state;
+    }
+}

src/redux/reducers/experiments.ts

@@ -0,0 +1,43 @@
+export type Experiments = never;
+export const AVAILABLE_EXPERIMENTS: Experiments[] = [ ];
+
+export interface ExperimentOptions {
+    enabled?: Experiments[]
+}
+
+export type ExperimentsAction =
+    | { type: undefined }
+    | {
+          type: "EXPERIMENTS_ENABLE";
+          key: Experiments;
+      }
+    | {
+          type: "EXPERIMENTS_DISABLE";
+          key: Experiments;
+      };
+
+export function experiments(
+    state = {} as ExperimentOptions,
+    action: ExperimentsAction
+): ExperimentOptions {
+    switch (action.type) {
+        case "EXPERIMENTS_ENABLE":
+            return {
+                ...state,
+                enabled: [
+                    ...(state.enabled ?? [])
+                        .filter(x => AVAILABLE_EXPERIMENTS.includes(x))
+                        .filter(v => v !== action.key),
+                    action.key
+                ]
+            };
+        case "EXPERIMENTS_DISABLE":
+            return {
+                ...state,
+                enabled: state.enabled?.filter(v => v !== action.key)
+                    .filter(x => AVAILABLE_EXPERIMENTS.includes(x))
+            };
+        default:
+            return state;
+    }
+}

src/redux/reducers/index.ts

@@ -0,0 +1,47 @@
+import { combineReducers } from "redux";
+
+import { settings, SettingsAction } from "./settings";
+import { locale, LocaleAction } from "./locale";
+import { auth, AuthAction } from "./auth";
+import { unreads, UnreadsAction } from "./unreads";
+import { queue, QueueAction } from "./queue";
+import { typing, TypingAction } from "./typing";
+import { drafts, DraftAction } from "./drafts";
+import { sync, SyncAction } from "./sync";
+import { experiments, ExperimentsAction } from "./experiments";
+
+export default combineReducers({
+    locale,
+    auth,
+    settings,
+    unreads,
+    queue,
+    typing,
+    drafts,
+    sync,
+    experiments
+});
+
+export type Action =
+    | LocaleAction
+    | AuthAction
+    | SettingsAction
+    | UnreadsAction
+    | QueueAction
+    | TypingAction
+    | DraftAction
+    | SyncAction
+    | ExperimentsAction
+    | { type: "__INIT"; state: any };
+
+export type WithDispatcher = { dispatcher: (action: Action) => void };
+
+export function filter(obj: any, keys: string[]) {
+    const newObj: any = {};
+    for (const key of keys) {
+        const v = obj[key];
+        if (v) newObj[key] = v;
+    }
+
+    return newObj;
+}

src/redux/reducers/locale.ts

@@ -0,0 +1,50 @@
+import { Language } from "../../context/Locale";
+import { SyncData, SyncKeys, SyncUpdateAction } from "./sync";
+
+export type LocaleAction =
+    | { type: undefined }
+    | {
+          type: "SET_LOCALE";
+          locale: Language;
+      }
+    | SyncUpdateAction;
+
+export function findLanguage(lang?: string): Language {
+    if (!lang) {
+        if (typeof navigator === "undefined") {
+            lang = Language.ENGLISH;
+        } else {
+            lang = navigator.language;
+        }
+    }
+
+    const code = lang.replace("-", "_");
+
+    const short = code.split("_")[0];
+    for (const key of Object.keys(Language)) {
+        const value = (Language as any)[key];
+        if (value.startsWith(code)) {
+            return value;
+        }
+    }
+
+    for (const key of Object.keys(Language).reverse()) {
+        const value = (Language as any)[key];
+        if (value.startsWith(short)) {
+            return value;
+        }
+    }
+
+    return Language.ENGLISH;
+}
+
+export function locale(state = findLanguage(), action: LocaleAction): Language {
+    switch (action.type) {
+        case "SET_LOCALE":
+            return action.locale;
+        case "SYNC_UPDATE":
+            return (action.update.locale?.[1] ?? state) as Language;
+        default:
+            return state;
+    }
+}

src/redux/reducers/queue.ts

@@ -0,0 +1,103 @@
+import { MessageObject } from "../../context/revoltjs/messages";
+
+export enum QueueStatus {
+    SENDING = "sending",
+    ERRORED = "errored"
+}
+
+export interface QueuedMessage {
+    id: string;
+    channel: string;
+    data: MessageObject;
+    status: QueueStatus;
+    error?: string;
+}
+
+export type QueueAction =
+    | { type: undefined }
+    | {
+          type: "QUEUE_ADD";
+          nonce: string;
+          channel: string;
+          message: MessageObject;
+      }
+    | {
+          type: "QUEUE_FAIL";
+          nonce: string;
+          error: string;
+      }
+    | {
+          type: "QUEUE_START";
+          nonce: string;
+      }
+    | {
+          type: "QUEUE_REMOVE";
+          nonce: string;
+      }
+    | {
+          type: "QUEUE_DROP_ALL";
+      }
+    | {
+          type: "QUEUE_FAIL_ALL";
+      }
+    | {
+          type: "RESET";
+      };
+
+export function queue(
+    state: QueuedMessage[] = [],
+    action: QueueAction
+): QueuedMessage[] {
+    switch (action.type) {
+        case "QUEUE_ADD": {
+            return [
+                ...state.filter(x => x.id !== action.nonce),
+                {
+                    id: action.nonce,
+                    data: action.message,
+                    channel: action.channel,
+                    status: QueueStatus.SENDING
+                }
+            ];
+        }
+        case "QUEUE_FAIL": {
+            const entry = state.find(
+                x => x.id === action.nonce
+            ) as QueuedMessage;
+            return [
+                ...state.filter(x => x.id !== action.nonce),
+                {
+                    ...entry,
+                    status: QueueStatus.ERRORED,
+                    error: action.error
+                }
+            ];
+        }
+        case "QUEUE_START": {
+            const entry = state.find(
+                x => x.id === action.nonce
+            ) as QueuedMessage;
+            return [
+                ...state.filter(x => x.id !== action.nonce),
+                {
+                    ...entry,
+                    status: QueueStatus.SENDING
+                }
+            ];
+        }
+        case "QUEUE_REMOVE":
+            return state.filter(x => x.id !== action.nonce);
+        case "QUEUE_FAIL_ALL":
+            return state.map(x => {
+                return {
+                    ...x,
+                    status: QueueStatus.ERRORED
+                };
+            });
+        case "QUEUE_DROP_ALL":
+        case "RESET":
+            return [];
+        default:
+            return state;
+    }
+}

src/redux/reducers/settings.ts

@@ -0,0 +1,98 @@
+import { filter } from ".";
+import { SyncUpdateAction } from "./sync";
+import { Theme, ThemeOptions } from "../../context/Theme";
+
+export interface NotificationOptions {
+    desktopEnabled?: boolean;
+    soundEnabled?: boolean;
+    outgoingSoundEnabled?: boolean;
+}
+
+export type EmojiPacks = 'mutant' | 'twemoji' | 'noto' | 'openmoji';
+export interface AppearanceOptions {
+    emojiPack?: EmojiPacks
+}
+
+export interface Settings {
+    theme?: ThemeOptions;
+    appearance?: AppearanceOptions;
+    notification?: NotificationOptions;
+}
+
+export type SettingsAction =
+    | { type: undefined }
+    | {
+          type: "SETTINGS_SET_THEME";
+          theme: ThemeOptions;
+      }
+    | {
+          type: "SETTINGS_SET_THEME_OVERRIDE";
+          custom?: Partial<Theme>;
+      }
+    | {
+          type: "SETTINGS_SET_NOTIFICATION_OPTIONS";
+          options: NotificationOptions;
+      }
+    | {
+          type: "SETTINGS_SET_APPEARANCE";
+          options: Partial<AppearanceOptions>;
+      }
+    | SyncUpdateAction
+    | {
+          type: "RESET";
+      };
+
+export function settings(
+    state = {} as Settings,
+    action: SettingsAction
+): Settings {
+    // setEmojiPack(state.appearance?.emojiPack ?? 'mutant');
+
+    switch (action.type) {
+        case "SETTINGS_SET_THEME":
+            return {
+                ...state,
+                theme: {
+                    ...filter(state.theme, [ 'custom', 'preset' ]),
+                    ...action.theme,
+                }
+            };
+        case "SETTINGS_SET_THEME_OVERRIDE":
+            return {
+                ...state,
+                theme: {
+                    ...state.theme,
+                    custom: {
+                        ...state.theme?.custom,
+                        ...action.custom
+                    }
+                }
+            };
+        case "SETTINGS_SET_NOTIFICATION_OPTIONS":
+            return {
+                ...state,
+                notification: {
+                    ...state.notification,
+                    ...action.options
+                }
+            };
+        case "SETTINGS_SET_APPEARANCE":
+            return {
+                ...state,
+                appearance: {
+                    ...filter(state.appearance, [ 'emojiPack' ]),
+                    ...action.options
+                }
+            }
+        case "SYNC_UPDATE":
+            return {
+                ...state,
+                appearance: action.update.appearance?.[1] ?? state.appearance,
+                theme: action.update.theme?.[1] ?? state.theme
+            }
+        case "RESET":
+            return {};
+        default:
+            return state;
+    }
+}

src/redux/reducers/sync.ts

@@ -0,0 +1,85 @@
+import { AppearanceOptions } from "./settings";
+import { Language } from "../../context/Locale";
+import { ThemeOptions } from "../../context/Theme";
+
+export type SyncKeys = 'theme' | 'appearance' | 'locale';
+
+export interface SyncData {
+    locale?: Language;
+    theme?: ThemeOptions;
+    appearance?: AppearanceOptions;
+}
+
+export const DEFAULT_ENABLED_SYNC: SyncKeys[] = [ 'theme', 'appearance', 'locale' ];
+export interface SyncOptions {
+    disabled?: SyncKeys[]
+    revision?: {
+        [key: string]: number
+    }
+}
+
+export type SyncUpdateAction = {
+    type: "SYNC_UPDATE";
+    update: { [key in SyncKeys]?: [ number, SyncData[key] ] }
+};
+
+export type SyncAction =
+    | { type: undefined }
+    | {
+          type: "SYNC_ENABLE_KEY";
+          key: SyncKeys;
+      }
+    | {
+          type: "SYNC_DISABLE_KEY";
+          key: SyncKeys;
+      }
+    | {
+          type: "SYNC_SET_REVISION";
+          key: SyncKeys;
+          timestamp: number;
+      }
+    | SyncUpdateAction;
+
+export function sync(
+    state = {} as SyncOptions,
+    action: SyncAction
+): SyncOptions {
+    switch (action.type) {
+        case "SYNC_DISABLE_KEY":
+            return {
+                ...state,
+                disabled: [
+                    ...(state.disabled ?? []).filter(v => v !== action.key),
+                    action.key
+                ]
+            };
+        case "SYNC_ENABLE_KEY":
+            return {
+                ...state,
+                disabled: state.disabled?.filter(v => v !== action.key)
+            };
+        case "SYNC_SET_REVISION":
+            return {
+                ...state,
+                revision: {
+                    ...state.revision,
+                    [action.key]: action.timestamp
+                }
+            };
+        case "SYNC_UPDATE":
+            const revision = { ...state.revision };
+            for (const key of Object.keys(action.update)) {
+                const value = action.update[key as SyncKeys];
+                if (value) {
+                    revision[key] = value[0];
+                }
+            }
+
+            return {
+                ...state,
+                revision
+            }
+        default:
+            return state;
+    }
+}

src/redux/reducers/typing.ts

@@ -0,0 +1,46 @@
+export type TypingUser = { id: string, started: number };
+export type Typing = { [key: string]: TypingUser[] };
+
+export type TypingAction =
+    | { type: undefined }
+    | {
+          type: "TYPING_START";
+          channel: string;
+          user: string;
+      }
+    | {
+          type: "TYPING_STOP";
+          channel: string;
+          user: string;
+      }
+    | {
+          type: "RESET";
+      };
+
+export function typing(state: Typing = {}, action: TypingAction): Typing {
+    switch (action.type) {
+        case "TYPING_START":
+            return {
+                ...state,
+                [action.channel]: [
+                    ...(state[action.channel] ?? []).filter(
+                        x => x.id !== action.user
+                    ),
+                    {
+                        id: action.user,
+                        started: + new Date()
+                    }
+                ]
+            };
+        case "TYPING_STOP":
+            return {
+                ...state,
+                [action.channel]:
+                    state[action.channel]?.filter(x => x.id !== action.user) ?? []
+            };
+        case "RESET":
+            return {};
+        default:
+            return state;
+    }
+}

src/redux/reducers/unreads.ts

@@ -0,0 +1,68 @@
+import { Sync } from "revolt.js/dist/api/objects";
+
+export interface Unreads {
+    [key: string]: Partial<Omit<Sync.ChannelUnread, '_id'>>;
+}
+
+export type UnreadsAction =
+    | { type: undefined }
+    | {
+        type: "UNREADS_MARK_READ";
+        channel: string;
+        message: string;
+        request: boolean;
+      }
+    | {
+        type: "UNREADS_SET";
+        unreads: Sync.ChannelUnread[];
+    }
+    | {
+        type: "UNREADS_MENTION";
+        channel: string;
+        message: string;
+    }
+    | {
+        type: "RESET";
+      };
+
+export function unreads(state = {}, action: UnreadsAction): Unreads {
+    switch (action.type) {
+        case "UNREADS_MARK_READ":
+            if (action.request) {
+                // client.req('PUT', `/channels/${action.channel}/ack/${action.message}` as '/channels/id/ack/id');
+            }
+
+            return {
+                ...state,
+                [action.channel]: {
+                    last_id: action.message
+                }
+            };
+        case "UNREADS_SET":
+            {
+                const obj: Unreads = {};
+                for (const entry of action.unreads) {
+                    const { _id, ...v } = entry;
+                    obj[_id.channel] = v;
+                }
+
+                return obj;
+            }
+        case "UNREADS_MENTION":
+            {
+                const obj = (state as any)[action.channel];
+
+                return {
+                    ...state,
+                    [action.channel]: {
+                        ...obj,
+                        mentions: [ ...(obj?.mentions ?? []), action.message ]
+                    }
+                }
+            }
+        case "RESET":
+            return {};
+        default:
+            return state;
+    }
+}