Edit dialog add members (#835)

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

@@ -16,21 +16,18 @@ import { FeatureEditSection } from './FeatureEditSection/FeatureEditSection';
 import { useEditDialogFeature } from '../utils';
 import { useEditContext } from '../EditContext';
 import { getShortId } from '../../../../services/helpers';
+import { fetchSchemaTranslations } from '../../../../services/tagging/translations';
 
 export const EditContent = () => {
-  const { feature } = useEditDialogFeature();
-  const { items } = useEditContext();
-  const [current, setCurrent] = React.useState(getShortId(feature.osmMeta));
+  const { items, addFeature, current, setCurrent } = useEditContext();
   const theme = useTheme();
 
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
-
   return (
     <>
       <DialogContent dividers>
         <form autoComplete="off" onSubmit={(e) => e.preventDefault()}>
           <OsmUserLoggedOut />
-
           <Stack direction={isSmallScreen ? 'column' : 'row'} gap={2}>
             {items.length > 1 && (
               <Tabs

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

@@ -5,6 +5,7 @@ import { TagsEditor } from './TagsEditor/TagsEditor';
 import React from 'react';
 import { OsmId } from '../../../../../services/types';
 import { SingleFeatureEditContextProvider } from './SingleFeatureEditContext';
+import { MembersEditor } from '../MembersEditor';
 
 type Props = {
   shortId: string;
@@ -14,9 +15,9 @@ export const FeatureEditSection = ({ shortId }: Props) => (
   <SingleFeatureEditContextProvider shortId={shortId}>
     <PresetSelect />
     <MajorKeysEditor />
-    <OptionsEditor />
-    {/*<MembersEditor />*/}
+    <MembersEditor />
     {/*<ParentsEditor />*/}
+    <OptionsEditor />
     <TagsEditor />
   </SingleFeatureEditContextProvider>
 );

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import { useFeatureEditData } from './FeatureEditSection/SingleFeatureEditContext';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Divider,
+  List,
+  ListItem,
+  ListItemText,
+  Stack,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { fetchFeature } from '../../../../services/osmApi';
+import { OsmId } from '../../../../services/types';
+import { getApiId, getShortId } from '../../../../services/helpers';
+import { fetchSchemaTranslations } from '../../../../services/tagging/translations';
+import { useEditContext } from '../EditContext';
+
+export const MemberRow = ({ member }) => {
+  const { addFeature, setCurrent } = useEditContext();
+  const { label, shortId } = member;
+
+  const handleClick = async () => {
+    const apiId: OsmId = getApiId(member.shortId);
+    await fetchSchemaTranslations();
+    const feature = await fetchFeature(apiId);
+    addFeature(feature);
+    setCurrent(getShortId(feature.osmMeta));
+  };
+
+  return (
+    <>
+      <ListItem onClick={handleClick}>
+        <Stack
+          alignItems="center"
+          justifyContent="space-between"
+          direction="row"
+          width="100%"
+        >
+          <ListItemText>{label ?? shortId}</ListItemText>
+          <ChevronRightIcon />
+        </Stack>
+      </ListItem>
+      <Divider />
+    </>
+  );
+};
+
+export const MembersEditor = () => {
+  const { members } = useFeatureEditData();
+  const theme = useTheme();
+
+  if (!members || members.length === 0) return null;
+
+  return (
+    <Accordion disableGutters elevation={0} square>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls="panel1-content"
+        id="panel1-header"
+      >
+        <Stack direction="row" spacing={2} alignItems="center">
+          <Typography variant="button">Members ({members.length})</Typography>
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails>
+        <List
+          sx={{
+            '& > .MuiListItem-root:hover': {
+              backgroundColor: theme.palette.background.hover,
+              cursor: 'pointer',
+            },
+          }}
+        >
+          {members.map((member) => (
+            <MemberRow key={member.shortId} member={member} />
+          ))}
+        </List>
+      </AccordionDetails>
+    </Accordion>
+  );
+};

src/components/FeaturePanel/EditDialog/EditContext.tsx

@@ -1,6 +1,8 @@
 import React, { createContext, useContext, useState } from 'react';
 import { Feature, SuccessInfo } from '../../../services/types';
 import { EditDataItem, useEditItems } from './useEditItems';
+import { getShortId } from '../../../services/helpers';
+import { useEditDialogFeature } from './utils';
 
 type EditContextType = {
   successInfo: undefined | SuccessInfo;
@@ -13,6 +15,8 @@ type EditContextType = {
   setComment: (s: string) => void;
   addFeature: (feature: Feature) => void;
   items: Array<EditDataItem>;
+  current: string;
+  setCurrent: (s: string) => void;
 };
 
 const EditContext = createContext<EditContextType>(undefined);
@@ -23,11 +27,13 @@ type Props = {
 };
 
 export const EditContextProvider = ({ originalFeature, children }: Props) => {
+  const { feature } = useEditDialogFeature();
   const [successInfo, setSuccessInfo] = useState<undefined | SuccessInfo>();
   const [isSaving, setIsSaving] = useState(false);
   const [location, setLocation] = useState(''); // technically is "data", but only for note
   const [comment, setComment] = useState('');
   const { items, addFeature } = useEditItems(originalFeature);
+  const [current, setCurrent] = React.useState(getShortId(feature.osmMeta));
 
   const value: EditContextType = {
     successInfo,
@@ -40,6 +46,8 @@ export const EditContextProvider = ({ originalFeature, children }: Props) => {
     setComment,
     addFeature,
     items,
+    current,
+    setCurrent,
   };
 
   return <EditContext.Provider value={value}>{children}</EditContext.Provider>;

src/components/utils/FeatureContext.tsx

@@ -81,6 +81,7 @@ export const FeatureProvider = ({
     preview,
     setPreview,
   };
+
   return (
     <FeatureContext.Provider value={value}>{children}</FeatureContext.Provider>
   );