1721/feature/drag and drop favorites (#2097)

* prisma schema updated: added index in favorite

* update abilitiy added for favorite

* update one favorite resolver added

* update on favorite mutation added

* updateFavoriteOrder added

* Draglist added in favorite

* nav item convert to div from button: because it was not working dragable with button

* changed index to position

* position added in getFavorites query

* added recoil state for favorites

* reordering updated according to new method

* Use accurate type

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/favorites/hooks/useFavorites.ts

@@ -1,25 +1,34 @@
 import { getOperationName } from '@apollo/client/utilities';
+import { OnDragEndResponder } from '@hello-pangea/dnd';
+import { useRecoilState } from 'recoil';
 
 import { GET_COMPANY } from '@/companies/graphql/queries/getCompany';
 import { GET_PERSON } from '@/people/graphql/queries/getPerson';
 import {
+  Favorite,
   useDeleteFavoriteMutation,
   useInsertCompanyFavoriteMutation,
   useInsertPersonFavoriteMutation,
+  useUpdateOneFavoriteMutation,
 } from '~/generated/graphql';
 
 import { GET_FAVORITES } from '../graphql/queries/getFavorites';
+import { favoritesState } from '../states/favoritesState';
 
 export const useFavorites = () => {
+  const [favorites, setFavorites] = useRecoilState(favoritesState);
+
   const [insertCompanyFavoriteMutation] = useInsertCompanyFavoriteMutation();
   const [insertPersonFavoriteMutation] = useInsertPersonFavoriteMutation();
   const [deleteFavoriteMutation] = useDeleteFavoriteMutation();
+  const [updateOneFavoritesMutation] = useUpdateOneFavoriteMutation();
 
   const insertCompanyFavorite = (companyId: string) => {
     insertCompanyFavoriteMutation({
       variables: {
         data: {
           companyId,
+          position: favorites.length + 1,
         },
       },
       refetchQueries: [
@@ -34,6 +43,7 @@ export const useFavorites = () => {
       variables: {
         data: {
           personId,
+          position: favorites.length + 1,
         },
       },
       refetchQueries: [
@@ -43,6 +53,25 @@ export const useFavorites = () => {
     });
   };
 
+  const updateFavoritePosition = async (
+    favorites: Pick<Favorite, 'id' | 'position'>,
+  ) => {
+    await updateOneFavoritesMutation({
+      variables: {
+        data: {
+          position: favorites?.position,
+        },
+        where: {
+          id: favorites.id,
+        },
+      },
+      refetchQueries: [
+        getOperationName(GET_FAVORITES) ?? '',
+        getOperationName(GET_PERSON) ?? '',
+        getOperationName(GET_COMPANY) ?? '',
+      ],
+    });
+  };
   const deleteCompanyFavorite = (companyId: string) => {
     deleteFavoriteMutation({
       variables: {
@@ -75,10 +104,37 @@ export const useFavorites = () => {
     });
   };
 
+  const computeNewPosition = (destIndex: number) => {
+    if (destIndex === 0) {
+      return favorites[destIndex].position / 2;
+    }
+
+    if (destIndex === favorites.length - 1) {
+      return favorites[destIndex].position + 1;
+    }
+    return (
+      (favorites[destIndex - 1].position + favorites[destIndex].position) / 2
+    );
+  };
+
+  const handleReorderFavorite: OnDragEndResponder = (result) => {
+    if (!result.destination || !favorites) {
+      return;
+    }
+    const newPosition = computeNewPosition(result.destination.index);
+
+    const reorderFavorites = Array.from(favorites);
+    const [removed] = reorderFavorites.splice(result.source.index, 1);
+    const removedFav = { ...removed, position: newPosition };
+    reorderFavorites.splice(result.destination.index, 0, removedFav);
+    setFavorites(reorderFavorites);
+    updateFavoritePosition(removedFav);
+  };
   return {
     insertCompanyFavorite,
     insertPersonFavorite,
     deleteCompanyFavorite,
     deletePersonFavorite,
+    handleReorderFavorite,
   };
 };