Skip to content

Commit

Permalink
fix: update
Browse files Browse the repository at this point in the history
  • Loading branch information
@benlister-okta
benlister-okta committed Jul 24, 2024
1 parent db12fc9 commit 3347020
Showing 1 changed file with 123 additions and 103 deletions.
226 changes: 123 additions & 103 deletions packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
/* eslint-disable import/no-extraneous-dependencies */
import { useMemo, useCallback } from "react";
import { DataFilter } from "@okta/odyssey-react-mui/labs";
import { DataTable, DataTableSortingState } from "@okta/odyssey-react-mui";
import { DataTable, DataTableGetDataType } from "@okta/odyssey-react-mui";
import { useColumns, data, OdysseyComponent } from "./roadmapData";
import {
Callout,
Expand All @@ -25,96 +25,95 @@ import {
import { ThemeProvider as StorybookThemeProvider } from "@storybook/theming";
import * as odysseyTokens from "@okta/odyssey-design-tokens";

const processData = ({
initialData,
search,
filters,
sort,
}: {
initialData: OdysseyComponent[];
search?: string;
filters?: DataFilter[];
sort?: DataTableSortingState;
}) => {
let filteredData = [...initialData];

// Implement text-based query filtering
if (search) {
filteredData = filteredData.filter((row) =>
Object.values(row).some((value) =>
value.toString().toLowerCase().includes(search.toLowerCase()),
),
);
}

// Implement column-specific filtering
if (filters) {
filteredData = filteredData.filter((row) => {
return filters.every(({ id, value }) => {
// If filter value is null or undefined, skip this filter
if (value === null || value === undefined) {
return true;
}
// const processData = ({
// initialData,
// search,
// filters,
// sort,
// }: {
// initialData: OdysseyComponent[];
// search?: string;
// filters?: DataFilter[];
// }) => {
// let filteredData = [...initialData];

// General filtering for other columns
return row[id as keyof OdysseyComponent]
?.toString()
.includes(value.toString());
});
});
}
// // Implement text-based query filtering
// if (search) {
// filteredData = filteredData.filter((row) =>
// Object.values(row).some((value) =>
// value.toString().toLowerCase().includes(search.toLowerCase()),
// ),
// );
// }

function parseCustomDate(dateStr: string): Date {
if (dateStr.length <= 0) {
return new Date(2999, 0);
}
// // Implement column-specific filtering
// if (filters) {
// filteredData = filteredData.filter((row) => {
// return filters.every(({ id, value }) => {
// // If filter value is null or undefined, skip this filter
// if (value === null || value === undefined) {
// return true;
// }

const months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
const [monthStr, yearStr] = dateStr.split(" ");

const month = months.indexOf(monthStr);
const year = parseInt(yearStr.replace("'", ""), 10) + 2000; // Adjust for century

return new Date(year, month);
}

// Implement sorting
if (sort && sort.length > 0) {
filteredData.sort((a, b) => {
for (const { id, desc } of sort) {
let aValue: string | Date = a[id as keyof OdysseyComponent];
let bValue: string | Date = b[id as keyof OdysseyComponent];

if (
id === "startDate" ||
id === "labsRelease" ||
id === "fullRelease"
) {
aValue = parseCustomDate(aValue);
bValue = parseCustomDate(bValue);
}
// // General filtering for other columns
// return row[id as keyof OdysseyComponent]
// ?.toString()
// .includes(value.toString());
// });
// });
// }

if (aValue < bValue) return desc ? 1 : -1;
if (aValue > bValue) return desc ? -1 : 1;
}
// function parseCustomDate(dateStr: string): Date {
// if (dateStr.length <= 0) {
// return new Date(2999, 0);
// }

return 0;
});
}
};
// const months = [
// "Jan",
// "Feb",
// "Mar",
// "Apr",
// "May",
// "Jun",
// "Jul",
// "Aug",
// "Sep",
// "Oct",
// "Nov",
// "Dec",
// ];
// const [monthStr, yearStr] = dateStr.split(" ");

// const month = months.indexOf(monthStr);
// const year = parseInt(yearStr.replace("'", ""), 10) + 2000; // Adjust for century

// return new Date(year, month);
// }

// // Implement sorting
// if (sort && sort.length > 0) {
// filteredData.sort((a, b) => {
// for (const { id, desc } of sort) {
// let aValue: string | Date = a[id as keyof OdysseyComponent];
// let bValue: string | Date = b[id as keyof OdysseyComponent];

// if (
// id === "startDate" ||
// id === "labsRelease" ||
// id === "fullRelease"
// ) {
// aValue = parseCustomDate(aValue);
// bValue = parseCustomDate(bValue);
// }

// if (aValue < bValue) return desc ? 1 : -1;
// if (aValue > bValue) return desc ? -1 : 1;
// }

// return 0;
// });
// }
// };

export const InnerRoadmapTable = () => {
const columns = useColumns(); // Use the hook to get columns
Expand Down Expand Up @@ -153,26 +152,47 @@ export const InnerRoadmapTable = () => {
],
[],
);
const filterData = ({
data,
...args
}: {
data: OdysseyComponent[];
} & DataTableGetDataType) => {
let filteredData = data;
const { search, sort } = args;

// Memoize the fetchData function
const fetchData = useCallback(
({
search,
filters,
sort,
}: {
search?: string;
filters?: DataFilter[];
sort?: DataTableSortingState;
}) => {
return processData({
initialData: data,
search,
filters,
sort,
// Implement text-based query filtering
if (search) {
filteredData = filteredData.filter((row) =>
Object.values(row).some((value) =>
value.toString().toLowerCase().includes(search.toLowerCase()),
),
);
}

// Implement sorting
if (sort && sort.length > 0) {
filteredData.sort((a, b) => {
for (const { id, desc } of sort) {
const aValue = a[id as keyof Planet];
const bValue = b[id as keyof Planet];

if (aValue < bValue) return desc ? 1 : -1;
if (aValue > bValue) return desc ? -1 : 1;
}

return 0;
});
}

return filteredData;
};

const fetchData = useCallback(
({ ...props }: DataTableGetDataType) => {
return filterData({ data, ...props });
},
[data], // Add data as a dependency if it can change
[data],

Check warning on line 195 in packages/odyssey-storybook/src/guidelines/Roadmap/RoadmapTable.tsx

View workflow job for this annotation

GitHub Actions / ci 

React Hook useCallback has an unnecessary dependency: 'data'. Either exclude it or remove the dependency array. Outer scope values like 'data' aren't valid dependencies because mutating them doesn't re-render the component
);
// const fetchData = useCallback(
// ({ ...props }: DataTableGetDataType) => {
Expand Down

0 comments on commit 3347020

Please sign in to comment.