Skip to content

Commit f5e52c4

Browse files
davimacedodavimacedo
committed
SSR refactoring
1 parent 90aeccc commit f5e52c4

File tree

5 files changed

+440
-179
lines changed

5 files changed

+440
-179
lines changed

‎examples/next-ts-todo/pages/index.tsx‎

Lines changed: 86 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,58 @@
1-
import { useState, useMemo } from 'react';
1+
import { useState, useMemo, useEffect, useCallback } from 'react';
22
import Head from 'next/head'
3-
import { initializeParse, useParseQuery } from '@parse/react-ssr';
3+
import { initializeParse, encodeParseQuery, useParseQuery } from '@parse/react-ssr';
44

55
initializeParse(
66
'http://localhost:1337/parse',
77
'APPLICATION_ID',
88
'JAVASCRIPT_KEY'
99
);
1010

11-
export default function Home() {
11+
const createParseQuery = hideDone => {
12+
const parseQuery = new Parse.Query('Todo');
13+
14+
if (hideDone) {
15+
parseQuery.notEqualTo('done', true);
16+
}
17+
18+
(parseQuery as any).withCount();
19+
20+
return parseQuery;
21+
};
22+
23+
export default function Home({ initialHideDone, initialParseQuery }) {
1224
const [
13-
hideDone,
14-
setHideDone
15-
] = useState(false);
25+
{
26+
hideDone,
27+
parseQuery
28+
},
29+
setParseQueryState
30+
] = useState({
31+
hideDone: initialHideDone,
32+
parseQuery: initialParseQuery
33+
});
1634

17-
const query = useMemo(
35+
useEffect(
1836
() => {
19-
const query = new Parse.Query('Todo');
20-
21-
if (hideDone) {
22-
query.notEqualTo('done', true);
37+
if (
38+
hideDone !== initialHideDone ||
39+
parseQuery !== initialParseQuery
40+
) {
41+
setParseQueryState({
42+
hideDone: initialHideDone,
43+
parseQuery: initialParseQuery
44+
});
2345
}
46+
},
47+
[initialHideDone, initialParseQuery]
48+
);
2449

25-
return query;
50+
const toggleHideDone = useCallback(
51+
() => {
52+
setParseQueryState({
53+
hideDone: !hideDone,
54+
parseQuery: createParseQuery(!hideDone)
55+
});
2656
},
2757
[hideDone]
2858
);
@@ -31,17 +61,59 @@ export default function Home() {
3161
isLive,
3262
isLoading,
3363
isSyncing,
34-
objects,
64+
results,
65+
count,
3566
error,
3667
reload
37-
} = useParseQuery(query);
68+
} = useParseQuery(parseQuery);
3869

3970
return (
4071
<>
4172
<Head>
4273
<title>Todo Example using @parse/ssr on Next.js (Typescript)</title>
4374
<link rel="icon" href="/favicon-32x32.png" />
4475
</Head>
76+
<button onClick={toggleHideDone}>
77+
{hideDone ? 'Unhide' : 'Hide'} done todos
78+
</button>
79+
{isLoading && (
80+
<p>Loading...</p>
81+
)}
82+
{isLive && (
83+
<p>Live!</p>
84+
)}
85+
{isSyncing && (
86+
<p>Syncing...</p>
87+
)}
88+
{results && (
89+
<ul>
90+
{results.map(result => (
91+
<li key={result.id}>
92+
{result.get('title')}
93+
</li>
94+
))}
95+
</ul>
96+
)}
97+
<p>{count}</p>
98+
{error && (
99+
<p>{error.message}</p>
100+
)}
101+
<button
102+
onClick={reload}
103+
>
104+
Reload
105+
</button>
45106
</>
46107
);
47108
};
109+
110+
export async function getServerSideProps() {
111+
const initialHideDone = false;
112+
113+
return {
114+
props: {
115+
initialHideDone,
116+
initialParseQuery: await encodeParseQuery(createParseQuery(initialHideDone))
117+
},
118+
}
119+
}

‎examples/react-native-ts-todo/App.tsx‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { StatusBar } from 'expo-status-bar';
2-
import React, { useState } from 'react';
2+
import React, { useMemo, useState } from 'react';
33
import { Button, StyleSheet, Text, View } from 'react-native';
44
import { initializeParse, useParseQuery } from '@parse/react-native';
55

@@ -15,20 +15,30 @@ export default function App() {
1515
setHideDone
1616
] = useState(false);
1717

18-
const query = new Parse.Query('Todo');
18+
const parseQuery = useMemo(
19+
() => {
20+
const parseQuery = new Parse.Query('Todo');
1921

20-
if (hideDone) {
21-
query.notEqualTo('done', true);
22-
}
22+
if (hideDone) {
23+
parseQuery.notEqualTo('done', true);
24+
}
25+
26+
(parseQuery as any).withCount();
27+
28+
return parseQuery;
29+
},
30+
[hideDone]
31+
);
2332

2433
const {
2534
isLive,
2635
isLoading,
2736
isSyncing,
28-
objects,
37+
results,
38+
count,
2939
error,
3040
reload
31-
} = useParseQuery(query);
41+
} = useParseQuery(parseQuery);
3242

3343
return (
3444
<View style={styles.container}>
@@ -54,17 +64,20 @@ export default function App() {
5464
<Text>Syncing...</Text>
5565
</View>
5666
)}
57-
{objects && (
67+
{results && (
5868
<View>
59-
{objects.map(object => (
69+
{results.map(result => (
6070
<View>
61-
<Text key={object.id}>
62-
{object.get('title')}
71+
<Text key={result.id}>
72+
{result.get('title')}
6373
</Text>
6474
</View>
6575
))}
6676
</View>
6777
)}
78+
<View>
79+
<Text>{count}</Text>
80+
</View>
6881
{error && (
6982
<View>
7083
<Text>{error.message}</Text>

‎examples/react-ts-todo/src/App.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,17 @@ function App() {
1515
setHideDone
1616
] = useState(false);
1717

18-
const query = useMemo(
18+
const parseQuery = useMemo(
1919
() => {
20-
const query = new Parse.Query('Todo');
20+
const parseQuery = new Parse.Query('Todo');
2121

2222
if (hideDone) {
23-
query.notEqualTo('done', true);
23+
parseQuery.notEqualTo('done', true);
2424
}
2525

26-
return query;
26+
(parseQuery as any).withCount();
27+
28+
return parseQuery;
2729
},
2830
[hideDone]
2931
);
@@ -32,10 +34,11 @@ function App() {
3234
isLive,
3335
isLoading,
3436
isSyncing,
35-
objects,
37+
results,
38+
count,
3639
error,
3740
reload
38-
} = useParseQuery(query);
41+
} = useParseQuery(parseQuery);
3942

4043
return (
4144
<div className="App">
@@ -55,15 +58,16 @@ function App() {
5558
{isSyncing && (
5659
<p>Syncing...</p>
5760
)}
58-
{objects && (
61+
{results && (
5962
<ul>
60-
{objects.map(object => (
61-
<li key={object.id}>
62-
{object.get('title')}
63+
{results.map(result => (
64+
<li key={result.id}>
65+
{result.get('title')}
6366
</li>
6467
))}
6568
</ul>
6669
)}
70+
<p>{count}</p>
6771
{error && (
6872
<p>{error.message}</p>
6973
)}

0 commit comments

Comments
 (0)