Skip to content

Commit

Permalink
fix library display
Browse files Browse the repository at this point in the history
  • Loading branch information
@fzhao99
fzhao99 committed Jan 9, 2025
1 parent 4beb9f2 commit 2c1b0e5
Showing 1 changed file with 101 additions and 69 deletions.
170 changes: 101 additions & 69 deletions query-connector/src/app/queryBuilding/querySelection/QueryLibrary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, {
useRef,
Dispatch,
SetStateAction,
useEffect,
} from "react";
import { Button, Icon } from "@trussworks/react-uswds";
import Table from "@/app/query/designSystem/table/Table";
Expand All @@ -24,6 +25,8 @@ import {
import LoadingView from "@/app/query/components/LoadingView";
import { DataContext } from "@/app/DataProvider";
import classNames from "classnames";
import { getConditionsData } from "@/app/database-service";
import { ConditionIdToNameMap } from "../utils";

interface UserQueriesDisplayProps {
queries: CustomUserQuery[];
Expand All @@ -48,9 +51,12 @@ export const MyQueriesDisplay: React.FC<UserQueriesDisplayProps> = ({
setSelectedQuery,
setBuildStep,
}) => {
const context = useContext(DataContext);
const queriesContext = useContext(DataContext);
const [queries, setQueries] = useState<CustomUserQuery[]>(initialQueries);
const [loading, setLoading] = useState(false);
const [conditionIdToDetailsMap, setConditionIdToDetailsMap] =
useState<ConditionIdToNameMap>();

const modalRef = useRef<ModalRef>(null);
const handleEdit = (queryName: string, queryId: string) => {
setSelectedQuery({
Expand All @@ -60,17 +66,35 @@ export const MyQueriesDisplay: React.FC<UserQueriesDisplayProps> = ({
setBuildStep("condition");
};

useEffect(() => {
let isSubscribed = true;

async function fetchConditionsAndUpdateState() {
const { conditionIdToNameMap } = await getConditionsData();

if (isSubscribed) {
setConditionIdToDetailsMap(conditionIdToNameMap);
}
}

fetchConditionsAndUpdateState().catch(console.error);

return () => {
isSubscribed = false;
};
}, []);

return (
<div>
{<LoadingView loading={loading} />}
{context &&
{queriesContext &&
renderModal(
modalRef,
selectedQuery,
handleDelete,
queries,
setQueries,
context,
queriesContext,
)}
<div className="display-flex flex-justify-between flex-align-center width-full margin-bottom-4">
<h1 className="flex-align-center">Query Library</h1>
Expand Down Expand Up @@ -98,73 +122,81 @@ export const MyQueriesDisplay: React.FC<UserQueriesDisplayProps> = ({
</tr>
</thead>
<tbody>
{queries.map((query, index) => (
<tr
key={index}
className={classNames(styles.myQueriesRow, "tableRowWithHover")}
>
<td title={query.query_name}>{query.query_name}</td>
<td title={query.conditions_list?.join(",")}>
{query.conditions_list?.join(", ")}
</td>
<td>
<div className="table-cell-buttons">
<Button
type="button"
className="usa-button--unstyled text-bold text-no-underline"
onClick={() =>
handleEdit(query.query_name, query.query_id)
}
>
<span className="icon-text padding-right-4 display-flex flex-align-center">
<Icon.Edit
className="height-3 width-3"
aria-label="Pencil icon indicating edit ability"
/>
<span id={query.query_id} className="padding-left-05">
Edit
{conditionIdToDetailsMap &&
queries.map((query, index) => (
<tr
key={index}
className={classNames(
styles.myQueriesRow,
"tableRowWithHover",
)}
>
<td title={query.query_name}>{query.query_name}</td>
<td title={query.conditions_list?.join(",")}>
{query.conditions_list
?.map((id) => {
return conditionIdToDetailsMap[id];
})
.join(", ")}
</td>
<td>
<div className="table-cell-buttons">
<Button
type="button"
className="usa-button--unstyled text-bold text-no-underline"
onClick={() =>
handleEdit(query.query_name, query.query_id)
}
>
<span className="icon-text padding-right-4 display-flex flex-align-center">
<Icon.Edit
className="height-3 width-3"
aria-label="Pencil icon indicating edit ability"
/>
<span id={query.query_id} className="padding-left-05">
Edit
</span>
</span>
</Button>
<Button
type="button"
className="usa-button--unstyled text-bold text-no-underline"
onClick={() =>
confirmDelete(
query.query_name,
query.query_id,
setSelectedQuery,
modalRef,
)
}
>
<span className="icon-text padding-right-4 display-flex flex-align-center">
<Icon.Delete
className="height-3 width-3"
aria-label="trashcan icon indicating deletion"
/>
<span className="padding-left-05">Delete</span>
</span>
</Button>
<Button
type="button"
className="usa-button--unstyled text-bold text-no-underline"
onClick={() =>
handleCopy(query.query_name, query.query_id)
}
>
<span className="icon-text padding-right-1 display-flex flex-align-center">
<Icon.ContentCopy
className="height-3 width-3"
aria-label="Stacked paper icon indidcating copy"
/>
<span className="padding-left-05">Copy ID</span>
</span>
</span>
</Button>
<Button
type="button"
className="usa-button--unstyled text-bold text-no-underline"
onClick={() =>
confirmDelete(
query.query_name,
query.query_id,
setSelectedQuery,
modalRef,
)
}
>
<span className="icon-text padding-right-4 display-flex flex-align-center">
<Icon.Delete
className="height-3 width-3"
aria-label="trashcan icon indicating deletion"
/>
<span className="padding-left-05">Delete</span>
</span>
</Button>
<Button
type="button"
className="usa-button--unstyled text-bold text-no-underline"
onClick={() =>
handleCopy(query.query_name, query.query_id)
}
>
<span className="icon-text padding-right-1 display-flex flex-align-center">
<Icon.ContentCopy
className="height-3 width-3"
aria-label="Stacked paper icon indidcating copy"
/>
<span className="padding-left-05">Copy ID</span>
</span>
</Button>
</div>
</td>
</tr>
))}
</Button>
</div>
</td>
</tr>
))}
</tbody>
</Table>
</div>
Expand Down

0 comments on commit 2c1b0e5

Please sign in to comment.