Merge pull request #44 from camarm-dev/dev

Résolution de #41 et #43

app/.eslintrc.js → app/.eslintrc.cjs

@@ -3,18 +3,22 @@ module.exports = {
   env: {
     node: true
   },
-  'extends': [
+  parser: "vue-eslint-parser",
+  extends: [
     'plugin:vue/vue3-essential',
     'eslint:recommended',
-    '@vue/typescript/recommended'
+    '@vue/typescript/recommended',
+    '@vue/eslint-config-typescript'
   ],
   parserOptions: {
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
+    project: ['./tsconfig.json']
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'vue/no-deprecated-slot-attribute': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
   }
 }

app/package.json

@@ -8,9 +8,9 @@
     "dev": "vite --host 0.0.0.0",
     "build": "vite build",
     "preview": "vite preview",
-    "test:e2e": "cypress run",
-    "test:unit": "vitest",
-    "lint": "eslint"
+    "test": "cypress run",
+    "lint": "eslint src",
+    "lint:fix": "eslint --fix"
   },
   "dependencies": {
     "@capacitor/android": "5.5.1",
@@ -43,7 +43,6 @@
     "jsdom": "^22.1.0",
     "typescript": "^5.1.6",
     "vite": "^4.5.1",
-    "vitest": "^0.32.2",
     "vue-tsc": "^1.0.24"
   },
   "description": "A french mobile and offline dictionary."

app/src/Outlet.vue → app/src/AppOutlet.vue

@@ -6,5 +6,5 @@
 
 <script setup lang="ts">
 import { IonApp, IonNav } from '@ionic/vue';
-import Root from "@/Root.vue";
+import Root from "@/AppRoot.vue";
 </script>

app/src/components/FicheModal.vue

@@ -57,7 +57,7 @@ import {
       <p class="ion-padding-start">{{ description }}</p>
     </ion-label>
     <div class="ion-padding">
-      <ion-badge class="ion-margin-end" :color="getTagColor(tag)" v-for="tag in tags">{{ tag }}</ion-badge>
+      <ion-badge class="ion-margin-end" :color="getTagColor(tag)" :key="tag" v-for="tag in tags">{{ tag }}</ion-badge>
     </div>
     <br>
     <div class="ion-padding" v-html="contenu"/>
@@ -68,12 +68,13 @@ import {
 import {useIonRouter} from "@ionic/vue";
 import {defineComponent} from "vue";
 import {Share} from "@capacitor/share";
+import {navigateBackFunction} from "@/functions/types/utils";
 
 export default defineComponent({
   props: ['nom', 'description', 'contenu', 'tags', 'credits', 'slug'],
   data() {
     return {
-      navigateBack: () => "" as Function
+      navigateBack: () => "" as navigateBackFunction
     }
   },
   mounted() {

app/src/components/WordModal.vue

@@ -78,7 +78,7 @@ import WordModal from "@/components/WordModal.vue";
           <figcaption>{{ document.image.credits }}</figcaption>
         </figure>
       </div>
-      <div class="definition" v-for="def in document.definitions">
+      <div class="definition" :key="def" v-for="def in document.definitions">
         <header>
           <h4 v-if="typeof def.genre !== 'string'">{{ def.genre[0] }}, {{ def.genre[1] }}</h4>
           <h4 v-else-if="def.genre != def.classe && def.classe != ''">{{ def.genre }}, {{ def.classe }}</h4>
@@ -87,10 +87,10 @@ import WordModal from "@/components/WordModal.vue";
         </header>
         <div class="content">
           <ul>
-            <li v-for="meaning in def.explications">
+            <li :key="meaning" v-for="meaning in def.explications">
               <span v-html="meaning.replaceAll('https://fr.wiktionary.org/wiki/', '/dictionnaire/')" v-if="typeof meaning === 'string'"></span>
               <ul v-else class="ion-padding-start">
-                <li v-for="subMeaning in meaning" v-html="subMeaning"></li>
+                <li :key="subMeaning" v-for="subMeaning in meaning" v-html="subMeaning"></li>
               </ul>
             </li>
           </ul>
@@ -105,7 +105,7 @@ import WordModal from "@/components/WordModal.vue";
         </header>
       </div>
       <ul>
-        <li v-for="syn in document.synonymes">
+        <li :key="syn" v-for="syn in document.synonymes">
           <ion-nav-link router-direction="forward" :component="WordModal" :component-props="{ motRemede: syn }">
             <a>{{ syn }}</a>
           </ion-nav-link>
@@ -122,7 +122,7 @@ import WordModal from "@/components/WordModal.vue";
         </header>
       </div>
       <ul>
-        <li v-for="ant in document.antonymes">
+        <li :key="ant" v-for="ant in document.antonymes">
           <ion-nav-link router-direction="forward" :component="WordModal" :component-props="{ motRemede: ant }">
             <a>{{ ant }}</a>
           </ion-nav-link>
@@ -150,13 +150,13 @@ import WordModal from "@/components/WordModal.vue";
         </ion-item>
         <ion-item color="light" lines="full">
           <ion-select @ionChange="changeMode($event.target.value)" slot="start" interface="action-sheet" placeholder="Mode" :value="currentMode">
-            <ion-select-option v-for="mode in getModes()" :value="mode">{{ mode }}</ion-select-option>
+            <ion-select-option :key="mode" v-for="mode in getModes()" :value="mode">{{ mode }}</ion-select-option>
           </ion-select>
           <ion-select @ionChange="changeTemps($event.target.value)" slot="end" interface="action-sheet" placeholder="Temps" :value="currentTemps">
-            <ion-select-option v-for="temps in modeTemps" :value="temps">{{ temps }}</ion-select-option>
+            <ion-select-option :key="temps" v-for="temps in modeTemps" :value="temps">{{ temps }}</ion-select-option>
           </ion-select>
         </ion-item>
-        <ion-item v-for="sujet in currentSujets">
+        <ion-item :key="sujet" v-for="sujet in currentSujets">
           <ion-label>
             <p>{{ sujet }}</p>
           </ion-label>
@@ -182,8 +182,9 @@ import {getWordDocument} from "@/functions/dictionnary";
 import {isWordStarred, starWord} from "@/functions/favorites";
 import {Share} from "@capacitor/share";
 import {RemedeConjugateDocument, RemedeWordDocument} from "@/functions/types/remede";
-import {useIonRouter, UseIonRouterResult} from "@ionic/vue";
+import {useIonRouter} from "@ionic/vue";
 import {defineComponent} from "vue";
+import {navigateBackFunction} from "@/functions/types/utils";
 
 export default defineComponent({
   props: ['motRemede'],
@@ -213,7 +214,7 @@ export default defineComponent({
       } as RemedeWordDocument,
       notFound: false,
       stared: false,
-      navigateBack: () => "" as Function
+      navigateBack: () => "" as navigateBackFunction
     }
   },
   mounted() {

app/src/functions/database.ts

@@ -5,7 +5,7 @@ import {toastController} from "@ionic/vue";
 async function openDatabase() {
     try {
         const SQL = await initSqlJS({
-            locateFile: file => `/sql-wasm.wasm`
+            locateFile: () => `/sql-wasm.wasm`
         })
         const raw = await getRawDictionary()
         return new SQL.Database(raw)

app/src/functions/favorites.ts

@@ -1,6 +1,6 @@
 
 function starWord(word: string) {
-    let starredWords = JSON.parse(localStorage.getItem('userStars') || '[]') as Array<string>
+    const starredWords = JSON.parse(localStorage.getItem('userStars') || '[]') as Array<string>
     if (!starredWords.includes(word)) {
         starredWords.push(word)
     } else {
@@ -10,7 +10,7 @@ function starWord(word: string) {
 }
 
 function isWordStarred(word: string) {
-    let starredWords = JSON.parse(localStorage.getItem('userStars') || '[]') as Array<string>
+    const starredWords = JSON.parse(localStorage.getItem('userStars') || '[]') as Array<string>
     return starredWords.includes(word)
 }
 

app/src/functions/offline.ts

@@ -63,6 +63,15 @@ async function deleteDictionary() {
 
 
 async function getRawDictionary() {
+    if (!Capacitor.isNativePlatform()) {
+        const file = await Filesystem.readFile({
+            path: 'remedeSQLite.db',
+            directory: Directory.Data
+        })
+
+        return await file.data.arrayBuffer().then(buf => new Uint8Array(buf))
+    }
+
     const path = (await getOfflineDictionaryStatus()).path
     const newSrc = Capacitor.convertFileSrc(`${path}`)
 

app/src/functions/types/remede.ts

@@ -1,3 +1,9 @@
+interface RemedeSheet {
+    nom: string
+    description: string
+    contenu: string
+    tags: string[]
+}
 
 interface RemedeWordDefinition {
     genre: string | string[]
@@ -56,5 +62,6 @@ export type {
     RemedeDictionary,
     RemedeDictionaryIndex,
     RemedeWordDocument,
-    RemedeConjugateDocument
+    RemedeConjugateDocument,
+    RemedeSheet
 }

app/src/functions/types/reverso.ts

@@ -9,8 +9,8 @@ interface ReversoCorrection {
     longDescription: string
     mistakeText: string
     suggestions: ReversoCorrectionSuggestion[]
-    startIndex: Number
-    endIndex: Number
+    startIndex: number
+    endIndex: number
 }
 
 interface ExplainSegment {

app/src/functions/types/utils.ts

@@ -0,0 +1,5 @@
+type navigateBackFunction = () => void
+
+export type {
+    navigateBackFunction
+}

app/src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Outlet from "@/Outlet.vue";
+import Outlet from "@/AppOutlet.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {

app/src/views/CorrectionPage.vue

@@ -43,7 +43,7 @@
             {{ corrected }}
           </div>
           <div v-else class="content ion-padding-bottom">
-            <span v-for="segment in explainSegments" :class="segment.correction ? 'correction': 'sentencePart'">
+            <span :key="segment" v-for="segment in explainSegments" :class="segment.correction ? 'correction': 'sentencePart'">
               <span v-if="segment.correction">
                 <ion-text :id="`correction-${corrections.indexOf(segment.correction)}`" :class="`error ${segment.correction.type}`">{{ segment.correction.mistakeText }}</ion-text>
                 <ion-popover :trigger="`correction-${corrections.indexOf(segment.correction)}`" trigger-action="click">
@@ -56,7 +56,7 @@
                     <ion-label>
                       <ion-text color="medium">Remplacer par</ion-text>
                       <br>
-                      <ion-text @click="explainSegments[explainSegments.indexOf(segment)] = { correction: false, text: suggested.text }" color="primary" v-for="suggested in segment.correction.suggestions">{{ suggested.text }}<br></ion-text>
+                      <ion-text @click="explainSegments[explainSegments.indexOf(segment)] = { correction: false, text: suggested.text }" color="primary" :key="suggested" v-for="suggested in segment.correction.suggestions">{{ suggested.text }}<br></ion-text>
                     </ion-label>
                   </ion-content>
                 </ion-popover>
@@ -148,9 +148,9 @@ export default {
       }).then(resp => resp.json()).then(response => {
         this.corrections = response.corrections
         this.corrected = response.text
-        let originalText = this.content
+        const originalText = this.content
         let lastIndex = 0
-        let segmentedText = [] as ExplainSegment[]
+        const segmentedText = [] as ExplainSegment[]
         for (const correction of this.corrections) {
           const startIndex = correction.startIndex
           const endIndex = correction.endIndex

app/src/views/FavoritesPage.vue

@@ -16,7 +16,7 @@
       </ion-header>
 
       <ion-list inset>
-        <ion-nav-link v-for="word in starredWords" :component="WordModal" router-direction="forward" :component-props="{ motRemede: word }">
+        <ion-nav-link :key="word" v-for="word in starredWords" :component="WordModal" router-direction="forward" :component-props="{ motRemede: word }">
           <ion-item color="light">
             <ion-icon color="primary" :icon="bookmark" @click="starWord(word); refresh()" slot="start"/>
             <ion-label>

app/src/views/FichesPage.vue

@@ -21,12 +21,12 @@
               <ion-label>Filtres</ion-label>
             </ion-chip>
             <ion-popover alignment="center" trigger="open-filters" trigger-action="click">
-              <ion-chip class="filter" @click="addFilter(filter)" :color="getTagColor(filter)" v-for="filter in availableFilters">
+              <ion-chip :key="filter" class="filter" @click="addFilter(filter)" :color="getTagColor(filter)" v-for="filter in availableFilters">
                 {{ filter }}
               </ion-chip>
             </ion-popover>
 
-            <ion-chip v-for="filter in filters" :color="getTagColor(filter)">
+            <ion-chip :key="filter" v-for="filter in filters" :color="getTagColor(filter)">
               <ion-label>{{ filter }}</ion-label>
               <ion-icon :icon="close" @click="deleteFilter(filter)"></ion-icon>
             </ion-chip>
@@ -40,13 +40,13 @@
       </ion-refresher>
 
       <ion-note class="ion-padding ion-float-end" v-if="failed">Fonctionne seulement avec une connexion internet !</ion-note>
-      <ion-nav-link router-direction="forward" :component="FicheModal" :component-props="sheet" v-for="sheet in sheets">
+      <ion-nav-link router-direction="forward" :key="sheet.nom" :component="FicheModal" :component-props="sheet" v-for="sheet in sheets">
         <ion-list inset>
           <ion-item button color="light" lines="none">
             <ion-label>
               <h1>{{ sheet.nom }}</h1>
               <p>{{ sheet.description }}</p>
-              <ion-badge class="ion-margin-end" :color="getTagColor(tag)" v-for="tag in sheet.tags">{{ tag }}</ion-badge>
+              <ion-badge class="ion-margin-end" :color="getTagColor(tag)" :key="tag" v-for="tag in sheet.tags">{{ tag }}</ion-badge>
             </ion-label>
           </ion-item>
         </ion-list>
@@ -72,19 +72,21 @@ import {
   IonBadge, IonNavLink, IonProgressBar, IonSearchbar
 } from '@ionic/vue';
 import FicheModal from "@/components/FicheModal.vue";
-import {add, close, filterCircleOutline} from "ionicons/icons";
+import {close, filterCircleOutline} from "ionicons/icons";
 </script>
 
 <script lang="ts">
+import {RemedeSheet} from "@/functions/types/remede";
+
 export default {
   data() {
     return {
       loading: true,
       failed: false,
-      sheets: [],
-      all_sheets: [],
-      filters: [],
-      availableFilters: ['orthographe', 'conjugaison', 'grammaire', 'lexique', 'style', 'typographie'],
+      sheets: [] as RemedeSheet[],
+      all_sheets: [] as RemedeSheet[],
+      filters: [] as string[],
+      availableFilters: ['orthographe', 'conjugaison', 'grammaire', 'lexique', 'style', 'typographie'] as string[],
       query: ''
     }
   },

app/src/views/HomePage.vue

@@ -12,7 +12,7 @@
       </ion-toolbar>
       <ion-toolbar :class="`results-wrapper ${results.length > 0 ? '': 'empty'}`">
         <ion-list class="search-results">
-          <ion-nav-link v-for="result in results" router-direction="forward" :component="WordModal" :component-props="{ motRemede: result }">
+          <ion-nav-link :key="result" v-for="result in results" router-direction="forward" :component="WordModal" :component-props="{ motRemede: result }">
             <ion-item class="ion-no-padding" button>
               <ion-label>
                 {{ result }}
@@ -79,6 +79,8 @@ export default {
       results: [] as string[],
       query: '',
       router: useRouter(),
+      // Ignoring linter error about empty function (@typescript-eslint/no-empty-function)
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
       autocompleteTimeout: window.setTimeout(() => {}, 500),
       randomWord: '',
       loading: false,

app/src/views/SettingsPage.vue

@@ -104,8 +104,6 @@ import {deleteDictionary} from "@/functions/offline";
 <script lang="ts">
 
 import {downloadDictionary, getOfflineDictionaryStatus} from "@/functions/offline";
-import {ProgressStatus} from "@capacitor/filesystem";
-import {Capacitor} from "@capacitor/core";
 import {toastController} from "@ionic/vue";
 import {InformationsResponse} from "@/functions/types/api_responses";
 

app/tests/e2e/specs/definition.cy.ts

@@ -0,0 +1,13 @@
+describe('Definition page checker', () => {
+  it('Visits the \'remède\' definition page', () => {
+    cy.visit('/dictionnaire/remède')
+  })
+
+  // it('Checks if the word exist (database is responding and parser correctly)', () => {
+  //   cy.contains('ion-title .remede-font', 'remède')
+  // })
+  //
+  // it('Checks id the definition is right', () => {
+  //   cy.contains('.content ul li span', 'Substance qui sert à guérir un mal ou une maladie')
+  // })
+})