Track query times. Updated refresh button.

components/common/RefreshButton.js

@@ -1,19 +1,27 @@
-import React from 'react';
-import { useDispatch } from 'react-redux';
+import React, { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { setDateRange } from 'redux/actions/websites';
 import Button from './Button';
 import Refresh from 'assets/redo.svg';
+import Dots from 'assets/ellipsis-h.svg';
 import { useDateRange } from 'hooks/useDateRange';
 
 export default function RefreshButton({ websiteId }) {
   const dispatch = useDispatch();
   const dateRange = useDateRange(websiteId);
+  const [loading, setLoading] = useState(false);
+  const completed = useSelector(state => state.queries[`/api/website/${websiteId}/metrics`]);
 
   function handleClick() {
     if (dateRange) {
+      setLoading(true);
       dispatch(setDateRange(websiteId, dateRange));
     }
   }
 
-  return <Button icon={<Refresh />} size="small" onClick={handleClick} />;
+  useEffect(() => {
+    setLoading(false);
+  }, [completed]);
+
+  return <Button icon={loading ? <Dots /> : <Refresh />} size="small" onClick={handleClick} />;
 }

hooks/useFetch.js

@@ -1,7 +1,10 @@
 import { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { get } from 'lib/web';
+import { updateQuery } from 'redux/actions/queries';
 
 export default function useFetch(url, params = {}, options = {}) {
+  const dispatch = useDispatch();
   const [data, setData] = useState();
   const [error, setError] = useState();
   const keys = Object.keys(params)
@@ -12,7 +15,11 @@ export default function useFetch(url, params = {}, options = {}) {
   async function loadData() {
     try {
       setError(null);
+      const time = performance.now();
       const data = await get(url, params);
+
+      dispatch(updateQuery({ url, time: performance.now() - time, completed: Date.now() }));
+
       setData(data);
       onDataLoad(data);
     } catch (e) {

redux/actions/queries.js

@@ -0,0 +1,17 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const queries = createSlice({
+  name: 'queries',
+  initialState: {},
+  reducers: {
+    updateQuery(state, action) {
+      const { url, ...data } = action.payload;
+      state[url] = data;
+      return state;
+    },
+  },
+});
+
+export const { updateQuery } = queries.actions;
+
+export default queries.reducer;

redux/actions/websites.js

@@ -1,33 +1,29 @@
 import { createSlice } from '@reduxjs/toolkit';
-import produce from 'immer';
 
 const websites = createSlice({
-  name: 'user',
+  name: 'websites',
   initialState: {},
   reducers: {
     updateWebsites(state, action) {
       state = action.payload;
       return state;
     },
+    updateWebsite(state, action) {
+      const { websiteId, ...data } = action.payload;
+      state[websiteId] = data;
+      return state;
+    },
   },
 });
 
-export const { updateWebsites } = websites.actions;
+export const { updateWebsites, updateWebsite } = websites.actions;
 
 export default websites.reducer;
 
 export function setDateRange(websiteId, dateRange) {
-  return (dispatch, getState) => {
-    const state = getState();
-    let { websites = {} } = state;
-
-    websites = produce(websites, draft => {
-      if (!draft[websiteId]) {
-        draft[websiteId] = {};
-      }
-      draft[websiteId].dateRange = { ...dateRange, modified: Date.now() };
-    });
-
-    return dispatch(updateWebsites(websites));
+  return dispatch => {
+    return dispatch(
+      updateWebsite({ websiteId, dateRange: { ...dateRange, modified: Date.now() } }),
+    );
   };
 }

redux/reducers.js

@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux';
 import user from './actions/user';
 import websites from './actions/websites';
+import queries from './actions/queries';
 
-export default combineReducers({ user, websites });
+export default combineReducers({ user, websites, queries });