-
+
+
- )
- ) : (
-
-
-
- )}
+ )}
+
);
}
diff --git a/frontend/src/components/teamsAndOrgs/organisationsPlaceholder.js b/frontend/src/components/teamsAndOrgs/organisationsPlaceholder.js
new file mode 100644
index 0000000000..696f0cee5d
--- /dev/null
+++ b/frontend/src/components/teamsAndOrgs/organisationsPlaceholder.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { TextRow, RoundShape, RectShape } from 'react-placeholder/lib/placeholders';
+
+export const organisationCardPlaceholderTemplate = () => (_n, i) =>
+ (
+
+
+
+
+
+
+
+
+
+ {[...Array(2)].map((_, i) => (
+
+ ))}
+
+
+
+
+ );
+
+export const nCardPlaceholders = (N) => {
+ return [...Array(N).keys()].map(organisationCardPlaceholderTemplate());
+};
diff --git a/frontend/src/components/teamsAndOrgs/projects.js b/frontend/src/components/teamsAndOrgs/projects.js
index faae71b81e..c249501410 100644
--- a/frontend/src/components/teamsAndOrgs/projects.js
+++ b/frontend/src/components/teamsAndOrgs/projects.js
@@ -6,6 +6,7 @@ import ReactPlaceholder from 'react-placeholder';
import messages from './messages';
import { ProjectCard } from '../projectCard/projectCard';
import { AddButton, ViewAllLink } from './management';
+import { nCardPlaceholders } from '../projectCard/nCardPlaceholder';
export function Projects({
projects,
@@ -29,12 +30,10 @@ export function Projects({
{projects &&
projects.results &&
diff --git a/frontend/src/components/teamsAndOrgs/teams.js b/frontend/src/components/teamsAndOrgs/teams.js
index b91ec7c0a5..82f05ba5f2 100644
--- a/frontend/src/components/teamsAndOrgs/teams.js
+++ b/frontend/src/components/teamsAndOrgs/teams.js
@@ -11,6 +11,7 @@ import { UserAvatar, UserAvatarList } from '../user/avatar';
import { AddButton, ViewAllLink, Management, VisibilityBox, InviteOnlyBox } from './management';
import { SwitchToggle, RadioField, OrganisationSelectInput } from '../formInputs';
import { Button, EditButton } from '../button';
+import { nCardPlaceholders } from './teamsPlaceholder';
export function TeamsManagement({
teams,
@@ -18,6 +19,7 @@ export function TeamsManagement({
managementView,
userTeamsOnly,
setUserTeamsOnly,
+ isTeamsFetched,
}: Object) {
const isOrgManager = useSelector(
(state) => state.auth.get('organisations') && state.auth.get('organisations').length > 0,
@@ -42,13 +44,20 @@ export function TeamsManagement({
setUserOnly={setUserTeamsOnly}
userOnlyLabel={}
>
- {teams.length ? (
- teams.map((team, n) => )
- ) : (
-
-
-
- )}
+
+ {teams?.length ? (
+ teams.map((team, n) => )
+ ) : (
+
+
+
+ )}
+
);
}
@@ -67,14 +76,7 @@ export function Teams({ teams, viewAllQuery, showAddButton = false, isReady, bor
)}
{viewAllQuery && }
-
+
{teams && teams.slice(0, 6).map((team, n) => )}
{teams && teams.length === 0 && (
diff --git a/frontend/src/components/teamsAndOrgs/teamsPlaceholder.js b/frontend/src/components/teamsAndOrgs/teamsPlaceholder.js
new file mode 100644
index 0000000000..2f829e02be
--- /dev/null
+++ b/frontend/src/components/teamsAndOrgs/teamsPlaceholder.js
@@ -0,0 +1,35 @@
+import React, { Fragment } from 'react';
+
+import { TextRow, TextBlock, RoundShape, RectShape } from 'react-placeholder/lib/placeholders';
+
+export const teamCardPlaceholderTemplate = () => (_n, i) =>
+ (
+
+
+
+
+ {[...Array(2)].map((_, i) => (
+
+
+ {[...Array(2)].map((_, i) => (
+
+ ))}
+
+ ))}
+
+
+
-
-
-
+ {response?.users && (
+
+
+
+ )}
-
- {response.users.map((user) => (
-
- ))}
-
+
+
+ {response?.users.map((user) => (
+
+ ))}
+
+
{response === null || response.pagination.total === 0 ? null : (
{
+ it('renders user card', async () => {
+ const { container, getByText, getAllByRole } = render(
+
+
+ ,
+ );
+ await waitFor(() => {
+ expect(getByText(/Ram/i));
+ });
+ expect(getAllByRole('listitem')).toHaveLength(2);
+ expect(getByText(/total number of users: 220111/i)).toBeInTheDocument();
+ expect(screen.getByText('Ram').closest('a')).toHaveAttribute('href', '/users/Ram');
+ expect(screen.getAllByText('Mapper').length).toBe(2);
+ expect(getByText('Beginner')).toBeInTheDocument();
+ expect(getByText('Shyam')).toBeInTheDocument();
+ expect(screen.getByText('Shyam').closest('a')).toHaveAttribute('href', '/users/Shyam');
+ expect(screen.getByTitle(/Ram/i)).toHaveStyle(
+ `background-image: url(https://www.openstreetmap.org/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNXQ2Q3c9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fe41f1b2a5d6cf492a7133f15c81f105dec06ff7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkZISmxjMmw2WlY5MGIxOXNhVzFwZEZzSGFXbHBhUT09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--058ac785867b32287d598a314311e2253bd879a3/unnamed.webp)`,
+ );
+ expect(container.querySelectorAll('svg').length).toBe(2);
+ });
+});
diff --git a/frontend/src/components/user/usersPlaceholder.js b/frontend/src/components/user/usersPlaceholder.js
new file mode 100644
index 0000000000..d301ab54f0
--- /dev/null
+++ b/frontend/src/components/user/usersPlaceholder.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { TextRow, RoundShape } from 'react-placeholder/lib/placeholders';
+
+export const userCardPlaceholderTemplate = () => (_n, i) =>
+ (
+
+ );
+
+export const nCardPlaceholders = (N) => {
+ return [...Array(N).keys()].map(userCardPlaceholderTemplate());
+};
diff --git a/frontend/src/network/tests/mockData/userList.js b/frontend/src/network/tests/mockData/userList.js
new file mode 100644
index 0000000000..0c217dfac3
--- /dev/null
+++ b/frontend/src/network/tests/mockData/userList.js
@@ -0,0 +1,29 @@
+export const usersList = {
+ users: [
+ {
+ id: 1,
+ username: 'Ram',
+ role: 'MAPPER',
+ mappingLevel: 'BEGINNER',
+ pictureUrl:
+ 'https://www.openstreetmap.org/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNXQ2Q3c9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fe41f1b2a5d6cf492a7133f15c81f105dec06ff7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkZISmxjMmw2WlY5MGIxOXNhVzFwZEZzSGFXbHBhUT09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--058ac785867b32287d598a314311e2253bd879a3/unnamed.webp',
+ },
+ {
+ id: 2,
+ username: 'Shyam',
+ role: 'MAPPER',
+ mappingLevel: 'ADVANCED',
+ pictureUrl: null,
+ },
+ ],
+ pagination: {
+ hasNext: true,
+ hasPrev: false,
+ nextNum: 2,
+ page: 1,
+ pages: 11006,
+ prevNum: null,
+ perPage: 20,
+ total: 220111,
+ },
+};
diff --git a/frontend/src/network/tests/server-handlers.js b/frontend/src/network/tests/server-handlers.js
index 7cf28e25a1..998b0bd419 100644
--- a/frontend/src/network/tests/server-handlers.js
+++ b/frontend/src/network/tests/server-handlers.js
@@ -4,6 +4,7 @@ import { getProjectSummary, getProjectStats } from './mockData/projects';
import { featuredProjects } from './mockData/featuredProjects';
import { newUsersStats } from './mockData/userStats';
import { projectContributions, projectContributionsByDay } from './mockData/contributions';
+import { usersList } from './mockData/userList';
import tasksGeojson from '../../utils/tests/snippets/tasksGeometry';
import { API_URL } from '../../config';
@@ -34,6 +35,9 @@ const handlers = [
rest.get(API_URL + 'users/statistics/', async (req, res, ctx) => {
return res(ctx.json(newUsersStats));
}),
+ rest.get(API_URL + 'users', async (req, res, ctx) => {
+ return res(ctx.json(usersList));
+ }),
];
export { handlers };
diff --git a/frontend/src/views/campaigns.js b/frontend/src/views/campaigns.js
index e114e696e0..e3d8b12f1a 100644
--- a/frontend/src/views/campaigns.js
+++ b/frontend/src/views/campaigns.js
@@ -1,8 +1,7 @@
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { Link, useNavigate } from '@reach/router';
-import ReactPlaceholder from 'react-placeholder';
-import { TextBlock, RectShape } from 'react-placeholder/lib/placeholders';
+
import { FormattedMessage } from 'react-intl';
import { Form } from 'react-final-form';
@@ -40,26 +39,14 @@ export function ListCampaigns() {
const userDetails = useSelector((state) => state.auth.get('userDetails'));
// TO DO: filter teams of current user
const [error, loading, campaigns] = useFetch(`campaigns/`);
-
- const placeHolder = (
-
- );
+ const isCampaignsFetched = !loading && !error;
return (
-
-
-
+
);
}
diff --git a/frontend/src/views/interests.js b/frontend/src/views/interests.js
index 895bc5e795..c7e54c461d 100644
--- a/frontend/src/views/interests.js
+++ b/frontend/src/views/interests.js
@@ -1,8 +1,6 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { useFetch } from '../hooks/UseFetch';
-import { TextBlock, RectShape } from 'react-placeholder/lib/placeholders';
-import ReactPlaceholder from 'react-placeholder';
import { Link, useNavigate } from '@reach/router';
import { Form } from 'react-final-form';
import { FormattedMessage } from 'react-intl';
@@ -76,26 +74,14 @@ export const ListInterests = () => {
const userDetails = useSelector((state) => state.auth.get('userDetails'));
// TO DO: filter teams of current user
const [error, loading, interests] = useFetch(`interests/`);
-
- const placeHolder = (
-
- );
+ const isInterestsFetched = !loading && !error;
return (
-
-
-
+
);
};
diff --git a/frontend/src/views/licenses.js b/frontend/src/views/licenses.js
index 1049a718fd..8e5b02f7c6 100644
--- a/frontend/src/views/licenses.js
+++ b/frontend/src/views/licenses.js
@@ -2,8 +2,6 @@ import React from 'react';
import { useSelector } from 'react-redux';
import { useFetch } from '../hooks/UseFetch';
import { useSetTitleTag } from '../hooks/UseMetaTags';
-import { TextBlock, RectShape } from 'react-placeholder/lib/placeholders';
-import ReactPlaceholder from 'react-placeholder';
import { Link, useNavigate } from '@reach/router';
import { Form } from 'react-final-form';
import { FormattedMessage } from 'react-intl';
@@ -49,26 +47,14 @@ export const ListLicenses = () => {
const userDetails = useSelector((state) => state.auth.get('userDetails'));
// TO DO: filter teams of current user
const [error, loading, licenses] = useFetch(`licenses/`);
-
- const placeHolder = (
-
- );
+ const isLicensesFetched = !loading && !error;
return (
-
-
-
+
);
};
diff --git a/frontend/src/views/organisationManagement.js b/frontend/src/views/organisationManagement.js
index b3a3eea953..4bc630033e 100644
--- a/frontend/src/views/organisationManagement.js
+++ b/frontend/src/views/organisationManagement.js
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Link, useNavigate } from '@reach/router';
import ReactPlaceholder from 'react-placeholder';
-import { RectShape } from 'react-placeholder/lib/placeholders';
import { FormattedMessage } from 'react-intl';
import { Form } from 'react-final-form';
@@ -32,37 +31,31 @@ export function ListOrganisations() {
);
const [organisations, setOrganisations] = useState(null);
const [userOrgsOnly, setUserOrgsOnly] = useState(userDetails.role === 'ADMIN' ? false : true);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+
useEffect(() => {
if (token && userDetails && userDetails.id) {
+ setLoading(true);
const queryParam = `${userOrgsOnly ? `?manager_user_id=${userDetails.id}` : ''}`;
- fetchLocalJSONAPI(`organisations/${queryParam}`, token).then((orgs) =>
- setOrganisations(orgs.organisations),
- );
+ fetchLocalJSONAPI(`organisations/${queryParam}`, token)
+ .then((orgs) => {
+ setOrganisations(orgs.organisations);
+ setLoading(false);
+ })
+ .catch((err) => setError(err));
}
}, [userDetails, token, userOrgsOnly]);
- const placeHolder = (
-
-
-
-
- );
-
return (
-
-
-
+
);
}
diff --git a/frontend/src/views/teams.js b/frontend/src/views/teams.js
index eccbf453ca..19006c8a76 100644
--- a/frontend/src/views/teams.js
+++ b/frontend/src/views/teams.js
@@ -1,8 +1,6 @@
import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Link, useNavigate } from '@reach/router';
-import ReactPlaceholder from 'react-placeholder';
-import { TextBlock, RectShape } from 'react-placeholder/lib/placeholders';
import { FormattedMessage } from 'react-intl';
import { Form } from 'react-final-form';
@@ -50,6 +48,8 @@ export function ListTeams({ managementView = false }: Object) {
const token = useSelector((state) => state.auth.get('token'));
const [teams, setTeams] = useState(null);
const [userTeamsOnly, setUserTeamsOnly] = useState(true);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
useEffect(() => {
if (token && userDetails && userDetails.id) {
@@ -59,36 +59,25 @@ export function ListTeams({ managementView = false }: Object) {
} else {
queryParam = `?member=${userDetails.id}`;
}
- fetchLocalJSONAPI(`teams/${queryParam}`, token).then((res) => setTeams(res.teams));
+ setLoading(true);
+ fetchLocalJSONAPI(`teams/${queryParam}`, token)
+ .then((res) => {
+ setTeams(res.teams);
+ setLoading(false);
+ })
+ .catch((err) => setError(err));
}
}, [userDetails, token, managementView, userTeamsOnly]);
- const placeHolder = (
-
- );
-
return (
-
-
-
+
);
}