Using Realm in renderer process with existing UI

package.json

@@ -33,12 +33,15 @@
   "dependencies": {
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
+    "react-draggable": "^2.2.6",
+    "react-virtualized": "^9.9.0",
     "realm": "^1.10.0"
   },
   "devDependencies": {
     "@types/node": "^8.0.8",
     "@types/react": "^15.0.34",
     "@types/react-dom": "^15.5.1",
+    "@types/react-virtualized": "^9.7.3",
     "electron": "^1.6.11",
     "electron-builder": "^19.6.3",
     "node-sass": "^4.5.3",

src/main/application.ts

@@ -37,7 +37,8 @@ export default class Application {
     var window = this.windowManager.createWindow(path);
 
     window.once('ready-to-show', () => {
-      window.show()
+      window.show();
+      window.webContents.send('open-file', { path: path });
     });
   }
 

src/renderer.tsx

@@ -1,16 +1,62 @@
 import * as electron from 'electron'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
+import Browser from './ui/browser/browser'
 
 // FIXME: see https://github.com/realm/realm-js/issues/818
 var userDataPath = electron.remote.app.getPath("userData");
 process.chdir(userDataPath);
 import * as Realm from 'realm'
 
+// We might want to keep a strong referencce to realm when using sync
+var realmRef: Realm
 
-ReactDOM.render(
-  <div>
-    Hi there
-  </div>,
-  document.getElementById("app")
-);
+electron.ipcRenderer.on("open-file", (event: Event, args: { path: string }) => {
+  const configuration: Realm.Configuration = {
+    path: args.path
+  };
+
+  openWithConfiguration(configuration);
+});
+
+electron.ipcRenderer.on("open-url", (event: Event, args: { url: string, username: string, password: string }) => {
+  const authURL = args.url;
+
+  Realm.Sync.User.login(authURL, args.username, args.password, (error: any, user: Realm.Sync.User) => {
+    if (user) {
+      const configuration: Realm.Configuration = {
+        sync: {
+          user: user,
+          url: args.url,
+          validate_ssl: false
+        }
+      };
+
+      openWithConfiguration(configuration);
+    } else {
+      // TODO: display errors properly
+      alert(error);
+    }
+  });
+});
+
+function openWithConfiguration(configuration: Realm.Configuration) {
+  // TODOL this shouldn't happen so we may consider to throw an exception instead
+  if (realmRef) {
+    realmRef.close();
+  }
+
+  Realm.openAsync(configuration, (error: any, realm: Realm) => {
+    realmRef = realm;
+
+    if (realm) {
+      ReactDOM.render(
+        <Browser realm={realm} />,
+        document.getElementById("app")
+      );
+    } else {
+       // TODO: display errors properly
+      alert(error);
+    }
+  });
+}

src/ui/browser/browser.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import * as Realm from 'realm';
+import Sidebar from './sidebar/sidebar';
+import Content from './content/content';
+
+interface IBrowserProps {
+  realm: Realm
+}
+
+interface IBrowserState {
+  selectedIndex: number;
+}
+
+export default class Browser extends React.Component<IBrowserProps, IBrowserState> {
+  private types: Realm.ObjectSchema[];
+
+  constructor(props: IBrowserProps) {
+    super(props);
+
+    this.state = {
+      selectedIndex: 0
+    };
+  }
+
+  sidebarSelectionChanged(index: number) {
+    this.setState({
+      selectedIndex: index
+    });
+  }
+
+  render () {
+    const selectedIndex = this.state.selectedIndex;
+    const selectedType = this.props.realm.schema[selectedIndex];
+
+    return (
+      <div className="RealmBrowser">
+        <div className="RealmBrowser__container">
+          <Sidebar
+            realm={this.props.realm}
+            selectedIndex={selectedIndex}
+            onSelectionChange={this.sidebarSelectionChanged.bind(this)}
+          />
+          <Content
+            realm={this.props.realm}
+            type={selectedType}
+          />
+        </div>
+      </div>
+    );
+  }
+}