refactor to one Table

zbycz · Oct 28, 2023 · 1b62827 · 1b62827
1 parent 2f201bb
commit 1b62827
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 156 deletions.
diff --git a/src/components/FeaturePanel/Properties/IdSchemeFields.tsx b/src/components/FeaturePanel/Properties/IdSchemeFields.tsx
@@ -80,7 +80,9 @@ const addUnits = (label, value: string | ReactNode) => {
 };
 
 const getTooltip = (field: Field, key: string) =>
-  `field: ${field.fieldKey}${key === field.fieldKey ? '' : `, key: ${key}`}`;
+  `field: ${field.fieldKey}${key === field.fieldKey ? '' : `, key: ${key}`} (${
+    field.type
+  })`;
 
 export const IdSchemeFields = () => {
   const { openWithTag } = useEditDialogContext();
@@ -141,57 +143,48 @@ export const IdSchemeFields = () => {
             ),
           )}
         </tbody>
-      </Table>
 
-      {!!(schema.keysTodo.length + schema.tagsWithFields.length) && (
-        <>
-          <Table>
-            <tbody>
-              <tr>
-                <td colSpan={2} style={{ textAlign: 'right' }}>
-                  <ShowMoreButton
-                    isShown={otherTagsShown}
-                    onClick={toggleOtherTagsShown}
-                  />
-                </td>
-              </tr>
-              {otherTagsShown &&
-                schema.tagsWithFields.map(
-                  ({
-                    key,
-                    value,
-                    label,
-                    field,
-                    fieldTranslation,
-                    tagsForField,
-                  }) => (
-                    <tr key={key}>
-                      <th title={getTooltip(field, key)}>
-                        {removeUnits(label)}
-                      </th>
-                      <td>
-                        <EditIconButton
-                          onClick={() =>
-                            openWithTag(tagsForField?.[0]?.key ?? key)
-                          }
-                        />
-                        {render(
-                          field,
-                          feature,
-                          key,
-                          addUnits(label, value),
-                          tagsForField,
-                          fieldTranslation,
-                        )}
-                      </td>
-                    </tr>
-                  ),
-                )}
-            </tbody>
-          </Table>
-
-          {otherTagsShown && (
-            <>
+        {!!(schema.keysTodo.length + schema.tagsWithFields.length) && (
+          <tbody>
+            <tr>
+              <td colSpan={2} style={{ textAlign: 'right' }}>
+                <ShowMoreButton
+                  isShown={otherTagsShown}
+                  onClick={toggleOtherTagsShown}
+                />
+              </td>
+            </tr>
+            {otherTagsShown &&
+              schema.tagsWithFields.map(
+                ({
+                  key,
+                  value,
+                  label,
+                  field,
+                  fieldTranslation,
+                  tagsForField,
+                }) => (
+                  <tr key={key}>
+                    <th title={getTooltip(field, key)}>{removeUnits(label)}</th>
+                    <td>
+                      <EditIconButton
+                        onClick={() =>
+                          openWithTag(tagsForField?.[0]?.key ?? key)
+                        }
+                      />
+                      {render(
+                        field,
+                        feature,
+                        key,
+                        addUnits(label, value),
+                        tagsForField,
+                        fieldTranslation,
+                      )}
+                    </td>
+                  </tr>
+                ),
+              )}
+            {otherTagsShown && (
               <TagsTableInner
                 tags={schema.keysTodo.reduce(
                   (acc, key) => ({ ...acc, [key]: feature.tags[key] }),
@@ -200,10 +193,10 @@ export const IdSchemeFields = () => {
                 center={feature.center}
                 except={[]}
               />
-            </>
-          )}
-        </>
-      )}
+            )}
+          </tbody>
+        )}
+      </Table>
     </>
   );
 };
diff --git a/src/components/FeaturePanel/Properties/Properties.tsx b/src/components/FeaturePanel/Properties/Properties.tsx
@@ -5,6 +5,8 @@ import { t } from '../../../services/intl';
 import { TagsTableInner } from './TagsTableInner';
 import { useFeatureContext } from '../../utils/FeatureContext';
 import { Subheading } from '../helpers/Subheading';
+import { Wrapper } from './Wrapper';
+import { Table } from './Table';
 
 export const Properties = ({ showTags }) => {
   const { feature } = useFeatureContext();
@@ -24,11 +26,17 @@ export const Properties = ({ showTags }) => {
       {showTags && (
         <>
           <Subheading>{t('featurepanel.all_tags_heading')}</Subheading>
-          <TagsTableInner
-            tags={feature.tags}
-            center={feature.center}
-            except={[]}
-          />
+          <Wrapper>
+            <Table>
+              <tbody>
+                <TagsTableInner
+                  tags={feature.tags}
+                  center={feature.center}
+                  except={[]}
+                />
+              </tbody>
+            </Table>
+          </Wrapper>
         </>
       )}
     </>

diff --git a/src/components/FeaturePanel/Properties/TagsTableInner.tsx b/src/components/FeaturePanel/Properties/TagsTableInner.tsx
@@ -7,8 +7,6 @@ import { buildAddress } from '../../../services/helpers';
 import { ToggleButton } from '../helpers/ToggleButton';
 import { renderValue } from './renderValue';
 import { useEditDialogContext } from '../helpers/EditDialogContext';
-import { Wrapper } from './Wrapper';
-import { Table } from './Table';
 
 const isAddr = (k) => k.match(/^addr:|uir_adr|:addr/);
 const isName = (k) => k.match(/^name(:|$)/);
@@ -94,95 +92,89 @@ export const TagsTableInner = ({ tags, center, except }) => {
   );
 
   return (
-    <Wrapper>
-      <Table>
-        <tbody>
-          <TagsGroup
-            tags={names}
-            label={names.length === 1 ? names[0][0] : 'name:*'}
-            value={truncate(tags.name, { length: 25 })}
-            hideArrow={names.length === 1}
-            onEdit={onEdit}
-          />
-          <TagsGroup
-            tags={shortNames}
-            label={shortNames.length === 1 ? shortNames[0][0] : 'short_name:*'}
-            value={shortNames[0]?.[1]}
-            hideArrow={shortNames.length === 1}
-            onEdit={onEdit}
-          />
-          <TagsGroup
-            tags={altNames}
-            label={altNames.length === 1 ? altNames[0][0] : 'alt_name:*'}
-            value={altNames[0]?.[1]}
-            hideArrow={altNames.length === 1}
-            onEdit={onEdit}
-          />
-          <TagsGroup
-            tags={officialNames}
-            label={
-              officialNames.length === 1
-                ? officialNames[0][0]
-                : 'official_name:*'
-            }
-            value={officialNames[0]?.[1]}
-            hideArrow={officialNames.length === 1}
-            onEdit={onEdit}
-          />
-          <TagsGroup
-            tags={oldNames}
-            label={oldNames.length === 1 ? oldNames[0][0] : 'old_name:*'}
-            value={oldNames[0]?.[1]}
-            hideArrow={oldNames.length === 1}
-            onEdit={onEdit}
-          />
-          <TagsGroup
-            tags={addrs}
-            label="addr:*"
-            value={buildAddress(Object.fromEntries(addrs) as any, center)}
-            onEdit={onEdit}
-          />
-          {rest.map(([k, v]) => (
-            <tr key={k}>
-              <th>{k}</th>
-              <td>
-                <EditIconButton onClick={() => onEdit(k)} />
-                {renderValue(k, v)}
-              </td>
-            </tr>
-          ))}
-          <TagsGroup
-            tags={brands}
-            label="brand:*"
-            value={tags.brand}
-            onEdit={onEdit}
-          />
-          <TagsGroup
-            tags={buildings}
-            label="building:*"
-            value={tags.building}
-            onEdit={onEdit}
-          />
-          <TagsGroup
-            tags={networks}
-            label="network:*"
-            value={tags.network}
-            onEdit={onEdit}
-          />
-          <TagsGroup
-            tags={operator}
-            label="operator:*"
-            value={tags.operator}
-            onEdit={onEdit}
-          />
-          <TagsGroup
-            tags={payments}
-            label="payment:*"
-            value={tags.payment}
-            onEdit={onEdit}
-          />
-        </tbody>
-      </Table>
-    </Wrapper>
+    <>
+      <TagsGroup
+        tags={names}
+        label={names.length === 1 ? names[0][0] : 'name:*'}
+        value={truncate(tags.name, { length: 25 })}
+        hideArrow={names.length === 1}
+        onEdit={onEdit}
+      />
+      <TagsGroup
+        tags={shortNames}
+        label={shortNames.length === 1 ? shortNames[0][0] : 'short_name:*'}
+        value={shortNames[0]?.[1]}
+        hideArrow={shortNames.length === 1}
+        onEdit={onEdit}
+      />
+      <TagsGroup
+        tags={altNames}
+        label={altNames.length === 1 ? altNames[0][0] : 'alt_name:*'}
+        value={altNames[0]?.[1]}
+        hideArrow={altNames.length === 1}
+        onEdit={onEdit}
+      />
+      <TagsGroup
+        tags={officialNames}
+        label={
+          officialNames.length === 1 ? officialNames[0][0] : 'official_name:*'
+        }
+        value={officialNames[0]?.[1]}
+        hideArrow={officialNames.length === 1}
+        onEdit={onEdit}
+      />
+      <TagsGroup
+        tags={oldNames}
+        label={oldNames.length === 1 ? oldNames[0][0] : 'old_name:*'}
+        value={oldNames[0]?.[1]}
+        hideArrow={oldNames.length === 1}
+        onEdit={onEdit}
+      />
+      <TagsGroup
+        tags={addrs}
+        label="addr:*"
+        value={buildAddress(Object.fromEntries(addrs) as any, center)}
+        onEdit={onEdit}
+      />
+      {rest.map(([k, v]) => (
+        <tr key={k}>
+          <th>{k}</th>
+          <td>
+            <EditIconButton onClick={() => onEdit(k)} />
+            {renderValue(k, v)}
+          </td>
+        </tr>
+      ))}
+      <TagsGroup
+        tags={brands}
+        label="brand:*"
+        value={tags.brand}
+        onEdit={onEdit}
+      />
+      <TagsGroup
+        tags={buildings}
+        label="building:*"
+        value={tags.building}
+        onEdit={onEdit}
+      />
+      <TagsGroup
+        tags={networks}
+        label="network:*"
+        value={tags.network}
+        onEdit={onEdit}
+      />
+      <TagsGroup
+        tags={operator}
+        label="operator:*"
+        value={tags.operator}
+        onEdit={onEdit}
+      />
+      <TagsGroup
+        tags={payments}
+        label="payment:*"
+        value={tags.payment}
+        onEdit={onEdit}
+      />
+    </>
   );
 };
diff --git a/src/components/Map/behaviour/useOnMapClicked.tsx b/src/components/Map/behaviour/useOnMapClicked.tsx
@@ -6,7 +6,7 @@ import {
   getUrlOsmId,
   isSameOsmId,
 } from '../../../services/helpers';
-import { getRoundedPosition } from '../../../utils';
+import { getRoundedPosition, publishDbgObject } from '../../../utils';
 import { getCenter } from '../../../services/getCenter';
 import { convertMapIdToOsmId, getIsOsmObject } from '../helpers';
 import { getCoordsFeature } from '../../../services/getCoordsFeature';
@@ -43,7 +43,7 @@ export const useOnMapClicked = useAddMapEvent(
       const skeleton = getSkeleton(features[0], coords);
       addFeatureCenterToCache(getShortId(skeleton.osmMeta), skeleton.center); // for ways/relations we dont receive center from OSM API
       console.log(`clicked map feature (id=${features[0].id}): `, features[0]); // eslint-disable-line no-console
-      console.log(`^- skeleton ${getUrlOsmId(skeleton.osmMeta)}`, skeleton); // eslint-disable-line no-console
+      publishDbgObject('last skeleton', skeleton);
 
       if (skeleton.nonOsmObject) {
         const roundedPosition = getRoundedPosition(coords, map.getZoom());

diff --git a/src/services/__tests__/osmApi.test.ts b/src/services/__tests__/osmApi.test.ts
@@ -31,8 +31,8 @@ describe('fetchFeature', () => {
     jest.clearAllMocks();
     jest.spyOn(tagging, 'fetchSchemaTranslations').mockResolvedValue(undefined);
     jest
-      .spyOn(idTaggingScheme, 'getSchemaForFeature')
-      .mockReturnValue(undefined); // this is covered in idTaggingScheme.test.ts
+      .spyOn(idTaggingScheme, 'addSchemaToFeature')
+      .mockImplementation((f) => f); // this is covered in idTaggingScheme.test.ts
   });
 
   const isServer = jest.spyOn(helpers, 'isServer').mockReturnValue(true);