useUser fixes for Realm React

* Used a different type declaration generation method which solved typing issues * Updated `UserProvider` to always update the user reference on user events * Updated connection example to include a delete user function to test this feature
realm · Oct 20, 2023 · 039cd2d · 039cd2d
1 parent eca95b6
commit 039cd2d
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 23 deletions.
diff --git a/examples/rn-connection-and-error/frontend/app/components/Button.tsx b/examples/rn-connection-and-error/frontend/app/components/Button.tsx
@@ -64,6 +64,7 @@ const styles = StyleSheet.create({
     borderRadius: 30,
     borderColor: colors.purple,
     backgroundColor: colors.purple,
+    justifyContent: 'center',
   },
   buttonSecondary: {
     paddingVertical: 6,

diff --git a/examples/rn-connection-and-error/frontend/app/screens/StoreScreen.tsx b/examples/rn-connection-and-error/frontend/app/screens/StoreScreen.tsx
@@ -18,7 +18,7 @@
 
 import React from 'react';
 import {Alert, FlatList, StyleSheet, Text, View} from 'react-native';
-import {useAuth} from '@realm/react';
+import {useAuth, useApp, useUser} from '@realm/react';
 
 import {Button} from '../components/Button';
 import {KioskItem} from '../components/KioskItem';
@@ -43,6 +43,9 @@ export function StoreScreen() {
     refreshAccessToken,
   } = useDemoSyncTriggers();
   const {logOut} = useAuth();
+  const user = useUser();
+  const app = useApp();
+
 
   return (
     <View style={styles.container}>
@@ -110,6 +113,14 @@ export function StoreScreen() {
                 onPress={refreshAccessToken}
                 text="Refresh Access Token"
               />
+              <Button
+                extraStyles={[styles.button]}
+                onPress={() => {
+                  app.deleteUser(user);
+                  app.removeUser(user);
+                }}
+                text="Delete User"
+              />
             </View>
           </View>
         </>

diff --git a/packages/realm-react/CHANGELOG.md b/packages/realm-react/CHANGELOG.md
@@ -4,11 +4,10 @@
 * None
 
 ### Enhancements
-* None
 
 ### Fixed
-* <How to hit and notice issue? what was the impact?> ([#????](https://github.com/realm/realm-js/issues/????), since v?.?.?)
-* None
+* Improved type generation, which fixed an issue with the `Realm.User` return from `useUser` ([#6196](https://github.com/realm/realm-js/issues/6196))
+* `UserProvider` will now always return a new `user` reference on change events. ([#6186](https://github.com/realm/realm-js/issues/6186))
 
 ### Compatibility
 * React Native >= v0.71.4

diff --git a/packages/realm-react/package.json b/packages/realm-react/package.json
@@ -16,7 +16,7 @@
   },
   "wireit": {
     "bundle": {
-      "command": "rollup --config",
+      "command": "rollup --config && tsc -p tsconfig.types.json",
       "dependencies": [
         "../realm:bundle",
         "../realm-common:bundle"
@@ -71,7 +71,6 @@
     "react-native": "0.72.6",
     "react-test-renderer": "18.2.0",
     "realm": "*",
-    "rollup-plugin-dts": "^5.0.0",
     "ts-jest": "^29.0.5"
   },
   "peerDependencies": {

diff --git a/packages/realm-react/rollup.config.js b/packages/realm-react/rollup.config.js
@@ -18,7 +18,6 @@
 
 import nodeResolve from "@rollup/plugin-node-resolve";
 import typescript from "@rollup/plugin-typescript";
-import dts from "rollup-plugin-dts";
 
 import pkg from "./package.json" assert { type: "json" };
 
@@ -40,17 +39,4 @@ export default [
     plugins: [nodeResolve(), typescript({ noEmitOnError: true })],
     external: ["realm", "react", "@realm/common", "lodash"],
   },
-  {
-    input: "src/index.tsx",
-    output: {
-      file: pkg.types,
-      format: "es",
-    },
-    plugins: [
-      dts({
-        respectExternal: true,
-      }),
-    ],
-    external: ["realm", "react", "@realm/common", "lodash"],
-  },
 ];
diff --git a/packages/realm-react/src/UserProvider.tsx b/packages/realm-react/src/UserProvider.tsx
@@ -49,9 +49,10 @@ export const UserProvider: React.FC<UserProviderProps> = ({ fallback: Fallback,
 
   useEffect(() => {
     const event = () => {
-      if (app.currentUser?.id != user?.id) {
-        setUser(app.currentUser);
-      }
+      console.log("UserProvider: user changed");
+      console.log("UserProvider: app.currentUser", app.currentUser);
+      console.log("UserProvider: app.currentUser.id", app.currentUser);
+      setUser(app.currentUser);
     };
     user?.addListener(event);
     app?.addListener(event);

diff --git a/packages/realm-react/tsconfig.types.json b/packages/realm-react/tsconfig.types.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./dist",
+  },
+  "exclude": [
+    "**/__tests__/*"
+  ]
+}