Compare commits

..

No commits in common. "e9551d6915c047931183ba90aae3fc967e9e9669" and "a97963001ad376a90b6afd322c916022a4f57594" have entirely different histories.

5 changed files with 85 additions and 128 deletions

View file

@ -13,31 +13,3 @@ You can debug on the Safari on iOS only if you have mac (and run macOS). The cer
## Hero Animation won't work (after hot reload)
That's a known issue. Hot reload won't refresh the module sets the hero cache. Refresh the whole page and it should work.
## The components don't react to the change as I setting the store, until the page reloaded
The `WritableAtom<unknwon>.set` might do an equals check. You must set a different object to ensure the atom sending a notify.
The code below may not notify the change:
```ts
export function updateAcctInf(idx: number) {
const o = $accounts.get();
// ...
o[idx].inf = inf;
$accounts.set(o);
}
```
Instead, set a new object:
```ts
export function updateAcctInf(idx: number) {
const o = $accounts.get();
// ...
o[idx] = Object.assign({}, o[idx], { inf });
$accounts.set(Array.from(o));
}
```
Ja, the code is weird, but that's the best we know. Anyway, you need new object on the path of your changed value.

View file

@ -2,9 +2,8 @@ import { Route, Router } from "@solidjs/router";
import { ThemeProvider } from "@suid/material";
import {
Component,
createEffect,
createMemo,
createRenderEffect,
createSignal,
ErrorBoundary,
lazy,
onCleanup,
@ -13,8 +12,9 @@ import { useRootTheme } from "./material/mui.js";
import {
Provider as ClientProvider,
createMastoClientFor,
type Session,
} from "./masto/clients.js";
import { $accounts, updateAcctInf } from "./accounts/stores.js";
import { $accounts } from "./accounts/stores.js";
import { useStore } from "@nanostores/solid";
import { DateFnScope, useLanguage } from "./platform/i18n.jsx";
@ -28,7 +28,6 @@ const TootBottomSheet = lazy(() => import("./timelines/TootBottomSheet.js"));
const MotionSettings = lazy(() => import("./settings/Motions.js"));
const LanguageSettings = lazy(() => import("./settings/Language.js"));
const RegionSettings = lazy(() => import("./settings/Region.jsx"));
const UnexpectedError = lazy(() => import("./UnexpectedError.js"));
const Routing: Component = () => {
return (
@ -57,30 +56,14 @@ const Routing: Component = () => {
const App: Component = () => {
const theme = useRootTheme();
const accts = useStore($accounts);
const clientStore = createSignal<Session[]>([]);
const lang = useLanguage();
const clients = createMemo(() => {
return accts().map((x) => ({
account: x,
client: createMastoClientFor(x),
}));
});
createEffect(() => {
const neededUpdates = accts()
.map((x, i) => [i, x] as const)
.filter(([, x]) => !x.inf);
if (neededUpdates.length > 0) {
// FIXME: we might need some kind of concurrent control
Promise.all(neededUpdates.map(([i]) => updateAcctInf(i))).then(
(x) => {
console.info("acct info updated for %d acct(s)", x.length);
},
(reason) => {
console.error("acct info update is fail", reason);
},
);
}
createRenderEffect(() => {
const [, setClients] = clientStore;
setClients(
accts().map((x) => ({ account: x, client: createMastoClientFor(x) })),
);
});
createRenderEffect(() => {
@ -93,6 +76,8 @@ const App: Component = () => {
root.removeAttribute("lang");
});
const UnexpectedError = lazy(() => import("./UnexpectedError.js"));
return (
<ErrorBoundary
fallback={(err, reset) => {
@ -102,7 +87,7 @@ const App: Component = () => {
>
<ThemeProvider theme={theme()}>
<DateFnScope>
<ClientProvider value={clients}>
<ClientProvider value={clientStore}>
<Routing />
</ClientProvider>
</DateFnScope>

View file

@ -59,32 +59,32 @@ async function oauth2TokenViaAuthCode(app: RegisteredApp, authCode: string) {
export async function acceptAccountViaAuthCode(site: string, authCode: string) {
const $store = $accounts;
const app = $registeredApps.get()[site];
if (!app) {
throw TypeError("application not found");
}
const token = await oauth2TokenViaAuthCode(app, authCode);
if (!app) {
throw TypeError("application not found");
}
const token = await oauth2TokenViaAuthCode(app, authCode);
const acct = {
site: app.site,
accessToken: token.access_token,
tokenType: token.token_type,
scope: token.scope,
createdAt: token.created_at * 1000,
};
const acct = {
site: app.site,
accessToken: token.access_token,
tokenType: token.token_type,
scope: token.scope,
createdAt: token.created_at * 1000,
};
const all = [...$store.get(), acct];
$store.set(all);
const all = [...$store.get(), acct];
$store.set(all);
return acct;
return acct;
}
export async function updateAcctInf(idx: number) {
const o = $accounts.get();
const client = createMastoClientFor(o[idx]);
const inf = await client.v1.accounts.verifyCredentials();
o[idx] = Object.assign({}, o[idx], { inf });
$accounts.set(Array.from(o));
return inf;
const client = createMastoClientFor(o[idx]);
const inf = await client.v1.accounts.verifyCredentials();
o[idx].inf = inf;
$accounts.set(o);
return inf;
}
export function signOut(predicate: (acct: Account) => boolean) {
@ -131,57 +131,57 @@ async function getAppAccessToken(app: RegisteredApp) {
export async function getOrRegisterApp(site: string, redirectUrl: string) {
const $store = $registeredApps;
const all = $store.get();
const savedApp = all[site];
if (savedApp && savedApp.redirectUrl === redirectUrl) {
const appAccessToken = await getAppAccessToken(savedApp);
if (appAccessToken) {
const client = createRestAPIClient({
url: site,
accessToken: appAccessToken,
});
try {
const verify = await client.v1.apps.verifyCredentials();
Object.assign(savedApp, {
vapidKey: verify.vapidKey,
});
const oauthClient = createOAuthAPIClient({
const savedApp = all[site];
if (savedApp && savedApp.redirectUrl === redirectUrl) {
const appAccessToken = await getAppAccessToken(savedApp);
if (appAccessToken) {
const client = createRestAPIClient({
url: site,
accessToken: appAccessToken,
});
try {
await oauthClient.revoke({
clientId: savedApp.clientId,
clientSecret: savedApp.clientSecret,
token: appAccessToken,
const verify = await client.v1.apps.verifyCredentials();
Object.assign(savedApp, {
vapidKey: verify.vapidKey,
});
} catch {}
return savedApp;
} finally {
$store.set(all);
const oauthClient = createOAuthAPIClient({
url: site,
accessToken: appAccessToken,
});
try {
await oauthClient.revoke({
clientId: savedApp.clientId,
clientSecret: savedApp.clientSecret,
token: appAccessToken,
});
} catch {}
return savedApp;
} finally {
$store.set(all);
}
}
}
}
const client = createRestAPIClient({
url: site,
});
const app = await client.v1.apps.create({
clientName: "TuTu",
website: "https://github.com/thislight/tutu",
redirectUris: redirectUrl,
scopes: "read write push",
});
if (!app.clientId || !app.clientSecret) {
return null;
}
all[site] = {
site,
clientId: app.clientId,
clientSecret: app.clientSecret,
vapidKey: app.vapidKey ?? undefined,
redirectUrl: redirectUrl,
scope: "read write push",
};
$store.set(all);
return all[site];
const client = createRestAPIClient({
url: site,
});
const app = await client.v1.apps.create({
clientName: "TuTu",
website: "https://github.com/thislight/tutu",
redirectUris: redirectUrl,
scopes: "read write push",
});
if (!app.clientId || !app.clientSecret) {
return null;
}
all[site] = {
site,
clientId: app.clientId,
clientSecret: app.clientSecret,
vapidKey: app.vapidKey ?? undefined,
redirectUrl: redirectUrl,
scope: "read write push",
};
$store.set(all);
return all[site];
}

View file

@ -49,12 +49,12 @@ export type Session = {
client: mastodon.rest.Client;
};
const Context = /* @__PURE__ */ createContext<Accessor<readonly Readonly<Session>[]>>();
const Context = /* @__PURE__ */ createContext<Signal<Session[]>>();
export const Provider = Context.Provider;
export function useSessions() {
const sessions = useSessionsRaw();
const [sessions] = useSessionsRw();
const navigate = useNavigate();
const location = useLocation();
@ -69,7 +69,7 @@ export function useSessions() {
return sessions;
}
function useSessionsRaw() {
function useSessionsRw() {
const store = useContext(Context);
if (!store) {
throw new TypeError("sessions are not provided");

View file

@ -118,12 +118,12 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
animation = element.animate(
{
top: [`${rect.top}px`, `${rect.top}px`],
top: [rect.top, rect.top],
left: reserve
? [`${rect.left}px`, `${window.innerWidth}px`]
: [`${window.innerWidth}px`, `${rect.left}px`],
width: [`${rect.width}px`, `${rect.width}px`],
height: [`${rect.height}px`, `${rect.height}px`],
width: [rect.width, rect.width],
height: [rect.height, rect.height],
},
{ easing, duration },
);
@ -151,12 +151,12 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
animation = element.animate(
{
left: [`${rect.left}px`, `${rect.left}px`],
left: [rect.left, rect.left],
top: reserve
? [`${rect.top}px`, `${window.innerHeight}px`]
: [`${window.innerHeight}px`, `${rect.top}px`],
width: [`${rect.width}px`, `${rect.width}px`],
height: [`${rect.height}px`, `${rect.height}px`],
width: [rect.width, rect.width],
height: [rect.height, rect.height],
},
{ easing, duration },
);