Add firebase and migrate from moment to dayjs

package.json

@@ -20,7 +20,6 @@
     "@types/node": "^22.7.4",
     "dayjs": "^1.11.13",
     "firebase": "^10.14.0",
-    "moment": "^2.30.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

src/app.tsx

@@ -11,8 +11,8 @@ import ResultBox from './components/result-box'
 import Stepper from './components/stepper'
 import SavedCalculation from './components/saved-calculation'
 // import Notification from './components/Notification';
-
-import { useGlobals } from './hooks/use-globals'
+// hooks
+import useGlobals from './hooks/use-globals'
 
 const INPUT_CODES = [
     [

src/components/footer.tsx

@@ -3,23 +3,24 @@ import Box from '@mui/material/Box'
 import Link from '@mui/material/Link'
 import dayjs from 'dayjs'
 import packageJson from '../../package.json'
-
-// import { GALog } from "../helpers/firebaseClient";
+// hooks
+import useFirebase from '../hooks/use-firebase'
 
 const SX = { mt: 4, mb: 4, textAlign: 'center' }
 const COMPANY_URL = 'https://github.com/sensasi-apps'
-// const ON_CLICK_LINK = (e) => GALog('click_company_page')
 const versionDateDayjs = dayjs(packageJson.versionDate)
 
 function Footer() {
+    const { logEvent } = useFirebase()
+
     return (
         <Box sx={SX} component="footer">
             <Typography variant="body2" color="text.secondary">
                 {'Copyright © '}
                 <Link
                     color="inherit"
                     href={COMPANY_URL}
-                    // onClick={ON_CLICK_LINK}
+                    onClick={() => logEvent('click_company_page')}
                     target="_blank">
                     Sensasi Apps
                 </Link>

src/components/result-box/result-box.tsx

@@ -1,25 +1,26 @@
 // vendors
 import { useRef, useState, useEffect, useMemo } from 'react'
 import { Box, Button, IconButton, Tooltip } from '@mui/material'
-import moment from 'moment'
+import dayjs from 'dayjs'
 // icons
 import { Save as SaveIcon } from '@mui/icons-material'
 // helpers
 import { currencyFormat, numberFormat } from '../../helpers'
 import calculatePalmGrade from '../../helpers/calculate-palm-grade'
-// import { GALog } from "../helpers/firebaseClient";
 // components
 import DetailDialog from './components/detail-dialog'
 import SummaryTable from './components/summary-table'
 import TextField from '../text-field'
 // hooks
-import { useGlobals } from '../../hooks/use-globals'
+import useGlobals from '../../hooks/use-globals'
+import useFirebase from '../../hooks/use-firebase'
 // functions
 import { getSavedDatasets } from '../../functions/get-saved-datasets'
 
 let calculationResults: AnuType[] = []
 
 export default function ResultBox() {
+    const { logEvent } = useFirebase()
     const { formValues: temp, setFormValues, setActiveStep } = useGlobals()
 
     const dataset = useMemo(() => {
@@ -63,7 +64,7 @@ export default function ResultBox() {
             savedDatasets.splice(delIndex, 1)
         }
 
-        dataset.savedAt = moment().format()
+        dataset.savedAt = dayjs().format()
         dataset.finalWeight =
             summaryData[0]?.weight -
             summaryData[1]?.weight +
@@ -91,7 +92,7 @@ export default function ResultBox() {
                     code="price"
                     toParent={value => setPricePerKg(value)}
                     value={pricePerKg}
-                    // onBlur={(e) => GALog("enter_price")}
+                    onBlur={() => logEvent('enter_price')}
                 />
 
                 <Button type="submit" sx={{ display: 'none' }}></Button>
@@ -104,9 +105,9 @@ export default function ResultBox() {
                     <Button
                         variant="outlined"
                         onClick={() => {
-                            // GALog('click_reset');
                             setActiveStep(0)
                             setFormValues({})
+                            logEvent('click_reset')
                         }}>
                         Ulangi
                     </Button>
@@ -129,8 +130,8 @@ export default function ResultBox() {
                         disabled={!pricePerKg}
                         variant="contained"
                         onClick={() => {
-                            // GALog('click_detail_cuts')
                             setIsDetailOpen(true)
+                            logEvent('click_detail_cuts')
                         }}>
                         Rincian
                     </Button>

src/components/saved-calculation.tsx

@@ -25,10 +25,11 @@ import {
     MoreVert as MoreVertIcon,
     Visibility as VisibilityIcon,
 } from '@mui/icons-material'
-import moment from 'moment'
+import dayjs from 'dayjs'
+// hooks
+import useGlobals from '../hooks/use-globals'
 // helpers
 import { currencyFormat, numberFormat } from '../helpers'
-import { useGlobals } from '../hooks/use-globals'
 import { getSavedDatasets } from '../functions/get-saved-datasets'
 
 export default function SavedCalculationDialog() {
@@ -166,7 +167,7 @@ function DatasetsList({ onSelected }: { onSelected: (item: any) => void }) {
                             }
                             secondary={
                                 'disimpan tanggal: ' +
-                                moment(item.savedAt).format(
+                                dayjs(item.savedAt).format(
                                     'DD-MM-YYYY hh:mm:ss',
                                 )
                             }

src/hooks/use-firebase.ts

@@ -0,0 +1,3 @@
+import { useFirebase } from '../providers/components/firebase-provider'
+
+export default useFirebase

src/hooks/use-globals.ts

@@ -1 +1,3 @@
-export { useGlobals } from '../providers/components/globals-provider'
+import { useGlobals } from '../providers/components/globals-provider'
+
+export default useGlobals

src/providers/components/firebase-provider.tsx

@@ -0,0 +1,56 @@
+import { createContext, ReactNode, useContext } from 'react'
+import { initializeApp } from 'firebase/app'
+import {
+    getAnalytics,
+    logEvent as logEventVendor,
+    setUserProperties,
+} from 'firebase/analytics'
+import packageJson from '../../../package.json'
+
+/**
+ * Firebase configuration
+ *
+ * production conf is setted in https://github.com/sensasi-delight/simulasi-grading-sawit/settings/environments
+ */
+const FIREBASE_APP = import.meta.env.FIREBASE_PROJECT_ID
+    ? initializeApp({
+          apiKey: import.meta.env.FIREBASE_API_KEY,
+          authDomain: import.meta.env.FIREBASE_AUTH_DOMAIN,
+          projectId: import.meta.env.FIREBASE_PROJECT_ID,
+          storageBucket: import.meta.env.FIREBASE_STORAGE_BUCKET,
+          messagingSenderId: import.meta.env.FIREBASE_MESSAGING_SENDER_ID,
+          appId: import.meta.env.FIREBASE_APP_ID,
+          measurementId: import.meta.env.FIREBASE_MEASUREMENT_ID,
+      })
+    : null
+
+const analytics = FIREBASE_APP ? getAnalytics(FIREBASE_APP) : null
+
+function logEvent(eventName: string) {
+    if (!analytics) return
+
+    setUserProperties(analytics, { wpa_version: packageJson.version })
+
+    return logEventVendor(analytics, eventName)
+}
+
+const CONTEXT = createContext<{
+    logEvent: (eventName: string) => void
+}>({
+    logEvent: logEvent,
+})
+
+export function FirebaseProvider({ children }: { children: ReactNode }) {
+    return (
+        <CONTEXT.Provider
+            value={{
+                logEvent,
+            }}>
+            {children}
+        </CONTEXT.Provider>
+    )
+}
+
+export function useFirebase() {
+    return useContext(CONTEXT)
+}

src/providers/components/globals-provider.tsx

@@ -7,21 +7,19 @@ import {
     useState,
 } from 'react'
 
-const DEFAULT_GLOBAL_VARIABLES: {
+const CONTEXT = createContext<{
     activeStep: number
     setActiveStep: Dispatch<SetStateAction<number>>
 
     formValues: Record<string, any>
     setFormValues: Dispatch<SetStateAction<Record<string, any>>>
-} = {
+}>({
     activeStep: 0,
     setActiveStep: () => {},
 
     formValues: {},
     setFormValues: () => {},
-}
-
-const CONTEXT = createContext(DEFAULT_GLOBAL_VARIABLES)
+})
 
 export function GlobalsProvider({ children }: { children: ReactNode }) {
     const [activeStep, setActiveStep] = useState(0)

src/providers/index.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react'
 import { createTheme, ThemeProvider } from '@mui/material'
 import { red } from '@mui/material/colors'
 import { GlobalsProvider } from './components/globals-provider'
+import { FirebaseProvider } from './components/firebase-provider'
 
 const THEME = createTheme({
     palette: {
@@ -14,7 +15,9 @@ const THEME = createTheme({
 export function Providers({ children }: { children: ReactNode }) {
     return (
         <ThemeProvider theme={THEME}>
-            <GlobalsProvider>{children}</GlobalsProvider>
+            <FirebaseProvider>
+                <GlobalsProvider>{children}</GlobalsProvider>
+            </FirebaseProvider>
         </ThemeProvider>
     )
 }