From 435f6f7b31ac684ba5d6ae05a72ea157feb1a6a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <12082276+murgatt@users.noreply.github.com>
Date: Sun, 3 Dec 2023 17:23:57 +0100
Subject: [PATCH] feat(v2): animate file list (#109)

* feat(v2): animate file list

* fix tests
---
 package.json                               | 1 +
 pnpm-lock.yaml                             | 7 +++++++
 src/components/FileList.tsx                | 4 +++-
 src/components/__tests__/FileList.test.tsx | 4 ++++
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e8bfd65..427f982 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@formkit/auto-animate": "0.8.1",
     "@hookform/resolvers": "3.3.2",
     "@radix-ui/react-label": "2.0.2",
     "@radix-ui/react-navigation-menu": "1.1.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fe0024b..f63541c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@formkit/auto-animate':
+    specifier: 0.8.1
+    version: 0.8.1
   '@hookform/resolvers':
     specifier: 3.3.2
     version: 3.3.2(react-hook-form@7.48.2)
@@ -758,6 +761,10 @@ packages:
     resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
     dev: false
 
+  /@formkit/auto-animate@0.8.1:
+    resolution: {integrity: sha512-0/Z2cuNXWVVIG/l0SpcHAWFhGdvLJ8DRvEfRWvmojtmRWfEy+LWNwgDazbZqY0qQYtkHcoEK3jBLkhiZaB/4Ig==}
+    dev: false
+
   /@hookform/resolvers@3.3.2(react-hook-form@7.48.2):
     resolution: {integrity: sha512-Tw+GGPnBp+5DOsSg4ek3LCPgkBOuOgS5DsDV7qsWNH9LZc433kgsWICjlsh2J9p04H2K66hsXPPb9qn9ILdUtA==}
     peerDependencies:
diff --git a/src/components/FileList.tsx b/src/components/FileList.tsx
index 2e0316b..af74255 100644
--- a/src/components/FileList.tsx
+++ b/src/components/FileList.tsx
@@ -1,3 +1,4 @@
+import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { ListXIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { getFiles, useStore } from 'src/store';
@@ -9,10 +10,11 @@ export const FileList = () => {
   const { t } = useTranslation();
   const files = useStore(getFiles);
   const clearFiles = useStore(state => state.clearFiles);
+  const [listRef] = useAutoAnimate();
 
   return (
     <div className="relative h-full">
-      <ul className="flex h-full flex-col gap-3 overflow-y-auto px-4 pb-14 pt-4">
+      <ul className="flex h-full flex-col gap-3 overflow-y-auto px-4 pb-14 pt-4" ref={listRef}>
         {files.map(file => (
           <li key={file.path}>
             <FileCard file={file} />
diff --git a/src/components/__tests__/FileList.test.tsx b/src/components/__tests__/FileList.test.tsx
index f5b5a83..a3af851 100644
--- a/src/components/__tests__/FileList.test.tsx
+++ b/src/components/__tests__/FileList.test.tsx
@@ -8,6 +8,10 @@ vi.mock('src/store/selectors', () => ({
   getFiles: vi.fn(),
 }));
 
+vi.mock('@formkit/auto-animate/react', () => ({
+  useAutoAnimate: vi.fn().mockReturnValue([]),
+}));
+
 const file1 = { name: 'file1.mkv', path: '/path/file1.mkv', size: 1024 } as VideoFile;
 const file2 = { name: 'file2.mkv', path: '/path/file2.mkv', size: 1024 } as VideoFile;
 const file3 = { name: 'file3.mkv', path: '/path/file3.mkv', size: 1024 } as VideoFile;