Skip to content

Commit

Permalink
refactor(ui): refactor duplicate code and fix style
Browse files Browse the repository at this point in the history
  • Loading branch information
Anis SMAIL committed Dec 5, 2024
1 parent eb1a170 commit e24f1da
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 63 deletions.
13 changes: 6 additions & 7 deletions webapp/src/components/App/Studies/StudiesList/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@ import {
FormControl,
InputLabel,
IconButton,
Checkbox,
FormControlLabel,
} from "@mui/material";
import { useTranslation } from "react-i18next";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
Expand Down Expand Up @@ -67,6 +65,7 @@ import RefreshButton from "../RefreshButton";
import { scanFolder } from "../../../../services/api/study";
import useEnqueueErrorSnackbar from "../../../../hooks/useEnqueueErrorSnackbar";
import ConfirmationDialog from "../../../common/dialogs/ConfirmationDialog";
import CheckBoxFE from "@/components/common/fieldEditors/CheckBoxFE";

const CARD_TARGET_WIDTH = 500;
const CARD_HEIGHT = 250;
Expand Down Expand Up @@ -263,13 +262,13 @@ function StudiesList(props: StudiesListProps) {
</Typography>

{strictFolderFilter ? (
<Tooltip title={t("studies.filters.strictfolder") as string}>
<Tooltip title={t("studies.filters.strictfolder")}>
<IconButton onClick={toggleStrictFolder}>
<FolderIcon color="secondary" />
</IconButton>
</Tooltip>
) : (
<Tooltip title={t("studies.filters.showAllDescendants") as string}>
<Tooltip title={t("studies.filters.showAllDescendants")}>
<IconButton onClick={toggleStrictFolder}>
<AccountTreeIcon color="secondary" />
</IconButton>
Expand All @@ -295,11 +294,11 @@ function StudiesList(props: StudiesListProps) {
open
>
{`${t("studies.scanFolder")} ${folder}?`}
<FormControlLabel
control={<Checkbox checked={isRecursiveScan} />}
<CheckBoxFE
label={t("studies.requestDeepScan")}
value={isRecursiveScan}
onChange={handleRecursiveScan}
/>{" "}
/>
</ConfirmationDialog>
)}
</Box>
Expand Down
91 changes: 35 additions & 56 deletions webapp/src/components/App/Studies/StudyTree/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import useEnqueueErrorSnackbar from "@/hooks/useEnqueueErrorSnackbar";
import useUpdateEffectOnce from "@/hooks/useUpdateEffectOnce";
import { fetchAndInsertSubfolders, fetchAndInsertWorkspaces } from "./utils";
import { useTranslation } from "react-i18next";
import { AxiosError } from "axios";
import { toError } from "@/utils/fnUtils";

function StudyTree() {
const initialStudiesTree = useAppSelector(getStudiesTree);
Expand All @@ -36,81 +36,60 @@ function StudyTree() {
const dispatch = useAppDispatch();
const [t] = useTranslation();

// Initialize folders once we have the tree
// we use useUpdateEffectOnce because at first render initialStudiesTree isn't initialized
useUpdateEffectOnce(() => {
const initializeFolders = async () => {
try {
const treeWithWorkspaces =
await fetchAndInsertWorkspaces(initialStudiesTree);
const childrenPaths = treeWithWorkspaces.children.map(
(child) => `root${child.path}`,
);
const [updatedTree, failedPaths] = await fetchAndInsertSubfolders(
childrenPaths,
treeWithWorkspaces,
);
setStudiesTree(updatedTree);
failedPaths.forEach((path) => {
enqueueErrorSnackbar(
t("studies.tree.error.failToFetchFolder", {
path,
interpolation: { escapeValue: false },
}),
t("studies.tree.error.detailsInConsole"),
);
});
} catch (error) {
setStudiesTree(initialStudiesTree);
enqueueErrorSnackbar(
t("studies.tree.error.failToFetchWorkspace"),
error as AxiosError,
);
}
};

initializeFolders();
}, [initialStudiesTree]);

////////////////////////////////////////////////////////////////
// Event Handlers
////////////////////////////////////////////////////////////////
const updateTree = async (itemId: string, studyTreeNode: StudyTreeNode) => {
let treeAfterWorkspacesUpdate = studiesTree;
let chidrenPaths = studyTreeNode.children.map(
(child) => `root${child.path}`,
);

const handleTreeItemClick = async (
itemId: string,
studyTreeNode: StudyTreeNode,
) => {
dispatch(updateStudyFilters({ folder: itemId }));
if (itemId === "root") {
try {
const nextTree = await fetchAndInsertWorkspaces(studiesTree);
setStudiesTree(nextTree);
treeAfterWorkspacesUpdate = await fetchAndInsertWorkspaces(studiesTree);
chidrenPaths = treeAfterWorkspacesUpdate.children.map(
(child) => `root${child.path}`,
);
} catch (error) {
enqueueErrorSnackbar(
"studies.tree.error.failToFetchWorkspace",
error as AxiosError,
toError(error),
);
}
}
const chidrenPaths = studyTreeNode.children.map(
(child) => `root${child.path}`,
);
// children paths and current element path
const [nextTree, failedPath] = await fetchAndInsertSubfolders(
let [treeAfterChildrenUpdate, failedPath] = await fetchAndInsertSubfolders(
chidrenPaths,
studiesTree,
treeAfterWorkspacesUpdate,
);
setStudiesTree(nextTree);
for (const path of failedPath) {
if (failedPath.length > 0) {
enqueueErrorSnackbar(
t("studies.tree.error.failToFetchFolder", {
path,
path: failedPath.join(" "),
interpolation: { escapeValue: false },
}),
t("studies.tree.error.detailsInConsole"),
);
}
setStudiesTree(treeAfterChildrenUpdate);
};

// Initialize folders once we have the tree
// we use useUpdateEffectOnce because at first render initialStudiesTree isn't initialized
useUpdateEffectOnce(() => {
updateTree("root", initialStudiesTree);
}, [initialStudiesTree]);

////////////////////////////////////////////////////////////////
// Event Handlers
////////////////////////////////////////////////////////////////

const handleTreeItemClick = async (
itemId: string,
studyTreeNode: StudyTreeNode,
) => {
dispatch(updateStudyFilters({ folder: itemId }));
updateTree(itemId, studyTreeNode);
};

////////////////////////////////////////////////////////////////
// JSX
////////////////////////////////////////////////////////////////
Expand Down

0 comments on commit e24f1da

Please sign in to comment.