Skip to content

Commit 8c28730

Browse files
simolus3simolus3
committed
Fix web todolist demos
1 parent 5594ac6 commit 8c28730

File tree

18 files changed

+156
-586
lines changed

18 files changed

+156
-586
lines changed

‎demos/react-supabase-todolist-optional-sync/src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default function EntryPage() {
4545

4646
return (
4747
<S.MainGrid container>
48-
<S.CenteredGrid item xs={12} md={6} lg={5}>
48+
<S.CenteredGrid size={{ xs: 12, md: 6, lg: 5 }}>
4949
<CircularProgress />
5050
</S.CenteredGrid>
5151
</S.MainGrid>

‎demos/react-supabase-todolist-optional-sync/src/app/views/sql-console/page.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export type LoginFormParams = {
1212
const DEFAULT_QUERY = 'SELECT * FROM lists';
1313

1414
export default function SQLConsolePage() {
15-
const inputRef = React.useRef<HTMLInputElement>();
15+
const inputRef = React.useRef<HTMLInputElement>(null);
1616
const [query, setQuery] = React.useState(DEFAULT_QUERY);
1717
const { data: querySQLResult } = useQuery(query);
1818

@@ -34,7 +34,7 @@ export default function SQLConsolePage() {
3434
<NavigationPage title="SQL Console">
3535
<S.MainContainer>
3636
<S.CenteredGrid container>
37-
<S.CenteredGrid item xs={12} md={10}>
37+
<S.CenteredGrid size={{ xs: 12, md: 10 }}>
3838
<TextField
3939
inputRef={inputRef}
4040
fullWidth
@@ -48,7 +48,7 @@ export default function SQLConsolePage() {
4848
}}
4949
/>
5050
</S.CenteredGrid>
51-
<S.CenteredGrid item xs={12} md={2}>
51+
<S.CenteredGrid size={{ xs: 12, md: 2 }}>
5252
<Button
5353
sx={{ margin: '10px' }}
5454
variant="contained"
@@ -57,8 +57,7 @@ export default function SQLConsolePage() {
5757
if (queryInput) {
5858
setQuery(queryInput);
5959
}
60-
}}
61-
>
60+
}}>
6261
Execute Query
6362
</Button>
6463
</S.CenteredGrid>

‎demos/react-supabase-todolist-optional-sync/vite.config.mts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ export default defineConfig({
3434
VitePWA({
3535
registerType: 'autoUpdate',
3636
includeAssets: ['powersync-logo.svg', 'supabase-logo.png', 'favicon.ico'],
37+
workbox: {
38+
maximumFileSizeToCacheInBytes: 3000000
39+
},
3740
manifest: {
3841
theme_color: '#c44eff',
3942
background_color: '#c44eff',

‎demos/react-supabase-todolist-sync-streams/src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default function EntryPage() {
5151

5252
return (
5353
<S.MainGrid container>
54-
<S.CenteredGrid item xs={12} md={6} lg={5}>
54+
<S.CenteredGrid size={{ xs: 12, md: 6, lg: 5 }}>
5555
<CircularProgress />
5656
</S.CenteredGrid>
5757
</S.MainGrid>

‎demos/react-supabase-todolist-sync-streams/src/app/router.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import TodoListsPage from '@/app/views/todo-lists/page';
77
import ViewsLayout from '@/app/views/layout';
88
import SQLConsolePage from '@/app/views/sql-console/page';
99
import { useSupabase } from '@/components/providers/SystemProvider';
10-
import React from 'react';
10+
import React, { ReactNode } from 'react';
1111

1212
export const TODO_LISTS_ROUTE = '/views/todo-lists';
1313
export const TODO_EDIT_ROUTE = '/views/todo-lists/:id';
@@ -16,11 +16,11 @@ export const REGISTER_ROUTE = '/auth/register';
1616
export const SQL_CONSOLE_ROUTE = '/sql-console';
1717

1818
interface AuthGuardProps {
19-
children: JSX.Element;
19+
children: ReactNode;
2020
}
2121

2222
const AuthGuard = ({ children }: AuthGuardProps) => {
23-
const connector = useSupabase()
23+
const connector = useSupabase();
2424

2525
const navigate = useNavigate();
2626
React.useEffect(() => {
@@ -39,7 +39,7 @@ const AuthGuard = ({ children }: AuthGuardProps) => {
3939
if (!connector.currentSession) {
4040
navigate(LOGIN_ROUTE);
4141
}
42-
}
42+
};
4343
if (connector.ready) {
4444
loginGuard();
4545
} else {
@@ -50,7 +50,6 @@ const AuthGuard = ({ children }: AuthGuardProps) => {
5050
});
5151
return () => l?.();
5252
}
53-
5453
}, []);
5554
return children;
5655
};
@@ -96,4 +95,4 @@ export const router = createBrowserRouter([
9695
}
9796
]
9897
}
99-
]);
98+
]);

‎demos/react-supabase-todolist-sync-streams/src/app/views/sql-console/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const TableDisplay = React.memo(({ data }: { data: ReadonlyArray<any> }) => {
5151
});
5252

5353
export default function SQLConsolePage() {
54-
const inputRef = React.useRef<HTMLInputElement>();
54+
const inputRef = React.useRef<HTMLInputElement>(null);
5555
const [query, setQuery] = React.useState(DEFAULT_QUERY);
5656

5757
const { data, error } = useQuery(query, [], {
@@ -73,7 +73,7 @@ export default function SQLConsolePage() {
7373
<NavigationPage title="SQL Console">
7474
<S.MainContainer>
7575
<S.CenteredGrid container>
76-
<S.CenteredGrid item xs={12} md={10}>
76+
<S.CenteredGrid size={{ xs: 12, md: 10 }}>
7777
<TextField
7878
inputRef={inputRef}
7979
fullWidth
@@ -87,7 +87,7 @@ export default function SQLConsolePage() {
8787
}}
8888
/>
8989
</S.CenteredGrid>
90-
<S.CenteredGrid item xs={12} md={2}>
90+
<S.CenteredGrid size={{ xs: 12, md: 2 }}>
9191
<Button
9292
sx={{ margin: '10px' }}
9393
variant="contained"

‎demos/react-supabase-todolist-sync-streams/vite.config.mts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ export default defineConfig({
3333
react(),
3434
VitePWA({
3535
registerType: 'autoUpdate',
36+
workbox: {
37+
maximumFileSizeToCacheInBytes: 3000000
38+
},
3639
includeAssets: ['powersync-logo.svg', 'supabase-logo.png', 'favicon.ico'],
3740
manifest: {
3841
theme_color: '#c44eff',

‎demos/react-supabase-todolist-tanstackdb/src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default function EntryPage() {
5151

5252
return (
5353
<S.MainGrid container>
54-
<S.CenteredGrid item xs={12} md={6} lg={5}>
54+
<S.CenteredGrid size={{ xs: 12, md: 6, lg: 5 }}>
5555
<CircularProgress />
5656
</S.CenteredGrid>
5757
</S.MainGrid>

‎demos/react-supabase-todolist-tanstackdb/src/app/router.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import TodoListsPage from '@/app/views/todo-lists/page';
77
import ViewsLayout from '@/app/views/layout';
88
import SQLConsolePage from '@/app/views/sql-console/page';
99
import { useSupabase } from '@/components/providers/SystemProvider';
10-
import React from 'react';
10+
import React, { ReactElement } from 'react';
1111

1212
export const TODO_LISTS_ROUTE = '/views/todo-lists';
1313
export const TODO_EDIT_ROUTE = '/views/todo-lists/:id';
@@ -16,11 +16,11 @@ export const REGISTER_ROUTE = '/auth/register';
1616
export const SQL_CONSOLE_ROUTE = '/sql-console';
1717

1818
interface AuthGuardProps {
19-
children: JSX.Element;
19+
children: ReactElement;
2020
}
2121

2222
const AuthGuard = ({ children }: AuthGuardProps) => {
23-
const connector = useSupabase()
23+
const connector = useSupabase();
2424

2525
const navigate = useNavigate();
2626
React.useEffect(() => {
@@ -39,7 +39,7 @@ const AuthGuard = ({ children }: AuthGuardProps) => {
3939
if (!connector.currentSession) {
4040
navigate(LOGIN_ROUTE);
4141
}
42-
}
42+
};
4343
if (connector.ready) {
4444
loginGuard();
4545
} else {
@@ -50,7 +50,6 @@ const AuthGuard = ({ children }: AuthGuardProps) => {
5050
});
5151
return () => l?.();
5252
}
53-
5453
}, []);
5554
return children;
5655
};
@@ -96,4 +95,4 @@ export const router = createBrowserRouter([
9695
}
9796
]
9897
}
99-
]);
98+
]);

‎demos/react-supabase-todolist-tanstackdb/src/app/views/sql-console/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const TableDisplay = React.memo(({ data }: { data: ReadonlyArray<any> }) => {
5656
* We cannot use TanStack collections for this page.
5757
*/
5858
export default function SQLConsolePage() {
59-
const inputRef = React.useRef<HTMLInputElement>();
59+
const inputRef = React.useRef<HTMLInputElement>(null);
6060
const [query, setQuery] = React.useState(DEFAULT_QUERY);
6161

6262
const { data, error } = useQuery(query, [], {
@@ -78,7 +78,7 @@ export default function SQLConsolePage() {
7878
<NavigationPage title="SQL Console">
7979
<S.MainContainer>
8080
<S.CenteredGrid container>
81-
<S.CenteredGrid item xs={12} md={10}>
81+
<S.CenteredGrid size={{ xs: 12, md: 10 }}>
8282
<TextField
8383
inputRef={inputRef}
8484
fullWidth
@@ -92,7 +92,7 @@ export default function SQLConsolePage() {
9292
}}
9393
/>
9494
</S.CenteredGrid>
95-
<S.CenteredGrid item xs={12} md={2}>
95+
<S.CenteredGrid size={{ xs: 12, md: 2 }}>
9696
<Button
9797
sx={{ margin: '10px' }}
9898
variant="contained"

0 commit comments

Comments
 (0)