Merge pull request #358 from SpiritFour/fixes

Fixes

.eslintignore

@@ -1,2 +1,3 @@
 jest.config.js
 test/*
+static/sw.js

.github/workflows/deployment-dev.yml

@@ -16,7 +16,10 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-      - run: yarn install && yarn ci-dev-build
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - run: pnpm install && pnpm ci-dev-build
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       - uses: actions/setup-node@v3

.github/workflows/deployment-live.yml

@@ -14,10 +14,13 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - name: Install and Build 🔧
         run: |
-          yarn install
-          yarn nuxt generate
+          pnpm install
+          pnpm nuxt generate
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       - name: Deploy 🚀

.github/workflows/deployment-pr.yml

@@ -16,7 +16,10 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-      - run: yarn install && yarn ci-dev-build
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - run: pnpm install && pnpm ci-dev-build
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       - uses: actions/setup-node@v3

.github/workflows/husky.yml

@@ -20,12 +20,13 @@ jobs:
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-      - name: install yarn
-        run: npm install -g yarn
       - name: install dependencies
-        run: yarn install
-      - run: yarn run prettier --write .
-      - run: yarn run eslint .
+        run: pnpm install
+      - run: pnpm exec prettier --write .
+      - run: pnpm exec eslint .

.nvmrc

@@ -0,0 +1 @@
+16

.prettierignore

@@ -2,3 +2,4 @@
 *.md
 node_modules
 coverage
+pnpm-lock.yaml

.python-version

@@ -0,0 +1 @@
+3.11

.tool-versions

@@ -0,0 +1,3 @@
+nodejs 16.20.2
+python 3.11.9
+pnpm 8.15.8

README.md

@@ -19,20 +19,21 @@ Please report bugs in the github issues.
 # Running whatsanalyze locally
 
 ## Build Setup
+We use node 16, with 18 we had issues with our linter. The project also needs python to be installed, but the version needs to be `3.11` or lower.
 
 ```bash
 # install dependencies
-$ yarn install
+$ pnpm install
 
 # serve with hot reload at localhost:3000
-$ yarn dev
+$ pnpm dev
 
 # build for production and launch server
-$ yarn build
-$ yarn start
+$ pnpm build
+$ pnpm start
 
 # generate static project
-$ yarn generate
+$ pnpm generate
 ```
 
 Search for prettier and eslint in pycharm to set it up on saving a file. 

components/About.vue

@@ -23,8 +23,11 @@
         sm="6"
       >
         <v-row justify="center">
-          <v-img :lazy-src="person.image" :src="person.image"
-                 style="height: 120px; max-width: 120px; border-radius: 60px" />
+          <v-img
+            :lazy-src="person.image"
+            :src="person.image"
+            style="height: 120px; max-width: 120px; border-radius: 60px"
+          />
         </v-row>
         <v-row class="text-h5 font-weight-bold" justify="center">
           {{ person.name }}
@@ -40,13 +43,13 @@
       </v-col>
     </v-row>
     <v-row align="center" class="mx-md-10">
-      <v-col
-        v-for="university in universities"
-        :key="university"
-        cols="3"
-      >
+      <v-col v-for="university in universities" :key="university" cols="3">
         <v-row justify="center">
-          <v-img :lazy-src="university" :src="university" style="width: 100%; max-width: 100px" />
+          <v-img
+            :lazy-src="university"
+            :src="university"
+            style="width: 100%; max-width: 100px"
+          />
         </v-row>
       </v-col>
     </v-row>
@@ -66,20 +69,20 @@ export default {
         // eslint-disable-next-line no-undef
         require("~/assets/img/uni/Otago_Logo.png"),
         // eslint-disable-next-line no-undef
-        require("~/assets/img/uni/Stockholm_Logo.png")
+        require("~/assets/img/uni/Stockholm_Logo.png"),
       ],
       persons: [
         {
           // eslint-disable-next-line no-undef
           image: require("~/assets/img/us/Sebastian_WA.jpg"),
           name: "Sebastian Fellner",
-          description: ["Computer Science MSc", "AI Enthusiast"]
+          description: ["Computer Science MSc", "AI Enthusiast"],
         },
         {
           // eslint-disable-next-line no-undef
           image: require("~/assets/img/us/Paul_WA.jpg"),
           name: "Paul Kehnel",
-          description: ["Computer Science  MSc", "Bicycle Dude"]
+          description: ["Computer Science  MSc", "Bicycle Dude"],
         },
         {
           // eslint-disable-next-line no-undef
@@ -91,11 +94,11 @@ export default {
           // eslint-disable-next-line no-undef
           image: require("~/assets/img/us/Moritz_WA.jpeg"),
           name: "Moritz Wolf",
-          description: ["Robotics MSc", "Outdoor Specialist"]
-        }
-      ]
+          description: ["Robotics MSc", "Outdoor Specialist"],
+        },
+      ],
     };
-  }
+  },
 };
 </script>
 

components/ArrowDown.vue

@@ -1,7 +1,12 @@
 <template>
-  <v-icon :class="{'arrow-down':animate}" class="py-2" color="rgba(0,0,0,0.8)" content-class="elevation-0"
-          size="50"
-          @click="goToExportExplainer">
+  <v-icon
+    :class="{ 'arrow-down': animate }"
+    class="py-2"
+    color="rgba(0,0,0,0.8)"
+    content-class="elevation-0"
+    size="50"
+    @click="goToExportExplainer"
+  >
     mdi-chevron-down
   </v-icon>
   <!--  todo hide ugly button grey thingy after pressing-->
@@ -14,8 +19,8 @@ export default {
   methods: {
     goToExportExplainer() {
       this.$vuetify.goTo(".exportexplainer", { duration: 300 });
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -35,4 +40,4 @@ export default {
     opacity: 0.5;
   }
 }
-</style>
+</style>

components/ChatVisualization/Chat.vue

@@ -83,10 +83,7 @@
         "
         class="my-8"
       >
-        <v-btn
-          class="ma-auto white--text btn-color"
-          @click="nextMessages"
-        >
+        <v-btn class="ma-auto white--text btn-color" @click="nextMessages">
           Load next {{ offset }} messages
         </v-btn>
       </v-row>
@@ -106,18 +103,18 @@ export default {
     return {
       startIdx: 0,
       selectedEgo: "",
-      offset: 20
+      offset: 20,
     };
   },
   methods: {
     parseMessage(message) {
       const validUrl = new RegExp(
         "(https?:\\/\\/)?" + // protocol
-        "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
-        "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
-        "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
-        "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
-        "(\\#[-a-z\\d_]*)?",
+          "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
+          "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
+          "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
+          "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
+          "(\\#[-a-z\\d_]*)?",
         "i"
       );
       const words = message.split(" ");
@@ -152,8 +149,8 @@ export default {
       this.startIdx += this.offset;
       const container = this.$el.querySelector("#chat");
       container.scrollTop = 0;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -171,7 +168,7 @@ export default {
   overflow: scroll;
   overflow-x: hidden;
   background-color: rgb(13, 20, 24);
-  background-image: url("https://whatsapp-chat-parser.netlify.app/static/media/bg-dark.ffb9199c.png");
+  background-image: url("/dark-bg.jpg");
 }
 
 .myMessage {

components/ChatVisualization/PdfDownloadPopup.vue

@@ -82,12 +82,9 @@
         <v-card-text class="pt-3 text-body-1 font-weight-bold">
           Supporting us keeps the 💻 running 🎉
         </v-card-text>
-        <v-progress-linear
-          v-show="isLoading"
-          class="mb-2"
-          color="blue"
-          indeterminate
-        ></v-progress-linear>
+
+        <div v-if="isLoading" class="loading mb-2" />
+
         <v-row align="center" class="pt-6 pr-10" cols="12" justify="center">
           <ChatVisualizationPayment
             :amount="price"

components/Cta.vue

@@ -32,27 +32,27 @@ export default {
     showImage: { default: false, type: Boolean },
     to: { default: "", type: String },
     buttonTxt: {
-      default: function() {
+      default: function () {
         return "analyzeYourChat";
       },
-      type: String
+      type: String,
     },
     text: {
-      default: function() {
+      default: function () {
         return "analyzeYourChatLong";
       },
-      type: String
+      type: String,
     },
     title: {
       default: function () {
         return "analyzeYourChatTitle";
       },
-      type: String
-    }
+      type: String,
+    },
   },
   data() {
     return {
-      GTAG_INTERACTION
+      GTAG_INTERACTION,
     };
   },
   methods: {
@@ -62,7 +62,7 @@ export default {
         this.$vuetify.goTo(".filehandler", { duration: 300, offset: 300 });
       }
     },
-    gtagEvent
-  }
+    gtagEvent,
+  },
 };
-</script>
+</script>

components/DownloadPopup.vue

@@ -22,7 +22,7 @@
             </v-btn>
           </template>
 
-          <v-card>
+          <v-card class="overflow-hidden">
             <v-card-title class="headline cyan" style="word-break: normal">
               <div class="text-h4 font-weight-bold">{{ $t("didWeMake") }}</div>
               <span>{{ $t("buyUsCoffee") }}</span>
@@ -65,12 +65,8 @@
               </form>
             </v-row>
             <v-divider></v-divider>
-            <v-progress-linear
-              v-if="loading"
-              class="mb-0"
-              color="blue"
-              indeterminate
-            ></v-progress-linear>
+            <div v-if="loading" class="loading" />
+
             <v-card-actions>
               <v-spacer></v-spacer>
               <v-btn color="red darken-1" text @click="dialog = false">