Function wrapActions

Transparently make actions provide feedback to the user. i.e. affect global processing state (loading spinners) and report errors as notifications.

Example

<script setup lang="ts">
import { getServer } from "@45drives/houston-common-lib";
import { wrapActions } from "@45drives/houston-common-ui";
import { ref, onMounted } from "vue";

const settings = ref<Settings>();

const loadSettings = () =>
   getServer().andThen(loadSettingsFromServer).map(s => settings.value = s);

const updateSettings = (settings) =>
   getServer()
     .andThen(server => updateSettingsOnServer(server, settings))
     .andThen(loadSettings);

const actions = wrapActions({
   loadSettings,
   updateSettings,
});

onMounted(() => actions.loadSettings());

// call actions.loadSettings() and actions.updateSettings(settings) when you want user feedback
// plain non-wrapped loadSettings() and updateSettings(settings) still available to call from other actions
</script>

<template>
 <button @click="actions.updateSettings(settings)">Apply</button>
</template>
Copy