feat: group history by date and time

packages/hoppscotch-app/components/history/index.vue

@@ -6,14 +6,14 @@
         type="search"
         autocomplete="off"
         class="bg-transparent flex w-full p-4 py-2"
-        :placeholder="`${$t('action.search')}`"
+        :placeholder="`${t('action.search')}`"
       />
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/history"
           blank
-          :title="$t('app.wiki')"
+          :title="t('app.wiki')"
           svg="help-circle"
         />
         <ButtonSecondary
@@ -21,30 +21,39 @@
           data-testid="clear_history"
           :disabled="history.length === 0"
           svg="trash-2"
-          :title="$t('action.clear_all')"
+          :title="t('action.clear_all')"
           @click.native="confirmRemove = true"
         />
       </div>
     </div>
     <div class="flex flex-col">
-      <div v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
-        <HistoryRestCard
-          v-if="page == 'rest'"
-          :id="index"
-          :entry="entry"
-          :show-more="showMore"
-          @toggle-star="toggleStar(entry)"
-          @delete-entry="deleteHistory(entry)"
-          @use-entry="useHistory(entry)"
-        />
-        <HistoryGraphqlCard
-          v-if="page == 'graphql'"
-          :entry="entry"
-          :show-more="showMore"
-          @toggle-star="toggleStar(entry)"
-          @delete-entry="deleteHistory(entry)"
-          @use-entry="useHistory(entry)"
-        />
+      <div
+        v-for="(filteredHistoryGroup, filteredHistoryGroupIndex) in groupByDate(
+          filteredHistory,
+          'updatedOn'
+        )"
+        :key="`filteredHistoryGroup-${filteredHistoryGroupIndex}`"
+        class="flex flex-col"
+      >
+        <span
+          class="ml-4 capitalize-first px-3 align-start my-2 py-1 text-secondaryLight bg-primaryLight truncate rounded-l-full flex-inline text-tiny"
+        >
+          {{ filteredHistoryGroupIndex }}
+        </span>
+        <div
+          v-for="(entry, index) in filteredHistoryGroup"
+          :key="`entry-${index}`"
+        >
+          <component
+            :is="page == 'rest' ? 'HistoryRestCard' : 'HistoryGraphqlCard'"
+            :id="index"
+            :entry="entry"
+            :show-more="showMore"
+            @toggle-star="toggleStar(entry)"
+            @delete-entry="deleteHistory(entry)"
+            @use-entry="useHistory(entry)"
+          />
+        </div>
       </div>
     </div>
     <div
@@ -53,7 +62,7 @@
     >
       <i class="opacity-75 pb-2 material-icons">manage_search</i>
       <span class="my-2 text-center">
-        {{ $t("state.nothing_found") }} "{{ filterText }}"
+        {{ t("state.nothing_found") }} "{{ filterText }}"
       </span>
     </div>
     <div
@@ -64,24 +73,29 @@
         :src="`/images/states/${$colorMode.value}/history.svg`"
         loading="lazy"
         class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
-        :alt="`${$t('empty.history')}`"
+        :alt="`${t('empty.history')}`"
       />
       <span class="text-center mb-4">
-        {{ $t("empty.history") }}
+        {{ t("empty.history") }}
       </span>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="`${$t('confirm.remove_history')}`"
+      :title="`${t('confirm.remove_history')}`"
       @hide-modal="confirmRemove = false"
       @resolve="clearHistory"
     />
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "@nuxtjs/composition-api"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+<script setup lang="ts">
+import { computed, ref } from "@nuxtjs/composition-api"
+import * as timeago from "timeago.js"
+import {
+  useI18n,
+  useReadonlyStream,
+  useToast,
+} from "~/helpers/utils/composables"
 import {
   restHistory$,
   graphqlHistory$,
@@ -96,64 +110,65 @@ import {
 } from "~/newstore/history"
 import { setRESTRequest } from "~/newstore/RESTSession"
 
-export default defineComponent({
-  props: {
-    page: { type: String as PropType<"rest" | "graphql">, default: null },
-  },
-  setup(props) {
-    return {
-      history: useReadonlyStream<RESTHistoryEntry[] | GQLHistoryEntry[]>(
-        props.page === "rest" ? restHistory$ : graphqlHistory$,
-        []
-      ),
-    }
-  },
-  data() {
-    return {
-      filterText: "",
-      showMore: false,
-      confirmRemove: false,
-    }
-  },
-  computed: {
-    filteredHistory(): any[] {
-      const filteringHistory = this.history as Array<
-        RESTHistoryEntry | GQLHistoryEntry
-      >
+const props = defineProps<{
+  page: "rest" | "graphql"
+}>()
 
-      return filteringHistory.filter(
-        (entry: RESTHistoryEntry | GQLHistoryEntry) => {
-          const filterText = this.filterText.toLowerCase()
-          return Object.keys(entry).some((key) => {
-            let value = entry[key as keyof typeof entry]
-            if (value) {
-              value = `${value}`
-              return value.toLowerCase().includes(filterText)
-            }
-            return false
-          })
+const filterText = ref("")
+const showMore = ref(false)
+const confirmRemove = ref(false)
+const toast = useToast()
+const t = useI18n()
+
+const groupByDate = (array: any[], key: string) => {
+  return array.reduce((rv: any, x: any) => {
+    ;(rv[timeago.format(x[key])] = rv[timeago.format(x[key])] || []).push(x)
+    return rv
+  }, {})
+}
+
+const history = useReadonlyStream<RESTHistoryEntry[] | GQLHistoryEntry[]>(
+  props.page === "rest" ? restHistory$ : graphqlHistory$,
+  []
+)
+
+const filteredHistory = computed(() => {
+  const filteringHistory = history as any as Array<
+    RESTHistoryEntry | GQLHistoryEntry
+  >
+
+  return filteringHistory.value.filter(
+    (entry: RESTHistoryEntry | GQLHistoryEntry) => {
+      return Object.keys(entry).some((key) => {
+        let value = entry[key as keyof typeof entry]
+        if (value) {
+          value = `${value}`
+          return value.toLowerCase().includes(filterText.value.toLowerCase())
         }
-      )
-    },
-  },
-  methods: {
-    clearHistory() {
-      if (this.page === "rest") clearRESTHistory()
-      else clearGraphqlHistory()
-      this.$toast.success(`${this.$t("state.history_deleted")}`)
-    },
-    useHistory(entry: any) {
-      if (this.page === "rest") setRESTRequest(entry.request)
-    },
-    deleteHistory(entry: any) {
-      if (this.page === "rest") deleteRESTHistoryEntry(entry)
-      else deleteGraphqlHistoryEntry(entry)
-      this.$toast.success(`${this.$t("state.deleted")}`)
-    },
-    toggleStar(entry: any) {
-      if (this.page === "rest") toggleRESTHistoryEntryStar(entry)
-      else toggleGraphqlHistoryEntryStar(entry)
-    },
-  },
+        return false
+      })
+    }
+  )
 })
+
+const clearHistory = () => {
+  if (props.page === "rest") clearRESTHistory()
+  else clearGraphqlHistory()
+  toast.success(`${t("state.history_deleted")}`)
+}
+
+const useHistory = (entry: any) => {
+  if (props.page === "rest") setRESTRequest(entry.request)
+}
+
+const deleteHistory = (entry: any) => {
+  if (props.page === "rest") deleteRESTHistoryEntry(entry)
+  else deleteGraphqlHistoryEntry(entry)
+  toast.success(`${t("state.deleted")}`)
+}
+
+const toggleStar = (entry: any) => {
+  if (props.page === "rest") toggleRESTHistoryEntryStar(entry)
+  else toggleGraphqlHistoryEntryStar(entry)
+}
 </script>