mirror of
https://github.com/hzrd149/nostrudel.git
synced 2025-03-17 13:21:44 +01:00
small fix for scroll restoration
format code
This commit is contained in:
parent
ae8f3a4d22
commit
7ad01e97c8
@ -3,3 +3,5 @@ dist
|
||||
public/lib
|
||||
stats.html
|
||||
pnpm-lock.yaml
|
||||
android
|
||||
ios
|
||||
|
12
src/app.tsx
12
src/app.tsx
@ -1,6 +1,6 @@
|
||||
import { lazy, Suspense } from "react";
|
||||
import { Spinner } from "@chakra-ui/react";
|
||||
import { createBrowserRouter, Outlet, RouterProvider, ScrollRestoration } from "react-router";
|
||||
import { createBrowserRouter, Outlet, RouterProvider, ScrollRestoration, Location } from "react-router";
|
||||
|
||||
import GlobalStyles from "./styles";
|
||||
|
||||
@ -12,16 +12,14 @@ import useSetColorMode from "./hooks/use-set-color-mode";
|
||||
|
||||
import TaskManagerProvider from "./views/task-manager/provider";
|
||||
|
||||
/*
|
||||
TODO: update scroll restoration to use a different key then location.key
|
||||
the location.key changes when location.state changes, but that should not change the scroll position
|
||||
*/
|
||||
const getScrollKey = (location: Location) => location.pathname + location.search + location.hash;
|
||||
|
||||
const RootPage = () => {
|
||||
useSetColorMode();
|
||||
|
||||
return (
|
||||
<RouteProviders>
|
||||
<ScrollRestoration />
|
||||
<ScrollRestoration getKey={getScrollKey} />
|
||||
<AppLayout />
|
||||
</RouteProviders>
|
||||
);
|
||||
@ -29,7 +27,7 @@ const RootPage = () => {
|
||||
const NoLayoutPage = () => {
|
||||
return (
|
||||
<RouteProviders>
|
||||
<ScrollRestoration />
|
||||
<ScrollRestoration getKey={getScrollKey} />
|
||||
<Suspense fallback={<Spinner />}>
|
||||
<Outlet />
|
||||
</Suspense>
|
||||
|
@ -1,19 +1,19 @@
|
||||
import { FormControl, FormControlProps, FormLabel, Switch } from '@chakra-ui/react';
|
||||
import { FormControl, FormControlProps, FormLabel, Switch } from "@chakra-ui/react";
|
||||
|
||||
export default function PanelItemToggle({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
...props
|
||||
}: Omit<FormControlProps, 'children'> & {
|
||||
label?: string;
|
||||
value: boolean;
|
||||
onChange: () => void;
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
...props
|
||||
}: Omit<FormControlProps, "children"> & {
|
||||
label?: string;
|
||||
value: boolean;
|
||||
onChange: () => void;
|
||||
}) {
|
||||
return (
|
||||
<FormControl display="flex" alignItems="center" justifyContent="space-between" {...props}>
|
||||
<FormLabel mb="0">{label}</FormLabel>
|
||||
<Switch isChecked={value} onChange={onChange} />
|
||||
</FormControl>
|
||||
);
|
||||
return (
|
||||
<FormControl display="flex" alignItems="center" justifyContent="space-between" {...props}>
|
||||
<FormLabel mb="0">{label}</FormLabel>
|
||||
<Switch isChecked={value} onChange={onChange} />
|
||||
</FormControl>
|
||||
);
|
||||
}
|
||||
|
@ -1,19 +1,19 @@
|
||||
import { useState } from 'react';
|
||||
import { Flex, FlexProps, Heading } from '@chakra-ui/react';
|
||||
import TextButton from './text-button';
|
||||
import { useState } from "react";
|
||||
import { Flex, FlexProps, Heading } from "@chakra-ui/react";
|
||||
import TextButton from "./text-button";
|
||||
|
||||
export default function Panel({ label, children, ...props }: FlexProps & { label?: string }) {
|
||||
const [open, setOpen] = useState(true);
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<Flex borderWidth={1} rounded="lg" p="4" direction="column" {...props}>
|
||||
<Flex justifyContent="space-between" mb={open ? 2 : 0}>
|
||||
<Heading size="sm">{label}</Heading>
|
||||
<TextButton onClick={() => setOpen(!open)} type="button">
|
||||
[{open ? '-' : '+'}]
|
||||
</TextButton>
|
||||
</Flex>
|
||||
{open && children}
|
||||
</Flex>
|
||||
);
|
||||
return (
|
||||
<Flex borderWidth={1} rounded="lg" p="4" direction="column" {...props}>
|
||||
<Flex justifyContent="space-between" mb={open ? 2 : 0}>
|
||||
<Heading size="sm">{label}</Heading>
|
||||
<TextButton onClick={() => setOpen(!open)} type="button">
|
||||
[{open ? "-" : "+"}]
|
||||
</TextButton>
|
||||
</Flex>
|
||||
{open && children}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
@ -1,9 +1,9 @@
|
||||
import { Button, ButtonProps } from '@chakra-ui/react';
|
||||
import { Button, ButtonProps } from "@chakra-ui/react";
|
||||
|
||||
export default function TextButton({ children, ...props }: ButtonProps) {
|
||||
return (
|
||||
<Button variant="link" fontFamily="monospace" {...props}>
|
||||
{children}
|
||||
</Button>
|
||||
);
|
||||
return (
|
||||
<Button variant="link" fontFamily="monospace" {...props}>
|
||||
{children}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
@ -1,10 +1,10 @@
|
||||
import MobileLayout from './mobile';
|
||||
import DesktopLayout from './desktop';
|
||||
import { useBreakpointValue } from '../../providers/global/breakpoint-provider';
|
||||
import MobileLayout from "./mobile";
|
||||
import DesktopLayout from "./desktop";
|
||||
import { useBreakpointValue } from "../../providers/global/breakpoint-provider";
|
||||
|
||||
export default function AppLayout() {
|
||||
const mobile = useBreakpointValue({ base: true, md: false });
|
||||
const mobile = useBreakpointValue({ base: true, md: false });
|
||||
|
||||
if (mobile) return <MobileLayout />;
|
||||
else return <DesktopLayout />;
|
||||
if (mobile) return <MobileLayout />;
|
||||
else return <DesktopLayout />;
|
||||
}
|
||||
|
@ -1,9 +1,9 @@
|
||||
import { useObservable } from 'applesauce-react/hooks';
|
||||
import { useObservable } from "applesauce-react/hooks";
|
||||
|
||||
import useReport from '../use-report';
|
||||
import useReport from "../use-report";
|
||||
|
||||
export default function useNetworkOverviewReport() {
|
||||
const report = useReport('NETWORK_STATUS', 'network-status', {});
|
||||
const report = useReport("NETWORK_STATUS", "network-status", {});
|
||||
|
||||
return useObservable(report?.status);
|
||||
return useObservable(report?.status);
|
||||
}
|
||||
|
@ -5,7 +5,7 @@ import { getAddressPointersFromList, getEventPointersFromList } from "applesauce
|
||||
import useCurrentAccount from "./use-current-account";
|
||||
import useReplaceableEvent from "./use-replaceable-event";
|
||||
|
||||
export default function userUserBookmarksList(pubkey?: string, relays: string[] = [], force=false) {
|
||||
export default function userUserBookmarksList(pubkey?: string, relays: string[] = [], force = false) {
|
||||
const account = useCurrentAccount();
|
||||
const key = pubkey ?? account?.pubkey;
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user