From c9374e1a9705a7a33145c463cb0f1736659dcdfc Mon Sep 17 00:00:00 2001
From: Diana Rita Nanyanzi <31903212+d-rita@users.noreply.github.com>
Date: Fri, 12 Aug 2022 13:23:19 +0300
Subject: [PATCH] Replace submit button with loader during results fetch
---
src/components/mapathon/mapathonReportForm.js | 25 +++++++++++++------
src/components/userGroup/userGroupForm.js | 22 ++++++++++++----
src/components/userGroup/userGroupResults.js | 4 +--
src/views/MapathonReports.js | 13 ----------
src/views/UserGroupReport.js | 24 +++++++++++-------
5 files changed, 51 insertions(+), 37 deletions(-)
diff --git a/src/components/mapathon/mapathonReportForm.js b/src/components/mapathon/mapathonReportForm.js
index 4ab0f26..0cc7ccd 100644
--- a/src/components/mapathon/mapathonReportForm.js
+++ b/src/components/mapathon/mapathonReportForm.js
@@ -12,6 +12,7 @@ import { setLoading, setTriggerSubmit } from "../../features/form/formSlice";
import { FormContext } from "../../context/formContext";
import { getTimeZone } from "../../utils/timeUtils";
import { validateMapathonFormData } from "../../utils/validationUtils";
+import { SpinnerIcon } from "../../assets/svgIcons";
import messages from "../messages";
export const MapathonReportForm = ({ fetch, error, loading }) => {
@@ -172,14 +173,22 @@ export const MapathonReportForm = ({ fetch, error, loading }) => {
/>
</div>
</div>
- <div className="text-center mt-4">
- <SubmitButton
- styles="bg-red text-white py-3 px-10 text-xl"
- disabled={loading}
- >
- <FormattedMessage {...messages.mapathonSubmitForm} />
- </SubmitButton>
- </div>
+ {!loading && (
+ <div className="text-center mt-4">
+ <SubmitButton
+ styles="bg-red text-white py-3 px-10 text-xl"
+ disabled={loading}
+ >
+ <FormattedMessage {...messages.mapathonSubmitForm} />
+ </SubmitButton>
+ </div>
+ )}
+ {loading && (
+ <div className="mx-auto text-center w-1/4 p-1 mt-5">
+ <SpinnerIcon className="animate-spin w-5 h-5 mr-2 mb-1 inline text-red" />
+ Loading...
+ </div>
+ )}
</form>
{formError && (
<Error>
diff --git a/src/components/userGroup/userGroupForm.js b/src/components/userGroup/userGroupForm.js
index 1e9e686..36f482f 100644
--- a/src/components/userGroup/userGroupForm.js
+++ b/src/components/userGroup/userGroupForm.js
@@ -7,6 +7,7 @@ import { SubmitButton } from "../button";
import { Error } from "../formResponses";
import { UserGroupErrorMessage } from "./userGroupError";
import { getTimeZone } from "../../utils/timeUtils";
+import { SpinnerIcon } from "../../assets/svgIcons";
import messages from "./messages";
export const UserGroupReportForm = ({
@@ -16,6 +17,8 @@ export const UserGroupReportForm = ({
setUsers,
formError,
setFormError,
+ setLoading,
+ loading,
}) => {
const intl = useIntl();
@@ -34,6 +37,7 @@ export const UserGroupReportForm = ({
event.preventDefault();
if (formData.usernames.length > 0) {
setUsers([]);
+ setLoading(true);
fetch(formData); // API call
setFormError(null);
} else {
@@ -124,11 +128,19 @@ export const UserGroupReportForm = ({
/>
</div>
</div>
- <div className="text-center mt-4">
- <SubmitButton styles="bg-red text-white py-3 px-10 text-xl">
- <FormattedMessage {...messages.Submit} />
- </SubmitButton>
- </div>
+ {!loading && (
+ <div className="text-center mt-4">
+ <SubmitButton styles="bg-red text-white py-3 px-10 text-xl">
+ <FormattedMessage {...messages.Submit} />
+ </SubmitButton>
+ </div>
+ )}
+ {loading && (
+ <div className="mx-auto text-center w-1/4 p-1 mt-5">
+ <SpinnerIcon className="animate-spin w-5 h-5 mr-2 mb-1 inline text-red" />
+ Loading...
+ </div>
+ )}
</form>
{formError && (
<Error>
diff --git a/src/components/userGroup/userGroupResults.js b/src/components/userGroup/userGroupResults.js
index 7b16fd8..ffe6c05 100644
--- a/src/components/userGroup/userGroupResults.js
+++ b/src/components/userGroup/userGroupResults.js
@@ -19,7 +19,7 @@ export function UserGroupResultsTable({
columns,
data,
userDataCheck,
- loading,
+ tableLoading,
}) {
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
useTable(
@@ -104,7 +104,7 @@ export function UserGroupResultsTable({
})}
</tbody>
</table>
- {loading ? (
+ {tableLoading ? (
<div className="text-center w-11/12 mx-auto">
<SpinnerIcon className="animate-spin w-5 h-5 mt-2 inline text-red" />
</div>
diff --git a/src/views/MapathonReports.js b/src/views/MapathonReports.js
index 1f20e10..4473a1c 100644
--- a/src/views/MapathonReports.js
+++ b/src/views/MapathonReports.js
@@ -15,7 +15,6 @@ import { setTriggerSubmit } from "../features/form/formSlice";
import { MiniNavBar } from "../components/nav/navbar";
import { aggregateMapathonUserData } from "../utils/mapathonDataUtils";
import { MapathonDetailedTableHeaders } from "../components/mapathon/constants";
-import { SpinnerIcon } from "../assets/svgIcons";
const MAPATHON_PAGES = [
{ pageTitle: "Mapathon Summary Report", pageURL: "/mapathon-report/summary" },
@@ -51,12 +50,6 @@ export const MapathonSummaryReport = (props) => {
<div className="text-center mt-4">
<MapathonRedirectButton triggerFn={triggeredSubmit} />
</div>
- {isLoading && (
- <div className="mx-auto text-center w-1/4 p-1 mt-5">
- <SpinnerIcon className="animate-spin w-5 h-5 mr-2 mb-1 inline text-red" />
- Loading...
- </div>
- )}
{data && <MapathonSummaryResults data={data} />}
</div>
);
@@ -83,12 +76,6 @@ export const MapathonDetailedReport = () => {
fetch={mutate}
loading={isLoading || triggeredLoading}
/>
- {(isLoading || triggeredLoading) && (
- <div className="mx-auto text-center w-1/4 p-1 mt-5">
- <SpinnerIcon className="animate-spin w-5 h-5 mr-2 mb-1 inline text-red" />
- Loading...
- </div>
- )}
{data && (
<MapathonDetailedResultsTable
data={aggregateMapathonUserData(data)}
diff --git a/src/views/UserGroupReport.js b/src/views/UserGroupReport.js
index b6f8360..046cc7f 100644
--- a/src/views/UserGroupReport.js
+++ b/src/views/UserGroupReport.js
@@ -9,7 +9,6 @@ import { getUserIds, getUserStats } from "../queries/getUserStats";
import { MiniNavBar } from "../components/nav/navbar";
import { UserGroupColumnHeadings } from "../components/userGroup/constants";
import { aggregateUserGroupData } from "../utils/userGroupUtils";
-import { SpinnerIcon } from "../assets/svgIcons";
const userGroupPage = [
{ pageTitle: "User Group Report", pageURL: "/user-report" },
@@ -19,12 +18,14 @@ export const UserGroupReport = () => {
const { userGroupFormData, setUserGroupFormData } = useContext(FormContext);
const [formError, setFormError] = useState(null);
const [userIds, setUserIds] = useState([]);
- const [users, setUsers] = useState();
+ const [users, setUsers] = useState(null);
+ const [loading, setLoading] = useState(false);
const { mutate, data, isLoading, error } = useMutation(getUserIds);
useEffect(() => {
if (error) {
+ setLoading(false);
if (error.response.status === 500) {
setFormError(error.response.data);
} else {
@@ -39,6 +40,8 @@ export const UserGroupReport = () => {
const fetchUserStats = useCallback(
(ids) => {
+ setLoading(true);
+ setUsers([]);
ids.map((i) =>
getUserStats(i.userId, userGroupFormData)
.then((res) => {
@@ -59,9 +62,16 @@ export const UserGroupReport = () => {
[userGroupFormData]
);
+ useEffect(() => {
+ if (isLoading) {
+ setLoading(isLoading);
+ }
+ }, [isLoading]);
+
useEffect(() => {
if (userIds) {
fetchUserStats(userIds);
+ setLoading(false);
}
}, [userIds]);
@@ -75,19 +85,15 @@ export const UserGroupReport = () => {
setUsers={setUsers}
formError={formError}
setFormError={setFormError}
+ setLoading={setLoading}
+ loading={loading}
/>
- {isLoading && (
- <div className="mx-auto text-center w-1/4 p-1 mt-5">
- <SpinnerIcon className="animate-spin w-5 h-5 mr-2 mb-1 inline text-red" />
- Loading...
- </div>
- )}
{data && (
<UserGroupResultsTable
columns={UserGroupColumnHeadings}
data={aggregateUserGroupData(users)}
userDataCheck={userIds && userIds.length > 0}
- loading={userIds.length !== users.length}
+ tableLoading={userIds.length !== users.length}
/>
)}
</div>