abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 17:11:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Import assets and add PWA.

Browse Source
This commit is contained in:
Paul
2021-06-18 19:25:33 +01:00
parent 27eeb3acd2
commit e7d1ada13d
59 changed files with 1958 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app.tsx
View File

@@ -3,15 +3,17 @@ import Context from "./context";
import dayjs from "dayjs";
import localeData from 'dayjs/plugin/localeData';
dayjs.extend(localeData)
import localeData from "dayjs/plugin/localeData";
dayjs.extend(localeData);
export function App() {
return (
<Context>
<h1><Text id="general.about" /></h1>
<h3>{ dayjs.locale() }</h3>
<h2>{ dayjs.months() }</h2>
<h1>
<Text id="general.about" />
</h1>
<h3>{dayjs.locale()}</h3>
<h2>{dayjs.months()}</h2>
</Context>
);
}

60
src/context/Locale.tsx
View File

@@ -42,7 +42,7 @@ export enum Language {
PIRATE = "pr",
BOTTOM = "bottom",
PIGLATIN = "piglatin",
HARDCORE = "hardcore"
HARDCORE = "hardcore",
}
export interface LanguageEntry {
@@ -58,7 +58,7 @@ export const Languages: { [key in Language]: LanguageEntry } = {
display: "English (Traditional)",
emoji: "🇬🇧",
i18n: "en",
dayjs: "en-gb"
dayjs: "en-gb",
},
ar: { display: "عربي", emoji: "🇸🇦", i18n: "ar", rtl: true },
@@ -80,7 +80,7 @@ export const Languages: { [key in Language]: LanguageEntry } = {
display: "Português (do Brasil)",
emoji: "🇧🇷",
i18n: "pt_BR",
dayjs: "pt-br"
dayjs: "pt-br",
},
ro: { display: "Română", emoji: "🇷🇴", i18n: "ro" },
ru: { display: "Русский", emoji: "🇷🇺", i18n: "ru" },
@@ -92,19 +92,24 @@ export const Languages: { [key in Language]: LanguageEntry } = {
display: "中文 (简体)",
emoji: "🇨🇳",
i18n: "zh_Hans",
dayjs: "zh"
dayjs: "zh",
},
owo: { display: "OwO", emoji: "🐱", i18n: "owo", dayjs: "en-gb" },
pr: { display: "Pirate", emoji: "🏴‍☠️", i18n: "pr", dayjs: "en-gb" },
bottom: { display: "Bottom", emoji: "🥺", i18n: "bottom", dayjs: "en-gb" },
piglatin: { display: "Pig Latin", emoji: "🐖", i18n: "piglatin", dayjs: "en-gb" },
piglatin: {
display: "Pig Latin",
emoji: "🐖",
i18n: "piglatin",
dayjs: "en-gb",
},
hardcore: {
display: "Hardcore Mode",
emoji: "🔥",
i18n: "hardcore",
dayjs: "en-gb"
}
dayjs: "en-gb",
},
};
interface Props {
@@ -117,45 +122,48 @@ function Locale({ children, locale }: Props) {
const lang = Languages[locale];
useEffect(() => {
if (locale === 'en') {
if (locale === "en") {
setDefinition(definition);
dayjs.locale('en');
dayjs.locale("en");
return;
}
if (lang.i18n === "hardcore") {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
setDefinition({} as any);
return;
}
import(
`../../external/lang/${lang.i18n}.json`
).then(async lang_file => {
let defn = lang_file.default;
let target = lang.dayjs ?? lang.i18n;
let dayjs_locale = await import(/* @vite-ignore */ `/node_modules/dayjs/esm/locale/${target}.js`);
import(`../../external/lang/${lang.i18n}.json`).then(
async (lang_file) => {
const defn = lang_file.default;
const target = lang.dayjs ?? lang.i18n;
const dayjs_locale = await import(
/* @vite-ignore */ `/node_modules/dayjs/esm/locale/${target}.js`
);
if (defn.dayjs) {
dayjs.updateLocale(target, { calendar: defn.dayjs });
if (defn.dayjs) {
dayjs.updateLocale(target, { calendar: defn.dayjs });
}
dayjs.locale(dayjs_locale.default);
setDefinition(defn);
}
dayjs.locale(dayjs_locale.default);
setDefinition(defn);
});
}, [locale]);
);
}, [locale, lang]);
useEffect(() => {
document.body.style.direction = lang.rtl ? "rtl" : "";
}, [ lang.rtl ]);
}, [lang.rtl]);
return <IntlProvider definition={defns}>{children}</IntlProvider>;
}
export default connectState<Omit<Props, 'locale'>>(
export default connectState<Omit<Props, "locale">>(
Locale,
state => {
(state) => {
return {
locale: state.locale
locale: state.locale,
};
},
true

4
src/context/revoltjs/RevoltClient.tsx
View File

@@ -1,4 +1,4 @@
import { Client } from 'revolt.js';
import { Client } from "revolt.js";
export enum ClientStatus {
LOADING,
@@ -7,7 +7,7 @@ export enum ClientStatus {
DISCONNECTED,
CONNECTING,
RECONNECTING,
ONLINE
ONLINE,
}
export const RevoltJSClient = new Client({

2
src/context/revoltjs/messages.ts
View File

@@ -5,6 +5,6 @@ export function mapMessage(message: Partial<Message>) {
const { edited, ...msg } = message;
return {
...msg,
edited: edited?.$date
edited: edited?.$date,
} as MessageObject;
}

14
src/main.tsx
View File

@@ -2,5 +2,19 @@ import { render } from "preact";
import "./styles/index.scss";
import { App } from "./app";
import { registerSW } from 'virtual:pwa-register'
const updateSW = registerSW({
onNeedRefresh() {
// ! FIXME: temp
updateSW(true);
// show a prompt to user
},
onOfflineReady() {
console.info('Ready to work offline.');
// show a ready to work offline to user
},
})
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
render(<App />, document.getElementById("app")!);

12
src/redux/State.tsx
View File

@@ -1,6 +1,6 @@
import { store } from ".";
import localForage from "localforage";
import { Provider } from 'react-redux';
import { Provider } from "react-redux";
import { Children } from "../types/Preact";
import { useEffect, useState } from "preact/hooks";
@@ -12,7 +12,7 @@ async function loadState() {
}
interface Props {
children: Children
children: Children;
}
export default function State(props: Props) {
@@ -23,10 +23,6 @@ export default function State(props: Props) {
}, []);
if (!loaded) return null;
return (
<Provider store={store}>
{ props.children }
</Provider>
)
return <Provider store={store}>{props.children}</Provider>;
}

10
src/redux/connector.tsx
View File

@@ -1,6 +1,8 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { State } from ".";
import { h } from "preact";
//import { memo } from "preact/compat";
// import { memo } from "preact/compat";
import { connect, ConnectedComponent } from "react-redux";
export function connectState<T>(
@@ -10,7 +12,9 @@ export function connectState<T>(
): ConnectedComponent<(props: any) => h.JSX.Element | null, T> {
return (
useDispatcher
? connect(mapKeys, dispatcher => { return { dispatcher } })
? connect(mapKeys, (dispatcher) => {
return { dispatcher };
})
: connect(mapKeys)
)(component);//(memo(component));
)(component); //(memo(component));
}

7
src/redux/index.ts
View File

@@ -24,6 +24,7 @@ export type State = {
experiments: ExperimentOptions;
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const store = createStore((state: any, action: any) => {
if (process.env.NODE_ENV === "development") {
console.debug("State Update:", action);
@@ -46,9 +47,9 @@ store.subscribe(() => {
queue,
drafts,
sync,
experiments
experiments,
} = store.getState() as State;
localForage.setItem("state", {
locale,
auth,
@@ -57,6 +58,6 @@ store.subscribe(() => {
queue,
drafts,
sync,
experiments
experiments,
});
});

11
src/redux/reducers/auth.ts
View File

@@ -30,18 +30,19 @@ export function auth(
accounts: {
...state.accounts,
[action.session.user_id]: {
session: action.session
}
session: action.session,
},
},
active: action.session.user_id
active: action.session.user_id,
};
case "LOGOUT":
case "LOGOUT": {
const accounts = Object.assign({}, state.accounts);
action.user_id && delete accounts[action.user_id];
return {
accounts
accounts,
};
}
default:
return state;
}

6
src/redux/reducers/drafts.ts
View File

@@ -20,11 +20,13 @@ export function drafts(state: Drafts = {}, action: DraftAction): Drafts {
case "SET_DRAFT":
return {
...state,
[action.channel]: action.content
[action.channel]: action.content,
};
case "CLEAR_DRAFT":
case "CLEAR_DRAFT": {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { [action.channel]: _, ...newState } = state;
return newState;
}
case "RESET":
return {};
default:

17
src/redux/reducers/experiments.ts
View File

@@ -1,8 +1,8 @@
export type Experiments = never;
export const AVAILABLE_EXPERIMENTS: Experiments[] = [ ];
export const AVAILABLE_EXPERIMENTS: Experiments[] = [];
export interface ExperimentOptions {
enabled?: Experiments[]
enabled?: Experiments[];
}
export type ExperimentsAction =
@@ -26,16 +26,17 @@ export function experiments(
...state,
enabled: [
...(state.enabled ?? [])
.filter(x => AVAILABLE_EXPERIMENTS.includes(x))
.filter(v => v !== action.key),
action.key
]
.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))
enabled: state.enabled
?.filter((v) => v !== action.key)
.filter((x) => AVAILABLE_EXPERIMENTS.includes(x)),
};
default:
return state;

7
src/redux/reducers/index.ts
View File

@@ -1,3 +1,4 @@
import { State } from "..";
import { combineReducers } from "redux";
import { settings, SettingsAction } from "./settings";
@@ -19,7 +20,7 @@ export default combineReducers({
typing,
drafts,
sync,
experiments
experiments,
});
export type Action =
@@ -32,11 +33,13 @@ export type Action =
| DraftAction
| SyncAction
| ExperimentsAction
| { type: "__INIT"; state: any };
| { type: "__INIT"; state: State };
export type WithDispatcher = { dispatcher: (action: Action) => void };
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function filter(obj: any, keys: string[]) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const newObj: any = {};
for (const key of keys) {
const v = obj[key];

17
src/redux/reducers/locale.ts
View File

@@ -1,5 +1,5 @@
import { Language } from "../../context/Locale";
import { SyncData, SyncKeys, SyncUpdateAction } from "./sync";
import { SyncUpdateAction } from "./sync";
export type LocaleAction =
| { type: undefined }
@@ -19,19 +19,20 @@ export function findLanguage(lang?: string): Language {
}
const code = lang.replace("-", "_");
const short = code.split("_")[0];
for (const key of Object.keys(Language)) {
const value = (Language as any)[key];
const values = [];
for (const key in Language) {
const value = Language[key as keyof typeof Language];
values.push(value);
if (value.startsWith(code)) {
return value;
return value as Language;
}
}
for (const key of Object.keys(Language).reverse()) {
const value = (Language as any)[key];
for (const value of values.reverse()) {
if (value.startsWith(short)) {
return value;
return value as Language;
}
}

30
src/redux/reducers/queue.ts
View File

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

30
src/redux/reducers/settings.ts
View File

@@ -8,9 +8,9 @@ export interface NotificationOptions {
outgoingSoundEnabled?: boolean;
}
export type EmojiPacks = 'mutant' | 'twemoji' | 'noto' | 'openmoji';
export type EmojiPacks = "mutant" | "twemoji" | "noto" | "openmoji";
export interface AppearanceOptions {
emojiPack?: EmojiPacks
emojiPack?: EmojiPacks;
}
export interface Settings {
@@ -53,9 +53,9 @@ export function settings(
return {
...state,
theme: {
...filter(state.theme, [ 'custom', 'preset' ]),
...filter(state.theme, ["custom", "preset"]),
...action.theme,
}
},
};
case "SETTINGS_SET_THEME_OVERRIDE":
return {
@@ -64,32 +64,32 @@ export function settings(
...state.theme,
custom: {
...state.theme?.custom,
...action.custom
}
}
...action.custom,
},
},
};
case "SETTINGS_SET_NOTIFICATION_OPTIONS":
return {
...state,
notification: {
...state.notification,
...action.options
}
...action.options,
},
};
case "SETTINGS_SET_APPEARANCE":
return {
...state,
appearance: {
...filter(state.appearance, [ 'emojiPack' ]),
...action.options
}
}
...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
}
theme: action.update.theme?.[1] ?? state.theme,
};
case "RESET":
return {};
default:

35
src/redux/reducers/sync.ts
View File

@@ -2,7 +2,7 @@ import { AppearanceOptions } from "./settings";
import { Language } from "../../context/Locale";
import { ThemeOptions } from "../../context/Theme";
export type SyncKeys = 'theme' | 'appearance' | 'locale';
export type SyncKeys = "theme" | "appearance" | "locale";
export interface SyncData {
locale?: Language;
@@ -10,17 +10,21 @@ export interface SyncData {
appearance?: AppearanceOptions;
}
export const DEFAULT_ENABLED_SYNC: SyncKeys[] = [ 'theme', 'appearance', 'locale' ];
export const DEFAULT_ENABLED_SYNC: SyncKeys[] = [
"theme",
"appearance",
"locale",
];
export interface SyncOptions {
disabled?: SyncKeys[]
disabled?: SyncKeys[];
revision?: {
[key: string]: number
}
[key: string]: number;
};
}
export type SyncUpdateAction = {
type: "SYNC_UPDATE";
update: { [key in SyncKeys]?: [ number, SyncData[key] ] }
update: { [key in SyncKeys]?: [number, SyncData[key]] };
};
export type SyncAction =
@@ -49,24 +53,24 @@ export function sync(
return {
...state,
disabled: [
...(state.disabled ?? []).filter(v => v !== action.key),
action.key
]
...(state.disabled ?? []).filter((v) => v !== action.key),
action.key,
],
};
case "SYNC_ENABLE_KEY":
return {
...state,
disabled: state.disabled?.filter(v => v !== action.key)
disabled: state.disabled?.filter((v) => v !== action.key),
};
case "SYNC_SET_REVISION":
return {
...state,
revision: {
...state.revision,
[action.key]: action.timestamp
}
[action.key]: action.timestamp,
},
};
case "SYNC_UPDATE":
case "SYNC_UPDATE": {
const revision = { ...state.revision };
for (const key of Object.keys(action.update)) {
const value = action.update[key as SyncKeys];
@@ -77,8 +81,9 @@ export function sync(
return {
...state,
revision
}
revision,
};
}
default:
return state;
}

14
src/redux/reducers/typing.ts
View File

@@ -1,4 +1,4 @@
export type TypingUser = { id: string, started: number };
export type TypingUser = { id: string; started: number };
export type Typing = { [key: string]: TypingUser[] };
export type TypingAction =
@@ -24,19 +24,21 @@ export function typing(state: Typing = {}, action: TypingAction): Typing {
...state,
[action.channel]: [
...(state[action.channel] ?? []).filter(
x => x.id !== action.user
(x) => x.id !== action.user
),
{
id: action.user,
started: + new Date()
}
]
started: +new Date(),
},
],
};
case "TYPING_STOP":
return {
...state,
[action.channel]:
state[action.channel]?.filter(x => x.id !== action.user) ?? []
state[action.channel]?.filter(
(x) => x.id !== action.user
) ?? [],
};
case "RESET":
return {};

70
src/redux/reducers/unreads.ts
View File

@@ -1,31 +1,31 @@
import { Sync } from "revolt.js/dist/api/objects";
export interface Unreads {
[key: string]: Partial<Omit<Sync.ChannelUnread, '_id'>>;
[key: string]: Partial<Omit<Sync.ChannelUnread, "_id">>;
}
export type UnreadsAction =
| { type: undefined }
| {
type: "UNREADS_MARK_READ";
channel: string;
message: string;
request: boolean;
type: "UNREADS_MARK_READ";
channel: string;
message: string;
request: boolean;
}
| {
type: "UNREADS_SET";
unreads: Sync.ChannelUnread[];
}
type: "UNREADS_SET";
unreads: Sync.ChannelUnread[];
}
| {
type: "UNREADS_MENTION";
channel: string;
message: string;
}
type: "UNREADS_MENTION";
channel: string;
message: string;
}
| {
type: "RESET";
type: "RESET";
};
export function unreads(state = {}, action: UnreadsAction): Unreads {
export function unreads(state = {} as Unreads, action: UnreadsAction): Unreads {
switch (action.type) {
case "UNREADS_MARK_READ":
if (action.request) {
@@ -35,31 +35,29 @@ export function unreads(state = {}, action: UnreadsAction): Unreads {
return {
...state,
[action.channel]: {
last_id: action.message
}
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_SET": {
const obj: Unreads = {};
for (const entry of action.unreads) {
const { _id, ...v } = entry;
obj[_id.channel] = v;
}
case "UNREADS_MENTION":
{
const obj = (state as any)[action.channel];
return {
...state,
[action.channel]: {
...obj,
mentions: [ ...(obj?.mentions ?? []), action.message ]
}
}
}
return obj;
}
case "UNREADS_MENTION": {
const obj = state[action.channel];
return {
...state,
[action.channel]: {
...obj,
mentions: [...(obj?.mentions ?? []), action.message],
},
};
}
case "RESET":
return {};
default: