load data from RTDB

.gitignore

@@ -25,4 +25,5 @@ firebase-debug.log*
 firestore-debug.log*
 ui-debug.log*
 firebase-config.json
+database-debug.log
 

database.rules.json

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    ".read": "true",
+    ".write": "false"
+  }
+}

firebase.json

@@ -31,5 +31,8 @@
       "enabled": true
     },
     "singleProjectMode": true
+  },
+  "database": {
+    "rules": "database.rules.json"
   }
 }

package.json

@@ -15,7 +15,7 @@
     "web-vitals": "^2.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "source .env && react-scripts start",
     "firebase-start": "firebase emulators:start",
     "build": "react-scripts build",
     "test": "react-scripts test",

src/index.tsx

@@ -2,41 +2,21 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./components/App";
 import { Signature } from "./utils/constants";
-
-import { initializeApp } from "firebase/app";
-import { getAnalytics } from "firebase/analytics";
-
-const fetchData = async () => {
-  try {
-    const response = await fetch(`${process.env.PUBLIC_URL}/data.json`);
-    if (response.status >= 400) {
-      throw new Error("Bad response from server");
-    }
-    return await response.json();
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-const initFirebase = async () => {
-  const FirebaseConfig = process.env.REACT_APP_FIREBASE_CONFIG_JSON
-    ? JSON.parse(process.env.REACT_APP_FIREBASE_CONFIG_JSON)
-    : await (await fetch("/__/firebase/init.json")).json();
-  const app = initializeApp(FirebaseConfig);
-  // Initialize Analytics
-  getAnalytics(app);
-};
+import { onValue } from "./utils/database";
+import { initFirebase } from "./utils/firebase";
 
 (async function init() {
-  await initFirebase();
-
-  const data = await fetchData();
-
   console.log(Signature, "color: blue; font-weight: bold");
   console.log("Quick start: yian.skills.map(s => s.name).join(', ')");
-  window.yian = { ...data };
+
+  await initFirebase();
+
   const root = ReactDOM.createRoot(
     document.getElementById("root") as HTMLElement
   );
-  root.render(<App data={data} version={process.env.REACT_APP_VERSION} />);
+
+  onValue("profile", (data) => {
+    window.yian = { ...data };
+    root.render(<App data={data} version={process.env.REACT_APP_VERSION} />);
+  });
 })();

src/utils/database.ts

@@ -0,0 +1,31 @@
+import {
+  getDatabase,
+  ref,
+  connectDatabaseEmulator,
+  Database,
+  onValue as _onValue,
+} from "firebase/database";
+
+let db: Database;
+
+export const getDB = (): Database => {
+  if (db) {
+    return db;
+  }
+
+  db = getDatabase();
+
+  if (process.env.REACT_APP_DEV_MODE) {
+    // Point to the RTDB emulator running on localhost.
+    connectDatabaseEmulator(db, "127.0.0.1", 9000);
+  }
+
+  return db;
+};
+
+export const onValue = (path: string, callback: (snapshot: any) => void) => {
+  const starCountRef = ref(getDB(), path);
+  return _onValue(starCountRef, (snapshot) => {
+    callback(snapshot.val());
+  });
+};

src/utils/firebase.ts

@@ -0,0 +1,11 @@
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+
+export const initFirebase = async () => {
+  const FirebaseConfig = process.env.REACT_APP_FIREBASE_CONFIG_JSON
+    ? JSON.parse(process.env.REACT_APP_FIREBASE_CONFIG_JSON)
+    : await (await fetch("/__/firebase/init.json")).json();
+  const app = initializeApp(FirebaseConfig);
+  getAnalytics(app);
+  return app;
+};