Added first round of analytics and event tracking BOD-190

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { MdClose } from "react-icons/md";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import { QUERY_DASHBOARD_DETAILS } from "../../graphql/bodyshop.queries";
 import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
 import {
@@ -37,6 +38,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function DashboardGridComponent({ currentUser, bodyshop }) {
   const { loading, error, data } = useQuery(QUERY_DASHBOARD_DETAILS);
+  console.log("DashboardGridComponent -> data", data)
   const { t } = useTranslation();
   const [state, setState] = useState({
     layout: bodyshop.associations[0].user.dashboardlayout || [
@@ -47,6 +49,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
   const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
 
   const handleLayoutChange = async (newLayout) => {
+    logImEXEvent("dashboard_change_layout");
     setState({ ...state, layout: newLayout });
     const result = await updateLayout({
       variables: { email: currentUser.email, layout: newLayout },
@@ -62,6 +65,8 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
   };
 
   const handleRemoveComponent = (key) => {
+    logImEXEvent("dashboard_remove_component", { name: key });
+
     const idxToRemove = state.layout.findIndex((i) => i.i === key);
     const newLayout = state.layout;
     newLayout.splice(idxToRemove, 1);
@@ -70,6 +75,8 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
   };
 
   const handleAddComponent = (e) => {
+    logImEXEvent("dashboard_add_component", { name: e });
+
     handleLayoutChange([
       ...state.layout,
       {
@@ -99,7 +106,6 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
       ))}
     </Menu>
   );
-  console.log("Dashboard Data:", data);
 
   if (error) return <AlertComponent message={error.message} type='error' />;