Merge pull request #30 from FuBoTeam/feature/google-analytics

src/Board/index.tsx

@@ -1,41 +1,49 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { RouteComponentProps } from 'react-router';
-import { useDatabase } from '../Provider/FirebaseApp';
+import { logEvent } from 'firebase/analytics';
 import './board.scss';
+
+import { useAnalytics, useDatabase } from '../Provider/FirebaseApp';
 import Dialog from './Dialog';
 import { Background } from './Background';
 import { subscribePost } from './subscribePost';
 
 const Board: React.FC<RouteComponentProps> = (props) => {
+  // TODO: remove this and find a proper filter way on GA
+  const analytics = useAnalytics();
+  useEffect(() => {
+    logEvent(analytics, 'board_page_landed');
+  }, [analytics]);
+
   const [modalDisplay, setModalDisplay] = useState(false);
-  const [user, setUser] = useState({});
+  const openModalAndClose = useCallback<(timeout?: number) => void>((timeout = 5000) => {
+    setModalDisplay(true);
+    setTimeout(() => {
+      setModalDisplay(false);
+    }, timeout);
+  }, [setModalDisplay]);
+
+  const [post, setPost] = useState({});
   const database = useDatabase();
 
   useEffect(() => {
     // subscribe post while component did mount
-    const unsubscribe = subscribePost(database)((user) => {
-      if (user) {
-        setUser(user);
-        const displayAndHide = () => {
-          setModalDisplay(true);
-
-          setTimeout(() => {
-            setModalDisplay(false);
-          }, 5000);
-        };
-        displayAndHide();
+    const unsubscribe = subscribePost(database)((newPost) => {
+      if (newPost) {
+        setPost(newPost);
+        openModalAndClose();
       }
     });
     return () => {
       // unsubscribe post while component will unmount
       unsubscribe();
     };
-  }, [database]);
+  }, [database, openModalAndClose]);
 
   return (
     <React.Fragment>
       <Background />
-      <Dialog user={user} show={modalDisplay} />
+      <Dialog user={post} show={modalDisplay} />
       <a className="message-link" href={`${props.match.url}/greetings`}>&lt;&lt; 留下你的祝福</a>
       <a className="game-link" href={`${props.match.url}/lottery`}>去遊戲頁</a>
     </React.Fragment>

src/Greeting/Greeting.tsx

@@ -1,12 +1,20 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { logEvent } from 'firebase/analytics';
 import './greeting.scss';
 
+import { useAnalytics } from '../Provider/FirebaseApp';
 import { GreetingForm } from './GreetingForm';
 import Dialog from '../Board/Dialog';
 import { getUpperUrl } from '../utils/urlHelpers';
-import { RouteComponentProps } from 'react-router-dom';
 
 export const Greeting: React.FC<RouteComponentProps> = (props) => {
+  // TODO: remove this and find a proper filter way on GA
+  const analytics = useAnalytics();
+  useEffect(() => {
+    logEvent(analytics, 'greeting_page_landed');
+  }, [analytics]);
+
   const [modalDisplay, setModalDisplay] = useState(false);
 
   const [user, setUser] = useState({ name: '', greetings: '', imgUrl: '' });

src/Lottery/Lottery.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
+import { logEvent } from 'firebase/analytics';
 import './lottery.scss';
 
-import { useDatabase } from '../Provider/FirebaseApp';
+import { useAnalytics, useDatabase } from '../Provider/FirebaseApp';
 import { listPosts } from '../api';
 import { permutationList } from '../utils/random';
 import { getUpperUrl } from '../utils/urlHelpers';
@@ -20,6 +21,12 @@ enum Stage {
 }
 
 export const Lottery: React.FC<RouteComponentProps> = (props) => {
+  // TODO: remove this and find a proper filter way on GA
+  const analytics = useAnalytics();
+  useEffect(() => {
+    logEvent(analytics, 'lottery_page_landed');
+  }, [analytics]);
+
   const database = useDatabase();
   const [posts, setPosts] = useState<WeddiApp.Post.Data[]>([]);
   const [stage, setStage] = useState<Stage>(Stage.Init);

src/Provider/FirebaseApp/useHooks.ts

@@ -8,3 +8,7 @@ export const useDatabase = (): FirebaseContextType['database'] => {
 export const useStorage = (): FirebaseContextType['storage'] => {
   return useContext(FirebaseContext).storage;
 };
+
+export const useAnalytics = (): FirebaseContextType['analytics'] => {
+  return useContext(FirebaseContext).analytics;
+};