using realm-web with React - reactjs

Question

First of all, I am new with react. It has been two weeks since I am working with it
I am trying to use "realm-web" with react (web). I would like to write realm provider in order to access realmApp everywhere in my application. However my attempts didn't go well. The application is giving " Uncaught (in promise) RangeError: Maximum call stack size exceeded". But beside this error, I am sure there is more to be handled.
Here is my implementation:
const RealmProvider: React.ForwardRefRenderFunction<HTMLElement, PropTypes> = ({ app: realmApp, store, children }) => {
let realm = useTypedSelector(store => store.realm);
let app = useRef<Realm.App>();
const credentials = React.useMemo(() => Realm.Credentials.apiKey(process.env.REACT_APP_REALM_APP_API_KEY!), []);
useEffect(() => {
app.current = realmApp
console.log(realmApp)
if (app.current.currentUser == null) {
loadingRealmApp()
app.current.logIn(credentials)
.then((res) => store.dispatch(storeRealmApp(res)))
//.catch(reason => console.log("RealmError", reason));
}
//Specify how to clean up after this effect:
return function cleanup() {
app.current?.currentUser?.logOut().then(() =>
store.dispatch(unloadRealmApp())
);
};
}, [realmApp, store]);
return (
<>
{ React.Children.only(children)}
</>
);
}
export default RealmProvider;
Reducer
// Actions
const STORE_REALM_APP = 'atlas/realm/STORE_REALM_APP'
const STORE_REALM_APP_ERROR = 'atlas/realm/STORE_USER_ERROR'
const UNLOAD_REALM_APP = 'atlas/realm/UNLOAD_REALM_APP'
const LOADING_REALM_APP = 'atlas/realm/LOADING_REALM_APP'
type State = {
//realmApp?: Realm.App
user?: Realm.User
isLoadingRealmApp: boolean
}
const initialState: State = {
//realmApp: undefined,
user: undefined,
isLoadingRealmApp: false
};
type RealmAction = {
payload: Realm.User
} & Action;
// Reducer
const realmReducer = function (state: State = initialState, action: RealmAction): State {
switch (action.type) {
case STORE_REALM_APP:
return {
...state,
isLoadingRealmApp: false,
user: action.payload
}
case LOADING_REALM_APP:
return {
...state,
isLoadingRealmApp: true
}
case STORE_REALM_APP_ERROR:
case UNLOAD_REALM_APP:
return {
...state,
user: undefined,
isLoadingRealmApp: false
}
default:
return state
}
}
export default realmReducer;
export function storeRealmApp(app: Realm.User) {
console.log("storeRealmApp", app)
return {
type: STORE_REALM_APP,
payload: app
}
}
export function loadingRealmApp() {
return {
type: LOADING_REALM_APP
}
}
export function storeRealmAppError(reason: any) {
return {
type: STORE_REALM_APP_ERROR,
payload: reason
}
}
export function unloadRealmApp() {
return {
type: UNLOAD_REALM_APP
}
}
Realm.ts
const realmApp: Realm.App = new Realm.App({ id: process.env.REACT_APP_REALM_APP_ID!, app: { name: "Atlas" } });
//const mongodb = realmApp.currentUser!.mongoClient("mongodb-atlas")
const useMongodb = () => {
const user = useTypedSelector(store => store.realm.user);
console.log(user)
return user!.mongoClient("mongodb-atlas");
}
export { realmApp, useMongodb }
I guess I am doing something wrong, or this is not the way of doing this. I need some help :)

Answer 1

In case someone needs it, I figure it out.
import React from "react";
import * as Realm from "realm-web";
type ContextType = {
currentUser: Realm.User,
logIn: (credentials: Realm.Credentials) => void
logOut: () => void
} & Realm.App
const RealmAppContext = React.createContext<ContextType>({
} as any);
export const useRealmApp = () => {
const app = React.useContext(RealmAppContext);
if (!app) {
throw new Error(
`You must call useRealmApp() inside of a <RealmAppProvider />`
);
}
return app;
};
export const useMongodb = () => {
const app = React.useContext<ContextType>(RealmAppContext);
const mongodb = app.currentUser.mongoClient("mongodb-atlas")
if (!mongodb) {
throw new Error(
`You must call useRealmApp() inside of a <RealmAppProvider />`
);
}
return mongodb;
};
type PropTypes = {
appId: string,
//children: JSX.Element
}
export const RealmAppProvider: React.ForwardRefRenderFunction<HTMLElement, PropTypes> = ({ appId, children }) => {
const [app, setApp] = React.useState(new Realm.App(appId));
React.useEffect(() => {
setApp(new Realm.App(appId));
}, [appId]);
// Wrap the Realm.App object's user state with React state
const [currentUser, setCurrentUser] = React.useState(app.currentUser);
async function logIn(credentials: Realm.Credentials) {
await app.logIn(credentials);
// If successful, app.currentUser is the user that just logged in
setCurrentUser(app.currentUser);
}
async function logOut() {
// Log out the currently active user
await app.currentUser?.logOut();
// If another user was logged in too, they're now the current user.
// Otherwise, app.currentUser is null.
setCurrentUser(app.currentUser);
}
const wrapped = { ...app, currentUser, logIn, logOut };
return (
<RealmAppContext.Provider value={wrapped as any}>
{children}
</RealmAppContext.Provider>
);
};