More trpc query with packs

client/app/(app)/items/index.js

@@ -13,7 +13,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { getItemsGlobal } from '../../../store/globalItemsStore';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import { useFetchGlobalItems } from '~/hooks/globalItems';
+import useGetGlobalItems from '~/hooks/globalItems/useGetGlobalItems';
 
 export default function Items() {
   const [isAddItemModalOpen, setIsAddItemModalOpen] = useState(false);
@@ -27,10 +27,7 @@ export default function Items() {
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
     UseTheme();
 
-  const { data, isLoading, isError, refetch } = useFetchGlobalItems(
-    limit,
-    page,
-  );
+  const { data, isLoading, isError, refetch } = useGetGlobalItems(limit, page);
   console.log('🚀 ~ file: index.js:32 ~ Items ~ data:', data);
   // const data = useSelector((state) => state.globalItems);
 

client/components/EditableText/index.js

@@ -4,6 +4,8 @@ import { theme } from '../../theme';
 import { useDispatch } from 'react-redux';
 import { updatePack } from '../../store/packsStore';
 import { editTrip } from '../../store/tripsStore';
+import { PACKQUERYS, PACKREDUCERS } from '~/hooks/packs';
+import { useMutation } from '~/hooks/useMutation';
 
 export const EditableInput = ({
   data,
@@ -14,6 +16,10 @@ export const EditableInput = ({
 }) => {
   const [headerTitle, setHeaderTitle] = useState(title || '');
   const dispatch = useDispatch();
+  const { mutation, onSuccesMutation } = useMutation(
+    PACKQUERYS.editItem,
+    PACKREDUCERS.updatePack,
+  );
   return (
     <TextInput
       style={{
@@ -37,7 +43,10 @@ export const EditableInput = ({
           setEditTitle(false);
           titleRef.current.style =
             'font-size:20px !important;font-weight:bold;color: #22c67c;';
-
+          mutation.mutate(packDetails, {
+            onSuccess: (data) =>
+              onSuccesMutation({ ...data, itemId, packId: pack._id }),
+          });
           dispatch(updatePack(packDetails));
         } else {
           const tripDetails = {

client/components/ScoreContainer.js

@@ -4,9 +4,10 @@ import { Box, Button, VStack, Text, HStack, View } from 'native-base';
 import { theme } from '../theme';
 import useTheme from '../hooks/useTheme';
 import { useDispatch } from 'react-redux';
-import { scorePack } from '../store/packsStore';
 import { Svg, Circle, Path, G, Text as SvgText } from 'react-native-svg';
 import useCustomStyles from '~/hooks/useCustomStyles';
+import { useMutation } from '~/hooks/useMutation';
+import { PACKQUERYS, PACKREDUCERS } from '~/hooks/packs';
 
 const ScoreProgressChart = ({ score, size = 150, strokeWidth = 10 }) => {
   if (!score) return null;
@@ -157,6 +158,10 @@ const GradingPieChart = ({ scores, size = 150, strokeWidth = 10 }) => {
 
 export default function ScoreContainer({ type, data, isOwner }) {
   const dispatch = useDispatch();
+  const { mutation, onSuccesMutation } = useMutation(
+    PACKQUERYS.scorePack,
+    PACKREDUCERS.scorePack,
+  );
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
     useTheme();
   const styles = useCustomStyles(loadStyles);
@@ -188,7 +193,12 @@ export default function ScoreContainer({ type, data, isOwner }) {
 
   const handleScoreClick = () => {
     if (type === 'pack') {
-      dispatch(scorePack(id));
+      mutation.mutate(
+        { packId: id },
+        {
+          onSuccess: (data) => onSuccesMutation(data),
+        },
+      );
     } else if (type === 'trip') {
       dispatch(scoreTrip(id));
     }

client/components/Water.js

@@ -6,11 +6,19 @@ import { useDispatch } from 'react-redux';
 import { addPackItem } from '../store/packsStore';
 import useCustomStyles from '~/hooks/useCustomStyles';
 
+import { useMutation } from '~/hooks/useMutation';
+import { PACKQUERYS, PACKREDUCERS } from '~/hooks/packs';
+
 export default function Water({ currentPack, setWaterItem }) {
   const [waterWeight, setWaterWeight] = useState(0);
   const dispatch = useDispatch();
   const styles = useCustomStyles(loadStyles);
 
+  const { mutation, onSuccesMutation } = useMutation(
+    PACKQUERYS.addItem,
+    PACKREDUCERS.addItem,
+  );
+
   /**
    * Update the water weight.
    *
@@ -36,7 +44,9 @@ export default function Water({ currentPack, setWaterItem }) {
       type: ItemCategoryEnum.WATER,
     };
 
-    dispatch(addPackItem(data));
+    mutation.mutate(data, {
+      onSuccess: (data) => onSuccesMutation(data),
+    });
   };
 
   return (

client/components/item/AddItem.js

@@ -1,13 +1,9 @@
 import { useEffect, useState } from 'react';
 import { Box, Input, Button, Text } from 'native-base';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  addPackItem,
-  editPackItem,
-  editItemsGlobalAsDuplicate,
-} from '../../store/packsStore';
 import { ItemForm } from './ItemForm'; // assuming you moved the form related code to a separate component
 import { ItemCategoryEnum } from '../../constants/itemCategory';
+import { PACKQUERYS, PACKREDUCERS } from '~/hooks/packs';
 
 export const AddItem = ({
   _id,
@@ -24,6 +20,24 @@ export const AddItem = ({
   setRefetch = () => {},
 }) => {
   const dispatch = useDispatch();
+  const {
+    mutation: editItemsGlobalAsDuplicateMutation,
+    onSuccesMutation: editItemsGlobalAsDuplicateOnSuccessMutation,
+  } = useMutation(
+    PACKQUERYS.editGlobalItemAsDuplicate,
+    PACKREDUCERS.editGlobalItemAsDuplicate,
+  );
+
+  const {
+    mutation: editItemsMutation,
+    onSuccesMutation: editItemsOnSuccessMutation,
+  } = useMutation(PACKQUERYS.editItem, PACKREDUCERS.editItem);
+
+  const {
+    mutation: addPackItemsMutation,
+    onSuccesMutation: addPackItemsOnSuccessMutation,
+  } = useMutation(PACKQUERYS.addItem, PACKREDUCERS.addItem);
+
   const isLoading = useSelector((state) => state.packs.isLoading);
 
   // Moved the state up to the parent component
@@ -56,45 +70,59 @@ export const AddItem = ({
     if (isEdit) {
       if (packId && initialData.global) {
         console.log('editing', packId);
-
-        dispatch(
-          editItemsGlobalAsDuplicate({
+        editItemsGlobalAsDuplicateMutation.mutate(
+          {
             itemId: _id,
             packId,
             name,
             weight,
             quantity,
             unit,
             type: categoryType,
-          }),
+          },
+          {
+            onSuccess: (data) =>
+              editItemsGlobalAsDuplicateOnSuccessMutation({
+                ...data,
+                itemId: _id,
+                packId: pack._id,
+              }),
+          },
         );
         closeModalHandler();
       } else {
-        dispatch(
-          editPackItem({
+        editItemsMutation.mutate(
+          {
             name,
             weight,
             quantity,
             unit,
             type: categoryType,
             _id: initialData._id,
-          }),
+          },
+          {
+            onSuccess: (data) => editItemsOnSuccessMutation(data),
+          },
         );
+
         setPage(1);
         closeModalHandler();
         setRefetch(refetch !== true);
       }
     } else {
-      dispatch(
-        addPackItem({
+      addPackItemsMutation.mutate(
+        {
           name,
           weight,
           quantity,
           type: categoryType,
           unit,
           _id,
           packId,
-        }),
+        },
+        {
+          onSuccess: (data) => addPackItemsOnSuccessMutation(data),
+        },
       );
       setIsAddItemModalOpen(false);
       setRefetch(refetch !== true);

client/components/item/AddItemGlobal.js

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { addItemsGlobal, addItemOffline } from '../../store/globalItemsStore';
 import { addOfflineRequest } from '../../store/offlineQueue';
 import { ItemForm } from './ItemForm'; // assuming you moved the form related code to a separate component
+import useAddGlobalItems from '~/hooks/globalItems/useAddGlobalItems';
 
 export const AddItemGlobal = ({
   setIsAddItemModalOpen,
@@ -46,15 +47,14 @@ export const AddItemGlobal = ({
       dispatch(addItemOffline({ ...item, weight: Number(item.weight) }));
       dispatch(addOfflineRequest({ method: 'addGlobalItem', data: item }));
     } else {
-      dispatch(
-        addItemsGlobal({
-          name,
-          weight,
-          quantity,
-          type: categoryType,
-          unit,
-        }),
-      );
+      useAddGlobalItems({
+        name,
+        weight,
+        quantity,
+        type: categoryType,
+        unit,
+      });
+
       setRefetch(refetch !== true);
     }
 

client/components/pack/AddPack.js

@@ -9,7 +9,8 @@ import { useSelector, useDispatch } from 'react-redux';
 import { CustomModal } from '../modal';
 import useTheme from '../../hooks/useTheme';
 import useCustomStyles from '~/hooks/useCustomStyles';
-import { useAddNewPack } from '~/hooks/packs';
+import { PACKQUERYS, PACKREDUCERS } from '~/hooks/packs';
+import { useMutation } from '@tanstack/react-query';
 
 export const AddPack = () => {
   const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
@@ -30,7 +31,10 @@ export const AddPack = () => {
   const error = useSelector((state) => state.packs.error);
 
   const isError = error !== null;
-  const { mutation } = useAddNewPack();
+  const {
+    mutation: addPackMutation,
+    onSuccesMutation: addPackOnSuccesMutation,
+  } = useMutation(PACKQUERYS.addPack, PACKREDUCERS.addPack);
   /**
    * Handles the addition of a pack.
    *
@@ -39,7 +43,12 @@ export const AddPack = () => {
    * @return {void}
    */
   const handleAddPack = () => {
-    dispatch(addPack({ name, owner_id: user?._id, is_public: isPublic }));
+    addPackMutation.mutate(
+      { name, owner_id: user?._id, is_public: isPublic },
+      {
+        onSuccess: (data) => addPackOnSuccesMutation(data),
+      },
+    );
     setName('');
   };
 

client/components/pack/PackDetails.js

@@ -43,6 +43,7 @@ export function PackDetails() {
 
   const { data: userPacks, isLoading: isUserPacksLoading } =
     useUserPacks(userId);
+
   const {
     data: currentPack,
     isLoading,

client/components/pack_table/DeletePackItemModal.js

@@ -8,6 +8,9 @@ import {
   deleteItemOffline,
 } from '../../store/globalItemsStore';
 import { addOfflineRequest } from '../../store/offlineQueue';
+import useDeleteGlobalItems from '~/hooks/globalItems/useDeleteGlobalItems';
+import { PACKQUERYS, PACKREDUCERS, useDeletePackItem } from '~/hooks/packs';
+import { useMutation } from '~/hooks/useMutation';
 
 export const DeletePackItemModal = ({
   itemId,
@@ -22,6 +25,16 @@ export const DeletePackItemModal = ({
     setIsModalOpen(false);
   };
 
+  const { mutation: deletePackItemMutation, onSuccesMutation } = useMutation(
+    PACKQUERYS.deleteItem,
+    PACKREDUCERS.deleteItem,
+  );
+
+  const {
+    mutation: deleteGlobalItemsMutation,
+    onSuccesMutation: deleteGlobalItemsonSuccesMutation,
+  } = useDeleteGlobalItems();
+
   /**
    * Sets the value of `isModalOpen` to `true`.
    *
@@ -40,10 +53,22 @@ export const DeletePackItemModal = ({
    */
   const deleteItemHandler = () => {
     if (pack) {
-      dispatch(deletePackItem({ itemId, currentPackId: pack._id }));
+      deletePackItemMutation.mutate(
+        { itemId, packId: pack._id },
+        {
+          onSuccess: (data) =>
+            onSuccesMutation({ ...data, itemId, packId: pack._id }),
+        },
+      );
     } else {
       if (isConnected) {
-        dispatch(deleteGlobalItem(itemId));
+        deleteGlobalItemsMutation.mutate(
+          { itemId: item },
+          {
+            onSuccess: (data) => deleteGlobalItemsonSuccesMutation(data),
+          },
+        );
+
         setRefetch(refetch !== true);
       } else {
         dispatch(deleteItemOffline(itemId));

client/components/pack_table/Table.tsx

@@ -16,6 +16,8 @@ import { PackOptions } from '../PackOptions';
 import CustomButton from '../custombutton';
 import ItemPicker from '../Picker';
 import useCustomStyles from '~/hooks/useCustomStyles';
+import { useMutation } from '~/hooks/useMutation';
+import { PACKQUERYS } from '~/hooks/packs';
 
 const WeightUnitDropdown = ({ value, onChange }) => {
   return (
@@ -225,6 +227,7 @@ export const TableContainer = ({
 }) => {
   const user = useSelector((state) => state.auth.user);
   const dispatch = useDispatch();
+  const { mutation } = useMutation(PACKQUERYS.duplicatePublicPack);
   const styles = useCustomStyles(loadStyles);
   let ids = [];
   if (currentPack?.items) {
@@ -238,7 +241,7 @@ export const TableContainer = ({
       ownerId: user._id,
       items: checkedItems,
     };
-    dispatch(duplicatePackItem(data));
+    mutation.mutate(data);
   };
 
   const [weightUnit, setWeightUnit] = useState('g');