Skip to content

Commit a453e49

Browse files
mongodbenmongodben
committed
create code examples
1 parent 142f06f commit a453e49

File tree

10 files changed

+240
-65
lines changed

10 files changed

+240
-65
lines changed

‎examples/react-native/__tests__/js/app-services/app-provider.test.jsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// :snippet-start: app-provider
2+
import React from 'react';
3+
import {AppProvider} from '@realm/react';
4+
// :remove-start:
5+
import 'react-native';
6+
import {render} from '@testing-library/react-native';
7+
import {useApp} from '@realm/react';
8+
import {View, Text} from 'react-native';
9+
const APP_ID = 'example-testers-kvjdy';
10+
function MyApp() {
11+
const app = useApp();
12+
if (app.id !== APP_ID) {
13+
throw new Error('Did not instantiate app client');
14+
}
15+
return (
16+
<View>
17+
<Text>Foo</Text>
18+
</View>
19+
);
20+
}
21+
// :remove-end:
22+
function AppWrapper() {
23+
return (
24+
<View>
25+
<AppProvider id={APP_ID}>
26+
<MyApp />
27+
</AppProvider>
28+
</View>
29+
);
30+
}
31+
// :snippet-end:
32+
33+
test('Instantiate AppProvider correctly', () => {
34+
render(<AppWrapper />);
35+
});

‎examples/react-native/__tests__/js/app-services/use-app.test.jsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// :snippet-start: app-provider
2+
import React from 'react';
3+
import {useApp} from '@realm/react';
4+
import {Credentials} from 'realm';
5+
// :remove-start:
6+
import {App} from 'realm';
7+
import {AppProvider} from '@realm/react';
8+
import 'react-native';
9+
import {render, fireEvent, waitFor} from '@testing-library/react-native';
10+
import {View, Button} from 'react-native';
11+
const APP_ID = 'example-testers-kvjdy';
12+
function AppWrapper() {
13+
return (
14+
<View>
15+
<AppProvider id={APP_ID}>
16+
<MyApp />
17+
</AppProvider>
18+
</View>
19+
);
20+
}
21+
// :remove-end:
22+
function MyApp() {
23+
const app = useApp();
24+
function logInAnonymousUser() {
25+
app.logIn(Credentials.anonymous());
26+
}
27+
// ...
28+
// :remove-start:
29+
return <Button onPress={logInAnonymousUser} testID='test-use-app' title='Test Me!' />;
30+
// :remove-end:
31+
}
32+
// :snippet-end:
33+
34+
afterEach(() => App.getApp(APP_ID).currentUser?.logOut());
35+
36+
test('useApp hook works correctly', async () => {
37+
const {getByTestId} = render(<AppWrapper />);
38+
const button = getByTestId('test-use-app');
39+
fireEvent.press(button);
40+
await waitFor(() => expect(App.getApp(APP_ID).currentUser).not.toBeNull());
41+
});

‎examples/react-native/__tests__/ts/app-services/app-provider.test.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// :snippet-start: app-provider
2+
import React from 'react';
3+
import {AppProvider} from '@realm/react';
4+
// :remove-start:
5+
import 'react-native';
6+
import {render} from '@testing-library/react-native';
7+
import {useApp} from '@realm/react';
8+
import {View, Text} from 'react-native';
9+
const APP_ID = 'example-testers-kvjdy';
10+
function MyApp() {
11+
const app = useApp();
12+
if (app.id !== APP_ID) {
13+
throw new Error('Did not instantiate app client');
14+
}
15+
return (
16+
<View>
17+
<Text>Foo</Text>
18+
</View>
19+
);
20+
}
21+
// :remove-end:
22+
function AppWrapper() {
23+
return (
24+
<View>
25+
<AppProvider id={APP_ID}>
26+
<MyApp />
27+
</AppProvider>
28+
</View>
29+
);
30+
}
31+
// :snippet-end:
32+
33+
test('Instantiate AppProvider correctly', () => {
34+
render(<AppWrapper />);
35+
});

‎examples/react-native/__tests__/ts/app-services/use-app.test.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// :snippet-start: app-provider
2+
import React from 'react';
3+
import {useApp} from '@realm/react';
4+
import {Credentials} from 'realm';
5+
// :remove-start:
6+
import {App} from 'realm';
7+
import {AppProvider} from '@realm/react';
8+
import 'react-native';
9+
import {render, fireEvent, waitFor} from '@testing-library/react-native';
10+
import {View, Button} from 'react-native';
11+
const APP_ID = 'example-testers-kvjdy';
12+
function AppWrapper() {
13+
return (
14+
<View>
15+
<AppProvider id={APP_ID}>
16+
<MyApp />
17+
</AppProvider>
18+
</View>
19+
);
20+
}
21+
// :remove-end:
22+
function MyApp() {
23+
const app = useApp();
24+
function logInAnonymousUser() {
25+
app.logIn(Credentials.anonymous());
26+
}
27+
// ...
28+
// :remove-start:
29+
return <Button onPress={logInAnonymousUser} testID='test-use-app' title='Test Me!' />;
30+
// :remove-end:
31+
}
32+
// :snippet-end:
33+
34+
afterEach(() => App.getApp(APP_ID).currentUser?.logOut());
35+
36+
test('useApp hook works correctly', async () => {
37+
const {getByTestId} = render(<AppWrapper />);
38+
const button = getByTestId('test-use-app');
39+
fireEvent.press(button);
40+
await waitFor(() => expect(App.getApp(APP_ID).currentUser).not.toBeNull());
41+
});

‎examples/react-native/bluehawk.sh

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
#!/bin/bash
2+
3+
PROJECT=$(git rev-parse --show-toplevel)
4+
JS_RN_EXAMPLES=$PROJECT/examples/react-native/__tests__/js/
5+
TS_RN_EXAMPLES=$PROJECT/examples/react-native/__tests__/ts
6+
7+
echo $JS_RN_EXAMPLES
8+
9+
JS_GENERATED_EXAMPLES=$PROJECT/source/examples/generated/react-native/js
10+
TS_GENERATED_EXAMPLES=$PROJECT/source/examples/generated/react-native/ts
11+
echo $JS_GENERATED_EXAMPLES
12+
13+
bluehawk snip $JS_RN_EXAMPLES -o $JS_GENERATED_EXAMPLES
14+
15+
bluehawk snip $TS_RN_EXAMPLES -o $TS_GENERATED_EXAMPLES
16+

‎source/examples/generated/react-native/js/app-provider.test.snippet.app-provider.jsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import {AppProvider} from '@realm/react';
3+
function AppWrapper() {
4+
return (
5+
<View>
6+
<AppProvider id={APP_ID}>
7+
<MyApp />
8+
</AppProvider>
9+
</View>
10+
);
11+
}

‎source/examples/generated/react-native/js/use-app.test.snippet.app-provider.jsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import {useApp} from '@realm/react';
3+
import {Credentials} from 'realm';
4+
function MyApp() {
5+
const app = useApp();
6+
function logInAnonymousUser() {
7+
app.logIn(Credentials.anonymous());
8+
}
9+
// ...
10+
}

‎source/examples/generated/react-native/ts/app-provider.test.snippet.app-provider.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import {AppProvider} from '@realm/react';
3+
function AppWrapper() {
4+
return (
5+
<View>
6+
<AppProvider id={APP_ID}>
7+
<MyApp />
8+
</AppProvider>
9+
</View>
10+
);
11+
}

‎source/examples/generated/react-native/ts/use-app.test.snippet.app-provider.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import {useApp} from '@realm/react';
3+
import {Credentials} from 'realm';
4+
function MyApp() {
5+
const app = useApp();
6+
function logInAnonymousUser() {
7+
app.logIn(Credentials.anonymous());
8+
}
9+
// ...
10+
}

‎source/sdk/react-native/app-services/connect-to-app-services-app.txt

Lines changed: 30 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -9,89 +9,54 @@ Overview
99

1010
The App client is the interface to the App Services
1111
backend. It provides access to the :ref:`authentication functionality
12-
<react-native-authenticate-users>`, :ref:`functions <react-native-call-a-function>`, and
13-
:ref:`sync management <react-native-realm-sync>`.
12+
<react-native-authenticate-users>`, :ref:`Atlas Functions <react-native-call-a-function>`,
13+
and :ref:`Atlas Device Sync <react-native-realm-sync>`.
1414

15+
Before You Begin
16+
----------------
1517

16-
.. _react-native-access-the-app-client:
17-
18-
Access the App Client
19-
---------------------
20-
21-
Pass the Realm App ID for your App, which you can :ref:`find in the Realm UI <find-your-app-id>`.
22-
23-
.. tabs-realm-languages::
24-
25-
.. tab::
26-
:tabid: typescript
27-
28-
.. code-block:: typescript
29-
30-
const id = "<Your App ID>"; // replace this with your App ID
31-
32-
.. tab::
33-
:tabid: javascript
34-
35-
.. code-block:: javascript
36-
37-
const id = "<Your App ID>"; // replace this with your App ID
18+
#. :ref:`Create an App Services App <create-a-realm-app>`
19+
#. :ref:`Get Your App ID <find-your-app-id>`
3820

3921
.. _react-native-app-client-configuration:
22+
.. _react-native-access-the-app-client:
4023

41-
Configuration
42-
-------------
43-
44-
To set up your App client, pass a configuration object to an instance
45-
of ``Realm.App``.
46-
47-
.. tabs-realm-languages::
48-
49-
.. tab::
50-
:tabid: typescript
51-
52-
.. code-block:: typescript
24+
Configure the App Client
25+
------------------------
5326

54-
const config = {
55-
id,
56-
};
57-
const app = new Realm.App(config);
27+
To set up your App client, pass the App ID string
28+
to the ``id`` prop of the ``AppProvider``.
29+
Wrap any components that need to access the App with the ``AppProvider``.
5830

59-
.. tab::
60-
:tabid: javascript
31+
TODO: new literalinclues for both examples
6132

62-
.. code-block:: javascript
33+
.. literalinclude:: /examples/generated/expo/AppWrapper.snippet.wrap-app-within-app-provider.tsx
34+
:language: typescript
35+
:emphasize-lines: 1, 5
6336

64-
const config = {
65-
id,
66-
};
67-
const app = new Realm.App(config);
37+
You can also include additional configuration in the ``AppProvider`` by passing
38+
the properties of :js-sdk:`Realm.AppConfiguration <Realm.AppConfiguration.html>` as props.
6839

69-
.. note::
70-
71-
``id`` is a required field of the application configuration object. To see the full list of fields for the configuration object that ``Realm.App`` accepts as a parameter, view the :js-sdk:`App Configuration Type Definitions <Realm.App.html#~AppConfiguration>`.
40+
TODO: literalincludes for both examples
7241

7342
.. _react-native-app-retrieve-client:
7443

7544
Retrieve an Instance of the App Client
7645
--------------------------------------
7746

78-
To retrieve an instance of the App Client from anywhere in your application, call :js-sdk:`Realm.App.getApp() <Realm.App.html#getApp>` and pass in your ``App ID``.
79-
80-
.. tabs-realm-languages::
81-
82-
.. tab::
83-
:tabid: typescript
84-
85-
.. code-block:: typescript
86-
87-
const app = Realm.App.getApp("<Your App ID>"); // replace this with your App ID
47+
All components wrapped within an ``AppProvider`` can access the :js-sdk:`App <Realm.App.html>`
48+
client with the ``useApp()`` hook. Using the App, you can authenticate users
49+
and access App Services.
8850

89-
.. tab::
90-
:tabid: javascript
51+
TODO: literalincludes for both examples
9152

92-
.. code-block:: javascript
53+
.. literalinclude:: /examples/generated/expo/LoginComponent.snippet.useApp-hook-usage.tsx
54+
:language: typescript
55+
:emphasize-lines: 1, 7, 11
9356

94-
const app = Realm.App.getApp("<Your App ID>"); // replace this with your App ID
57+
.. _react-native-retrieve-client-outside-provider:
9558

59+
Retrieve App Outside the App Provider
60+
-------------------------------------
9661

97-
62+
TODO: i don't fully grok this

0 commit comments

Comments
 (0)