Investigate: A RxDatabase with the same name and adapter already exists.

examples/react/package.json

@@ -8,14 +8,15 @@
     "pouchdb-server": "4.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-router-dom": "^6.22.3",
     "rxdb": "file:rxdb-local.tgz",
     "rxjs": "7.8.1"
   },
   "devDependencies": {
+    "local-web-server": "5.3.3",
     "react-scripts": "5.0.1",
     "rimraf": "5.0.5",
-    "testcafe": "3.5.0",
-    "local-web-server": "5.3.3"
+    "testcafe": "3.5.0"
   },
   "scripts": {
     "preinstall": "npm run preinstall:rxdb",

examples/react/src/App.css

@@ -97,4 +97,22 @@ ul#heroes-list li {
     border-width : 1px;
     border-style : solid;
     border-color : grey;
-}
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.user-toggle {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.user-toggle button {
+    margin-right: 10px;
+}

examples/react/src/App.jsx

@@ -1,15 +1,40 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import './App.css';
 
 import HeroList from './hero-list/hero-list';
 import HeroInsert from './hero-insert/hero-insert';
+import { useNavigate } from 'react-router-dom';
 
 const App = () => {
+    const [userId, setUserId] = useState(1);
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const storedUserId = localStorage.getItem('userId');
+        if (storedUserId === null) {
+            localStorage.setItem('userId', '1');
+        } else {
+            setUserId(parseInt(storedUserId));
+        }
+    }, []);
+
+    const handleToggle = () => {
+        const newUserId = userId === 1 ? 2 : 1;
+        localStorage.setItem('userId', newUserId.toString());
+        setUserId(newUserId);
+        // window.location.reload();
+        navigate('/2');
+    };
+
     return (
-        <div>
+        <div className="container">
             <h1>RxDB Example - React</h1>
-            <HeroList/>
-            <HeroInsert/>
+            <div className="user-toggle">
+                <button onClick={handleToggle}>Toggle User</button>
+                <p>Current User: {userId}</p>
+            </div>
+            <HeroList userId={userId} />
+            <HeroInsert userId={userId} />
         </div>
     );
 };

examples/react/src/Database.jsx

@@ -19,14 +19,20 @@ console.log('host: ' + syncURL);
 
 let dbPromise = null;
 
-const _create = async () => {
+const _create = async (userId) => {
+    if (process.env.NODE_ENV === "development") {
+        await import('rxdb/plugins/dev-mode').then(
+            module => addRxPlugin(module.RxDBDevModePlugin)
+        );
+    }
+
     console.log('DatabaseService: creating database..');
     const db = await createRxDatabase({
-        name: 'heroesreactdb',
+        name: `heroesreactdb_${userId}`,
         storage: getRxStorageDexie()
     });
     console.log('DatabaseService: created database');
-    window['db'] = db; // write to window for debugging
+    window['db'] = db;
 
     // show leadership in title
     db.waitForLeadership().then(() => {
@@ -69,7 +75,7 @@ const _create = async () => {
             try {
                 // create the CouchDB database
                 await fetch(
-                    syncURL + col.name + '/',
+                    syncURL + col.name + `_${userId}` + '/',
                     {
                         method: 'PUT'
                     }
@@ -79,7 +85,7 @@ const _create = async () => {
     );
     console.log('DatabaseService: sync - start live');
     Object.values(db.collections).map(col => col.name).map(colName => {
-        const url = syncURL + colName + '/';
+        const url = `${syncURL}${colName}_${userId}/`;
         console.log('url: ' + url);
         const replicationState = replicateCouchDB({
             collection: db[colName],
@@ -98,8 +104,22 @@ const _create = async () => {
     return db;
 };
 
+const storedUserId = localStorage.getItem('userId');
+if (storedUserId === null) {
+    localStorage.setItem('userId', '1');
+}
+
+let currentUser = null;
+export const recreateDBPromise = () => {
+    const newUser = localStorage.getItem('userId');
+    if (newUser !== currentUser) {
+        dbPromise = _create(newUser);
+        currentUser = newUser;
+    }
+};
+
 export const get = () => {
-    if (!dbPromise)
-        dbPromise = _create();
-    return dbPromise;
+    recreateDBPromise();
+    console.log('Current user:', currentUser);
+    return dbPromise || _create(localStorage.getItem('userId'));
 };

examples/react/src/index.js

@@ -2,8 +2,14 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
 
 ReactDOM.render(
-    <App />,
+    <BrowserRouter>
+        <Routes>
+            <Route path="/" element={<App />} />
+            <Route path="/2" element={<Navigate to="/" />} />
+        </Routes>
+    </BrowserRouter>,
     document.getElementById('app')
 );