Initial Activity View

Add New Colors.jsx
Allow Dark model Toggle from the Navbar

src/queries/ChoreQueries.jsx

@@ -1,9 +1,12 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useState } from 'react'
 import { useQuery } from 'react-query'
-import { CreateChore, GetChoresNew } from '../utils/Fetcher'
+import { CreateChore, GetChoresHistory, GetChoresNew } from '../utils/Fetcher'
 
-export const useChores = () => {
-  return useQuery('chores', GetChoresNew)
+export const useChores = includeArchive => {
+  return useQuery(['chores', includeArchive], () =>
+    GetChoresNew(includeArchive),
+  )
 }
 
 export const useCreateChore = () => {
@@ -15,3 +18,17 @@ export const useCreateChore = () => {
     },
   })
 }
+
+export const useChoresHistory = initialLimit => {
+  const [limit, setLimit] = useState(initialLimit) // Initially, no limit is selected
+
+  const { data, error, isLoading } = useQuery(['choresHistory', limit], () =>
+    GetChoresHistory(limit),
+  )
+
+  const handleLimitChange = newLimit => {
+    setLimit(newLimit)
+  }
+
+  return { data, error, isLoading, handleLimitChange }
+}