From aa1a26cba1d88f02cf9675573135bae72e21a620 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 16 Feb 2024 10:54:04 +0100
Subject: [PATCH 1/8] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Citati?=
 =?UTF-8?q?onItem`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Citation/CitationItem.vue  | 97 ++++++++++---------
 1 file changed, 53 insertions(+), 44 deletions(-)

diff --git a/client/src/components/Citation/CitationItem.vue b/client/src/components/Citation/CitationItem.vue
index d3fe99c1c852..f673247ae3da 100644
--- a/client/src/components/Citation/CitationItem.vue
+++ b/client/src/components/Citation/CitationItem.vue
@@ -1,55 +1,64 @@
-<template>
-    <div>
-        {{ prefix }}
-        <span v-html="citationHtml" />
-        <a v-if="link" :href="link" target="_blank">Visit Citation <FontAwesomeIcon icon="external-link-alt" /> </a>
-    </div>
-</template>
-
-<script>
+<script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { computed } from "vue";
 
 library.add(faExternalLinkAlt);
 
-export default {
-    components: {
-        FontAwesomeIcon,
-    },
-    props: {
-        citation: {
-            type: Object,
-            required: true,
-        },
-        outputFormat: {
-            type: String,
-            default: "bibliography",
-        },
-        prefix: {
-            type: String,
-            default: "",
-        },
-    },
-    computed: {
-        link() {
-            const citeUrl = this.citation.cite?.data?.[0]?.URL;
-            return citeUrl ? decodeURIComponent(citeUrl) : null;
-        },
-        citationHtml() {
-            const citation = this.citation;
-            const cite = citation.cite;
-            const formattedCitation = cite.format(this.outputFormat, {
-                format: "html",
-                template: "apa",
-                lang: "en-US",
-            });
-            return formattedCitation;
-        },
-    },
-};
+interface Props {
+    citation: {
+        cite: {
+            data: {
+                URL: string;
+            }[];
+            format: (
+                format: string,
+                options: {
+                    format: string;
+                    template: string;
+                    lang: string;
+                }
+            ) => string;
+        };
+    };
+    outputFormat?: string;
+    prefix?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    outputFormat: "bibliography",
+    prefix: "",
+});
+
+const link = computed(() => {
+    const citeUrl = props.citation.cite?.data?.[0]?.URL;
+    return citeUrl ? decodeURIComponent(citeUrl) : null;
+});
+const citationHtml = computed(() => {
+    const citation = props.citation;
+    const cite = citation.cite;
+    const formattedCitation = cite.format(props.outputFormat, {
+        format: "html",
+        template: "apa",
+        lang: "en-US",
+    });
+    return formattedCitation;
+});
 </script>
 
+<template>
+    <div>
+        {{ prefix }}
+        <span v-html="citationHtml" />
+
+        <a v-if="link" :href="link" target="_blank">
+            Visit Citation
+            <FontAwesomeIcon :icon="faExternalLinkAlt" />
+        </a>
+    </div>
+</template>
+
 <style>
 .csl-bib-body {
     display: inline;

From 3bd3a2fa5b0d3585f2e47c6ad8458c2fe7d11d6e Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 16 Feb 2024 10:54:43 +0100
Subject: [PATCH 2/8] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Citati?=
 =?UTF-8?q?onList`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Citation/CitationsList.vue | 149 ++++++++----------
 1 file changed, 67 insertions(+), 82 deletions(-)

diff --git a/client/src/components/Citation/CitationsList.vue b/client/src/components/Citation/CitationsList.vue
index ab865cac9a29..a8400013a13c 100644
--- a/client/src/components/Citation/CitationsList.vue
+++ b/client/src/components/Citation/CitationsList.vue
@@ -1,23 +1,71 @@
+<script setup lang="ts">
+import { BButton, BCard, BCollapse, BNav, BNavItem } from "bootstrap-vue";
+import { onMounted, onUpdated, ref } from "vue";
+
+import { getCitations } from "@/components/Citation/services";
+import { useConfig } from "@/composables/config";
+
+import CitationItem from "@/components/Citation/CitationItem.vue";
+
+const outputFormats = Object.freeze({
+    CITATION: "bibliography",
+    BIBTEX: "bibtex",
+    RAW: "raw",
+});
+
+interface Props {
+    id: string;
+    source: string;
+    simple: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    simple: false,
+});
+
+const { config } = useConfig(true);
+
+const emit = defineEmits(["rendered", "show", "shown", "hide", "hidden"]);
+
+const outputFormat = ref(outputFormats.CITATION);
+const citations = ref<{ raw: any; cite: any }[]>([]);
+
+onUpdated(() => {
+    emit("rendered");
+});
+
+onMounted(async () => {
+    try {
+        citations.value = await getCitations(props.source, props.id);
+    } catch (e) {
+        console.error(e);
+    }
+});
+</script>
+
 <template>
     <div>
-        <b-card v-if="!simple" class="citation-card" header-tag="nav">
+        <BCard v-if="!simple" class="citation-card" header-tag="nav">
             <template v-slot:header>
-                <b-nav card-header tabs>
-                    <b-nav-item
+                <BNav card-header tabs>
+                    <BNavItem
                         :active="outputFormat === outputFormats.CITATION"
-                        @click="outputFormat = outputFormats.CITATION"
-                        >Citations (APA)</b-nav-item
-                    >
-                    <b-nav-item
+                        @click="outputFormat = outputFormats.CITATION">
+                        Citations (APA)
+                    </BNavItem>
+
+                    <BNavItem
                         :active="outputFormat === outputFormats.BIBTEX"
-                        @click="outputFormat = outputFormats.BIBTEX"
-                        >BibTeX</b-nav-item
-                    >
-                </b-nav>
+                        @click="outputFormat = outputFormats.BIBTEX">
+                        BibTeX
+                    </BNavItem>
+                </BNav>
             </template>
+
             <div v-if="source === 'histories'" class="infomessage">
                 <div v-html="config.citations_export_message_html"></div>
             </div>
+
             <div class="citations-formatted">
                 <CitationItem
                     v-for="(citation, index) in citations"
@@ -26,94 +74,31 @@
                     :citation="citation"
                     :output-format="outputFormat" />
             </div>
-        </b-card>
+        </BCard>
         <div v-else-if="citations.length">
-            <b-btn v-b-toggle="id" variant="primary">Citations</b-btn>
-            <b-collapse
+            <BButton v-b-toggle="id" variant="primary">Citations</BButton>
+
+            <BCollapse
                 :id="id.replace(/ /g, '_')"
                 class="mt-2"
                 @show="$emit('show')"
                 @shown="$emit('shown')"
                 @hide="$emit('hide')"
                 @hidden="$emit('hidden')">
-                <b-card>
+                <BCard>
                     <CitationItem
                         v-for="(citation, index) in citations"
                         :key="index"
                         class="formatted-reference"
                         :citation="citation"
                         :output-format="outputFormat" />
-                </b-card>
-            </b-collapse>
+                </BCard>
+            </BCollapse>
         </div>
     </div>
 </template>
-<script>
-import BootstrapVue from "bootstrap-vue";
-import Vue from "vue";
-
-import { useConfig } from "@/composables/config";
 
-import CitationItem from "./CitationItem";
-import { getCitations } from "./services";
-
-Vue.use(BootstrapVue);
-
-const outputFormats = Object.freeze({
-    CITATION: "bibliography",
-    BIBTEX: "bibtex",
-    RAW: "raw",
-});
-
-export default {
-    components: {
-        CitationItem,
-    },
-    props: {
-        source: {
-            type: String,
-            required: true,
-        },
-        id: {
-            type: String,
-            required: true,
-        },
-        simple: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-    },
-    setup() {
-        const { config } = useConfig(true);
-        return { config };
-    },
-    data() {
-        return {
-            citations: [],
-            errors: [],
-            showCollapse: false,
-            outputFormats,
-            outputFormat: outputFormats.CITATION,
-        };
-    },
-    updated() {
-        this.$nextTick(() => {
-            this.$emit("rendered");
-        });
-    },
-    created() {
-        getCitations(this.source, this.id)
-            .then((citations) => {
-                this.citations = citations;
-            })
-            .catch((e) => {
-                console.error(e);
-            });
-    },
-};
-</script>
-<style>
+<style scoped lang="scss">
 .citation-card .card-header .nav-tabs {
     margin-bottom: -0.75rem !important;
 }

From 99cf5437025b4120bbd5cd2014cce1f2a6b5d017 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 16 Feb 2024 11:02:24 +0100
Subject: [PATCH 3/8] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Citati?=
 =?UTF-8?q?on/services`=20to=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Citation/{services.js => services.ts} | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)
 rename client/src/components/Citation/{services.js => services.ts} (77%)

diff --git a/client/src/components/Citation/services.js b/client/src/components/Citation/services.ts
similarity index 77%
rename from client/src/components/Citation/services.js
rename to client/src/components/Citation/services.ts
index 3dae59420e38..5103daa2976b 100644
--- a/client/src/components/Citation/services.js
+++ b/client/src/components/Citation/services.ts
@@ -1,13 +1,14 @@
 import axios from "axios";
-import { getAppRoot } from "onload/loadConfig";
-import { rethrowSimple } from "utils/simple-error";
 
-export async function getCitations(source, id) {
+import { getAppRoot } from "@/onload/loadConfig";
+import { rethrowSimple } from "@/utils/simple-error";
+
+export async function getCitations(source: string, id: string) {
     try {
         const request = await axios.get(`${getAppRoot()}api/${source}/${id}/citations`);
         const rawCitations = request.data;
         const citations = [];
-        const { Cite } = await import(/* webpackChunkName: "cite" */ "./cite.js");
+        const { Cite } = await import(/* webpackChunkName: "cite" */ "./cite");
         for (const rawCitation of rawCitations) {
             try {
                 const cite = new Cite(rawCitation.content);

From 6118b177f96c412e59b2d5a814e677d820b8e971 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 16 Feb 2024 11:02:45 +0100
Subject: [PATCH 4/8] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Citati?=
 =?UTF-8?q?on/services`=20tests=20to=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Citation/{services.test.js => services.test.ts}         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)
 rename client/src/components/Citation/{services.test.js => services.test.ts} (92%)

diff --git a/client/src/components/Citation/services.test.js b/client/src/components/Citation/services.test.ts
similarity index 92%
rename from client/src/components/Citation/services.test.js
rename to client/src/components/Citation/services.test.ts
index 5e0199408899..1821863d0fee 100644
--- a/client/src/components/Citation/services.test.js
+++ b/client/src/components/Citation/services.test.ts
@@ -3,7 +3,7 @@
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 
-import { getCitations } from "./services.js";
+import { getCitations } from "./services";
 
 const mockCitationResponseJson = [
     {
@@ -14,7 +14,7 @@ const mockCitationResponseJson = [
 ];
 
 describe("Citation", () => {
-    let axiosMock;
+    let axiosMock: MockAdapter;
 
     beforeEach(() => {
         axiosMock = new MockAdapter(axios);
@@ -28,7 +28,7 @@ describe("Citation", () => {
         it("Should fetch and create a citation object", async () => {
             axiosMock.onGet(`/api/tools/random_lines1/citations`).reply(200, mockCitationResponseJson);
             const citations = await getCitations("tools", "random_lines1");
-            const formattedCitation = citations[0].cite.format("bibliography", {
+            const formattedCitation = citations?.[0]?.cite.format("bibliography", {
                 format: "html",
                 template: "apa",
                 lang: "en-US",

From b2b9fe07d74dcf68cb058f8eb30bd492b50239e8 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 16 Feb 2024 13:23:39 +0100
Subject: [PATCH 5/8] =?UTF-8?q?=E2=9C=A8:=20add=20`Citation`=20type=20to?=
 =?UTF-8?q?=20`api/Citation`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Citation/index.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 client/src/components/Citation/index.ts

diff --git a/client/src/components/Citation/index.ts b/client/src/components/Citation/index.ts
new file mode 100644
index 000000000000..64ed5a2b3639
--- /dev/null
+++ b/client/src/components/Citation/index.ts
@@ -0,0 +1,16 @@
+export interface Citation {
+    raw: string;
+    cite: {
+        data: {
+            URL: string;
+        }[];
+        format: (
+            format: string,
+            options: {
+                format: string;
+                template: string;
+                lang: string;
+            }
+        ) => string;
+    };
+}

From 4faca616d67071f2bcbae0235dc73db1ca45e11d Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 16 Feb 2024 13:24:41 +0100
Subject: [PATCH 6/8] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20use=20`Citation`?=
 =?UTF-8?q?=20type=20in=20`CitationItem`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Citation/CitationItem.vue   | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Citation/CitationItem.vue b/client/src/components/Citation/CitationItem.vue
index f673247ae3da..82894f285641 100644
--- a/client/src/components/Citation/CitationItem.vue
+++ b/client/src/components/Citation/CitationItem.vue
@@ -4,24 +4,12 @@ import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
+import { Citation } from ".";
+
 library.add(faExternalLinkAlt);
 
 interface Props {
-    citation: {
-        cite: {
-            data: {
-                URL: string;
-            }[];
-            format: (
-                format: string,
-                options: {
-                    format: string;
-                    template: string;
-                    lang: string;
-                }
-            ) => string;
-        };
-    };
+    citation: Citation;
     outputFormat?: string;
     prefix?: string;
 }

From e394572fae62d1de96617055d29d4b7f72e8ee64 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 16 Feb 2024 13:24:56 +0100
Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20use=20`Citation`?=
 =?UTF-8?q?=20type=20in=20`CitationList`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Citation/CitationsList.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Citation/CitationsList.vue b/client/src/components/Citation/CitationsList.vue
index a8400013a13c..8668cb84e64e 100644
--- a/client/src/components/Citation/CitationsList.vue
+++ b/client/src/components/Citation/CitationsList.vue
@@ -5,6 +5,8 @@ import { onMounted, onUpdated, ref } from "vue";
 import { getCitations } from "@/components/Citation/services";
 import { useConfig } from "@/composables/config";
 
+import { type Citation } from ".";
+
 import CitationItem from "@/components/Citation/CitationItem.vue";
 
 const outputFormats = Object.freeze({
@@ -28,7 +30,7 @@ const { config } = useConfig(true);
 const emit = defineEmits(["rendered", "show", "shown", "hide", "hidden"]);
 
 const outputFormat = ref(outputFormats.CITATION);
-const citations = ref<{ raw: any; cite: any }[]>([]);
+const citations = ref<Citation[]>([]);
 
 onUpdated(() => {
     emit("rendered");

From a16de7bdd37cd8e75d3ec096e5c4f3772db6e0ae Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 16 Feb 2024 13:25:17 +0100
Subject: [PATCH 8/8] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20use=20`Citation`?=
 =?UTF-8?q?=20type=20in=20`Citation/services`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Citation/services.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Citation/services.ts b/client/src/components/Citation/services.ts
index 5103daa2976b..68d44e0a24af 100644
--- a/client/src/components/Citation/services.ts
+++ b/client/src/components/Citation/services.ts
@@ -3,7 +3,9 @@ import axios from "axios";
 import { getAppRoot } from "@/onload/loadConfig";
 import { rethrowSimple } from "@/utils/simple-error";
 
-export async function getCitations(source: string, id: string) {
+import { type Citation } from ".";
+
+export async function getCitations(source: string, id: string): Promise<Citation[]> {
     try {
         const request = await axios.get(`${getAppRoot()}api/${source}/${id}/citations`);
         const rawCitations = request.data;