chore: sampled typings

src/renderer/app.js

@@ -5,7 +5,7 @@ import { StylesProvider, ThemeProvider } from '@material-ui/styles'
 import { IntlProvider } from 'react-intl'
 import isDev from 'electron-is-dev'
 import CssBaseline from '@material-ui/core/CssBaseline'
-
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import logger from '../logger'
 import theme from './theme'
 import Home from './components/Home'
@@ -48,6 +48,8 @@ const App = () => {
   const [locale, setLocale] = React.useState(initialLocale)
   const [backendState, setBackendState] = React.useState('loading')
 
+  const queryClient = new QueryClient()
+
   React.useEffect(() => {
     ipcRenderer
       .invoke('get-backend-state')
@@ -87,7 +89,9 @@ const App = () => {
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <IntlProvider locale={locale} messages={msgs[locale]}>
-          <Home onSelectLanguage={handleLanguageChange} />
+          <QueryClientProvider client={queryClient}>
+            <Home onSelectLanguage={handleLanguageChange} />
+          </QueryClientProvider>
         </IntlProvider>
       </ThemeProvider>
     </StylesProvider>

src/renderer/hooks/useMapServerMutation.js

@@ -0,0 +1,23 @@
+import ky from 'ky/umd'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+const MAP_SERVER_URL = 'http://127.0.0.1:' + window.mapServerPort
+
+/**
+ * @param {string} resourcePath
+ * @param {'post' | 'put' | 'delete'}
+ */
+export function useMapServerMutation (resourcePath, mutationType) {
+  const queryClient = useQueryClient()
+  const kyFunction = path =>
+    mutationType === 'post'
+      ? ky.post(path)
+      : mutationType === 'put'
+      ? ky.put(path)
+      : ky.delete(path)
+
+  return useMutation({
+    mutationFn: () => kyFunction(MAP_SERVER_URL + resourcePath),
+    onSuccess: queryClient.invalidateQueries({ queryKey: resourcePath })
+  })
+}

src/renderer/hooks/useMapServerQuery.js

@@ -1,17 +1,22 @@
+// @ts-check
 import ky from 'ky/umd'
 import { useQuery } from '@tanstack/react-query'
 
 // local host
 // global port number
-
 const MAP_SERVER_URL = 'http://127.0.0.1:' + window.mapServerPort
 
 /**
- * @param {'/styles' | `/styles/${string}` | '/tiles' | `/tiles/${string}`} resourcePath URL path to resource on Map Server (needs to start with `/`)
+ * @param {'/styles' | `/styles/${string}` | '/tilesets' | `/tilesets/${string}`} resourcePath URL path to resource on Map Server (needs to start with `/`)
  */
-export default function useMapServerQuery (resourcePath) {
+export function useMapServerQuery (resourcePath) {
   return useQuery({
     queryKey: [resourcePath],
-    queryFn: () => ky.get(MAP_SERVER_URL + resourcePath)
+    queryFn: () => ky.get(MAP_SERVER_URL + resourcePath).json()
   })
 }
+
+/**
+ * @type {import('@tanstack/react-query').UseQueryResult<ReturnType<import('@mapeo/map-server/dist/api/styles').StylesApi["listStyles"]>>}
+ */
+const { data } = useMapServerQuery('/styles')

src/renderer/hooks/useMapServerQueryWithImplicitTypings.js

@@ -0,0 +1,26 @@
+// @ts-check
+import ky from 'ky/umd'
+import { useQuery } from '@tanstack/react-query'
+
+// local host
+// global port number
+const MAP_SERVER_URL = 'http://127.0.0.1:' + window.mapServerPort
+
+const apiLayer = () => {
+  function getStylesFn () {
+    /**
+     * @type {Promise<ReturnType<import('@mapeo/map-server/dist/api/styles').StylesApi["listStyles"]>>}
+     */
+    const listSyles = ky.get(MAP_SERVER_URL + '/styles').json()
+    return listSyles
+  }
+
+  return {
+    getStyle: getStylesFn
+  }
+}
+
+const { data } = useQuery({
+  queryKey: ['listStyle'],
+  queryFn: apiLayer().getStyle
+})

src/utils/types.d.ts

@@ -20,8 +20,3 @@ export type MapeoCoreOptions = {
 export type MapPrinterOptions = {
   mapPrinterPort: number
 }
-
-export type MapServerOptions = {
-  mapServerPort: number
-  mapsdir: string
-}