110 add hideshow function to chat groupings (#130)

leilabb · tonioriol · eriklindgren · web-flow · commit f2c2972ee729 · 2024-03-01T14:29:46.000+01:00
* add key perk to landing page (#107) * add key perk to landing page * fix spelling * 98-clarify-copy-when-creating-a-team * modify copy when creating a new team * add missing env to gh action/workflow --------- Co-authored-by: Toni Oriol <tonioriol@gmail.com> * add grouping to chats * add last 30 days group * 104-change-the-word-fork-it-to-clone-including-icon * Change 'fork' to 'clone' and change icon * Change copy of modal after clicking 'Clone' * replace fork with clone * add last year group * refactor time functions * change function name * change func name * add missing env vars to example * Create dependabot.yml * Bump vite from 4.3.9 to 4.5.2 (#112) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.3.9 to 4.5.2. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/v4.5.2/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v4.5.2/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update dependabot.yml Include GitHub Actions version updates. * Bump actions/checkout from 2 to 4 (#123) Bumps [actions/checkout](https://github.com/actions/checkout) from 2 to 4. - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](actions/checkout@v2...v4) --- updated-dependencies: - dependency-name: actions/checkout dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump actions/setup-node from 2 to 4 (#122) Bumps [actions/setup-node](https://github.com/actions/setup-node) from 2 to 4. - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](actions/setup-node@v2...v4) --- updated-dependencies: - dependency-name: actions/setup-node dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Upgrade to node 20 * Run tests on push to dev * add tests + new grouping function * Bump axios, openai and postmark (#113) * Bump axios, openai and postmark Bumps [axios](https://github.com/axios/axios) to 1.6.5 and updates ancestor dependencies [axios](https://github.com/axios/axios), [openai](https://github.com/openai/openai-node) and [postmark](https://github.com/ActiveCampaign/postmark.js). These dependencies need to be updated together. Updates `axios` from 0.25.0 to 1.6.5 - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) - [Commits](axios/axios@v0.25.0...v1.6.5) Updates `openai` from 3.3.0 to 4.25.0 - [Release notes](https://github.com/openai/openai-node/releases) - [Changelog](https://github.com/openai/openai-node/blob/master/CHANGELOG.md) - [Commits](openai/openai-node@v3.3.0...v4.25.0) Updates `postmark` from 3.0.19 to 4.0.2 - [Release notes](https://github.com/ActiveCampaign/postmark.js/releases) - [Changelog](https://github.com/ActiveCampaign/postmark.js/blob/main/CHANGELOG.md) - [Commits](ActiveCampaign/postmark.js@3.0.19...4.0.2) --- updated-dependencies: - dependency-name: axios dependency-type: indirect - dependency-name: openai dependency-type: direct:production - dependency-name: postmark dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> * update to openai@4 fixes --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Toni Oriol <tonioriol@gmail.com> * refactoring * add grouping to all chats ever made * add code fix * change function name * change type name * refactor * style code * add tests * catch future dates¨ * add hide show functionality * rename functions * 99 group chat history by monthyear (#111) * add grouping to chats * add last 30 days group * add last year group * refactor time functions * change function name * change func name * add tests + new grouping function * refactoring * add grouping to all chats ever made * add code fix * change function name * change type name * refactor * style code * add tests * catch future dates¨ * add final fixes * edit test file * refactor groupings wip * refactoring * modify tests --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Toni Oriol <tonioriol@gmail.com> Co-authored-by: Erik Lindgren <erik.lindgren@prototyp.se> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
   },
   "dependencies": {
     "@babeard/svelte-heroicons": "^2.0.0-rc.0",
-    "@faker-js/faker": "^8.1.0",
     "@magidoc/plugin-svelte-marked": "^4.1.2",
     "@playwright/test": "^1.41.2",
     "@prisma/client": "^5.4.2",
@@ -74,6 +73,9 @@
     "zod": "^3.21.4"
   },
   "prisma": {
-    "seed": "tsx prisma/seed.ts"
+    "seed": "ts-node prisma/seed.ts"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^8.4.0"
   }
 }
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
@@ -3,13 +3,22 @@
   import Gravatar from '$lib/components/Gravatar.svelte'
   import type { UserWithUserTeamsActiveTeamAndChats } from '$lib/server/entities/user'
   import { isSidebarOpen } from '$lib/stores/general'
-  import { ChevronRightIcon, PlusIcon } from '@babeard/svelte-heroicons/solid'
+  import {
+    ChevronRightIcon,
+    PlusIcon,
+    ChevronDownIcon,
+    ChevronUpIcon,
+  } from '@babeard/svelte-heroicons/solid'
+
   import { categorizeDate } from '$lib/utils/time'
 
   export let user: UserWithUserTeamsActiveTeamAndChats
 
-  type ChatLists = {
-    [key: string | number]: any[]
+  type ChatObject = {
+    chats: any[]
+    key: string
+    label: string
+    isOpen: boolean
   }
 
   $: chats = [
@@ -19,24 +28,21 @@
     ...(user.activeUserTeam?.chats || []),
   ].sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())
 
-  $: chatsGroupedByTime = chats?.reduce((chatLists: ChatLists, chat) => {
-    const category = categorizeDate(chat.updatedAt)
-    if (!chatLists[category]) {
-      chatLists[category] = []
-    }
-    chatLists[category].push(chat)
-    return chatLists
-  }, {})
-
-  const getTitle = (interval: any) => {
-    const titleMap: { [key: string]: string } = {
-      today: 'Today',
-      yesterday: 'Yesterday',
-      previousSevenDays: 'Previous 7 Days',
-      lastMonth: 'Previous 30 Days',
+  $: chatsGroupedByTime = chats?.reduce((chatObjects: ChatObject[], chat) => {
+    const { key, label, isOpen } = categorizeDate(chat.updatedAt)
+    const foundObject = chatObjects.find((obj) => obj.key === key)
+    if (foundObject) {
+      foundObject.chats.push(chat)
+    } else {
+      chatObjects.push({
+        key: key,
+        label: label,
+        isOpen: isOpen,
+        chats: [chat],
+      })
     }
-    return typeof interval === 'number' ? interval : titleMap[interval]
-  }
+    return chatObjects
+  }, [])
 </script>
 
 <aside class="flex flex-col grow overflow-hidden h-full">
@@ -62,11 +68,28 @@
       </a>
       {#if chats.length}
         <ul class="overflow-auto grow flex flex-col gap-2 pt-2">
-          {#each Object.entries(chatsGroupedByTime) as [interval, chats]}
-            {#if chats.length > 0}
-              <p class="flex-none text-xs text-gray-600">{getTitle(interval)}</p>
-              {#each chats as chat}
-                <ChatLink {chat} {user} />
+          {#each chatsGroupedByTime as chatGroup}
+            {#if chatGroup.chats.length > 0}
+              <div class="flex relative items-center">
+                <p class="flex-none text-xs text-gray-600">{chatGroup.label}</p>
+                <div class="right-0 absolute">
+                  {#if chatGroup.isOpen}
+                    <ChevronUpIcon
+                      class="h-3 w-3 text-white"
+                      on:click={() => (chatGroup.isOpen = !chatGroup.isOpen)}
+                    />
+                  {:else}
+                    <ChevronDownIcon
+                      class="h-3 w-3 text-white"
+                      on:click={() => (chatGroup.isOpen = !chatGroup.isOpen)}
+                    />
+                  {/if}
+                </div>
+              </div>
+              {#each chatGroup.chats as chat}
+                <div class={chatGroup.isOpen ? '' : 'hidden'}>
+                  <ChatLink {chat} {user} />
+                </div>
               {/each}
             {/if}
           {/each}
diff --git a/src/lib/utils/time.test.ts b/src/lib/utils/time.test.ts
@@ -8,33 +8,43 @@ const dateFromLastYear = new Date(
   currentDate.getDate()
 )
 const twoYearsAgo = new Date(currentDate)
-const twoYearsAhead = new Date(currentDate)
 twoYearsAgo.setFullYear(currentDate.getFullYear() - 2)
+
+const twoYearsAhead = new Date(currentDate)
 twoYearsAhead.setFullYear(currentDate.getFullYear() + 2)
 
+const twoYearsAgoYear = twoYearsAgo.getFullYear().toString()
+
 describe(isLastYear, () => {
-  it('returns true for a date from the previous year'),
-    () => {
-      expect(isLastYear(dateFromLastYear)).toBe(true)
-    }
+  it('returns true for a date from the previous year', () => {
+    expect(isLastYear(dateFromLastYear)).toBe(true)
+  })
 
-  it('returns false for a date of the current year'),
-    () => {
-      expect(isLastYear(currentDate)).toBe(false)
-    }
+  it('returns false for a date of the current year', () => {
+    expect(isLastYear(currentDate)).toBe(false)
+  })
 })
 
 describe(categorizeDate, () => {
-  it('returns the year two years ago'),
-    () => {
-      expect(categorizeDate(twoYearsAgo)).toBe(2022)
-    },
-    it('returns "today" '),
-    () => {
-      expect(categorizeDate(currentDate)).toBe('today')
-    },
-    it('returns "futureDate" '),
-    () => {
-      expect(categorizeDate(twoYearsAhead)).toBe('futureDate')
-    }
+  it('returns the year two years ago', () => {
+    expect(categorizeDate(twoYearsAgo)).toMatchObject({
+      key: twoYearsAgoYear,
+      label: twoYearsAgoYear,
+      isOpen: false,
+    })
+  }),
+    it('returns "today" ', () => {
+      expect(categorizeDate(currentDate)).toMatchObject({
+        key: 'today',
+        label: 'Today',
+        isOpen: true,
+      })
+    }),
+    it('returns "futureDate" ', () => {
+      expect(categorizeDate(twoYearsAhead)).toMatchObject({
+        key: 'futureDate',
+        label: 'Future Date',
+        isOpen: false,
+      })
+    })
 })
diff --git a/src/lib/utils/time.ts b/src/lib/utils/time.ts
@@ -36,27 +36,26 @@ export const timeSince = (date: Date) => {
   }
 }
 
-export const categorizeDate = (date: Date): string | number => {
-  const now = new Date()
+export const categorizeDate = (date: Date): { key: string; label: string; isOpen: boolean } => {
   if (isToday(date)) {
-    return 'today'
+    return { key: 'today', label: 'Today', isOpen: true }
   } else if (isYesterday(date)) {
-    return 'yesterday'
+    return { key: 'yesterday', label: 'Yesterday', isOpen: true }
   } else if (
     millisecondsPerDay < millisecondsSince(date) &&
     millisecondsSince(date) <= previousSevenDays
   ) {
-    return 'previousSevenDays'
+    return { key: 'previousSevenDays', label: 'Previous 7 Days', isOpen: true }
   } else if (
     previousSevenDays < millisecondsSince(date) &&
     millisecondsSince(date) <= lastThirtyDays
   ) {
-    return 'lastMonth'
+    return { key: 'lastMonth', label: 'Previous 30 Days', isOpen: true }
   } else if (date.getFullYear() <= currentYear) {
-    const year = date.getFullYear()
-    return year
+    const year = date.getFullYear().toString()
+    return { key: year, label: year, isOpen: false }
   } else {
-    return 'futureDate'
+    return { key: 'futureDate', label: 'Future Date', isOpen: false }
   }
 }
 
