Skip to content

Commit a18ea5e

Browse files
rkistnerrkistner
authored
Merge pull request #81 from powersync-ja/demo-tweaks
nextjs-supabase-todolist demo tweaks
2 parents 0ff3228 + 1c134c5 commit a18ea5e

File tree

5 files changed

+63
-44
lines changed

5 files changed

+63
-44
lines changed

‎demos/nextjs-supabase-todolist/src/app/globals.css‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
1-
:root {
2-
--foreground-rgb: 0, 0, 0;
3-
--background-start-rgb: 214, 219, 220;
4-
--background-end-rgb: 255, 255, 255;
5-
}
61

7-
@media (prefers-color-scheme: dark) {
8-
:root {
9-
--foreground-rgb: 255, 255, 255;
10-
--background-start-rgb: 0, 0, 0;
11-
--background-end-rgb: 0, 0, 0;
12-
}
2+
:root {
3+
--foreground-rgb: 255, 255, 255;
4+
--background-start-rgb: 0, 0, 0;
5+
--background-end-rgb: 0, 0, 0;
136
}
147

158
body {

‎demos/nextjs-supabase-todolist/src/app/views/todo-lists/edit/page.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const TodoEditSection = () => {
3939
listID
4040
]);
4141

42-
const todos = usePowerSyncWatchedQuery<TodoRecord>(`SELECT * FROM todos WHERE list_id=?`, [listID]);
42+
const todos = usePowerSyncWatchedQuery<TodoRecord>(`SELECT * FROM ${TODOS_TABLE} WHERE list_id=? ORDER BY created_at DESC, id`, [listID]);
4343

4444
const [showPrompt, setShowPrompt] = React.useState(false);
4545
const nameInputRef = React.createRef<HTMLInputElement>();
@@ -122,6 +122,14 @@ const TodoEditSection = () => {
122122
onClose={() => setShowPrompt(false)}
123123
aria-labelledby="alert-dialog-title"
124124
aria-describedby="alert-dialog-description"
125+
PaperProps={{
126+
component: 'form',
127+
onSubmit: async (event: React.FormEvent<HTMLFormElement>) => {
128+
event.preventDefault();
129+
await createNewTodo(nameInputRef.current!.value);
130+
setShowPrompt(false);
131+
},
132+
}}
125133
>
126134
<DialogTitle id="alert-dialog-title">{'Create Todo Item'}</DialogTitle>
127135
<DialogContent>
@@ -130,12 +138,7 @@ const TodoEditSection = () => {
130138
</DialogContent>
131139
<DialogActions>
132140
<Button onClick={() => setShowPrompt(false)}>Cancel</Button>
133-
<Button
134-
onClick={async () => {
135-
await createNewTodo(nameInputRef.current!.value);
136-
setShowPrompt(false);
137-
}}
138-
>
141+
<Button type="submit">
139142
Create
140143
</Button>
141144
</DialogActions>

‎demos/nextjs-supabase-todolist/src/app/views/todo-lists/page.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,14 @@ export default function TodoListsPage() {
9797
<Dialog
9898
open={showPrompt}
9999
onClose={() => setShowPrompt(false)}
100+
PaperProps={{
101+
component: 'form',
102+
onSubmit: async (event: React.FormEvent<HTMLFormElement>) => {
103+
event.preventDefault();
104+
await createNewList(nameInputRef.current!.value);
105+
setShowPrompt(false);
106+
},
107+
}}
100108
aria-labelledby="alert-dialog-title"
101109
aria-describedby="alert-dialog-description"
102110
>
@@ -107,12 +115,7 @@ export default function TodoListsPage() {
107115
</DialogContent>
108116
<DialogActions>
109117
<Button onClick={() => setShowPrompt(false)}>Cancel</Button>
110-
<Button
111-
onClick={async () => {
112-
await createNewList(nameInputRef.current!.value);
113-
setShowPrompt(false);
114-
}}
115-
>
118+
<Button type="submit">
116119
Create
117120
</Button>
118121
</DialogActions>

‎demos/nextjs-supabase-todolist/src/components/widgets/ListItemWidget.tsx‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
import React from 'react';
2-
import { ListItem, IconButton, ListItemAvatar, Avatar, ListItemText, Box, Paper, styled } from '@mui/material';
2+
import {
3+
ListItem,
4+
IconButton,
5+
ListItemAvatar,
6+
Avatar,
7+
ListItemText,
8+
Box,
9+
Paper,
10+
styled,
11+
ListItemButton
12+
} from '@mui/material';
313

414
import DeleteIcon from '@mui/icons-material/DeleteOutline';
515
import RightIcon from '@mui/icons-material/ArrowRightAlt';
@@ -8,6 +18,7 @@ import ListIcon from '@mui/icons-material/ListAltOutlined';
818
export type ListItemWidgetProps = {
919
title: string;
1020
description: string;
21+
selected?: boolean;
1122
onDelete: () => void;
1223
onPress: () => void;
1324
};
@@ -16,6 +27,7 @@ export const ListItemWidget: React.FC<ListItemWidgetProps> = (props) => {
1627
return (
1728
<S.MainPaper elevation={1}>
1829
<ListItem
30+
disablePadding
1931
secondaryAction={
2032
<Box>
2133
<IconButton
@@ -39,12 +51,19 @@ export const ListItemWidget: React.FC<ListItemWidgetProps> = (props) => {
3951
</Box>
4052
}
4153
>
42-
<ListItemAvatar>
43-
<Avatar>
44-
<ListIcon />
45-
</Avatar>
46-
</ListItemAvatar>
47-
<ListItemText primary={props.title} secondary={props.description} />
54+
<ListItemButton
55+
onClick={(event) => {
56+
props.onPress();
57+
}}
58+
selected={props.selected}
59+
>
60+
<ListItemAvatar>
61+
<Avatar>
62+
<ListIcon />
63+
</Avatar>
64+
</ListItemAvatar>
65+
<ListItemText primary={props.title} secondary={props.description} />
66+
</ListItemButton>
4867
</ListItem>
4968
</S.MainPaper>
5069
);

‎demos/nextjs-supabase-todolist/src/components/widgets/TodoItemWidget.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { ListItem, IconButton, ListItemAvatar, ListItemText, Box, styled, Paper } from '@mui/material';
2+
import { ListItem, IconButton, ListItemAvatar, ListItemText, Box, styled, Paper, ListItemButton } from '@mui/material';
33

44
import DeleteIcon from '@mui/icons-material/DeleteOutline';
55
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
@@ -16,6 +16,7 @@ export const TodoItemWidget: React.FC<TodoItemWidgetProps> = (props) => {
1616
return (
1717
<S.MainPaper elevation={1}>
1818
<ListItem
19+
disablePadding
1920
secondaryAction={
2021
<Box>
2122
<IconButton
@@ -30,18 +31,18 @@ export const TodoItemWidget: React.FC<TodoItemWidgetProps> = (props) => {
3031
</Box>
3132
}
3233
>
33-
<ListItemAvatar>
34-
<IconButton
35-
edge="end"
36-
aria-label="toggle"
37-
onClick={() => {
38-
props.toggleCompletion();
39-
}}
40-
>
41-
{props.isComplete ? <CheckBoxIcon /> : <CheckBoxOutlineBlankIcon />}
42-
</IconButton>
43-
</ListItemAvatar>
44-
<ListItemText primary={props.description} />
34+
<ListItemButton
35+
onClick={() => {
36+
props.toggleCompletion();
37+
}}
38+
>
39+
<ListItemAvatar>
40+
<IconButton edge="end" aria-label="toggle">
41+
{props.isComplete ? <CheckBoxIcon /> : <CheckBoxOutlineBlankIcon />}
42+
</IconButton>
43+
</ListItemAvatar>
44+
<ListItemText primary={props.description} />
45+
</ListItemButton>
4546
</ListItem>
4647
</S.MainPaper>
4748
);

0 commit comments

Comments
 (0)