From 56af74242dd76ab6024eac89091ce823bc8ff997 Mon Sep 17 00:00:00 2001
From: MMelchor <noreply>
Date: Wed, 25 Oct 2023 14:53:54 +0200
Subject: [PATCH 1/6] feat: [#278] show torrent fields creation date created by
 encoding

    Torrent details page now displays the creation date, created by and encoding fields.
---
 components/torrent/TorrentCreatedByTab.vue    | 46 ++++++++++++++++
 components/torrent/TorrentCreationDateTab.vue | 52 +++++++++++++++++++
 components/torrent/TorrentDetails.vue         |  3 ++
 components/torrent/TorrentEncodingTab.vue     | 46 ++++++++++++++++
 src/helpers/DateConverter.ts                  |  4 ++
 5 files changed, 151 insertions(+)
 create mode 100644 components/torrent/TorrentCreatedByTab.vue
 create mode 100644 components/torrent/TorrentCreationDateTab.vue
 create mode 100644 components/torrent/TorrentEncodingTab.vue
 create mode 100644 src/helpers/DateConverter.ts

diff --git a/components/torrent/TorrentCreatedByTab.vue b/components/torrent/TorrentCreatedByTab.vue
new file mode 100644
index 00000000..d493e650
--- /dev/null
+++ b/components/torrent/TorrentCreatedByTab.vue
@@ -0,0 +1,46 @@
+<template>
+  <div id="torrent-created-by" class="flex flex-col gap-6">
+    <div class="flex flex-row items-center justify-between">
+      <h2 class="mr-1 text-2xl font-medium text-left text-neutral-content/50">
+        Created by
+      </h2>
+      <button
+        class="flex flex-col items-center justify-center w-10 h-10 duration-200 bg-transparent text-base-content/50 hover:text-base-content rounded-xl"
+        @click="collapsed = !collapsed"
+      >
+        <ChevronDownIcon class="w-6" :class="{ 'rotate-90': collapsed }" />
+      </button>
+    </div>
+    <template v-if="!collapsed">
+      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
+        <template v-if="torrent.created_by">
+          <Markdown :source="torrent.created_by" />
+        </template>
+        <template v-else>
+          <span class="italic text-neutral-content">No created by field provided.</span>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from "@heroicons/vue/24/solid";
+import { TorrentResponse } from "torrust-index-types-lib";
+import { PropType } from "vue";
+import { ref } from "#imports";
+import Markdown from "~/components/Markdown.vue";
+
+const collapsed = ref(false);
+
+const props = defineProps({
+  torrent: {
+    type: Object as PropType<TorrentResponse>,
+    required: true
+  }
+});
+</script>
+
+<style scoped>
+
+</style>
diff --git a/components/torrent/TorrentCreationDateTab.vue b/components/torrent/TorrentCreationDateTab.vue
new file mode 100644
index 00000000..f56d26cf
--- /dev/null
+++ b/components/torrent/TorrentCreationDateTab.vue
@@ -0,0 +1,52 @@
+<template>
+  <div id="torrent-creation-date" class="flex flex-col gap-6">
+    <div class="flex flex-row items-center justify-between">
+      <h2 class="mr-1 text-2xl font-medium text-left text-neutral-content/50">
+        Creation Date
+      </h2>
+      <button
+        class="flex flex-col items-center justify-center w-10 h-10 duration-200 bg-transparent text-base-content/50 hover:text-base-content rounded-xl"
+        @click="collapsed = !collapsed"
+      >
+        <ChevronDownIcon class="w-6" :class="{ 'rotate-90': collapsed }" />
+      </button>
+    </div>
+    <template v-if="!collapsed">
+      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
+        <template v-if="torrent.creation_date">
+          <!--<Markdown :source="torrent.name" />-->
+          {{ convertedDate }}
+        </template>
+        <template v-else>
+          <span class="italic text-neutral-content">No creation date provided.</span>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from "@heroicons/vue/24/solid";
+import { TorrentResponse } from "torrust-index-types-lib";
+import { PropType } from "vue";
+import { ref } from "#imports";
+import Markdown from "~/components/Markdown.vue";
+import { epochToUtc } from "~/src/helpers/DateConverter";
+
+const collapsed = ref(false);
+
+const props = defineProps({
+  torrent: {
+    type: Object as PropType<TorrentResponse>,
+    required: true
+  }
+});
+
+// Takes the date in milliseconds/Epoch Time and converts it to human readable format
+const convertedDate = epochToUtc(props.torrent.creation_date);
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/components/torrent/TorrentDetails.vue b/components/torrent/TorrentDetails.vue
index bfd8ca1b..358a2fd6 100644
--- a/components/torrent/TorrentDetails.vue
+++ b/components/torrent/TorrentDetails.vue
@@ -17,6 +17,9 @@
               <div v-if="torrent" class="flex flex-col flex-auto w-full gap-6">
                 <TorrentDescriptionTab :torrent="torrent" @updated="reloadTorrent" />
                 <TorrentCommentTab :torrent="torrent" @updated="reloadTorrent" />
+                <TorrentCreationDateTab :torrent="torrent" @updated="reloadTorrent" />
+                <TorrentCreatedByTab :torrent="torrent" @updated="reloadTorrent" />
+                <TorrentEncodingTab :torrent="torrent" @updated="reloadTorrent" />
                 <TorrentFilesTab :torrent="torrent" @updated="reloadTorrent" />
                 <TorrentTrackersTab :torrent="torrent" @updated="reloadTorrent" />
               </div>
diff --git a/components/torrent/TorrentEncodingTab.vue b/components/torrent/TorrentEncodingTab.vue
new file mode 100644
index 00000000..3c9a0275
--- /dev/null
+++ b/components/torrent/TorrentEncodingTab.vue
@@ -0,0 +1,46 @@
+<template>
+  <div id="torrent-encoding" class="flex flex-col gap-6">
+    <div class="flex flex-row items-center justify-between">
+      <h2 class="mr-1 text-2xl font-medium text-left text-neutral-content/50">
+        Encoding
+      </h2>
+      <button
+        class="flex flex-col items-center justify-center w-10 h-10 duration-200 bg-transparent text-base-content/50 hover:text-base-content rounded-xl"
+        @click="collapsed = !collapsed"
+      >
+        <ChevronDownIcon class="w-6" :class="{ 'rotate-90': collapsed }" />
+      </button>
+    </div>
+    <template v-if="!collapsed">
+      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
+        <template v-if="torrent.encoding">
+          <Markdown :source="torrent.encoding" />
+        </template>
+        <template v-else>
+          <span class="italic text-neutral-content">No encoding provided.</span>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from "@heroicons/vue/24/solid";
+import { TorrentResponse } from "torrust-index-types-lib";
+import { PropType } from "vue";
+import { ref } from "#imports";
+import Markdown from "~/components/Markdown.vue";
+
+const collapsed = ref(false);
+
+const props = defineProps({
+  torrent: {
+    type: Object as PropType<TorrentResponse>,
+    required: true
+  }
+});
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/helpers/DateConverter.ts b/src/helpers/DateConverter.ts
new file mode 100644
index 00000000..ee527de4
--- /dev/null
+++ b/src/helpers/DateConverter.ts
@@ -0,0 +1,4 @@
+export function epochToUtc (date: number) {
+  const convertedDate = new Date(date * 1000);
+  return convertedDate.toDateString();
+}

From 3f09085b8ecd30c22a96ac5dd6720ff06c0f61be Mon Sep 17 00:00:00 2001
From: Mario <mariomnt945@gmail.com>
Date: Wed, 22 Nov 2023 21:05:13 +0100
Subject: [PATCH 2/6] refactor: [#297] Creation date now display as UTC

If the torrent creation date field is present in the torrent file, it is now shown as a UTC date
in a human readable format.

If there is no creation date, a no creation date provided message is displayed.

And if there is an error parsing the creation date or if it is a no valid date, an invalid date
text is shown.
---
 components/torrent/TorrentCreationDateTab.vue |  7 +++----
 src/helpers/DateConverter.ts                  | 17 ++++++++++++++---
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/components/torrent/TorrentCreationDateTab.vue b/components/torrent/TorrentCreationDateTab.vue
index f56d26cf..badcff28 100644
--- a/components/torrent/TorrentCreationDateTab.vue
+++ b/components/torrent/TorrentCreationDateTab.vue
@@ -15,7 +15,7 @@
       <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
         <template v-if="torrent.creation_date">
           <!--<Markdown :source="torrent.name" />-->
-          {{ convertedDate }}
+          {{ creationDateUTC }}
         </template>
         <template v-else>
           <span class="italic text-neutral-content">No creation date provided.</span>
@@ -31,7 +31,7 @@ import { TorrentResponse } from "torrust-index-types-lib";
 import { PropType } from "vue";
 import { ref } from "#imports";
 import Markdown from "~/components/Markdown.vue";
-import { epochToUtc } from "~/src/helpers/DateConverter";
+import { unixTimeToHumanReadableUTC } from "~/src/helpers/DateConverter";
 
 const collapsed = ref(false);
 
@@ -42,8 +42,7 @@ const props = defineProps({
   }
 });
 
-// Takes the date in milliseconds/Epoch Time and converts it to human readable format
-const convertedDate = epochToUtc(props.torrent.creation_date);
+const creationDateUTC = unixTimeToHumanReadableUTC(props.torrent.creation_date);
 
 </script>
 
diff --git a/src/helpers/DateConverter.ts b/src/helpers/DateConverter.ts
index ee527de4..af276271 100644
--- a/src/helpers/DateConverter.ts
+++ b/src/helpers/DateConverter.ts
@@ -1,4 +1,15 @@
-export function epochToUtc (date: number) {
-  const convertedDate = new Date(date * 1000);
-  return convertedDate.toDateString();
+type UnixTime = number;
+
+/*
+  Takes the date in seconds from Epoch time and converts it to human readable format.
+  Date() can only work with integers between -8640000000000000 and 8640000000000000 to create a new Date object.
+*/
+
+export function unixTimeToHumanReadableUTC (seconds: UnixTime) {
+  if (Number.isInteger(seconds) && seconds < 8640000000000000 && seconds > -8640000000000000) {
+    const milliseconds = seconds * 1000;
+    return new Date(milliseconds).toDateString();
+  } else {
+    return "Invalid date";
+  }
 }

From 5bad420837d29198a3922c837e1cb85977c9e90d Mon Sep 17 00:00:00 2001
From: Mario <mariomnt945@gmail.com>
Date: Mon, 27 Nov 2023 16:16:29 +0100
Subject: [PATCH 3/6] refactor: [#297] added error checks

Error checks added to the function that converts the torrent creation date from seconds to
UTC human readable format.

Refactor to the function logic's code has been applied.
---
 src/helpers/DateConverter.ts | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/helpers/DateConverter.ts b/src/helpers/DateConverter.ts
index af276271..69df1a89 100644
--- a/src/helpers/DateConverter.ts
+++ b/src/helpers/DateConverter.ts
@@ -1,15 +1,14 @@
 type UnixTime = number;
 
-/*
-  Takes the date in seconds from Epoch time and converts it to human readable format.
-  Date() can only work with integers between -8640000000000000 and 8640000000000000 to create a new Date object.
-*/
+function isValidDate (date: Date) {
+  return date instanceof Date && !isNaN(date.valueOf());
+}
+
+// Takes the date in seconds from Epoch time and converts it to human readable format.
 
 export function unixTimeToHumanReadableUTC (seconds: UnixTime) {
-  if (Number.isInteger(seconds) && seconds < 8640000000000000 && seconds > -8640000000000000) {
-    const milliseconds = seconds * 1000;
-    return new Date(milliseconds).toDateString();
-  } else {
-    return "Invalid date";
-  }
+  const milliseconds = seconds * 1000;
+  const convertedDate = new Date(milliseconds);
+
+  return isValidDate(convertedDate) ? convertedDate.toDateString() : "Invalid date";
 }

From e4772ae16505279a6f41debee542cbe708dbf7ca Mon Sep 17 00:00:00 2001
From: Mario <mariomnt945@gmail.com>
Date: Wed, 29 Nov 2023 20:04:12 +0100
Subject: [PATCH 4/6] refactor: [#297] new error checks and refactoring

Date converter helper function now throws errors if the timestamp passed as argument is not an integer
and if the Date() constructor returns an invalid date.
---
 components/torrent/TorrentCreationDateTab.vue |  5 +---
 src/helpers/DateConverter.ts                  | 30 +++++++++++++++----
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/components/torrent/TorrentCreationDateTab.vue b/components/torrent/TorrentCreationDateTab.vue
index badcff28..abc0add1 100644
--- a/components/torrent/TorrentCreationDateTab.vue
+++ b/components/torrent/TorrentCreationDateTab.vue
@@ -14,8 +14,7 @@
     <template v-if="!collapsed">
       <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
         <template v-if="torrent.creation_date">
-          <!--<Markdown :source="torrent.name" />-->
-          {{ creationDateUTC }}
+          {{ unixTimeToHumanReadableUTC(torrent.creation_date) }}
         </template>
         <template v-else>
           <span class="italic text-neutral-content">No creation date provided.</span>
@@ -42,8 +41,6 @@ const props = defineProps({
   }
 });
 
-const creationDateUTC = unixTimeToHumanReadableUTC(props.torrent.creation_date);
-
 </script>
 
 <style scoped>
diff --git a/src/helpers/DateConverter.ts b/src/helpers/DateConverter.ts
index 69df1a89..992a1d42 100644
--- a/src/helpers/DateConverter.ts
+++ b/src/helpers/DateConverter.ts
@@ -1,14 +1,34 @@
 type UnixTime = number;
 
-function isValidDate (date: Date) {
-  return date instanceof Date && !isNaN(date.valueOf());
-}
+class InvalidDateError extends Error {}
 
 // Takes the date in seconds from Epoch time and converts it to human readable format.
 
-export function unixTimeToHumanReadableUTC (seconds: UnixTime) {
+export function unixTimeToHumanReadableUTC (creationDate: UnixTime) {
+  try {
+    return dateFromSeconds(creationDate);
+  } catch (error) {
+    return ("Invalid date");
+  }
+}
+
+function dateFromSeconds (seconds: number) {
+  if (!validateTimestamp(seconds))
+  { throw new TypeError("Torrent creation date is not an integer"); }
+
   const milliseconds = seconds * 1000;
   const convertedDate = new Date(milliseconds);
 
-  return isValidDate(convertedDate) ? convertedDate.toDateString() : "Invalid date";
+  if (!validateDate(convertedDate))
+  { throw new InvalidDateError("Date is not valid"); }
+
+  return convertedDate.toDateString();
+}
+
+function validateDate (date: Date) {
+  return date instanceof Date && !isNaN(date.valueOf());
+}
+
+function validateTimestamp (timestamp: UnixTime) {
+  return Number.isInteger(timestamp);
 }

From 489da9d08401e7ebab6e762877e0e7a42f6459da Mon Sep 17 00:00:00 2001
From: Mario <mariomnt945@gmail.com>
Date: Sun, 3 Dec 2023 01:13:38 +0100
Subject: [PATCH 5/6] refactor: [#297] refactored error control

---
 src/helpers/DateConverter.ts | 34 +++++++++++-----------------------
 1 file changed, 11 insertions(+), 23 deletions(-)

diff --git a/src/helpers/DateConverter.ts b/src/helpers/DateConverter.ts
index 992a1d42..764a9a50 100644
--- a/src/helpers/DateConverter.ts
+++ b/src/helpers/DateConverter.ts
@@ -1,34 +1,22 @@
 type UnixTime = number;
 
 class InvalidDateError extends Error {}
+class WrongTimestamp extends Error {}
 
 // Takes the date in seconds from Epoch time and converts it to human readable format.
 
 export function unixTimeToHumanReadableUTC (creationDate: UnixTime) {
+  let milliseconds;
+  let convertedDate;
   try {
-    return dateFromSeconds(creationDate);
+    milliseconds = creationDate * 1000;
   } catch (error) {
-    return ("Invalid date");
+    return new WrongTimestamp(`Could not convert ${creationDate} to milliseconds`);
   }
-}
-
-function dateFromSeconds (seconds: number) {
-  if (!validateTimestamp(seconds))
-  { throw new TypeError("Torrent creation date is not an integer"); }
-
-  const milliseconds = seconds * 1000;
-  const convertedDate = new Date(milliseconds);
-
-  if (!validateDate(convertedDate))
-  { throw new InvalidDateError("Date is not valid"); }
-
-  return convertedDate.toDateString();
-}
-
-function validateDate (date: Date) {
-  return date instanceof Date && !isNaN(date.valueOf());
-}
-
-function validateTimestamp (timestamp: UnixTime) {
-  return Number.isInteger(timestamp);
+  try {
+    convertedDate = new Date(milliseconds);
+  } catch (error) {
+    return new InvalidDateError(`Could not create a new date from ${milliseconds}`);
+  }
+  return !isNaN(convertedDate.valueOf()) ? convertedDate.toDateString() : new InvalidDateError(`Could not create a valid date from ${milliseconds}`);
 }

From 4281526961d821f6a871765c3938ac2144e64311 Mon Sep 17 00:00:00 2001
From: Mario <mariomnt945@gmail.com>
Date: Thu, 21 Dec 2023 00:06:10 +0100
Subject: [PATCH 6/6] refactor: [#297]  code cleanup

---
 components/torrent/TorrentCreationDateTab.vue |  6 ++--
 src/helpers/DateConverter.ts                  | 33 +++++++++----------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/components/torrent/TorrentCreationDateTab.vue b/components/torrent/TorrentCreationDateTab.vue
index abc0add1..33c084d9 100644
--- a/components/torrent/TorrentCreationDateTab.vue
+++ b/components/torrent/TorrentCreationDateTab.vue
@@ -14,7 +14,7 @@
     <template v-if="!collapsed">
       <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
         <template v-if="torrent.creation_date">
-          {{ unixTimeToHumanReadableUTC(torrent.creation_date) }}
+          {{ formatedDateFromTimestamp }}
         </template>
         <template v-else>
           <span class="italic text-neutral-content">No creation date provided.</span>
@@ -30,7 +30,7 @@ import { TorrentResponse } from "torrust-index-types-lib";
 import { PropType } from "vue";
 import { ref } from "#imports";
 import Markdown from "~/components/Markdown.vue";
-import { unixTimeToHumanReadableUTC } from "~/src/helpers/DateConverter";
+import { formatTimestamp } from "~/src/helpers/DateConverter";
 
 const collapsed = ref(false);
 
@@ -41,6 +41,8 @@ const props = defineProps({
   }
 });
 
+const formatedDateFromTimestamp = formatTimestamp(props.torrent.creation_date);
+
 </script>
 
 <style scoped>
diff --git a/src/helpers/DateConverter.ts b/src/helpers/DateConverter.ts
index 764a9a50..efa044fe 100644
--- a/src/helpers/DateConverter.ts
+++ b/src/helpers/DateConverter.ts
@@ -1,22 +1,21 @@
-type UnixTime = number;
+type UnixTimestamp = number;
+type FormattedDate = string;
 
 class InvalidDateError extends Error {}
-class WrongTimestamp extends Error {}
 
-// Takes the date in seconds from Epoch time and converts it to human readable format.
+/**
+ * Takes the date in seconds from Unix Epoch time and converts it to human readable format.
+ *
+ * For example: 1701688451 -> "Mon Dec 04 2023"
+ */
 
-export function unixTimeToHumanReadableUTC (creationDate: UnixTime) {
-  let milliseconds;
-  let convertedDate;
-  try {
-    milliseconds = creationDate * 1000;
-  } catch (error) {
-    return new WrongTimestamp(`Could not convert ${creationDate} to milliseconds`);
-  }
-  try {
-    convertedDate = new Date(milliseconds);
-  } catch (error) {
-    return new InvalidDateError(`Could not create a new date from ${milliseconds}`);
-  }
-  return !isNaN(convertedDate.valueOf()) ? convertedDate.toDateString() : new InvalidDateError(`Could not create a valid date from ${milliseconds}`);
+export function formatTimestamp (creationDate: UnixTimestamp): FormattedDate | Error {
+  const milliseconds = creationDate * 1000;
+
+  const convertedDate = new Date(milliseconds);
+
+  return isNaN(convertedDate.valueOf())
+    ? new InvalidDateError(
+      `Invalid date. Could not create a new date from timestamp value: ${creationDate}`)
+    : convertedDate.toDateString();
 }