diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js
index ce4c4f19..2d948cde 100644
--- a/components/common/RefreshButton.js
+++ b/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 } size="small" onClick={handleClick} />;
+ useEffect(() => {
+ setLoading(false);
+ }, [completed]);
+
+ return : } size="small" onClick={handleClick} />;
}
diff --git a/hooks/useFetch.js b/hooks/useFetch.js
index 2e1ad247..98ee912a 100644
--- a/hooks/useFetch.js
+++ b/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) {
diff --git a/redux/actions/queries.js b/redux/actions/queries.js
new file mode 100644
index 00000000..0e74de9d
--- /dev/null
+++ b/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;
diff --git a/redux/actions/websites.js b/redux/actions/websites.js
index d619ddb7..ef6bd872 100644
--- a/redux/actions/websites.js
+++ b/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() } }),
+ );
};
}
diff --git a/redux/reducers.js b/redux/reducers.js
index 68a080f7..7a4b6d7b 100644
--- a/redux/reducers.js
+++ b/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 });