jazz-react-native 0.8.14 → 0.8.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,289 +1,275 @@
1
+ import { AgentSecret } from "cojson";
2
+ import { Account, ID } from "jazz-tools";
1
3
  import React, { useMemo, useState, useEffect } from "react";
2
4
  import {
3
- View,
4
- Text,
5
- TouchableOpacity,
6
- TextInput,
7
- StyleSheet,
5
+ StyleSheet,
6
+ Text,
7
+ TextInput,
8
+ TouchableOpacity,
9
+ View,
8
10
  } from "react-native";
9
- import { AgentSecret } from "cojson";
10
- import { Account, ID } from "jazz-tools";
11
11
  import { RNDemoAuth } from "./DemoAuthMethod.js";
12
12
 
13
13
  type DemoAuthState = (
14
- | {
15
- state: "uninitialized";
16
- }
17
- | {
18
- state: "loading";
19
- }
20
- | {
21
- state: "ready";
22
- existingUsers: string[];
23
- signUp: (username: string) => void;
24
- logInAs: (existingUser: string) => void;
25
- }
26
- | {
27
- state: "signedIn";
28
- logOut: () => void;
29
- }
14
+ | {
15
+ state: "uninitialized";
16
+ }
17
+ | {
18
+ state: "loading";
19
+ }
20
+ | {
21
+ state: "ready";
22
+ existingUsers: string[];
23
+ signUp: (username: string) => void;
24
+ logInAs: (existingUser: string) => void;
25
+ }
26
+ | {
27
+ state: "signedIn";
28
+ logOut: () => void;
29
+ }
30
30
  ) & {
31
- errors: string[];
31
+ errors: string[];
32
32
  };
33
33
 
34
34
  /** @category Auth Providers */
35
35
  export function useDemoAuth({
36
- seedAccounts,
36
+ seedAccounts,
37
37
  }: {
38
- seedAccounts?: {
39
- [name: string]: { accountID: ID<Account>; accountSecret: AgentSecret };
40
- };
38
+ seedAccounts?: {
39
+ [name: string]: { accountID: ID<Account>; accountSecret: AgentSecret };
40
+ };
41
41
  } = {}) {
42
- const [state, setState] = useState<DemoAuthState>({
43
- state: "loading",
44
- errors: [],
45
- });
42
+ const [state, setState] = useState<DemoAuthState>({
43
+ state: "loading",
44
+ errors: [],
45
+ });
46
46
 
47
- const [authMethod, setAuthMethod] = useState<RNDemoAuth | null>(null);
47
+ const [authMethod, setAuthMethod] = useState<RNDemoAuth | null>(null);
48
48
 
49
- const authMethodPromise = useMemo(() => {
50
- return RNDemoAuth.init(
51
- {
52
- onReady: async ({ signUp, getExistingUsers, logInAs }) => {
53
- const existingUsers = await getExistingUsers();
54
- setState({
55
- state: "ready",
56
- signUp,
57
- existingUsers,
58
- logInAs,
59
- errors: [],
60
- });
61
- },
62
- onSignedIn: ({ logOut }) => {
63
- setState({ state: "signedIn", logOut, errors: [] });
64
- },
65
- onError: (error) => {
66
- setState((current) => ({
67
- ...current,
68
- errors: [...current.errors, error.toString()],
69
- }));
70
- },
71
- },
72
- seedAccounts,
73
- );
74
- }, [seedAccounts]);
49
+ const authMethodPromise = useMemo(() => {
50
+ return RNDemoAuth.init(
51
+ {
52
+ onReady: async ({ signUp, getExistingUsers, logInAs }) => {
53
+ const existingUsers = await getExistingUsers();
54
+ setState({
55
+ state: "ready",
56
+ signUp,
57
+ existingUsers,
58
+ logInAs,
59
+ errors: [],
60
+ });
61
+ },
62
+ onSignedIn: ({ logOut }) => {
63
+ setState({ state: "signedIn", logOut, errors: [] });
64
+ },
65
+ onError: (error) => {
66
+ setState((current) => ({
67
+ ...current,
68
+ errors: [...current.errors, error.toString()],
69
+ }));
70
+ },
71
+ },
72
+ seedAccounts,
73
+ );
74
+ }, [seedAccounts]);
75
75
 
76
- useEffect(() => {
77
- async function init() {
78
- const auth = await authMethodPromise;
79
- setAuthMethod(auth);
80
- }
81
- if (authMethod) return;
82
- void init();
83
- }, [seedAccounts]);
76
+ useEffect(() => {
77
+ async function init() {
78
+ const auth = await authMethodPromise;
79
+ setAuthMethod(auth);
80
+ }
81
+ if (authMethod) return;
82
+ void init();
83
+ }, [seedAccounts]);
84
84
 
85
- return [authMethod, state] as const;
85
+ return [authMethod, state] as const;
86
86
  }
87
87
 
88
88
  export const DemoAuthBasicUI = ({
89
- appName,
90
- state,
89
+ appName,
90
+ state,
91
91
  }: {
92
- appName: string;
93
- state: DemoAuthState;
92
+ appName: string;
93
+ state: DemoAuthState;
94
94
  }) => {
95
- const darkMode = false;
96
- const [username, setUsername] = useState<string>("");
97
- const [errorMessage, setErrorMessage] = useState<string | null>(null);
95
+ const darkMode = false;
96
+ const [username, setUsername] = useState<string>("");
97
+ const [errorMessage, setErrorMessage] = useState<string | null>(null);
98
98
 
99
- const handleSignUp = () => {
100
- if (state.state !== "ready") return;
101
- if (username.trim() === "") {
102
- setErrorMessage("Display name is required");
103
- } else {
104
- setErrorMessage(null);
105
- state.signUp(username);
106
- }
107
- };
99
+ const handleSignUp = () => {
100
+ if (state.state !== "ready") return;
101
+ if (username.trim() === "") {
102
+ setErrorMessage("Display name is required");
103
+ } else {
104
+ setErrorMessage(null);
105
+ state.signUp(username);
106
+ }
107
+ };
108
108
 
109
- return (
110
- <View
109
+ return (
110
+ <View
111
+ style={[
112
+ styles.container,
113
+ darkMode ? styles.darkBackground : styles.lightBackground,
114
+ ]}
115
+ >
116
+ {state.state === "loading" ? (
117
+ <Text style={styles.loadingText}>Loading...</Text>
118
+ ) : state.state === "ready" ? (
119
+ <View style={styles.formContainer}>
120
+ <Text
111
121
  style={[
112
- styles.container,
113
- darkMode ? styles.darkBackground : styles.lightBackground,
122
+ styles.headerText,
123
+ darkMode ? styles.darkText : styles.lightText,
114
124
  ]}
115
- >
116
- {state.state === "loading" ? (
117
- <Text style={styles.loadingText}>Loading...</Text>
118
- ) : state.state === "ready" ? (
119
- <View style={styles.formContainer}>
120
- <Text
121
- style={[
122
- styles.headerText,
123
- darkMode ? styles.darkText : styles.lightText,
124
- ]}
125
- >
126
- {appName}
127
- </Text>
125
+ >
126
+ {appName}
127
+ </Text>
128
128
 
129
- {state.errors.map((error) => (
130
- <Text key={error} style={styles.errorText}>
131
- {error}
132
- </Text>
133
- ))}
129
+ {state.errors.map((error) => (
130
+ <Text key={error} style={styles.errorText}>
131
+ {error}
132
+ </Text>
133
+ ))}
134
134
 
135
- {errorMessage && (
136
- <Text style={styles.errorText}>{errorMessage}</Text>
137
- )}
135
+ {errorMessage && <Text style={styles.errorText}>{errorMessage}</Text>}
138
136
 
139
- <TextInput
140
- placeholder="Display name"
141
- value={username}
142
- onChangeText={setUsername}
143
- placeholderTextColor={darkMode ? "#fff" : "#000"}
144
- style={[
145
- styles.textInput,
146
- darkMode ? styles.darkInput : styles.lightInput,
147
- ]}
148
- />
137
+ <TextInput
138
+ placeholder="Display name"
139
+ value={username}
140
+ onChangeText={setUsername}
141
+ placeholderTextColor={darkMode ? "#fff" : "#000"}
142
+ style={[
143
+ styles.textInput,
144
+ darkMode ? styles.darkInput : styles.lightInput,
145
+ ]}
146
+ />
149
147
 
150
- <TouchableOpacity
151
- onPress={handleSignUp}
152
- style={[
153
- styles.button,
154
- darkMode ? styles.darkButton : styles.lightButton,
155
- ]}
156
- >
157
- <Text
158
- style={
159
- darkMode
160
- ? styles.darkButtonText
161
- : styles.lightButtonText
162
- }
163
- >
164
- Sign Up as new account
165
- </Text>
166
- </TouchableOpacity>
148
+ <TouchableOpacity
149
+ onPress={handleSignUp}
150
+ style={[
151
+ styles.button,
152
+ darkMode ? styles.darkButton : styles.lightButton,
153
+ ]}
154
+ >
155
+ <Text
156
+ style={darkMode ? styles.darkButtonText : styles.lightButtonText}
157
+ >
158
+ Sign Up as new account
159
+ </Text>
160
+ </TouchableOpacity>
167
161
 
168
- <View style={styles.existingUsersContainer}>
169
- {state.existingUsers.map((user) => (
170
- <TouchableOpacity
171
- key={user}
172
- onPress={() => state.logInAs(user)}
173
- style={[
174
- styles.existingUserButton,
175
- darkMode
176
- ? styles.darkUserButton
177
- : styles.lightUserButton,
178
- ]}
179
- >
180
- <Text
181
- style={
182
- darkMode
183
- ? styles.darkText
184
- : styles.lightText
185
- }
186
- >
187
- Log In as "{user}"
188
- </Text>
189
- </TouchableOpacity>
190
- ))}
191
- </View>
192
- </View>
193
- ) : null}
162
+ <View style={styles.existingUsersContainer}>
163
+ {state.existingUsers.map((user) => (
164
+ <TouchableOpacity
165
+ key={user}
166
+ onPress={() => state.logInAs(user)}
167
+ style={[
168
+ styles.existingUserButton,
169
+ darkMode ? styles.darkUserButton : styles.lightUserButton,
170
+ ]}
171
+ >
172
+ <Text style={darkMode ? styles.darkText : styles.lightText}>
173
+ Log In as "{user}"
174
+ </Text>
175
+ </TouchableOpacity>
176
+ ))}
177
+ </View>
194
178
  </View>
195
- );
179
+ ) : null}
180
+ </View>
181
+ );
196
182
  };
197
183
 
198
184
  const styles = StyleSheet.create({
199
- container: {
200
- flex: 1,
201
- justifyContent: "center",
202
- alignItems: "center",
203
- padding: 20,
204
- },
205
- formContainer: {
206
- width: "80%",
207
- alignItems: "center",
208
- justifyContent: "center",
209
- },
210
- headerText: {
211
- fontSize: 24,
212
- marginBottom: 20,
213
- },
214
- errorText: {
215
- color: "red",
216
- marginVertical: 5,
217
- textAlign: "center",
218
- },
219
- textInput: {
220
- borderWidth: 1,
221
- padding: 10,
222
- marginVertical: 10,
223
- width: "100%",
224
- borderRadius: 6,
225
- },
226
- darkInput: {
227
- borderColor: "#444",
228
- backgroundColor: "#000",
229
- color: "#fff",
230
- },
231
- lightInput: {
232
- borderColor: "#ddd",
233
- backgroundColor: "#fff",
234
- color: "#000",
235
- },
236
- button: {
237
- paddingVertical: 15,
238
- paddingHorizontal: 10,
239
- borderRadius: 6,
240
- width: "100%",
241
- marginVertical: 10,
242
- },
243
- darkButton: {
244
- backgroundColor: "#444",
245
- },
246
- lightButton: {
247
- backgroundColor: "#ddd",
248
- },
249
- darkButtonText: {
250
- color: "#fff",
251
- textAlign: "center",
252
- },
253
- lightButtonText: {
254
- color: "#000",
255
- textAlign: "center",
256
- },
257
- existingUsersContainer: {
258
- width: "100%",
259
- marginTop: 20,
260
- },
261
- existingUserButton: {
262
- paddingVertical: 15,
263
- paddingHorizontal: 10,
264
- borderRadius: 6,
265
- marginVertical: 5,
266
- },
267
- darkUserButton: {
268
- backgroundColor: "#222",
269
- },
270
- lightUserButton: {
271
- backgroundColor: "#eee",
272
- },
273
- loadingText: {
274
- fontSize: 18,
275
- color: "#888",
276
- },
277
- darkText: {
278
- color: "#fff",
279
- },
280
- lightText: {
281
- color: "#000",
282
- },
283
- darkBackground: {
284
- backgroundColor: "#000",
285
- },
286
- lightBackground: {
287
- backgroundColor: "#fff",
288
- },
185
+ container: {
186
+ flex: 1,
187
+ justifyContent: "center",
188
+ alignItems: "center",
189
+ padding: 20,
190
+ },
191
+ formContainer: {
192
+ width: "80%",
193
+ alignItems: "center",
194
+ justifyContent: "center",
195
+ },
196
+ headerText: {
197
+ fontSize: 24,
198
+ marginBottom: 20,
199
+ },
200
+ errorText: {
201
+ color: "red",
202
+ marginVertical: 5,
203
+ textAlign: "center",
204
+ },
205
+ textInput: {
206
+ borderWidth: 1,
207
+ padding: 10,
208
+ marginVertical: 10,
209
+ width: "100%",
210
+ borderRadius: 6,
211
+ },
212
+ darkInput: {
213
+ borderColor: "#444",
214
+ backgroundColor: "#000",
215
+ color: "#fff",
216
+ },
217
+ lightInput: {
218
+ borderColor: "#ddd",
219
+ backgroundColor: "#fff",
220
+ color: "#000",
221
+ },
222
+ button: {
223
+ paddingVertical: 15,
224
+ paddingHorizontal: 10,
225
+ borderRadius: 6,
226
+ width: "100%",
227
+ marginVertical: 10,
228
+ },
229
+ darkButton: {
230
+ backgroundColor: "#444",
231
+ },
232
+ lightButton: {
233
+ backgroundColor: "#ddd",
234
+ },
235
+ darkButtonText: {
236
+ color: "#fff",
237
+ textAlign: "center",
238
+ },
239
+ lightButtonText: {
240
+ color: "#000",
241
+ textAlign: "center",
242
+ },
243
+ existingUsersContainer: {
244
+ width: "100%",
245
+ marginTop: 20,
246
+ },
247
+ existingUserButton: {
248
+ paddingVertical: 15,
249
+ paddingHorizontal: 10,
250
+ borderRadius: 6,
251
+ marginVertical: 5,
252
+ },
253
+ darkUserButton: {
254
+ backgroundColor: "#222",
255
+ },
256
+ lightUserButton: {
257
+ backgroundColor: "#eee",
258
+ },
259
+ loadingText: {
260
+ fontSize: 18,
261
+ color: "#888",
262
+ },
263
+ darkText: {
264
+ color: "#fff",
265
+ },
266
+ lightText: {
267
+ color: "#000",
268
+ },
269
+ darkBackground: {
270
+ backgroundColor: "#000",
271
+ },
272
+ lightBackground: {
273
+ backgroundColor: "#fff",
274
+ },
289
275
  });