Skip to content

Commit b7a5f48

Browse files
DominicGBauerDominicGBauer
DominicGBauer
and
DominicGBauer
authored
chore: update demos (#174)
Co-authored-by: DominicGBauer <[email protected]>
1 parent 62e43aa commit b7a5f48

File tree

5 files changed

+1410
-396
lines changed

5 files changed

+1410
-396
lines changed

‎demos/example-electron/src/app/page.tsx

+48-26
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,55 @@
1-
import React, { useEffect } from 'react';
1+
import React from 'react';
22
import { CircularProgress, Grid, ListItem, styled } from '@mui/material';
3-
import { usePowerSync, useQuery } from '@powersync/react';
4-
5-
export default function EntryPage() {
6-
const db = usePowerSync();
7-
const { data: customers, isLoading } = useQuery('SELECT id, name FROM customers');
8-
9-
useEffect(() => {
10-
// Insert some test data
11-
const names = ['Fred', 'Willard', 'Tina', 'Jake', 'Corey'];
12-
const name = names[Math.floor(Math.random() * names.length)];
13-
db.execute('INSERT INTO customers(id, name) VALUES(uuid(), ?)', [name]);
14-
return () => {};
15-
}, []);
16-
17-
if (isLoading) {
18-
return <CircularProgress />;
3+
import { useQuery, useStatus } from '@powersync/react';
4+
5+
const EntryPage = () => {
6+
const status = useStatus();
7+
const { data: customers } = useQuery('SELECT id, name FROM customers');
8+
9+
const areVariablesSet = import.meta.env.VITE_POWERSYNC_URL && import.meta.env.VITE_PUBLIC_POWERSYNC_TOKEN;
10+
11+
if (areVariablesSet && !status.hasSynced) {
12+
return (
13+
<S.MainGrid container>
14+
<p>
15+
Syncing down from the backend. This will load indefinitely if you have not set up the connection correctly. Check the console for issues.
16+
</p>
17+
<CircularProgress />
18+
</S.MainGrid>
19+
);
20+
}
21+
22+
if (!areVariablesSet) {
23+
return (
24+
<S.CenteredGrid>
25+
<h4 style={{ color: 'red' }}>You have not set up a connection to the backend, please connect your backend.</h4>
26+
</S.CenteredGrid>
27+
);
1928
}
2029

2130
return (
2231
<S.MainGrid container>
23-
<S.CenteredGrid item xs={12} md={6} lg={5}>
24-
<div>
25-
<h1>Customers</h1>
26-
{customers.map((c) => (
27-
<ListItem key={c.id}>{c.name}</ListItem>
28-
))}
29-
{customers.length == 0 ? <CircularProgress /> : []}
30-
</div>
32+
<S.CenteredGrid>
33+
<h1>Customers</h1>
3134
</S.CenteredGrid>
35+
36+
{customers.length === 0 ? (
37+
<S.CenteredGrid>
38+
<p>You currently have no customers. Please connect PowerSync to your database to see them sync down.</p>
39+
</S.CenteredGrid>
40+
) : (
41+
<S.CenteredGrid item xs={12} md={6} lg={5}>
42+
<div>
43+
{customers.map((c) => (
44+
<ListItem key={c.id}>{c.name}</ListItem>
45+
))}
46+
{customers.length == 0 ? <CircularProgress /> : []}
47+
</div>
48+
</S.CenteredGrid>
49+
)}
3250
</S.MainGrid>
3351
);
34-
}
52+
};
3553

3654
namespace S {
3755
export const CenteredGrid = styled(Grid)`
@@ -42,5 +60,9 @@ namespace S {
4260

4361
export const MainGrid = styled(CenteredGrid)`
4462
min-height: 100vh;
63+
display: flex;
64+
flex-direction: column;
4565
`;
4666
}
67+
68+
export default EntryPage;

‎demos/example-nextjs/next.config.js

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
const withImages = require('next-images');
2-
const path = require('path');
3-
4-
module.exports = withImages({
1+
module.exports = {
52
images: {
63
disableStaticImages: true
74
},
@@ -27,4 +24,4 @@ module.exports = withImages({
2724
}
2825
};
2926
}
30-
});
27+
};

‎demos/example-nextjs/package.json

+16-26
Original file line numberDiff line numberDiff line change
@@ -11,45 +11,35 @@
1111
},
1212
"dependencies": {
1313
"@emotion/react": "^11.11.4",
14-
"@emotion/styled": "^11.11.0",
15-
"@fontsource/roboto": "^5.0.12",
16-
"@journeyapps/wa-sqlite": "~0.1.1",
17-
"@lexical/react": "^0.11.3",
18-
"@mui/icons-material": "^5.15.12",
19-
"@mui/material": "^5.15.12",
14+
"@emotion/styled": "^11.11.5",
15+
"@fontsource/roboto": "^5.0.13",
16+
"@journeyapps/wa-sqlite": "~0.2.0",
17+
"@lexical/react": "^0.15.0",
18+
"@mui/icons-material": "^5.15.18",
19+
"@mui/material": "^5.15.18",
2020
"@powersync/react": "workspace:*",
2121
"@powersync/web": "workspace:*",
2222
"buffer": "^6.0.3",
23-
"fast-glob": "^3.3.2",
24-
"formik": "^2.4.5",
25-
"highlight.js": "^11.9.0",
2623
"js-logger": "^1.6.1",
2724
"lato-font": "^3.0.0",
28-
"lexical": "^0.11.3",
29-
"lodash": "^4.17.21",
30-
"lowlight": "^2.9.0",
31-
"next": "14.1.0",
32-
"next-images": "1.8.5",
25+
"lexical": "^0.15.0",
26+
"next": "14.2.3",
3327
"react": "18.2.0",
34-
"react-dom": "18.2.0",
35-
"remixicon": "^2.5.0",
36-
"shiki": "^0.10.1",
37-
"simplify-js": "^1.2.4"
28+
"react-dom": "18.2.0"
3829
},
3930
"devDependencies": {
40-
"@types/lodash": "^4.14.202",
41-
"@types/node": "^20.11.25",
42-
"@types/react": "^18.2.64",
43-
"@types/react-dom": "^18.2.21",
44-
"autoprefixer": "^10.4.18",
31+
"@types/node": "^20.12.12",
32+
"@types/react": "^18.3.2",
33+
"@types/react-dom": "^18.3.0",
34+
"autoprefixer": "^10.4.19",
4535
"babel-loader": "^9.1.3",
46-
"css-loader": "^6.10.0",
36+
"css-loader": "^6.11.0",
4737
"eslint": "^8.57.0",
4838
"eslint-config-next": "14.0.0",
4939
"postcss": "^8.4.35",
50-
"sass": "^1.71.1",
40+
"sass": "^1.77.2",
5141
"sass-loader": "^13.3.3",
5242
"style-loader": "^3.3.4",
53-
"tailwindcss": "^3.4.1"
43+
"tailwindcss": "^3.4.3"
5444
}
5545
}

‎demos/example-nextjs/src/app/page.tsx

+48-26
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,57 @@
11
'use client';
22

3-
import { useEffect } from 'react';
43
import { CircularProgress, Grid, ListItem, styled } from '@mui/material';
5-
import { usePowerSync, useQuery } from '@powersync/react';
6-
7-
export default function EntryPage() {
8-
const db = usePowerSync();
9-
const { data: customers, isLoading } = useQuery('SELECT id, name FROM customers');
10-
11-
useEffect(() => {
12-
// Insert some test data
13-
const names = ['Fred', 'Willard', 'Tina', 'Jake', 'Corey'];
14-
const name = names[Math.floor(Math.random() * names.length)];
15-
db.execute('INSERT INTO customers(id, name) VALUES(uuid(), ?)', [name]);
16-
return () => {};
17-
}, [db]);
18-
19-
if (isLoading) {
20-
return <CircularProgress />;
4+
import { useQuery, useStatus } from '@powersync/react';
5+
6+
const EntryPage = () => {
7+
const status = useStatus();
8+
const { data: customers } = useQuery('SELECT id, name FROM customers');
9+
10+
const areVariablesSet = process.env.NEXT_PUBLIC_POWERSYNC_URL && process.env.NEXT_PUBLIC_POWERSYNC_TOKEN;
11+
12+
if (areVariablesSet && !status.hasSynced) {
13+
return (
14+
<S.MainGrid container>
15+
<p>
16+
Syncing down from the backend. This will load indefinitely if you have not set up the connection correctly. Check the console for issues.
17+
</p>
18+
<CircularProgress />
19+
</S.MainGrid>
20+
);
21+
}
22+
23+
if (!areVariablesSet) {
24+
return (
25+
<S.CenteredGrid>
26+
<h4 style={{ color: 'red' }}>You have not set up a connection to the backend, please connect your backend.</h4>
27+
</S.CenteredGrid>
28+
);
2129
}
2230

2331
return (
2432
<S.MainGrid container>
25-
<S.CenteredGrid item xs={12} md={6} lg={5}>
26-
<div>
27-
<h1>Customers</h1>
28-
{customers.map((c) => (
29-
<ListItem key={c.id}>{c.name}</ListItem>
30-
))}
31-
{customers.length == 0 ? <CircularProgress /> : []}
32-
</div>
33+
<S.CenteredGrid>
34+
<h1>Customers</h1>
3335
</S.CenteredGrid>
36+
37+
{customers.length === 0 ? (
38+
<S.CenteredGrid>
39+
<p>You currently have no customers. Please connect PowerSync to your database to see them sync down.</p>
40+
</S.CenteredGrid>
41+
) : (
42+
<S.CenteredGrid item xs={12} md={6} lg={5}>
43+
<div>
44+
{customers.map((c) => (
45+
<ListItem key={c.id}>{c.name}</ListItem>
46+
))}
47+
{customers.length == 0 ? <CircularProgress /> : []}
48+
</div>
49+
</S.CenteredGrid>
50+
)}
3451
</S.MainGrid>
3552
);
36-
}
53+
};
54+
3755

3856
namespace S {
3957
export const CenteredGrid = styled(Grid)`
@@ -44,5 +62,9 @@ namespace S {
4462

4563
export const MainGrid = styled(CenteredGrid)`
4664
min-height: 100vh;
65+
display: flex;
66+
flex-direction: column;
4767
`;
4868
}
69+
70+
export default EntryPage;

0 commit comments

Comments
 (0)