{"version":3,"sources":["webpack:///./src/components/BookRow.vue","webpack:///./src/components/BookRow.vue?0b1b","webpack:///./src/components/BookRow.vue?d3db","webpack:///./src/views/Discover.vue","webpack:///./src/machines/searchMachine.ts","webpack:///./src/views/Discover.vue?adc4","webpack:///./src/views/Discover.vue?6db9","webpack:///./src/components/BookRow.vue?f9ee","webpack:///./src/views/Discover.vue?0a37"],"names":["class","data-testid","isLoading","aria-label","template","variant","style","rows","animated","to","book","id","src","coverImageUrl","alt","title","author","synopsis","substring","buttonsRef","buttons","bookState","props","bookRef","type","Object","required","setup","useActor","state","value","context","matches","components","TooltipStatus","render","__scopeId","searchBooks","placeholder","query","native-type","disabled","isFetching","books","isError","error","message","booksRef","key","searchMachine","undefined","initial","states","idle","on","SEARCH","invoke","onDone","target","actions","onError","searching","success","failure","services","event","setBooks","data","map","bookMachine","updateQuery","useMachine","searchState","sendSearch","send","status","BookRow"],"mappings":"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","file":"js/discover.6d4a990f.js","sourcesContent":["<template>\n  <section class=\"book\" data-testid=\"book-row\">\n    <el-skeleton v-if=\"isLoading\" aria-label=\"loading\">\n      <template #template>\n        <div class=\"book__wrapper\">\n          <el-skeleton-item\n            variant=\"image\"\n            class=\"book__cover\"\n            style=\"height: 210px\"\n          />\n          <el-skeleton :rows=\"5\" animated />\n        </div>\n      </template>\n    </el-skeleton>\n    <router-link :to=\"`/books/${book.id}`\" class=\"book__link\" v-else>\n      <div class=\"book__wrapper\">\n        <img\n          :src=\"book.coverImageUrl\"\n          :alt=\"`${book.title} cover`\"\n          class=\"book__cover\"\n        />\n        <div class=\"book__info\">\n          <h3 class=\"book__title\">{{ book.title }}</h3>\n          <span class=\"book__author\">{{ book.author }}</span>\n          <p class=\"book__synopsis\">{{ book.synopsis.substring(0, 500) }}...</p>\n        </div>\n      </div>\n    </router-link>\n    <TooltipStatus :buttonsRef=\"buttons\" :bookState=\"bookState\" />\n  </section>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType } from \"vue\";\nimport TooltipStatus from \"@/components/TooltipStatus.vue\";\nimport { useActor } from \"@xstate/vue\";\nimport type { BookMachineActor } from \"@/machines/bookMachine\";\n\nexport default defineComponent({\n  props: {\n    bookRef: {\n      type: Object as PropType<BookMachineActor>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const { state: bookState } = useActor(props.bookRef);\n    const book = computed(() => bookState.value.context?.book);\n    const buttons = computed(() => bookState.value.context?.buttons);\n    const isLoading = computed(() => bookState.value.matches(\"loadBook\"));\n\n    return { book, bookState, buttons, isLoading };\n  },\n  components: {\n    TooltipStatus,\n  },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.book {\n  position: relative;\n  margin-top: 1rem;\n  width: 45rem;\n  display: flex;\n  height: 17.25rem;\n  &__wrapper {\n    display: flex;\n    align-items: flex-start;\n    column-gap: 1rem;\n    padding: 1rem;\n    padding-right: 2rem;\n    border: white solid 0.1em;\n  }\n  &__cover {\n    width: 140px;\n  }\n  &__info {\n    display: grid;\n    grid-template-columns: 4fr 2fr;\n  }\n  &__author {\n    align-self: center;\n  }\n  &__synopsis {\n    grid-row: 2 / 3;\n    grid-column: 1 / 3;\n    text-align: left;\n  }\n  &__link {\n    color: white;\n  }\n}\n</style>\n","\nimport { computed, defineComponent, PropType } from \"vue\";\nimport TooltipStatus from \"@/components/TooltipStatus.vue\";\nimport { useActor } from \"@xstate/vue\";\nimport type { BookMachineActor } from \"@/machines/bookMachine\";\n\nexport default defineComponent({\n  props: {\n    bookRef: {\n      type: Object as PropType<BookMachineActor>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const { state: bookState } = useActor(props.bookRef);\n    const book = computed(() => bookState.value.context?.book);\n    const buttons = computed(() => bookState.value.context?.buttons);\n    const isLoading = computed(() => bookState.value.matches(\"loadBook\"));\n\n    return { book, bookState, buttons, isLoading };\n  },\n  components: {\n    TooltipStatus,\n  },\n});\n","import { render } from \"./BookRow.vue?vue&type=template&id=217616cd&scoped=true\"\nimport script from \"./BookRow.vue?vue&type=script&lang=ts\"\nexport * from \"./BookRow.vue?vue&type=script&lang=ts\"\n\nimport \"./BookRow.vue?vue&type=style&index=0&id=217616cd&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-217616cd\"\n\nexport default script","<template>\n  <form class=\"search\" @submit.prevent=\"searchBooks\">\n    <el-input placeholder=\"search books\" v-model=\"query\"></el-input>\n    <el-button\n      type=\"primary\"\n      class=\"search__btn\"\n      native-type=\"submit\"\n      :disabled=\"isFetching\"\n    >\n      <span v-if=\"isFetching\"\n        ><i class=\"el-icon-loading\" aria-label=\"loading\"></i\n      ></span>\n      <span v-else><i class=\"el-icon-search\"></i> Search</span>\n    </el-button>\n  </form>\n  <div>\n    <p>Welcome to the discover page.</p>\n    <p>Here, let me load a few books for you...</p>\n  </div>\n  <main v-if=\"books\">\n    <section v-if=\"isError\">\n      <h3>There was an error:</h3>\n      <pre>{{ error.message }}</pre>\n    </section>\n    <ul class=\"books\" v-if=\"!isFetching\">\n      <li v-for=\"bookRef in booksRef\" :key=\"bookRef.id\">\n        <BookRow :bookRef=\"bookRef\" />\n      </li>\n    </ul>\n  </main>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onUnmounted, ref, watch, computed } from \"vue\";\nimport BookRow from \"@/components/BookRow.vue\";\nimport { refetchBookSearch } from \"@/utils/book\";\nimport { useMachine } from \"@xstate/vue\";\nimport { searchMachine } from \"@/machines/searchMachine\";\n\nexport default defineComponent({\n  setup() {\n    const query = ref(\"\");\n    const { state: searchState, send: sendSearch } = useMachine(searchMachine);\n    const isFetching = computed(() => searchState.value.matches(\"searching\"));\n    const isError = computed(() => searchState.value.matches(\"failure\"));\n    const error = computed(() => searchState.value.context.message);\n    const books = computed(() => searchState.value.context.books);\n    const booksRef = computed(() => searchState.value.context.booksRef);\n    watch(query, (query) => {\n      sendSearch({ type: \"UPDATE-QUERY\", query });\n    });\n\n    function searchBooks() {\n      sendSearch({ type: \"SEARCH\" });\n    }\n\n    onUnmounted(() => refetchBookSearch());\n\n    return {\n      query,\n      isError,\n      isFetching,\n      books,\n      error,\n      status,\n      searchBooks,\n      booksRef,\n    };\n  },\n  components: {\n    BookRow,\n  },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.search {\n  display: flex;\n  column-gap: 1rem;\n  width: 42rem;\n  &__btn {\n    width: 125px;\n  }\n}\n\n.books {\n  list-style-type: none;\n  padding: 0;\n}\n</style>\n","/* eslint-disable @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any */\nimport { createMachine, assign, spawn } from \"xstate\";\nimport type { book } from \"@/types\";\nimport { bookSearch } from \"@/utils/book\";\nimport { bookMachine } from \"./bookMachine\";\nimport type { BookMachineActor } from \"@/machines/bookMachine\";\n\nexport type SearchMachineEvents =\n  | { type: \"SEARCH\" }\n  | { type: \"FAILURE\"; message: string }\n  | { type: \"SUCCESS\"; books: book[] }\n  | { type: \"UPDATE-QUERY\"; query: string };\n\nexport interface SearchMachineContext {\n  message?: string;\n  books?: book[];\n  query: string;\n  booksRef: BookMachineActor[];\n}\n\nexport type SearchMachineState =\n  | {\n      value: \"idle\";\n      context: SearchMachineContext & { books: book[]; query: \"\" };\n    }\n  | {\n      value: \"searching\";\n      context: SearchMachineContext;\n    }\n  | {\n      value: \"success\";\n      context: SearchMachineContext;\n    }\n  | {\n      value: \"failure\";\n      context: SearchMachineContext & { message: string };\n    };\nexport const searchMachine = createMachine<\n  SearchMachineContext,\n  SearchMachineEvents,\n  SearchMachineState\n>(\n  {\n    id: \"SearchMachine\",\n    context: {\n      books: undefined,\n      message: undefined,\n      booksRef: [],\n      query: \"\",\n    },\n    initial: \"searching\",\n    states: {\n      idle: {\n        on: {\n          SEARCH: \"searching\",\n        },\n        invoke: {\n          id: \"searchBooks\",\n          src: \"searchBooks\",\n          onDone: {\n            target: \"success\",\n            actions: \"setBooks\",\n          },\n          onError: {\n            target: \"failure\",\n            actions: \"onError\",\n          },\n        },\n      },\n      searching: {\n        invoke: {\n          id: \"searchBooks\",\n          src: \"searchBooks\",\n          onDone: {\n            target: \"success\",\n            actions: \"setBooks\",\n          },\n          onError: {\n            target: \"failure\",\n            actions: \"onError\",\n          },\n        },\n      },\n      success: {\n        on: {\n          SEARCH: \"searching\",\n        },\n      },\n      failure: {\n        on: {\n          SEARCH: \"searching\",\n        },\n      },\n    },\n    on: {\n      \"UPDATE-QUERY\": {\n        actions: \"updateQuery\",\n      },\n    },\n  },\n  {\n    services: {\n      searchBooks(context, event) {\n        return bookSearch(context.query);\n      },\n    },\n    actions: {\n      setBooks: assign({\n        books: (context, event: any) => {\n          return event.data;\n        },\n        booksRef: (context, event: any) => {\n          const booksRef = event.data.map((book: book) =>\n            spawn(bookMachine({ book }), book.id)\n          );\n          return booksRef;\n        },\n      }),\n      onError: assign({\n        message: (context, event: any) => {\n          return event.data.message;\n        },\n      }),\n      updateQuery: assign({\n        query: (context, event: any) => {\n          return event.query;\n        },\n      }),\n    },\n  }\n);\n","\nimport { defineComponent, onUnmounted, ref, watch, computed } from \"vue\";\nimport BookRow from \"@/components/BookRow.vue\";\nimport { refetchBookSearch } from \"@/utils/book\";\nimport { useMachine } from \"@xstate/vue\";\nimport { searchMachine } from \"@/machines/searchMachine\";\n\nexport default defineComponent({\n  setup() {\n    const query = ref(\"\");\n    const { state: searchState, send: sendSearch } = useMachine(searchMachine);\n    const isFetching = computed(() => searchState.value.matches(\"searching\"));\n    const isError = computed(() => searchState.value.matches(\"failure\"));\n    const error = computed(() => searchState.value.context.message);\n    const books = computed(() => searchState.value.context.books);\n    const booksRef = computed(() => searchState.value.context.booksRef);\n    watch(query, (query) => {\n      sendSearch({ type: \"UPDATE-QUERY\", query });\n    });\n\n    function searchBooks() {\n      sendSearch({ type: \"SEARCH\" });\n    }\n\n    onUnmounted(() => refetchBookSearch());\n\n    return {\n      query,\n      isError,\n      isFetching,\n      books,\n      error,\n      status,\n      searchBooks,\n      booksRef,\n    };\n  },\n  components: {\n    BookRow,\n  },\n});\n","import { render } from \"./Discover.vue?vue&type=template&id=7d8cc15f&scoped=true\"\nimport script from \"./Discover.vue?vue&type=script&lang=ts\"\nexport * from \"./Discover.vue?vue&type=script&lang=ts\"\n\nimport \"./Discover.vue?vue&type=style&index=0&id=7d8cc15f&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-7d8cc15f\"\n\nexport default script","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./BookRow.vue?vue&type=style&index=0&id=217616cd&lang=scss&scoped=true\"","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Discover.vue?vue&type=style&index=0&id=7d8cc15f&lang=scss&scoped=true\""],"sourceRoot":""}