Skip to content

Commit

Permalink
refactor(frontend): simplify infographics API usage (reuse Entities d…
Browse files Browse the repository at this point in the history 
…ata) (#1601)

* fix(submissionInfographics): update taskInfo type & message

* fix(taskSlice): increase submission count if status is not 0

* fix(submissionInfographics): use useSelector from reduxTypes

* feat(submissionsInfographics): calculate form submissions data on frontend replacing api call

* fix(submissionsInfographics): remove data calculation for planned vs actual graph

* fix(submissionsInfographics): remove commented code

* fix(submissionsInfographics): only count entities with status greater than 1

* fix(taskSlice): only count entities with status greater than 1

* fix(lineChart): remove dot from lines

* fix(submissionInfographics): calculate validated vs mapped task data on frontend

* fix(projectSubmissions): comment /dashboard api call & pass entities list to child components

* fix(projectInfo): display projectInfo data replacing data from project dashboard api

* fix(projectSusmissions): use useAppSelector for typed selector

* feat(project): add created to projectInfo state

* fix(projectInfo): use project creation date form project api

* fix(projectSubmmissions): call contributors api on parent component

* fix(submissionsInfographics): rename to dateA, dataB to suitable names

* feat(commonUtils): add date functions to commonUtils

* fix(submissionService): remove infographics chart api call service

* fix(submissionInfographics): remove commented service dispatch & shift date functions to utils

* fix(submission): remove unused submission state, types

* remove commented getProjectDashboard call
  • Loading branch information
@NSUWAL123
NSUWAL123 authored Jul 9, 2024
1 parent aea7e02 commit 0dcfdc6
Show file tree
Hide file tree
Showing 13 changed files with 215 additions and 240 deletions.
3 changes: 2 additions & 1 deletion src/frontend/src/api/Project.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const ProjectById = (existingProjectList, projectId) => {
custom_tms_url: projectResp?.custom_tms_url,
organisation_id: projectResp?.organisation_id,
organisation_logo: projectResp?.organisation_logo,
created: projectResp?.created,
}),
);
dispatch(ProjectActions.SetProjectDetialsLoading(false));
Expand Down Expand Up @@ -183,7 +184,7 @@ export const DownloadTile = (url, payload, toOpfs = false) => {
}

const filename = response.headers['content-disposition'].split('filename=')[1];
console.log(filename)
console.log(filename);
// Create Blob from ArrayBuffer
const blob = new Blob([tileData], { type: response.headers['content-type'] });
const downloadUrl = URL.createObjectURL(blob);
Expand Down
34 changes: 0 additions & 34 deletions src/frontend/src/api/SubmissionService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,40 +24,6 @@ export const ProjectSubmissionService: Function = (url: string) => {
};
};

export const ProjectSubmissionInfographicsService: Function = (url: string) => {
return async (dispatch) => {
const fetchProjectSubmission = async (url: string) => {
try {
dispatch(SubmissionActions.SetSubmissionInfographicsLoading(true));
const fetchSubmissionData = await CoreModules.axios.get(url);
const resp: any = fetchSubmissionData.data;
dispatch(SubmissionActions.SetSubmissionInfographicsLoading(false));
dispatch(SubmissionActions.SetSubmissionInfographics(resp));
} catch (error) {}
};

await fetchProjectSubmission(url);
};
};

export const ValidatedVsMappedInfographicsService: Function = (url: string) => {
return async (dispatch) => {
const fetchProjectSubmission = async (url: string) => {
try {
dispatch(SubmissionActions.SetValidatedVsMappedLoading(true));
const validatedVsMappedData = await CoreModules.axios.get(url);
const resp: any = validatedVsMappedData.data;
dispatch(SubmissionActions.SetValidatedVsMappedInfographics(resp));
dispatch(SubmissionActions.SetValidatedVsMappedLoading(false));
} catch (error) {
dispatch(SubmissionActions.SetValidatedVsMappedLoading(false));
}
};

await fetchProjectSubmission(url);
};
};

export const ProjectContributorsService: Function = (url: string) => {
return async (dispatch) => {
const fetchProjectContributor = async (url: string) => {
Expand Down
55 changes: 30 additions & 25 deletions src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,46 @@ import React from 'react';
import CoreModules from '@/shared/CoreModules';
import AssetModules from '@/shared/AssetModules';
import { useNavigate } from 'react-router-dom';
import { projectDashboardDetailTypes, projectInfoType } from '@/models/project/projectModel';
import { useAppSelector } from '@/types/reduxTypes';

const ProjectInfo = () => {
const ProjectInfo = ({ entities }) => {
const navigate = useNavigate();
const params = CoreModules.useParams();
const projectId = params.projectId;
const projectInfo: projectInfoType = CoreModules.useAppSelector((state) => state.project.projectInfo);
const projectDashboardDetail: projectDashboardDetailTypes = CoreModules.useAppSelector(
(state) => state.project.projectDashboardDetail,
);
const projectDashboardLoading: boolean = CoreModules.useAppSelector((state) => state.project.projectDashboardLoading);
const projectInfo = useAppSelector((state) => state.project.projectInfo);
// const projectDashboardDetail = useAppSelector((state) => state.project.projectDashboardDetail);
// const projectDashboardLoading = useAppSelector((state) => state.project.projectDashboardLoading);
const submissionContributorsData = useAppSelector((state) => state.submission.submissionContributors);

const projectTaskList = useAppSelector((state) => state.project.projectTaskBoundries);
const projectIndex = projectTaskList.findIndex((project) => project.id == +projectId);
const taskActivities = projectTaskList?.[projectIndex]?.taskBoundries;
const projectDetailsLoading = useAppSelector((state) => state.project.projectDetailsLoading);
const entityOsmMapLoading = useAppSelector((state) => state.project.entityOsmMapLoading);
const projectCreationDate = projectInfo?.created ? projectInfo?.created?.split('T')[0] : '-';
const submissionContributorsLoading = useAppSelector((state) => state.submission.submissionContributorsLoading);

const latestDateSorted = entities
?.map((entry) => new Date(entry?.updated_at)) // Convert to Date objects
.sort((a, b) => b - a)?.[0]
?.toISOString();

const updatedDateTime = latestDateSorted ? latestDateSorted?.split('T')[0] : '-';

const dataCard = [
{
title: 'Tasks',
count: projectDashboardDetail?.total_tasks,
count: taskActivities?.length,
icon: <AssetModules.TaskIcon sx={{ color: 'white', fontSize: { xs: '35px', xl: '40px' } }} />,
},
{
title: 'Contributors',
count: projectDashboardDetail?.total_contributors,
count: submissionContributorsData?.length,
icon: <AssetModules.PeopleAltIcon sx={{ color: 'white', fontSize: { xs: '35px', xl: '40px' } }} />,
},
{
title: 'Submissions',
count: projectDashboardDetail?.total_submission,
count: entities?.length,
icon: <AssetModules.SubmissionIcon sx={{ color: 'white', fontSize: { xs: '35px', xl: '40px' } }} />,
},
];
Expand All @@ -48,7 +62,7 @@ const ProjectInfo = () => {

return (
<div className="fmtm-w-full sm:fmtm-ml-2 fmtm-border-b-[1px] fmtm-border-gray-300 fmtm-pb-10">
{projectDashboardLoading ? (
{projectDetailsLoading ? (
<CoreModules.Skeleton style={{ width: '150px' }} className="fmtm-mb-1" />
) : (
<div className="fmtm-pb-4">
Expand All @@ -65,31 +79,22 @@ const ProjectInfo = () => {
</div>
)}
<div className=" fmtm-flex fmtm-flex-col xl:fmtm-flex-row fmtm-w-full sm:fmtm-items-center fmtm-gap-10 fmtm-mt-3">
{projectDashboardLoading ? (
{projectDetailsLoading || entityOsmMapLoading ? (
<CoreModules.Skeleton className="!fmtm-w-full sm:!fmtm-w-[30rem] 2xl:!fmtm-w-[34rem] !fmtm-h-[8rem] !fmtm-rounded-xl" />
) : (
<div className="fmtm-w-full fmtm-min-w-0 sm:fmtm-max-w-[37rem] fmtm-bg-white fmtm-rounded-lg fmtm-p-5 fmtm-flex fmtm-flex-col fmtm-gap-5 fmtm-shadow-[0px_10px_20px_0px_rgba(96,96,96,0.1)]">
<h2 className="fmtm-text-2xl fmtm-text-[#545454] fmtm-font-bold">{projectInfo?.title}</h2>
<div>
<p className="fmtm-text-base fmtm-text-[#706E6E]">
Created On:{' '}
<span>
{projectDashboardDetail?.created
? `${projectDashboardDetail?.created?.split('T')[0]} ${projectDashboardDetail?.created
?.split('T')[1]
?.split('.')[0]}`
: '-'}
</span>
</p>
<p className="fmtm-text-base fmtm-text-[#706E6E]">
Last active:{' '}
<span>{projectDashboardDetail?.last_active ? projectDashboardDetail?.last_active : '-'}</span>
Created On:
<span>{projectCreationDate}</span>
</p>
<p className="fmtm-text-base fmtm-text-[#706E6E]">Last active: {updatedDateTime}</p>
</div>
</div>
)}
<div className="fmtm-w-full fmtm-overflow-x-scroll scrollbar fmtm-pb-1 md:fmtm-pb-0 md:fmtm-overflow-x-visible">
{projectDashboardLoading ? (
{projectDetailsLoading || submissionContributorsLoading || entityOsmMapLoading ? (
<div className="fmtm-w-full fmtm-flex sm:fmtm-justify-center fmtm-gap-5">
{Array.from({ length: 3 }).map((i) => (
<CoreModules.Skeleton key={i} className="!fmtm-w-[12.5rem] fmtm-h-[6.25rem] !fmtm-rounded-xl" />
Expand Down
Loading

0 comments on commit 0dcfdc6

Please sign in to comment.