JSFiddle - React, Tailwind, and code Playground

by goldorak

JavaScript

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, toRefs } from 'vue';

import store from '@/store';
import { useHeroes } from '@/views/heroes/use-heroes';
import { useVillains } from '@/views/villains/use-villains';
import { Hero, Villain } from '@/store/modules/models';
import CardContent from '@/components/card-content.vue';

const captains = console;

interface ComponentState {
  errorMessage: string;
  message: string;
  routePath: string;
  selected: Hero | null;
  title: string;
  heroes: Hero[];
  villains: Villain[];
  heroSelected: object;
  villainSelected: object;
  powerSelected: string;
}

export default defineComponent({
  name: 'Battle',
  components: {
    CardContent,
  },
  setup() {
    const { getHeroesAction, updateHeroAction, addHeroAction } = useHeroes();

    const { getVillainsAction } = useVillains();

    const state: ComponentState = reactive({
      errorMessage: '',
      message: '',
      routePath: '/heroes',
      selected: null,
      title: 'Battle',
      heroes: computed(() => store.getters.heroes as Hero[]),
      villains: computed(() => store.getters.villains as Villain[]),
      heroSelected: {},
      villainSelected: {},
      powerSelected: '',
    });

    onMounted(() => {
      getHeroes();
      getVillains();
    });

    function clear() {
      state.selected = null;
    }

    function enableAddMode() {
      state.selected = new Hero('');
    }

    async function getHeroes() {
      state.errorMessage = '';
      try {
        await getHeroesAction();
      } catch (error) {
        captains.error(error);
        state.errorMessage = 'Unauthorized';
      }
    }

    async function getVillains() {
      state.errorMessage = '';
      try {
        await getVillainsAction();
      } catch (error) {
        captains.error(error);
        state.errorMessage = 'Unauthorized';
      }
    }

    async function save(hero: Hero) {
      captains.log('hero changed', hero);
      if...