Skip to content

Commit

Permalink
chore: update demos (#174)
Browse files Browse the repository at this point in the history 
Co-authored-by: DominicGBauer <[email protected]>
  • Loading branch information
@DominicGBauer
DominicGBauer and DominicGBauer authored May 17, 2024
1 parent 62e43aa commit b7a5f48
Show file tree
Hide file tree
Showing 5 changed files with 1,410 additions and 396 deletions.
74 changes: 48 additions & 26 deletions demos/example-electron/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,55 @@
import React, { useEffect } from 'react';
import React from 'react';
import { CircularProgress, Grid, ListItem, styled } from '@mui/material';
import { usePowerSync, useQuery } from '@powersync/react';

export default function EntryPage() {
const db = usePowerSync();
const { data: customers, isLoading } = useQuery('SELECT id, name FROM customers');

useEffect(() => {
// Insert some test data
const names = ['Fred', 'Willard', 'Tina', 'Jake', 'Corey'];
const name = names[Math.floor(Math.random() * names.length)];
db.execute('INSERT INTO customers(id, name) VALUES(uuid(), ?)', [name]);
return () => {};
}, []);

if (isLoading) {
return <CircularProgress />;
import { useQuery, useStatus } from '@powersync/react';

const EntryPage = () => {
const status = useStatus();
const { data: customers } = useQuery('SELECT id, name FROM customers');

const areVariablesSet = import.meta.env.VITE_POWERSYNC_URL && import.meta.env.VITE_PUBLIC_POWERSYNC_TOKEN;

if (areVariablesSet && !status.hasSynced) {
return (
<S.MainGrid container>
<p>
Syncing down from the backend. This will load indefinitely if you have not set up the connection correctly. Check the console for issues.
</p>
<CircularProgress />
</S.MainGrid>
);
}

if (!areVariablesSet) {
return (
<S.CenteredGrid>
<h4 style={{ color: 'red' }}>You have not set up a connection to the backend, please connect your backend.</h4>
</S.CenteredGrid>
);
}

return (
<S.MainGrid container>
<S.CenteredGrid item xs={12} md={6} lg={5}>
<div>
<h1>Customers</h1>
{customers.map((c) => (
<ListItem key={c.id}>{c.name}</ListItem>
))}
{customers.length == 0 ? <CircularProgress /> : []}
</div>
<S.CenteredGrid>
<h1>Customers</h1>
</S.CenteredGrid>

{customers.length === 0 ? (
<S.CenteredGrid>
<p>You currently have no customers. Please connect PowerSync to your database to see them sync down.</p>
</S.CenteredGrid>
) : (
<S.CenteredGrid item xs={12} md={6} lg={5}>
<div>
{customers.map((c) => (
<ListItem key={c.id}>{c.name}</ListItem>
))}
{customers.length == 0 ? <CircularProgress /> : []}
</div>
</S.CenteredGrid>
)}
</S.MainGrid>
);
}
};

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

export const MainGrid = styled(CenteredGrid)`
min-height: 100vh;
display: flex;
flex-direction: column;
`;
}

export default EntryPage;
7 changes: 2 additions & 5 deletions demos/example-nextjs/next.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
const withImages = require('next-images');
const path = require('path');

module.exports = withImages({
module.exports = {
images: {
disableStaticImages: true
},
Expand All @@ -27,4 +24,4 @@ module.exports = withImages({
}
};
}
});
};
42 changes: 16 additions & 26 deletions demos/example-nextjs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,45 +11,35 @@
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^5.0.12",
"@journeyapps/wa-sqlite": "~0.1.1",
"@lexical/react": "^0.11.3",
"@mui/icons-material": "^5.15.12",
"@mui/material": "^5.15.12",
"@emotion/styled": "^11.11.5",
"@fontsource/roboto": "^5.0.13",
"@journeyapps/wa-sqlite": "~0.2.0",
"@lexical/react": "^0.15.0",
"@mui/icons-material": "^5.15.18",
"@mui/material": "^5.15.18",
"@powersync/react": "workspace:*",
"@powersync/web": "workspace:*",
"buffer": "^6.0.3",
"fast-glob": "^3.3.2",
"formik": "^2.4.5",
"highlight.js": "^11.9.0",
"js-logger": "^1.6.1",
"lato-font": "^3.0.0",
"lexical": "^0.11.3",
"lodash": "^4.17.21",
"lowlight": "^2.9.0",
"next": "14.1.0",
"next-images": "1.8.5",
"lexical": "^0.15.0",
"next": "14.2.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"remixicon": "^2.5.0",
"shiki": "^0.10.1",
"simplify-js": "^1.2.4"
"react-dom": "18.2.0"
},
"devDependencies": {
"@types/lodash": "^4.14.202",
"@types/node": "^20.11.25",
"@types/react": "^18.2.64",
"@types/react-dom": "^18.2.21",
"autoprefixer": "^10.4.18",
"@types/node": "^20.12.12",
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"autoprefixer": "^10.4.19",
"babel-loader": "^9.1.3",
"css-loader": "^6.10.0",
"css-loader": "^6.11.0",
"eslint": "^8.57.0",
"eslint-config-next": "14.0.0",
"postcss": "^8.4.35",
"sass": "^1.71.1",
"sass": "^1.77.2",
"sass-loader": "^13.3.3",
"style-loader": "^3.3.4",
"tailwindcss": "^3.4.1"
"tailwindcss": "^3.4.3"
}
}
74 changes: 48 additions & 26 deletions demos/example-nextjs/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,57 @@
'use client';

import { useEffect } from 'react';
import { CircularProgress, Grid, ListItem, styled } from '@mui/material';
import { usePowerSync, useQuery } from '@powersync/react';

export default function EntryPage() {
const db = usePowerSync();
const { data: customers, isLoading } = useQuery('SELECT id, name FROM customers');

useEffect(() => {
// Insert some test data
const names = ['Fred', 'Willard', 'Tina', 'Jake', 'Corey'];
const name = names[Math.floor(Math.random() * names.length)];
db.execute('INSERT INTO customers(id, name) VALUES(uuid(), ?)', [name]);
return () => {};
}, [db]);

if (isLoading) {
return <CircularProgress />;
import { useQuery, useStatus } from '@powersync/react';

const EntryPage = () => {
const status = useStatus();
const { data: customers } = useQuery('SELECT id, name FROM customers');

const areVariablesSet = process.env.NEXT_PUBLIC_POWERSYNC_URL && process.env.NEXT_PUBLIC_POWERSYNC_TOKEN;

if (areVariablesSet && !status.hasSynced) {
return (
<S.MainGrid container>
<p>
Syncing down from the backend. This will load indefinitely if you have not set up the connection correctly. Check the console for issues.
</p>
<CircularProgress />
</S.MainGrid>
);
}

if (!areVariablesSet) {
return (
<S.CenteredGrid>
<h4 style={{ color: 'red' }}>You have not set up a connection to the backend, please connect your backend.</h4>
</S.CenteredGrid>
);
}

return (
<S.MainGrid container>
<S.CenteredGrid item xs={12} md={6} lg={5}>
<div>
<h1>Customers</h1>
{customers.map((c) => (
<ListItem key={c.id}>{c.name}</ListItem>
))}
{customers.length == 0 ? <CircularProgress /> : []}
</div>
<S.CenteredGrid>
<h1>Customers</h1>
</S.CenteredGrid>

{customers.length === 0 ? (
<S.CenteredGrid>
<p>You currently have no customers. Please connect PowerSync to your database to see them sync down.</p>
</S.CenteredGrid>
) : (
<S.CenteredGrid item xs={12} md={6} lg={5}>
<div>
{customers.map((c) => (
<ListItem key={c.id}>{c.name}</ListItem>
))}
{customers.length == 0 ? <CircularProgress /> : []}
</div>
</S.CenteredGrid>
)}
</S.MainGrid>
);
}
};


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

export const MainGrid = styled(CenteredGrid)`
min-height: 100vh;
display: flex;
flex-direction: column;
`;
}

export default EntryPage;
Loading

0 comments on commit b7a5f48

Please sign in to comment.