done

src/components/home/categories.tsx

@@ -1,12 +1,24 @@
+import { useEffect } from 'react';
+import { useAppDispatch, useAppSelector } from '@/app/hooks';
+import { fetchProducts } from '@/app/slices/ProductSlice';
 import Categories from './sidebar';
 import Header from './header';
 import ProductsList from './productList';
 import { Category } from '@/types/Product';
-import { selectCategories, getFocused } from '@/app/slices/categorySlice';
+import {
+  fetchCategories,
+  selectCategories,
+  getFocused,
+} from '@/app/slices/categorySlice';
 import { RootState } from '@/app/store';
-import { useAppSelector } from '@/app/hooks';
 
 function CategoriesSection() {
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    dispatch(fetchProducts());
+    dispatch(fetchCategories());
+  }, [dispatch]);
+
   const categories: Category[] = useAppSelector((state: RootState) =>
     selectCategories(state)
   );

src/pages/Home.tsx

@@ -1,23 +1,13 @@
-import { useEffect } from 'react';
-import { useAppDispatch } from '@/app/hooks';
-import { fetchProducts } from '@/app/slices/ProductSlice';
-import { fetchCategories } from '@/app/slices/categorySlice';
 import CategoriesSection from '@/components/home/categories';
 import HelloSection from '../components/HelloSection/HelloSection';
 
 function Home() {
-  const dispatch = useAppDispatch();
-  useEffect(() => {
-    dispatch(fetchProducts());
-    dispatch(fetchCategories());
-  }, [dispatch]);
-
   return (
     <main className=" relative w-full h-auto p-2 bg-violeteBg lg:p-10 md:p-10">
       <div>
-        <HelloSection />
+        {/* <HelloSection /> */}
+        <CategoriesSection />
       </div>
-      <CategoriesSection />
     </main>
   );
 }