Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: React warning fixes #323

Merged
merged 1 commit into from
Jun 4, 2024
Merged

chore: React warning fixes #323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/src/components/BarChartGrouped/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ const BarChartGrouped = () => {
const [windowWidth, setWindowWidth] = useState<number>(window.innerWidth);
const [chartData, setChartData] = useState<any[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [orgUnitCode, setOrgUnitCode] = useState<string>('');
const [statusCode, setStatusCode] = useState<string>('');
const [orgUnitCode, setOrgUnitCode] = useState<string | null>(null);
const [statusCode, setStatusCode] = useState<string | null>(null);
const [startDate, setStartDate] = useState<Date | null>(null);
const [endDate, setEndDate] = useState<Date | null>(null);

Expand Down
79 changes: 33 additions & 46 deletions frontend/src/components/OpeningMetricsTab/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,45 @@
import React, {useState} from "react";
import { useSelector } from "react-redux";
import FavouriteCard from "../FavouriteCard";
import PageTitle from "../PageTitle";
import React from "react";
import './styles.scss'
import BarChartGrouped from "../BarChartGrouped";
import ChartContainer from "../ChartContainer";
import DonutChartView from "../DonutChartView";
import OpeningHistory from "../OpeningHistory";
import OpeningHistoryItems from "../../mock-data/OpeningHistoryItems";
import ActionsTable from "../ActionsTable";
import MyRecentActions from "../MyRecentActions";


const OpeningMetricsTab: React.FC = () => {
const [showSpatial, setShowSpatial] = useState<boolean>(false);

const toggleSpatial = () => {
setShowSpatial(!showSpatial)
}

return (
<>
<div className="container-fluid p-3">
<div className="row gy-3">
<div className="col-xxl-6">
<ChartContainer
title="Openings per years"
description="Check openings and submissions per year"
>
<BarChartGrouped/>
</ChartContainer>
</div>
<div className="col-xxl-6">
<ChartContainer title="Track Openings" description="Follow your favouirite openings">
<OpeningHistory
histories={OpeningHistoryItems}
/>
</ChartContainer>
</div>
<div className="col-xxl-6">
<ChartContainer title="Free grow milestone declarations" description="Check opening standards unit for inspections purposes">
<DonutChartView/>
</ChartContainer>
</div>
<div className="col-xxl-6">
<ChartContainer title="My recent actions" description="Check your recent requests and files">
<MyRecentActions/>
</ChartContainer>
</div>

const OpeningMetricsTab: React.FC = () => (
<>
<div className="container-fluid p-3">
<div className="row gy-3">
<div className="col-xxl-6">
<ChartContainer
title="Openings per years"
description="Check openings and submissions per year"
>
<BarChartGrouped />
</ChartContainer>
</div>
<div className="col-xxl-6">
<ChartContainer title="Track Openings" description="Follow your favouirite openings">
<OpeningHistory
histories={OpeningHistoryItems}
/>
</ChartContainer>
</div>
<div className="col-xxl-6">
<ChartContainer title="Free grow milestone declarations" description="Check opening standards unit for inspections purposes">
<DonutChartView/>
</ChartContainer>
</div>
<div className="col-xxl-6">
<ChartContainer title="My recent actions" description="Check your recent requests and files">
<MyRecentActions/>
</ChartContainer>
</div>

</div>
</>
);
};
</div>
</>
);

export default OpeningMetricsTab;
69 changes: 35 additions & 34 deletions frontend/src/components/OpeningScreenDataTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback, useContext, useState } from 'react';
import React, { useCallback, useContext, useEffect, useState } from 'react';
import {
DataTable,
TableBatchAction,
Expand Down Expand Up @@ -46,9 +46,6 @@ const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({ rows, heade
setInitialItemsPerPage
} = useContext(PaginationContext);

setPageData(filteredRows);
setInitialItemsPerPage(5);

const handleSearchChange = (searchTerm: string) => {
const filtered = rows.filter((item) =>
Object.values(item)
Expand All @@ -65,7 +62,6 @@ const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({ rows, heade

const selectRowEvent = useCallback((openingId: string, selected: boolean) => {
if (!selected) {
console.log(`Selected row id=${openingId} selected=${JSON.stringify(!selected)}`);
setOpeningId(openingId);
}
}, []);
Expand All @@ -75,8 +71,13 @@ const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({ rows, heade
// Add your logic to handle batch actions here
};

useEffect(() => {
setPageData(filteredRows);
setInitialItemsPerPage(5);
}, [filteredRows]);

return (
<div>
<>
<DataTable rows={getCurrentData()} headers={headers}>
{({
rows,
Expand Down Expand Up @@ -167,15 +168,15 @@ const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({ rows, heade
<TableRow>
<th id='blank'></th>
{headers.map((header, i) => (
<TableHeader key={i} {...getHeaderProps({ header })}>
{header.header}
<TableHeader key={header.key}>
{ header.header }
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, i) => (
<TableRow key={i} {...getRowProps({ row })}>
<TableRow key={row.id}>
<TableSelectRow {
...getSelectionProps({
row,
Expand Down Expand Up @@ -223,32 +224,32 @@ const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({ rows, heade

{/* Check if there are no elements in the table, if not then print the Empty */}
{filteredRows.length <= 0 ? (
<EmptySection
pictogram="Magnify"
title={'There are no openings to show yet'}
description={
'Your recent openings will appear here once you generate one'
}
fill="#0073E6"
/>
) : null}
<EmptySection
pictogram="Magnify"
title={'There are no openings to show yet'}
description={
'Your recent openings will appear here once you generate one'
}
fill="#0073E6"
/>
) : null}

{/* Check if there are no elements in the table, if not then print the Empty */}
{filteredRows.length > 0 ? (
<Pagination
totalItems={filteredRows.length}
backwardText="Previous page"
forwardText="Next page"
pageSize={itemsPerPage}
pageSizes={[5, 20, 50]}
itemsPerPageText="Items per page"
onChange={({ page, pageSize }:{ page: number, pageSize: number}) => {
handlePageChange( page );
handleItemsPerPageChange(page, pageSize);
}}
/>
) : null}
</div>
{/* Check if there are no elements in the table, if not then print the Empty */}
{filteredRows.length > 0 ? (
<Pagination
totalItems={filteredRows.length}
backwardText="Previous page"
forwardText="Next page"
pageSize={itemsPerPage}
pageSizes={[5, 20, 50]}
itemsPerPageText="Items per page"
onChange={({ page, pageSize }:{ page: number, pageSize: number}) => {
handlePageChange( page );
handleItemsPerPageChange(page, pageSize);
}}
/>
) : null}
</>
);
}

Expand Down
89 changes: 42 additions & 47 deletions frontend/src/components/OpeningsTab/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,59 +44,54 @@ const OpeningsTab: React.FC<Props> = ({showSpatial, setShowSpatial}) => {
}, [loadId, openingPolygonNotFound]);

const toggleSpatial = () => {
setShowSpatial((prevShowSpatial :boolean) => {
console.log(`prevShowSpatial=${prevShowSpatial}`);
return !prevShowSpatial
});
setShowSpatial((prevShowSpatial :boolean) => !prevShowSpatial);
}

return (
<>
<div>
<div className="container-fluid">
<div className="row px-0 py-4 p-sm-4">
<SectionTitle title="Recent openings" subtitle="Track the history of openings you have looked at and check spatial information by selecting the openings in the table below" />
<Button
className="h-100 my-auto d-none d-sm-block"
renderIcon={ViewFilled}
type="button"
onClick={() => toggleSpatial()}
>
{showSpatial ? 'Hide Spatial' : 'Show Spatial'}
</Button>
</div>
{showSpatial ? (
<div className="row px-2">
<div className="leaflet-container">
<OpeningsMap
openingId={loadId}
setOpeningPolygonNotFound={setOpeningPolygonNotFound}
/>
</div>
</div>
) : null}
<div className="container-fluid">
<div className="row px-0 py-4 p-sm-4">
<SectionTitle title="Recent openings" subtitle="Track the history of openings you have looked at and check spatial information by selecting the openings in the table below" />
<Button
className="h-100 my-auto d-none d-sm-block"
renderIcon={ViewFilled}
type="button"
onClick={() => toggleSpatial()}
>
{showSpatial ? 'Hide Spatial' : 'Show Spatial'}
</Button>
</div>
{showSpatial ? (
<div className="row px-2">
<div className="leaflet-container">
<OpeningsMap
openingId={loadId}
setOpeningPolygonNotFound={setOpeningPolygonNotFound}
/>
</div>
</div>
) : null}
</div>

<div className="container-fluid p-0 pb-5">
{openingPolygonNotFound? (
<InlineNotification
title="Opening ID not found!"
subtitle="Unable to find selected Opening Polygon!"
kind="error"
lowContrast
className = "inline-notification"
/>
) : null }
{loading ? (
<TableSkeleton headers={headers} />
) : (
<OpeningScreenDataTable
headers={headers}
rows={openingRows}
setOpeningId={setLoadId}
/>
)}
</div>
<div className="container-fluid p-0 pb-5">
{openingPolygonNotFound? (
<InlineNotification
title="Opening ID not found!"
subtitle="Unable to find selected Opening Polygon!"
kind="error"
lowContrast
className = "inline-notification"
/>
) : null }
{loading ? (
<TableSkeleton headers={headers} />
) : (
<OpeningScreenDataTable
headers={headers}
rows={openingRows}
setOpeningId={setLoadId}
/>
)}
</div>
</>
);
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/services/OpeningService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
updateTimestamp: string | null;
}

export async function fetchRecentOpenings() {

Check warning on line 21 in frontend/src/services/OpeningService.ts

View workflow job for this annotation

GitHub Actions / Lint (Frontend) 

Missing JSDoc comment
let authToken = getAuthIdToken();
try {
const response = await axios.get(backendUrl.concat("/api/openings/recent-openings?page=0&perPage=100"), {
Expand Down Expand Up @@ -58,13 +58,13 @@
}

interface IOpeningPerYear {
orgUnitCode: string;
statusCode: string;
orgUnitCode: string | null;
statusCode: string | null;
entryDateStart: string | null;
entryDateEnd: string | null;
}

export async function fetchOpeningsPerYear(props: IOpeningPerYear) {

Check warning on line 67 in frontend/src/services/OpeningService.ts

View workflow job for this annotation

GitHub Actions / Lint (Frontend) 

Missing JSDoc comment
let authToken = getAuthIdToken();
try {
// Construct URL with optional parameters
Expand Down Expand Up @@ -111,7 +111,7 @@
entryDateEnd: string | null;
}

export async function fetchFreeGrowingMilestones(props: IFreeGrowingProps) {

Check warning on line 114 in frontend/src/services/OpeningService.ts

View workflow job for this annotation

GitHub Actions / Lint (Frontend) 

Missing JSDoc comment
let authToken = getAuthIdToken();
let url = backendUrl.concat("/api/dashboard-metrics/free-growing-milestones");

Expand Down Expand Up @@ -151,7 +151,7 @@
}
}

export async function fetchRecentActions() {

Check warning on line 154 in frontend/src/services/OpeningService.ts

View workflow job for this annotation

GitHub Actions / Lint (Frontend) 

Missing JSDoc comment
let authToken = getAuthIdToken();
try {
// Comment out the actual API call for now
Expand Down
Loading