EditDialog: refactor - introduce multiple features array (#814)

src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx

@@ -6,18 +6,23 @@ import { OsmUserLogged } from './OsmUserLogged';
 import { ContributionInfoBox } from './ContributionInfoBox';
 import { OsmUserLoggedOut } from './OsmUserLoggedOut';
 import { FeatureEditSection } from './FeatureEditSection/FeatureEditSection';
+import { useEditDialogFeature } from '../utils';
 
-export const EditContent = () => (
-  <>
-    <DialogContent dividers>
-      <form autoComplete="off" onSubmit={(e) => e.preventDefault()}>
-        <OsmUserLoggedOut />
-        <FeatureEditSection />
-        <ContributionInfoBox />
-        <CommentField />
-        <OsmUserLogged />
-      </form>
-    </DialogContent>
-    <EditDialogActions />
-  </>
-);
+export const EditContent = () => {
+  const { feature } = useEditDialogFeature(); //TODO temporary
+
+  return (
+    <>
+      <DialogContent dividers>
+        <form autoComplete="off" onSubmit={(e) => e.preventDefault()}>
+          <OsmUserLoggedOut />
+          <FeatureEditSection featureId={feature.osmMeta} />
+          <ContributionInfoBox />
+          <CommentField />
+          <OsmUserLogged />
+        </form>
+      </DialogContent>
+      <EditDialogActions />
+    </>
+  );
+};

src/components/FeaturePanel/EditDialog/EditContent/EditDialogActions.tsx

@@ -14,9 +14,7 @@ const SaveButton = () => {
   return (
     <Button onClick={handleSave} color="primary" variant="contained">
       {loggedIn
-        ? data.toBeDeleted
-          ? t('editdialog.save_button_delete')
-          : t('editdialog.save_button_edit')
+        ? t('editdialog.save_button_edit')
         : t('editdialog.save_button_note')}
     </Button>
   );

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/FeatureEditSection.tsx

@@ -3,16 +3,20 @@ import { MajorKeysEditor } from './MajorKeysEditor';
 import { OptionsEditor } from './OptionsEditor';
 import { TagsEditor } from './TagsEditor/TagsEditor';
 import React from 'react';
+import { OsmId } from '../../../../../services/types';
+import { SingleFeatureEditContextProvider } from './SingleFeatureEditContext';
 
-export function FeatureEditSection() {
-  return (
-    <>
-      <PresetSelect />
-      <MajorKeysEditor />
-      <OptionsEditor />
-      {/*<MembersEditor />*/}
-      {/*<ParentsEditor />*/}
-      <TagsEditor />
-    </>
-  );
-}
+type Props = {
+  featureId: OsmId;
+};
+
+export const FeatureEditSection = ({ featureId }: Props) => (
+  <SingleFeatureEditContextProvider featureId={featureId}>
+    <PresetSelect />
+    <MajorKeysEditor />
+    <OptionsEditor />
+    {/*<MembersEditor />*/}
+    {/*<ParentsEditor />*/}
+    <TagsEditor />
+  </SingleFeatureEditContextProvider>
+);

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/MajorKeysEditor.tsx

@@ -6,10 +6,10 @@ import {
   getWikimediaCommonsKey,
 } from '../../../Climbing/utils/photo';
 import { useEditDialogContext } from '../../../helpers/EditDialogContext';
-import { useEditContext } from '../../EditContext';
-import { OpeningHoursEditor } from '../OpeningHoursEditor/OpeningHoursEditor';
+import { OpeningHoursEditor } from './OpeningHoursEditor/OpeningHoursEditor';
 import styled from '@emotion/styled';
 import { CharacterCount, getInputTypeForKey } from '../helpers';
+import { useFeatureEditData } from './SingleFeatureEditContext';
 
 export const majorKeys = [
   'name',
@@ -96,7 +96,7 @@ const TextFieldWithCharacterCount = ({
 
 export const MajorKeysEditor = () => {
   const { focusTag } = useEditDialogContext();
-  const { tags, setTag } = useEditContext().data;
+  const { tags, setTag } = useFeatureEditData();
 
   // TODO this code will be replaced when implementing id presets fields
   const nextWikimediaCommonsIndex = getNextWikimediaCommonsIndex(tags);

src/components/FeaturePanel/EditDialog/EditContent/OpeningHoursEditor/OpeningHoursEditor.tsx → src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/OpeningHoursEditor/OpeningHoursEditor.tsx

@@ -1,12 +1,11 @@
-import { useEditContext } from '../../EditContext';
 import AccessTime from '@mui/icons-material/AccessTime';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { getDaysTable, getEmptyValue } from './parser/getDaysTable';
 import { buildString } from './parser/buildString';
-import { t } from '../../../../../services/intl';
+import { t } from '../../../../../../services/intl';
 import { Day, DaysTable } from './parser/types';
-import { publishDbgObject } from '../../../../../utils';
+import { publishDbgObject } from '../../../../../../utils';
 import { canItHandle } from './parser/canItHandle';
 import { OpeningHoursInput } from './OpeningHoursInput';
 import { YoHoursLink } from './YoHoursLink';
@@ -15,6 +14,7 @@ import { TimeSlot } from './TimeSlot';
 import { CopyFromAboveButton } from './CopyFromAboveButton';
 import { useGetBlurValidation } from './useGetBlurValidation';
 import { SetDaysAndTagFn, SetDaysFn } from './types';
+import { useFeatureEditData } from '../SingleFeatureEditContext';
 
 const Wrapper = styled.div`
   display: flex;
@@ -42,7 +42,7 @@ const Table = styled.table`
 
 const useUpdateState = (days: Day[], setDays: SetDaysFn) => {
   const valueSetHere = useRef<string | undefined>(undefined);
-  const { tags, setTag } = useEditContext().data;
+  const { tags, setTag } = useFeatureEditData();
 
   const tag = tags.opening_hours ?? '';
   useEffect(() => {
@@ -112,7 +112,7 @@ const EditorTable = () => {
 };
 
 export const OpeningHoursEditor = () => {
-  const { tags } = useEditContext().data;
+  const { tags } = useFeatureEditData();
 
   if (tags.opening_hours && !canItHandle(tags.opening_hours)) {
     return <OpeningHoursInput cantEdit />;

src/components/FeaturePanel/EditDialog/EditContent/OpeningHoursEditor/OpeningHoursInput.tsx → src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/OpeningHoursEditor/OpeningHoursInput.tsx

@@ -1,13 +1,12 @@
-import { useEditDialogContext } from '../../../helpers/EditDialogContext';
-import { useEditContext } from '../../EditContext';
+import { useEditDialogContext } from '../../../../helpers/EditDialogContext';
 import { TextField } from '@mui/material';
-import { t, Translation } from '../../../../../services/intl';
-import { encodeUrl } from '../../../../../helpers/utils';
+import { t, Translation } from '../../../../../../services/intl';
+import { encodeUrl } from '../../../../../../helpers/utils';
 import React from 'react';
-import { canItHandle } from './parser/canItHandle';
+import { useFeatureEditData } from '../SingleFeatureEditContext';
 
 const CantEditText = () => {
-  const { tags } = useEditContext().data;
+  const { tags } = useFeatureEditData();
   const url = encodeUrl`https://projets.pavie.info/yohours/?oh=${tags['opening_hours']}`;
 
   return (
@@ -22,7 +21,7 @@ const CantEditText = () => {
 
 export const OpeningHoursInput = ({ cantEdit }: { cantEdit?: boolean }) => {
   const { focusTag } = useEditDialogContext();
-  const { tags, setTag } = useEditContext().data;
+  const { tags, setTag } = useFeatureEditData();
 
   return (
     <TextField

src/components/FeaturePanel/EditDialog/EditContent/OpeningHoursEditor/YoHoursLink.tsx → src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/OpeningHoursEditor/YoHoursLink.tsx

@@ -1,11 +1,11 @@
-import { useEditContext } from '../../EditContext';
 import { Typography } from '@mui/material';
-import { encodeUrl } from '../../../../../helpers/utils';
+import { encodeUrl } from '../../../../../../helpers/utils';
 import React from 'react';
-import { t, Translation } from '../../../../../services/intl';
+import { t, Translation } from '../../../../../../services/intl';
+import { useFeatureEditData } from '../SingleFeatureEditContext';
 
 export const YoHoursLink = () => {
-  const { tags } = useEditContext().data;
+  const { tags } = useFeatureEditData();
   const url = encodeUrl`https://projets.pavie.info/yohours/?oh=${tags['opening_hours']}`;
 
   return (

src/components/FeaturePanel/EditDialog/EditContent/OpeningHoursEditor/parser/__tests__/parser.test.ts → src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/OpeningHoursEditor/parser/__tests__/parser.test.ts

@@ -2,7 +2,7 @@ import { getDaysTable, parseDaysPart } from '../getDaysTable';
 import { buildDaysPart, buildString } from '../buildString';
 import { canItHandle } from '../canItHandle';
 
-jest.mock('../../../../../../../services/intl', () => ({
+jest.mock('../../../../../../../../services/intl', () => ({
   intl: { lang: 'en' },
   t: () => 'Sunday|Monday|Tuesday|Wednesday|Thursday|Friday|Saturday',
 }));

src/components/FeaturePanel/EditDialog/EditContent/OpeningHoursEditor/parser/canItHandle.ts → src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/OpeningHoursEditor/parser/canItHandle.ts

@@ -1,6 +1,6 @@
 import { buildDaysPart, buildString } from './buildString';
 import { getDaysTable, parseDaysPart } from './getDaysTable';
-import { publishDbgObject } from '../../../../../../utils';
+import { publishDbgObject } from '../../../../../../../utils';
 
 const splitByFirstSpace = (str: string) => {
   const index = str.indexOf(' ');

src/components/FeaturePanel/EditDialog/EditContent/OpeningHoursEditor/parser/getDaysTable.ts → src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/OpeningHoursEditor/parser/getDaysTable.ts

@@ -1,4 +1,4 @@
-import { t } from '../../../../../../services/intl';
+import { t } from '../../../../../../../services/intl';
 import { Day, DaysTable, Slot } from './types';
 
 const OSM_DAYS = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'];

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/OptionsEditor.tsx

@@ -7,11 +7,11 @@ import { t, Translation } from '../../../../../services/intl';
 import { useOsmAuthContext } from '../../../../utils/OsmAuthContext';
 import { useToggleState } from '../../../../helpers';
 import { getIdEditorLink } from '../../../helpers/externalLinks';
+import { useFeatureEditData } from './SingleFeatureEditContext';
 
+// TODO don't delete objects, but only remove their Preset tags https://github.com/zbycz/osmapp/issues/222
 export const PlaceCancelledToggle = () => {
-  const {
-    data: { toBeDeleted, toggleToBeDeleted },
-  } = useEditContext();
+  const { toBeDeleted, toggleToBeDeleted } = useFeatureEditData();
   return (
     <>
       <FormControlLabel

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/PresetSearchBox.tsx

@@ -14,13 +14,13 @@ import { TranslatedPreset } from './PresetSelect';
 import { Setter } from '../../../../../types';
 import { t } from '../../../../../services/intl';
 import { SelectChangeEvent } from '@mui/material/Select/SelectInput';
-import { useEditContext } from '../../EditContext';
 import { useBoolState } from '../../../../helpers';
 import { useFeatureContext } from '../../../../utils/FeatureContext';
 import { PROJECT_ID } from '../../../../../services/project';
 import { useOsmAuthContext } from '../../../../utils/OsmAuthContext';
 import { OsmType } from '../../../../../services/types';
 import { geometryMatchesOsmType } from '../../../../../services/tagging/presets';
+import { useFeatureEditData } from './SingleFeatureEditContext';
 
 // https://stackoverflow.com/a/70918883/671880
 
@@ -129,7 +129,7 @@ const useGetOnChange = (
   value: string,
   setValue: Setter<string>,
 ) => {
-  const { setTagsEntries } = useEditContext().data;
+  const { setTagsEntries } = useFeatureEditData();
 
   return (e: SelectChangeEvent<string>) => {
     const oldPreset = options.find((o) => o.presetKey === value);

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/PresetSelect.tsx

@@ -10,12 +10,12 @@ import {
 } from '../../../../../services/tagging/translations';
 import { useFeatureContext } from '../../../../utils/FeatureContext';
 import { PresetSearchBox } from './PresetSearchBox';
-import { useEditContext } from '../../EditContext';
 import { Preset } from '../../../../../services/tagging/types/Presets';
 import { getPresetForFeature } from '../../../../../services/tagging/presets';
 import { Feature, FeatureTags } from '../../../../../services/types';
 import { t } from '../../../../../services/intl';
 import { Setter } from '../../../../../types';
+import { useFeatureEditData } from './SingleFeatureEditContext';
 
 export type TranslatedPreset = Preset & {
   name: string;
@@ -90,7 +90,7 @@ const useOptions = () => {
 };
 
 export const PresetSelect = () => {
-  const { tags } = useEditContext().data;
+  const { tags } = useFeatureEditData();
   const [preset, setPreset] = useState('');
   const { feature } = useFeatureContext();
   const options = useOptions();

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/SingleFeatureEditContext.tsx

@@ -0,0 +1,34 @@
+import React, { createContext, useContext, useState } from 'react';
+import { OsmId } from '../../../../../services/types';
+import { FeatureEditData, useEditContext } from '../../EditContext';
+
+type SingleFeatureEditContextType = {
+  featureId: OsmId;
+};
+
+// TODO rename if it contains only the featureId
+const SingleFeatureEditContext =
+  createContext<SingleFeatureEditContextType>(undefined);
+
+export const SingleFeatureEditContextProvider = ({ children, featureId }) => {
+  const value: SingleFeatureEditContextType = {
+    featureId,
+  };
+
+  return (
+    <SingleFeatureEditContext.Provider value={value}>
+      {children}
+    </SingleFeatureEditContext.Provider>
+  );
+};
+
+export const useFeatureEditData = (): FeatureEditData => {
+  const { data } = useEditContext();
+  const { featureId } = useContext(SingleFeatureEditContext);
+
+  return data.find(
+    (item) =>
+      item.featureId.type === featureId.type &&
+      item.featureId.id === featureId.id,
+  );
+};

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/KeyInput.tsx

@@ -1,8 +1,8 @@
 import { useEditDialogContext } from '../../../../helpers/EditDialogContext';
-import { useEditContext } from '../../../EditContext';
 import React, { useEffect, useState } from 'react';
 import { InputAdornment, TextField } from '@mui/material';
 import WarningIcon from '@mui/icons-material/Warning';
+import { useFeatureEditData } from '../SingleFeatureEditContext';
 
 const useUpdatedState = (currentKey: string) => {
   const [tmpKey, setTmpKey] = useState(currentKey);
@@ -14,7 +14,7 @@ const useUpdatedState = (currentKey: string) => {
 };
 
 const useTmpState = (index: number) => {
-  const { tagsEntries, setTagsEntries } = useEditContext().data;
+  const { tagsEntries, setTagsEntries } = useFeatureEditData();
   const currentKey = tagsEntries[index][0];
   const { tmpKey, setTmpKey } = useUpdatedState(currentKey);
 
@@ -33,7 +33,7 @@ const useTmpState = (index: number) => {
 };
 
 const useIsError = (index: number) => {
-  const { tagsEntries } = useEditContext().data;
+  const { tagsEntries } = useFeatureEditData();
   const [currentKey, currentValue] = tagsEntries[index];
 
   const isDuplicateKey = tagsEntries.some(

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/TagsEditor.tsx

@@ -6,10 +6,11 @@ import AddIcon from '@mui/icons-material/Add';
 import { majorKeys } from '../MajorKeysEditor';
 import { isString } from '../../../../../helpers';
 import { t, Translation } from '../../../../../../services/intl';
-import { TagsEntries, useEditContext } from '../../../EditContext';
+import { TagsEntries } from '../../../EditContext';
 import { useEditDialogContext } from '../../../../helpers/EditDialogContext';
 import { KeyInput } from './KeyInput';
 import { ValueInput } from './ValueInput';
+import { useFeatureEditData } from '../SingleFeatureEditContext';
 
 const Table = styled.table`
   width: calc(100% - 8px);
@@ -74,7 +75,7 @@ const lastKeyAndValueSet = (tagsEntries: TagsEntries) => {
 };
 
 const AddButton = () => {
-  const { tagsEntries, setTagsEntries } = useEditContext().data;
+  const { tagsEntries, setTagsEntries } = useFeatureEditData();
   const active = tagsEntries.length === 0 || lastKeyAndValueSet(tagsEntries);
 
   return (
@@ -95,7 +96,7 @@ const AddButton = () => {
 };
 
 const TagsEditorInner = () => {
-  const { tagsEntries } = useEditContext().data;
+  const { tagsEntries } = useFeatureEditData();
   return (
     <>
       <TagsEditorHeading />

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/ValueInput.tsx

@@ -1,9 +1,9 @@
 import React, { ChangeEvent, FocusEvent, useRef, useState } from 'react';
 import { useEditDialogContext } from '../../../../helpers/EditDialogContext';
-import { useEditContext } from '../../../EditContext';
 import { IconButton, Stack, TextField } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { getInputTypeForKey } from '../../helpers';
+import { useFeatureEditData } from '../SingleFeatureEditContext';
 
 const useHidableDeleteButton = () => {
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -30,7 +30,7 @@ type DeleteButtonProps = {
   index: number;
 };
 const DeleteButton = ({ deleteButton, index }: DeleteButtonProps) => {
-  const { setTagsEntries } = useEditContext().data;
+  const { setTagsEntries } = useFeatureEditData();
   const onClick = () => {
     setTagsEntries((state) => state.toSpliced(index, 1));
   };
@@ -53,7 +53,7 @@ const DeleteButton = ({ deleteButton, index }: DeleteButtonProps) => {
 type Props = { index: number };
 export const ValueInput = ({ index }: Props) => {
   const { focusTag } = useEditDialogContext();
-  const { tagsEntries, setTagsEntries } = useEditContext().data;
+  const { tagsEntries, setTagsEntries } = useFeatureEditData();
   const [currentKey, currentValue] = tagsEntries[index];
 
   const deleteButton = useHidableDeleteButton();