Compare commits

..

2 commits

Author SHA1 Message Date
thislight
e9551d6915
BottomSheet: fix animation syntax error
All checks were successful
/ depoly (push) Successful in 1m9s
2024-10-11 16:40:43 +08:00
thislight
afda0642b4
App: fix the clients change is not notified 2024-10-11 16:39:42 +08:00
5 changed files with 128 additions and 85 deletions

View file

@ -13,3 +13,31 @@ 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) ## 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. 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,8 +2,9 @@ import { Route, Router } from "@solidjs/router";
import { ThemeProvider } from "@suid/material"; import { ThemeProvider } from "@suid/material";
import { import {
Component, Component,
createEffect,
createMemo,
createRenderEffect, createRenderEffect,
createSignal,
ErrorBoundary, ErrorBoundary,
lazy, lazy,
onCleanup, onCleanup,
@ -12,9 +13,8 @@ import { useRootTheme } from "./material/mui.js";
import { import {
Provider as ClientProvider, Provider as ClientProvider,
createMastoClientFor, createMastoClientFor,
type Session,
} from "./masto/clients.js"; } from "./masto/clients.js";
import { $accounts } from "./accounts/stores.js"; import { $accounts, updateAcctInf } from "./accounts/stores.js";
import { useStore } from "@nanostores/solid"; import { useStore } from "@nanostores/solid";
import { DateFnScope, useLanguage } from "./platform/i18n.jsx"; import { DateFnScope, useLanguage } from "./platform/i18n.jsx";
@ -28,6 +28,7 @@ const TootBottomSheet = lazy(() => import("./timelines/TootBottomSheet.js"));
const MotionSettings = lazy(() => import("./settings/Motions.js")); const MotionSettings = lazy(() => import("./settings/Motions.js"));
const LanguageSettings = lazy(() => import("./settings/Language.js")); const LanguageSettings = lazy(() => import("./settings/Language.js"));
const RegionSettings = lazy(() => import("./settings/Region.jsx")); const RegionSettings = lazy(() => import("./settings/Region.jsx"));
const UnexpectedError = lazy(() => import("./UnexpectedError.js"));
const Routing: Component = () => { const Routing: Component = () => {
return ( return (
@ -56,14 +57,30 @@ const Routing: Component = () => {
const App: Component = () => { const App: Component = () => {
const theme = useRootTheme(); const theme = useRootTheme();
const accts = useStore($accounts); const accts = useStore($accounts);
const clientStore = createSignal<Session[]>([]);
const lang = useLanguage(); const lang = useLanguage();
createRenderEffect(() => { const clients = createMemo(() => {
const [, setClients] = clientStore; return accts().map((x) => ({
setClients( account: x,
accts().map((x) => ({ account: x, client: createMastoClientFor(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(() => { createRenderEffect(() => {
@ -76,8 +93,6 @@ const App: Component = () => {
root.removeAttribute("lang"); root.removeAttribute("lang");
}); });
const UnexpectedError = lazy(() => import("./UnexpectedError.js"));
return ( return (
<ErrorBoundary <ErrorBoundary
fallback={(err, reset) => { fallback={(err, reset) => {
@ -87,7 +102,7 @@ const App: Component = () => {
> >
<ThemeProvider theme={theme()}> <ThemeProvider theme={theme()}>
<DateFnScope> <DateFnScope>
<ClientProvider value={clientStore}> <ClientProvider value={clients}>
<Routing /> <Routing />
</ClientProvider> </ClientProvider>
</DateFnScope> </DateFnScope>

View file

@ -82,8 +82,8 @@ export async function updateAcctInf(idx: number) {
const o = $accounts.get(); const o = $accounts.get();
const client = createMastoClientFor(o[idx]); const client = createMastoClientFor(o[idx]);
const inf = await client.v1.accounts.verifyCredentials(); const inf = await client.v1.accounts.verifyCredentials();
o[idx].inf = inf; o[idx] = Object.assign({}, o[idx], { inf });
$accounts.set(o); $accounts.set(Array.from(o));
return inf; return inf;
} }

View file

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

View file

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