Merge pull request #604 from data-driven-forms/migrate-to-firestore

migrate docs to use firestore

Author: rvsia

packages/react-renderer-demo/firebaseFunctions.js

@@ -1,4 +1,5 @@
 const functions = require('firebase-functions');
+const admin = require('firebase-admin');
 const next = require('next');
 const { join } = require('path');
 const { parse } = require('url');
@@ -13,12 +14,40 @@ const nextjsServer = next({
 });
 const nextjsHandle = nextjsServer.getRequestHandler();
 
+admin.initializeApp();
+
+const db = admin.firestore();
+
 exports.nextjsFunc = functions.https.onRequest((req, res) => {
   console.log('File: ' + req.originalUrl); // eslint-disable-line no-console
   return nextjsServer.prepare().then(() => {
     const parsedUrl = parse(req.url, true);
     const { pathname } = parsedUrl;
 
+    if (pathname === '/notifications') {
+      const endDate = Number(req.query.end);
+      return db
+        .collection('notifications')
+        .doc('notifications')
+        .get()
+        .then((snapshot) => {
+          const data = snapshot
+            .data()
+            .notifications.filter(({ active_till: activeTill }) => {
+              const dueDate = activeTill.toDate();
+              return dueDate.getTime() >= endDate;
+            })
+            .map(({ 'created-at': createdAt, active_till: activeTill, ...notification }) => ({
+              ...notification,
+              activeTill: activeTill.toDate(),
+              'created-at': createdAt ? createdAt.toDate : undefined // eslint-disable-line camelcase
+            }));
+          res.status(200).json(data);
+          res.finished = true;
+          return res.end();
+        });
+    }
+
     // handle GET request to /service-worker.js
     if (pathname === '/service-worker.js') {
       const filePath = join(__dirname, '.next', pathname);

packages/react-renderer-demo/src/components/notification-panel.js

@@ -36,39 +36,24 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-const getNotifications = () => {
-  const query = `?orderBy="expired-at"&startAt="${new Date().toISOString()}"&limitToFirst=10`;
-  return fetch(`https://data-driven-forms.firebaseio.com/notifications.json${query}`)
-    .then((data) => data.json())
-    .then((data) => {
-      if (!data) {
-        return [];
-      }
+const getNotifications = () => fetch(`/notifications?end=${Date.now()}`).then((data) => data.json());
 
-      if (typeof data !== 'object') {
-        return [];
-      }
-
-      if (!Array.isArray(data)) {
-        data = Object.values(data);
-      }
-
-      return data.filter(Boolean).sort((a, b) => b['created-at'].localeCompare(a['created-at']));
-    });
-};
-
-const createNotificationId = (notification) => `${notification['created-at']}-${notification['expired-at']}`;
+const createNotificationId = (notification) => notification.activeTill.toString();
 
 const NotificationPanel = ({ isOpen, onClose, anchorRef, setNewMessages }) => {
   const classes = useStyles();
   const [notifications, setNotifications] = useState([]);
   useEffect(() => {
-    getNotifications().then((data = []) => {
-      const lastSeen = JSON.parse(localStorage.getItem('data-driven-forms-last-seen') || '[]');
-      setNewMessages(data.filter((notification) => !lastSeen.includes(createNotificationId(notification))).length);
-      localStorage.setItem('data-driven-forms-last-seen', JSON.stringify(data.map(createNotificationId)));
-      setNotifications(data);
-    });
+    getNotifications()
+      .then((data = []) => {
+        const lastSeen = JSON.parse(localStorage.getItem('data-driven-forms-last-seen') || '[]');
+        setNewMessages(data.filter((notification) => !lastSeen.includes(createNotificationId(notification))).length);
+        localStorage.setItem('data-driven-forms-last-seen', JSON.stringify(data.map(createNotificationId)));
+        setNotifications(data);
+      })
+      .catch(() => {
+        setNotifications([]);
+      });
   }, [setNewMessages]);
 
   return (