Remove isEditable props drilling

swisstopo · Jan 25, 2025 · b7f3742 · b7f3742
1 parent 080de86
commit b7f3742
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 15 deletions.
diff --git a/src/client/src/components/dataCard/dataCards.jsx b/src/client/src/components/dataCard/dataCards.jsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { CircularProgress, Typography } from "@mui/material";
+import { DetailContext } from "../../pages/detail/detailContext.tsx";
 import { AddButton } from "../buttons/buttons.tsx";
 import { FullPage, FullPageCentered } from "../styledComponents.ts";
 import { DataCard, DataCardButtonContainer, DataCardContainer, DataCardItem } from "./dataCard";
@@ -36,7 +37,7 @@ export const DataCards = props => {
   const { displayedCards, selectedCard, addCard, selectCard, shouldReload, setLoadedCards } =
     useContext(DataCardContext);
   const { switchToCard } = useContext(DataCardSwitchContext);
-  const { editingEnabled } = useContext(DataCardContext);
+  const { editingEnabled } = useContext(DetailContext);
 
   const loadData = () => {
     setIsLoadingData(true);

diff --git a/src/client/src/components/dataCard/dataDisplayCard.jsx b/src/client/src/components/dataCard/dataDisplayCard.jsx
@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { Trash2 } from "lucide-react";
-import { DetailContext } from "../../pages/detail/detailContext.js";
+import { DetailContext } from "../../pages/detail/detailContext.tsx";
 import { DeleteButton, EditButton } from "../buttons/buttons.tsx";
 import { FormContainer } from "../form/form";
 import { PromptContext } from "../prompt/promptContext.tsx";

diff --git a/src/client/src/pages/detail/form/completion/backfill.jsx b/src/client/src/pages/detail/form/completion/backfill.jsx
@@ -4,10 +4,9 @@ import { sortByDepth } from "../sorter.jsx";
 import BackfillDisplay from "./backfillDisplay.jsx";
 import BackfillInput from "./backfillInput.jsx";
 
-const Backfill = ({ isEditable, completionId }) => {
+const Backfill = ({ completionId }) => {
   return (
     <DataCards
-      isEditable={isEditable}
       parentId={completionId}
       getData={getBackfills}
       cyLabel="backfill"

diff --git a/src/client/src/pages/detail/form/completion/casing.jsx b/src/client/src/pages/detail/form/completion/casing.jsx
@@ -5,10 +5,9 @@ import CasingDisplay from "./casingDisplay.jsx";
 import CasingInput from "./casingInput.jsx";
 import { extractCasingDepth } from "./casingUtils.jsx";
 
-const Casing = ({ isEditable, completionId }) => {
+const Casing = ({ completionId }) => {
   return (
     <DataCards
-      isEditable={isEditable}
       parentId={completionId}
       getData={getCasings}
       cyLabel="casing"

diff --git a/src/client/src/pages/detail/form/completion/casingDisplay.jsx b/src/client/src/pages/detail/form/completion/casingDisplay.jsx
@@ -6,7 +6,7 @@ import { FormContainer, FormDisplay, FormValueType } from "../../../../component
 import { extractCasingDepth } from "./casingUtils";
 
 const CasingDisplay = props => {
-  const { item, isEditable } = props;
+  const { item } = props;
   const { t, i18n } = useTranslation();
   const domains = useDomains();
 

diff --git a/src/client/src/pages/detail/form/completion/completionContent.jsx b/src/client/src/pages/detail/form/completion/completionContent.jsx
@@ -13,7 +13,7 @@ const CompletionContentTabBox = props => {
 };
 export const MemoizedCompletionContentTabBox = React.memo(CompletionContentTabBox);
 
-const CompletionContent = ({ completion, isEditable }) => {
+const CompletionContent = ({ completion, editingEnabled }) => {
   const { resetCanSwitch, triggerCanSwitch, canSwitch } = useContext(DataCardExternalContext);
   const history = useHistory();
   const location = useLocation();
@@ -66,11 +66,11 @@ const CompletionContent = ({ completion, isEditable }) => {
 
   const renderTabContent = useCallback(() => {
     return (
-      (activeIndex === 0 && <Casing completionId={completion.id} isEditable={isEditable} />) ||
-      (activeIndex === 1 && <Instrumentation completionId={completion.id} isEditable={isEditable} />) ||
-      (activeIndex === 2 && <Backfill completionId={completion.id} isEditable={isEditable} />)
+      (activeIndex === 0 && <Casing completionId={completion.id} editingEnabled={editingEnabled} />) ||
+      (activeIndex === 1 && <Instrumentation completionId={completion.id} editingEnabled={editingEnabled} />) ||
+      (activeIndex === 2 && <Backfill completionId={completion.id} editingEnabled={editingEnabled} />)
     );
-  }, [activeIndex, completion.id, isEditable]);
+  }, [activeIndex, completion.id, editingEnabled]);
 
   return (
     <Stack direction="column" flex="1 0 0">

diff --git a/src/client/src/pages/detail/form/completion/instrumentation.jsx b/src/client/src/pages/detail/form/completion/instrumentation.jsx
@@ -4,10 +4,9 @@ import { sortByDepth } from "../sorter.jsx";
 import InstrumentationDisplay from "./instrumentationDisplay.jsx";
 import InstrumentationInput from "./instrumentationInput.jsx";
 
-const Instrumentation = ({ isEditable, completionId }) => {
+const Instrumentation = ({ completionId }) => {
   return (
     <DataCards
-      isEditable={isEditable}
       parentId={completionId}
       getData={getInstrumentation}
       cyLabel="instrumentation"

diff --git a/src/client/src/pages/detail/form/hydrogeology/Observation.ts b/src/client/src/pages/detail/form/hydrogeology/Observation.ts
@@ -42,7 +42,6 @@ export interface GroundwaterLevelMeasurementInputProps {
 
 export interface GroundwaterLevelMeasurementDisplayProps {
   item: GroundwaterLevelMeasurement;
-  isEditable: boolean;
 }
 
 export interface GwlmFormData {