Merge pull request #11 from branch 'feature/techs-refresh'

Upgraded project to latest technologies

.eslintrc.js

@@ -5,15 +5,18 @@ module.exports = {
   },
   extends: [
     'lacussoft',
-    'lacussoft/vue/v2',
+    'lacussoft/vue',
+    'lacussoft/typescript',
+    '@vue/typescript/recommended',
   ],
   ignorePatterns: [
     'public/*',
     '!public/**/*.js',
     '!babel.config.js',
   ],
-  parserOptions: {
-    parser: 'babel-eslint',
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    'import-helpers/order-imports': 'off',
+    'vue/valid-define-props': 'error',
   },
-  rules: {},
 }

README.md

@@ -81,6 +81,6 @@ Make sure to have **Node.js 10+** installed in your machine and its **npm** comm
 ```bash
 $ npm install     # Download dependencies
 $ npm start       # Run JSON-Server
-$ npm run serve   # Run development server for front-end
+$ npm run dev     # Run development server for front-end
 $ npm run build   # Build files for production
 ```

package.json

@@ -1,41 +1,43 @@
 {
   "name": "estante-virtual",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "private": true,
   "license": "MIT",
   "author": "Julio L. Muller",
   "scripts": {
     "postinstall": "node -e \"require('fs').existsSync('.env') || require('fs').copyFileSync('.env.example', '.env')\"",
-    "serve": "vue-cli-service serve --open",
+    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "start": "node server.js",
     "heroku-postbuild": "echo Skipping 'npm run build'"
   },
   "dependencies": {
-    "axios": "~0.21.1",
-    "bootstrap": "^4.6.0",
-    "json-server": "^0.16.3",
-    "vue": "^2.6.12",
-    "vue-router": "^3.5.1",
-    "vuex": "^3.6.2"
+    "axios": "~0.26.0",
+    "bootstrap": "^5.1.3",
+    "json-server": "~0.17.0",
+    "pinia": "^2.0.11",
+    "vue": "^3.2.31",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.12",
-    "@vue/cli-plugin-eslint": "^4.5.12",
-    "@vue/cli-plugin-router": "^4.5.12",
-    "@vue/cli-plugin-vuex": "^4.5.12",
-    "@vue/cli-service": "^4.5.12",
-    "babel-eslint": "^10.1.0",
-    "core-js": "^3.12.0",
-    "eslint": "^7.25.0",
-    "eslint-config-lacussoft": "^1.0.0",
-    "sass": "^1.32.12",
-    "sass-loader": "^10.1.1",
-    "vue-template-compiler": "^2.6.12"
+    "@vue/cli-plugin-babel": "^5.0.1",
+    "@vue/cli-plugin-eslint": "^5.0.1",
+    "@vue/cli-plugin-router": "^5.0.1",
+    "@vue/cli-plugin-typescript": "^5.0.1",
+    "@vue/cli-service": "^5.0.1",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "core-js": "^3.21.1",
+    "eslint": "^7.32.0",
+    "eslint-config-lacussoft": "^2.3.0",
+    "sass": "^1.49.8",
+    "sass-loader": "^12.6.0",
+    "typescript": "~4.5.5"
   },
   "browserslist": [
     "> 1%",
-    "last 2 versions"
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
   ]
 }

src/App.vue

@@ -1,38 +1,59 @@
-<script>
-export default {
-  name: 'App',
-
-  beforeCreate() {
-    this.$store.dispatch('users/fetchAll')
-    this.$store.dispatch('books/fetchAll')
-  },
-}
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { watch } from 'vue'
+import { useAuth, useBookStore, useUserStore } from '@/store'
+
+const auth = useAuth()
+const bookStore = useBookStore()
+const userStore = useUserStore()
+const { isAuthenticated } = storeToRefs(auth)
+
+auth.recoverFromStorage()
+
+watch(isAuthenticated, (value) => {
+  if (value) {
+    bookStore.fetchAll()
+    userStore.fetchAll()
+  }
+}, { immediate: true })
 </script>
 
 <template>
   <div id="app">
-    <RouterView />
+    <router-view />
   </div>
 </template>
 
 <style lang="scss">
-/* Define variables to oberwrite/add to Bootstrap theme */
+// Bootstrap's utilities functions
+@import 'node_modules/bootstrap/scss/functions';
+
+// Bootstrap's variables to be overridden
 $border-radius: 0.5rem;
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
   md: 768px,
   lg: 1000px,
-  xl: 1280px
+  xl: 1280px,
+  xxl: 1400px
 );
-$theme-colors: (
+
+// Bootstrap's utilities
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'node_modules/bootstrap/scss/root';
+
+// Colors to merge to Bootstrap's theme
+$custom-colors: (
   hero: #d8621e
 );
+$theme-colors: map-merge($theme-colors, $custom-colors);
 
-/* Import Bootstrap framework */
+// Bootstrap's required styles
 @import 'node_modules/bootstrap/scss/bootstrap';
 
-/* Additional custom styles */
+// Additional global styles
 html, body, #app {
   width: 100%;
   height: 100%;

src/components/BookCard.vue

@@ -1,54 +1,40 @@
-<script>
-import truncate from '@/filters/truncate'
+<script setup lang="ts">
+import { computed } from 'vue'
+import { truncateText } from '@/utils'
 
-export default {
-  name: 'BookCard',
+export interface BookCardProps {
+  id: number
+  title: string
+  image: string
+}
 
-  filters: {
-    truncate,
-  },
+const props = defineProps<BookCardProps>()
 
-  props: {
-    id: {
-      type: Number,
-      required: true,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-    image: {
-      type: String,
-      required: true,
-    },
+const route = computed(() => ({
+  name: 'BookDetails',
+  params: {
+    bookId: props.id,
   },
+}))
 
-  computed: {
-    route() {
-      return {
-        name: 'BookDetails',
-        params: {
-          bookId: this.id,
-        },
-      }
-    },
-  },
-}
+const truncatedTitle = computed(() => {
+  return truncateText(props.title)
+})
 </script>
 
 <template>
   <div class="book-card">
     <div class="card rounded">
-      <img :src="image" class="card-img-top" alt="Capa do livro" />
+      <img :src="props.image" class="card-img-top" alt="Capa do livro" />
       <div class="card-body">
-        <h5 class="card-title" :title="title">
-          {{ title | truncate }}
+        <h5 class="card-title" :title="props.title">
+          {{ truncatedTitle }}
         </h5>
       </div>
       <div class="card-footer">
-        <RouterLink :to="route" class="btn btn-hero">
+        <router-link :to="route" class="btn btn-hero my-2">
           Ver Detalhes
-        </RouterLink>
+        </router-link>
       </div>
     </div>
   </div>
@@ -59,12 +45,13 @@ export default {
   padding: 0.5rem;
 
   .card {
-    height: 100%;
-    border: 1px solid var(--hero);
-    text-align: center;
     display: flex;
     flex-direction: column;
 
+    height: 100%;
+    border: 1px solid var(--bs-hero);
+    text-align: center;
+
     img {
       width: 100%;
       height: 180px;
@@ -73,6 +60,7 @@ export default {
 
     a {
       width: 80%;
+      color: #fff;
     }
   }
 }

src/components/BooksDeck.vue

@@ -1,60 +1,46 @@
-<script>
-import BookCard from './BookCard'
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import BookCard from '@/components/BookCard.vue'
+import { Book } from '@/models'
 
-const MIN_WIDTH = 250
-
-export default {
-  nmae: 'BooksDeck',
+export interface BOoksDeckProps {
+  books: Book[]
+}
 
-  components: {
-    BookCard,
-  },
+const props = defineProps<BOoksDeckProps>()
 
-  props: {
-    books: {
-      type: Array,
-      required: true,
-    },
-  },
+const MIN_WIDTH = 250
 
-  data: () => ({
-    spacers: [],
-  }),
+const containerRef = ref<HTMLDivElement>()
+const spacers = ref<number[]>([])
 
-  watch: {
-    books() {
-      this.setSpacers()
-    },
-  },
+function setSpacers() {
+  const deckWidth = containerRef.value?.clientWidth as number
+  const colsCount = Math.round(deckWidth / MIN_WIDTH)
+  const rowsCOunt = Math.ceil(props.books.length / colsCount)
+  const spacersCount = (colsCount * rowsCOunt) - props.books.length
 
-  methods: {
-    setSpacers() {
-      const deckWidth = this.$refs.deck.clientWidth
-      const colsCount = parseInt(deckWidth / MIN_WIDTH, 10)
-      const rowsCOunt = Math.ceil(this.books.length / colsCount)
-      const spacersCount = (colsCount * rowsCOunt) - this.books.length
+  spacers.value = Array(spacersCount || 0).fill(null).map((_, index) => index)
+}
 
-      this.spacers = new Array(spacersCount || 0).fill().map((_, index) => index)
-    },
-  },
+watch(props.books, () => setSpacers())
 
-  mounted() {
-    this.setSpacers()
+onMounted(() => {
+  setSpacers()
 
-    window.onresize = () => {
-      if (this?.$refs?.deck) {
-        this.setSpacers()
-      }
+  window.onresize = () => {
+    if (containerRef.value) {
+      setSpacers()
     }
-  },
-}
+  }
+})
 </script>
 
 <template>
-  <div class="books-deck row" ref="deck">
+  <div class="books-deck row" ref="containerRef">
     <BookCard
       class="col"
-      v-for="book in books"
+      v-for="book in props.books"
       :key="book.id"
       :image="book.image"
       :title="book.name"

src/components/Logo.vue

@@ -1,19 +1,21 @@
 <template>
-  <span id="logo" class="h1">
-    Estante<span class="badge badge-hero p-1">Virtual</span>
+  <span id="logo" class="h2">
+    Estante<span>Virtual</span>
   </span>
 </template>
 
-<script>
-export default {
-  name: 'Logo',
-}
-</script>
-
 <style lang="scss">
 #logo {
-  text-decoration: none;
   color: #111;
   font-weight: bold;
+  text-decoration: none;
+  user-select: none;
+
+  span {
+    border-radius: 0.5rem;
+    background-color: var(--bs-hero);
+    padding: 0.25rem;
+    color: #fff;
+  }
 }
 </style>