Added report context. Removed report store.

hooks/useReport.js

@@ -1,20 +1,80 @@
-import useStore, { createReport } from 'store/reports';
+import { produce } from 'immer';
 import { useCallback, useEffect, useState } from 'react';
+import useApi from './useApi';
+
+const baseParameters = {
+  name: 'Untitled',
+  description: '',
+  parameters: {},
+};
 
 export function useReport(reportId, defaultParameters) {
-  const [id, setId] = useState(reportId);
+  const [report, setReport] = useState(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const { get, post } = useApi();
 
-  const selector = useCallback(state => state[id], [id]);
-  const report = useStore(selector);
+  const loadReport = async id => {
+    const data = await get(`/reports/${id}`);
+
+    setReport(data);
+  };
+
+  const runReport = useCallback(
+    async parameters => {
+      const { websiteId, type, dateRange } = report;
+      setIsRunning(true);
+
+      const data = await post(`/reports/${type}`, {
+        websiteId: websiteId,
+        ...parameters,
+        startAt: +dateRange?.startDate,
+        endAt: +dateRange?.endDate,
+      });
+
+      setReport(
+        produce(state => {
+          state.parameters = parameters;
+          state.data = data;
+
+          return state;
+        }),
+      );
+
+      setIsRunning(false);
+    },
+    [report],
+  );
+
+  const updateReport = useCallback(
+    async data => {
+      setReport(
+        produce(state => {
+          const { parameters, ...rest } = data;
+
+          if (parameters) {
+            state.parameters = { ...state.parameters, ...parameters };
+          }
+
+          for (const key in rest) {
+            state[key] = rest[key];
+          }
+
+          return state;
+        }),
+      );
+    },
+    [report],
+  );
 
   useEffect(() => {
-    if (!report) {
-      const newReport = createReport(defaultParameters);
-      setId(newReport.id);
+    if (!reportId) {
+      setReport({ ...baseParameters, ...defaultParameters });
+    } else {
+      loadReport(reportId);
     }
   }, []);
 
-  return report;
+  return { report, runReport, updateReport, isRunning };
 }
 
 export default useReport;

hooks/useTheme.js

@@ -17,6 +17,9 @@ export function useTheme() {
   const primaryColor = colord(THEME_COLORS[theme].primary);
 
   const colors = {
+    theme: {
+      ...THEME_COLORS[theme],
+    },
     chart: {
       text: THEME_COLORS[theme].gray700,
       line: THEME_COLORS[theme].gray200,
@@ -33,6 +36,12 @@ export function useTheme() {
         hoverBorderColor: primaryColor.toRgbString(),
       },
     },
+    map: {
+      baseColor: THEME_COLORS[theme].primary,
+      fillColor: THEME_COLORS[theme].gray100,
+      strokeColor: THEME_COLORS[theme].primary,
+      hoverColor: THEME_COLORS[theme].primary,
+    },
   };
 
   function saveTheme(value) {