use global state

src/components/App.tsx

@@ -129,6 +129,7 @@ type AppState = {
     export: boolean
     debug: boolean
   }
+  fileHandle: FileSystemFileHandle | null
 }
 
 export default class App extends React.Component<any, AppState> {
@@ -284,6 +285,7 @@ export default class App extends React.Component<any, AppState> {
       openlayersDebugOptions: {
         debugToolbox: false,
       },
+      fileHandle: null,
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -611,7 +613,8 @@ export default class App extends React.Component<any, AppState> {
     }
   }
 
-  openStyle = (styleObj: StyleSpecification & {id: string}) => {
+  openStyle = (styleObj: StyleSpecification & {id: string}, fileHandle: FileSystemFileHandle | null) => {
+    this.setState({fileHandle: fileHandle});
     styleObj = this.setDefaultValues(styleObj)
     this.onStyleChanged(styleObj)
   }
@@ -847,6 +850,10 @@ export default class App extends React.Component<any, AppState> {
     this.setModal(modalName, !this.state.isOpen[modalName]);
   }
 
+  onSetFileHandle(fileHandle: FileSystemFileHandle | null) {
+    this.setState({fileHandle: fileHandle});
+  }
+
   onChangeOpenlayersDebug = (key: keyof AppState["openlayersDebugOptions"], value: boolean) => {
     this.setState({
       openlayersDebugOptions: {
@@ -949,11 +956,14 @@ export default class App extends React.Component<any, AppState> {
         onStyleChanged={this.onStyleChanged}
         isOpen={this.state.isOpen.export}
         onOpenToggle={this.toggleModal.bind(this, 'export')}
+        fileHandle={this.state.fileHandle}
+        onSetFileHandle={this.onSetFileHandle}
       />
       <ModalOpen
         isOpen={this.state.isOpen.open}
         onStyleOpen={this.openStyle}
         onOpenToggle={this.toggleModal.bind(this, 'open')}
+        fileHandle={this.state.fileHandle}
       />
       <ModalSources
         mapStyle={this.state.mapStyle}

src/components/ModalExport.tsx

@@ -22,6 +22,8 @@ type ModalExportInternalProps = {
   onStyleChanged(...args: unknown[]): unknown
   isOpen: boolean
   onOpenToggle(...args: unknown[]): unknown
+  onSetFileHandle(fileHandle: FileSystemFileHandle | null): unknown
+  fileHandle: FileSystemFileHandle | null
 } & WithTranslation;
 
 
@@ -82,29 +84,50 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
   }
 
   async saveStyle() {
-    let fileHandle: FileSystemFileHandle;
     const tokenStyle = this.tokenizedStyle();
 
-    if (fileHandle != null) {
+    let fileHandle = this.props.fileHandle;
-      const writable = await fileHandle.createWritable();
+    if (fileHandle == null) {
-      await writable.write(tokenStyle);
+      fileHandle = await this.createFileHandle();
-      await writable.close();
+      this.props.onSetFileHandle(fileHandle)
-    } else {
+      if (fileHandle == null) return;
-      await this.saveStyleAs();
     }
+
+    const writable = await fileHandle.createWritable();
+    await writable.write(tokenStyle);
+    await writable.close();
+    this.props.onOpenToggle();
   }
 
   async saveStyleAs() {
     const tokenStyle = this.tokenizedStyle();
 
-    const root = await navigator.storage.getDirectory();
+    const fileHandle = await this.createFileHandle();
-    const draftHandle = await root.getFileHandle(this.exportName(), { create: true });
+    this.props.onSetFileHandle(fileHandle)
-    const writeable = await draftHandle.createWritable();
+    if (fileHandle == null) return;
 
-    await writeable.write(tokenStyle);
+    const writable = await fileHandle.createWritable();
-    await writeable.close();
+    await writable.write(tokenStyle);
-    // TODO close existing fileHandle
+    await writable.close();
-    // TODO this.props.fileHandle = accessHandle;
+    this.props.onOpenToggle();
+  }
+
+  async createFileHandle() : Promise<FileSystemFileHandle | null> {
+    const pickerOpts = {
+      types: [
+        {
+          description: "Style JSON",
+          accept: {"application/json": [".json"]},
+          suggestedName: this.exportName(),
+        },
+      ],
+      excludeAcceptAllOption: true,
+      multiple: false,
+    };
+
+    const fileHandle = await window.showSaveFilePicker(pickerOpts) as FileSystemFileHandle;
+    this.props.onSetFileHandle(fileHandle)
+    return fileHandle;
   }
 
   changeMetadataProperty(property: string, value: any) {

src/components/ModalOpen.tsx

@@ -1,7 +1,6 @@
 import React, { FormEvent } from 'react'
 import {MdFileUpload} from 'react-icons/md'
 import {MdAddCircleOutline} from 'react-icons/md'
-import FileReaderInput, { Result } from 'react-file-reader-input'
 import { Trans, WithTranslation, withTranslation } from 'react-i18next';
 
 import ModalLoading from './ModalLoading'
@@ -47,6 +46,7 @@ type ModalOpenInternalProps = {
   isOpen: boolean
   onOpenToggle(...args: unknown[]): unknown
   onStyleOpen(...args: unknown[]): unknown
+  fileHandle: FileSystemFileHandle | null
 } & WithTranslation;
 
 type ModalOpenState = {
@@ -137,7 +137,6 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
 
   onOpenFile = async () => {
     this.clearError();
-    // TODO close existing file handles
 
     const pickerOpts = {
       types: [
@@ -164,7 +163,8 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
       return;
     }
     mapStyle = style.ensureStyleValidity(mapStyle)
-    this.props.onStyleOpen(mapStyle);
+
+    this.props.onStyleOpen(mapStyle, fileHandle);
     this.onOpenToggle();
     return file;
   }