From 649bccb01e0606405e3de97688dd41b059bbf358 Mon Sep 17 00:00:00 2001
From: grimhilt <grimhilt@users.noreply.github.com>
Date: Fri, 7 Apr 2023 15:15:49 +0200
Subject: [PATCH] move message to typescript

---
 front/package-lock.json          | 114 +++++++++++++++++++++++++++++++
 front/package.json               |   1 +
 front/src/store/models/model.ts  |   2 +
 front/src/utils/array.ts         |   4 +-
 front/src/views/room/Message.vue |  48 ++++++-------
 front/yarn.lock                  |  39 +++++++++++
 6 files changed, 182 insertions(+), 26 deletions(-)

diff --git a/front/package-lock.json b/front/package-lock.json
index 22c4d39..e360476 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -16,6 +16,7 @@
         "@babel/core": "^7.12.16",
         "@babel/eslint-parser": "^7.12.16",
         "@babel/preset-typescript": "^7.21.4",
+        "@types/dompurify": "^3.0.1",
         "@types/jest": "^27.0.1",
         "@typescript-eslint/eslint-plugin": "^5.4.0",
         "@typescript-eslint/parser": "^5.4.0",
@@ -2816,6 +2817,17 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.1",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/dompurify/-/dompurify-3.0.1.tgz",
+      "integrity": "sha512-ubq8VKmf8W+U48jUOiZO4BoSGS7NnbITPMvrF+7HgMN4L+eezCKv8QBPB8p3o4YPicLMmNeTyDkE5X4c2ViHJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/jsdom": "*",
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.21.0",
       "resolved": "https://registry.npmmirror.com/@types/eslint/-/eslint-8.21.0.tgz",
@@ -2935,6 +2947,44 @@
         "pretty-format": "^27.0.0"
       }
     },
+    "node_modules/@types/jsdom": {
+      "version": "21.1.1",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/jsdom/-/jsdom-21.1.1.tgz",
+      "integrity": "sha512-cZFuoVLtzKP3gmq9eNosUL1R50U+USkbLtUQ1bYVgl/lKp0FZM7Cq4aIHAL8oIvQ17uSHi7jXPtfDOdjPwBE7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "parse5": "^7.0.0"
+      }
+    },
+    "node_modules/@types/jsdom/node_modules/entities": {
+      "version": "4.4.0",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@types/jsdom/node_modules/parse5": {
+      "version": "7.1.2",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/parse5/-/parse5-7.1.2.tgz",
+      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -3064,6 +3114,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.2",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/tough-cookie/-/tough-cookie-4.0.2.tgz",
+      "integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.3",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/trusted-types/-/trusted-types-2.0.3.tgz",
+      "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.16",
       "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
@@ -17897,6 +17961,16 @@
         "@types/node": "*"
       }
     },
+    "@types/dompurify": {
+      "version": "3.0.1",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/dompurify/-/dompurify-3.0.1.tgz",
+      "integrity": "sha512-ubq8VKmf8W+U48jUOiZO4BoSGS7NnbITPMvrF+7HgMN4L+eezCKv8QBPB8p3o4YPicLMmNeTyDkE5X4c2ViHJQ==",
+      "dev": true,
+      "requires": {
+        "@types/jsdom": "*",
+        "@types/trusted-types": "*"
+      }
+    },
     "@types/eslint": {
       "version": "8.21.0",
       "resolved": "https://registry.npmmirror.com/@types/eslint/-/eslint-8.21.0.tgz",
@@ -18004,6 +18078,34 @@
         "pretty-format": "^27.0.0"
       }
     },
+    "@types/jsdom": {
+      "version": "21.1.1",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/jsdom/-/jsdom-21.1.1.tgz",
+      "integrity": "sha512-cZFuoVLtzKP3gmq9eNosUL1R50U+USkbLtUQ1bYVgl/lKp0FZM7Cq4aIHAL8oIvQ17uSHi7jXPtfDOdjPwBE7A==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "parse5": "^7.0.0"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "4.4.0",
+          "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/entities/-/entities-4.4.0.tgz",
+          "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+          "dev": true
+        },
+        "parse5": {
+          "version": "7.1.2",
+          "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/parse5/-/parse5-7.1.2.tgz",
+          "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+          "dev": true,
+          "requires": {
+            "entities": "^4.4.0"
+          }
+        }
+      }
+    },
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -18116,6 +18218,18 @@
       "integrity": "sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==",
       "dev": true
     },
+    "@types/tough-cookie": {
+      "version": "4.0.2",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/tough-cookie/-/tough-cookie-4.0.2.tgz",
+      "integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==",
+      "dev": true
+    },
+    "@types/trusted-types": {
+      "version": "2.0.3",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/trusted-types/-/trusted-types-2.0.3.tgz",
+      "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==",
+      "dev": true
+    },
     "@types/web-bluetooth": {
       "version": "0.0.16",
       "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
diff --git a/front/package.json b/front/package.json
index 3675105..95609e9 100644
--- a/front/package.json
+++ b/front/package.json
@@ -17,6 +17,7 @@
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
     "@babel/preset-typescript": "^7.21.4",
+    "@types/dompurify": "^3.0.1",
     "@types/jest": "^27.0.1",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
diff --git a/front/src/store/models/model.ts b/front/src/store/models/model.ts
index eb3dfae..cc113cf 100644
--- a/front/src/store/models/model.ts
+++ b/front/src/store/models/model.ts
@@ -8,6 +8,8 @@ export enum RoomType {
 
 export interface Message {
     fromA: string;
+    toA: string;
+    ccA?: string;
     subject: string;
     content: string;
     date: string;
diff --git a/front/src/utils/array.ts b/front/src/utils/array.ts
index 0841a6f..901b6ac 100644
--- a/front/src/utils/array.ts
+++ b/front/src/utils/array.ts
@@ -1,5 +1,5 @@
-export function removeDuplicates(array: []) {
-    const unique: [] = [];
+export function removeDuplicates(array: any[]) {
+    const unique: any[] = [];
     for (let i = 0; i < array.length; i++) {
         if (!unique.includes(array[i])) {
             unique.push(array[i]);
diff --git a/front/src/views/room/Message.vue b/front/src/views/room/Message.vue
index bf12438..72470e4 100644
--- a/front/src/views/room/Message.vue
+++ b/front/src/views/room/Message.vue
@@ -1,23 +1,19 @@
-<script setup>
-import { defineProps, onMounted, ref, watch } from "vue";
+<script setup lang="ts">
+import { defineProps, onMounted, ref, watch, PropType, Prop } from "vue";
 import { decodeEmojis } from "../../utils/string";
 import { removeDuplicates } from "../../utils/array";
 import DOMPurify from "dompurify";
+import { Address, Message } from "@/store/models/model";
 
 const props = defineProps({
-    data: {
-        fromA: String,
-        subject: String,
-        content: String,
-        date: String,
-    },
-    members: Array,
+    data: Object as PropType<Message>,
+    members: Array as PropType<Address[]>,
 });
-const iframe = ref(null);
+const iframe = ref<HTMLIFrameElement>();
 
 // todo dompurify
 // background vs color
-const htmlDefault = (html) => {
+const htmlDefault = (html: string) => {
     return `
         <!DOCTYPE html>
         <html lang="en">
@@ -34,8 +30,11 @@ const htmlDefault = (html) => {
     `;
 };
 
-function setIframeContent(content) {
-    const doc = iframe.value.contentDocument || iframe.value.contentWindow.document;
+function setIframeContent(content: string | undefined) {
+    if (!iframe.value) return;
+    if (!content) return;
+    const doc = iframe.value.contentDocument || iframe.value.contentWindow?.document;
+    if (!doc) return;
     const html = DOMPurify.sanitize(content);
     doc.open();
     doc.write(htmlDefault(html));
@@ -44,20 +43,21 @@ function setIframeContent(content) {
 
 watch(
     () => props.data,
-    (newData) => {
-        setIframeContent(newData.content);
+    (newData: Message | undefined) => {
+        setIframeContent(newData?.content);
     },
 );
 
 onMounted(() => {
-    setIframeContent(props.data.content);
+    setIframeContent(props.data?.content);
 });
 
-const displayAddresses = (addressesId) => {
-    addressesId = removeDuplicates(addressesId);
+const displayAddresses = (addressIds: string[] | undefined): string => {
+    if (!addressIds) return "";
+    addressIds = removeDuplicates(addressIds);
     let res = "";
-    addressesId.forEach((addressId) => {
-        const address = props.members.find((member) => member.id == addressId);
+    addressIds.forEach((addressId) => {
+        const address = props.members?.find((member) => member.id === parseInt(addressId));
         if (address) res += address.email;
     });
     return res;
@@ -72,19 +72,19 @@ const displayAddresses = (addressesId) => {
     <div class="message">
         <div id="context">
             <div class="left" id="profile">
-                {{ displayAddresses(props.data.fromA?.split(",")) }} - {{ props.data.fromA }}
+                {{ displayAddresses(props.data?.fromA?.split(",")) }} - {{ props.data?.fromA }}
             </div>
-            <div class="middle">{{ decodeEmojis(props.data.subject) }}</div>
+            <div class="middle">{{ decodeEmojis(props.data?.subject) }}</div>
             <div class="right" id="date">
                 {{
-                    new Date(props.data.date).toLocaleString("en-GB", {
+                    new Date(props.data?.date ?? "").toLocaleString("en-GB", {
                         weekday: "short",
                         year: "numeric",
                         month: "2-digit",
                         day: "2-digit",
                         hour: "2-digit",
                         minute: "2-digit",
-                        timezone: "UTC+1",
+                        timeZone: "Europe/Paris",
                     })
                 }}
             </div>
diff --git a/front/yarn.lock b/front/yarn.lock
index 6353027..0d5056a 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1515,6 +1515,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/dompurify@^3.0.1":
+  version "3.0.1"
+  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/dompurify/-/dompurify-3.0.1.tgz"
+  integrity sha512-ubq8VKmf8W+U48jUOiZO4BoSGS7NnbITPMvrF+7HgMN4L+eezCKv8QBPB8p3o4YPicLMmNeTyDkE5X4c2ViHJQ==
+  dependencies:
+    "@types/jsdom" "*"
+    "@types/trusted-types" "*"
+
 "@types/eslint-scope@^3.7.3":
   version "3.7.4"
   resolved "https://registry.npmmirror.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz"
@@ -1606,6 +1614,15 @@
     jest-matcher-utils "^27.0.0"
     pretty-format "^27.0.0"
 
+"@types/jsdom@*":
+  version "21.1.1"
+  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/jsdom/-/jsdom-21.1.1.tgz"
+  integrity sha512-cZFuoVLtzKP3gmq9eNosUL1R50U+USkbLtUQ1bYVgl/lKp0FZM7Cq4aIHAL8oIvQ17uSHi7jXPtfDOdjPwBE7A==
+  dependencies:
+    "@types/node" "*"
+    "@types/tough-cookie" "*"
+    parse5 "^7.0.0"
+
 "@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz"
@@ -1698,6 +1715,16 @@
   resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz"
   integrity sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==
 
+"@types/tough-cookie@*":
+  version "4.0.2"
+  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/tough-cookie/-/tough-cookie-4.0.2.tgz"
+  integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
+
+"@types/trusted-types@*":
+  version "2.0.3"
+  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/trusted-types/-/trusted-types-2.0.3.tgz"
+  integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==
+
 "@types/web-bluetooth@^0.0.16":
   version "0.0.16"
   resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz"
@@ -3797,6 +3824,11 @@ entities@^2.0.0:
   resolved "https://registry.npmmirror.com/entities/-/entities-2.2.0.tgz"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@^4.4.0:
+  version "4.4.0"
+  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/entities/-/entities-4.4.0.tgz"
+  integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.2.tgz"
@@ -6301,6 +6333,13 @@ parse5@^6.0.1:
   resolved "https://registry.npmmirror.com/parse5/-/parse5-6.0.1.tgz"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
+parse5@^7.0.0:
+  version "7.1.2"
+  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/parse5/-/parse5-7.1.2.tgz"
+  integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==
+  dependencies:
+    entities "^4.4.0"
+
 parse5@6.0.1:
   version "6.0.1"
   resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/parse5/-/parse5-6.0.1.tgz"