Re-implementing the map chooser

src/components/dialogs/MapChooser.tsx

@@ -0,0 +1,78 @@
+import react, { useRef } from 'react';
+
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonRadio,
+  IonRadioGroup,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { layersOutline } from 'ionicons/icons';
+import { nonFakeTileProviders } from '../map/tile-providers';
+import { tileProviderAtom } from '../../App';
+import i18n from '../../i18n/index';
+import { useAtom } from 'jotai';
+
+import cssDialog from './dialogs.module.css';
+
+export interface MapChooserProperties {}
+
+export const MapChooser: react.FC<MapChooserProperties> = (
+  props: MapChooserProperties
+) => {
+  const modal = useRef<HTMLIonModalElement>(null);
+
+  const dismiss = () => {
+    modal.current?.dismiss();
+  };
+
+  const [tileProvider, setTileProvider] = useAtom(tileProviderAtom);
+
+  const changeHandler = (event: any) => {
+    setTileProvider(event.detail.value);
+    dismiss();
+  };
+
+  return (
+    <>
+      <IonButton id='open-TileServerChooser'>
+        <IonIcon slot='icon-only' icon={layersOutline} />
+      </IonButton>
+      <IonModal
+        trigger='open-TileServerChooser'
+        ref={modal}
+        className={cssDialog.modal}
+      >
+        <IonToolbar>
+          <IonTitle>{i18n.mapChooser.chooseYourMap}</IonTitle>
+          <IonButtons slot='end'>
+            <IonButton onClick={() => dismiss()}>{i18n.common.close}</IonButton>
+          </IonButtons>
+        </IonToolbar>
+        <IonContent>
+          <IonList>
+            <IonRadioGroup value={tileProvider} onIonChange={changeHandler}>
+              {Object.keys(nonFakeTileProviders).map((provider) => {
+                return (
+                  <IonItem key={provider}>
+                    <IonLabel> {nonFakeTileProviders[provider].name}</IonLabel>
+                    <IonRadio slot='start' value={provider} />
+                  </IonItem>
+                );
+              })}
+            </IonRadioGroup>
+          </IonList>
+        </IonContent>
+      </IonModal>
+    </>
+  );
+};
+
+export default MapChooser;

src/components/dialogs/dialogs.module.css

@@ -0,0 +1,15 @@
+.modal {
+  --height: 100%;
+  --border-radius: 16px;
+  --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.modal ion-toolbar {
+  --background: rgba(14, 116, 144, 0.7);
+  --color: white;
+}
+
+.modal ion-content {
+  background-color: rgba(255, 255, 255, 0.7);
+}

src/components/map/tile-providers.tsx

@@ -133,6 +133,8 @@ export const tileProviders: TileProviders = {
   },
 };
 
+export const { fake, ...nonFakeTileProviders } = tileProviders;
+
 const mod = (n: number, m: number) => {
   const jsMod = n % m;
   return jsMod >= 0 ? jsMod : jsMod + m;