[DOC]How to use useTable with medusajs v1

[spacewalkingninja]

Documentation issue

This is my custom modified index.tsx from
https://refine.dev/templates/next-js-ecommerce-store/

import React from "react";
import type { GetServerSideProps } from "next";
import {
  type CrudFilter,
  type GetListResponse,
  useGo,
  useList,
  useParsed,
  useTable,
} from "@refinedev/core";
import { dataProvider } from "@refinedev/medusa";
import type {
  Product,
  ProductCollection,
  StoreCartsRes,
} from "@medusajs/medusa";
import nookies from "nookies";

import { useCartContext } from "@lib/context";
import {
  CART_COOKIE_KEY,
  REGION_COOKIE_KEY,
  SERVER_API_URL,
} from "src/contants";
import clsx from "clsx";
import { ButtonCategory } from "@components/ui/button-category";
import { ProductGridItem } from "@components/product/product-grid-item";
import { ProductGridItemSkeleton } from "@components/product/product-grid-item-skeleton";

import { useRouter } from "next/router";

import medusaRequest from "@lib/medusa-fetch"


type Props = {
  initialResults?: GetListResponse<Product>;
  initialCategories?: GetListResponse<ProductCollection>;
  initialCategory?: string;
  initialQuery?: string;
};

const Home = ({
  initialCategories,
  initialResults,
  initialCategory,
  initialQuery,
}: Props) => {
  
  console.log(initialResults)

  const router = useRouter();
  const go = useGo();
  const { params } = useParsed();
  const { cartId } = useCartContext();
  const [filteredResults, setFilteredResults] = React.useState(initialResults);
/*
  const { data: categories } = useList<ProductCollection>({
    resource: "product-categories",
    queryOptions: {
      initialData: initialCategories,
      enabled: false,
    },
  });*/
  //console.warn("INDEXP")
  //console.warn(initialCategories)
  if(typeof initialCategories === 'undefined')
  {
    initialCategories=[]
  }


  const [priceRange, setPriceRange] = React.useState<number[]>([0, 1000]);

  const updatePriceRange = (newRange: number[]) => {
    setPriceRange(newRange);
    // Update the URL with new min and max prices
    router.push(
      {
        pathname: router.pathname,
        query: {
          ...router.query,
          minPrice: newRange[0],
          maxPrice: newRange[1],
        },
      },
      undefined,
      { shallow: true } // Prevent full page reload
    );
  };

  const handleMinPriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newMin = Math.min(Number(e.target.value), priceRange[1] - 1);
    updatePriceRange([newMin, priceRange[1]]);
  };

  const handleMaxPriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newMax = Math.max(Number(e.target.value), priceRange[0] + 1);
    updatePriceRange([priceRange[0], newMax]);
  };

  let categories = initialCategories 

  const searchQuery = params?.q;
  let selectedCategory = false
  let selectedCategoryId = false

  for(let i=0;i<categories.length; i++)
  {
    if(categories[i].handle === params?.category)
    {
       selectedCategory = categories[i]
       selectedCategoryId = categories[i].id
    }
  }
  
  React.useEffect(() => {
    const newFilteredResults: typeof initialResults = [];
  
    // Using forEach to populate newFilteredResults based on price range
    initialResults.forEach((product) => {
      //console.warn(product)
      const price = product.variants[0]?.calculated_price;
      //console.warn(price)
      if (price >= priceRange[0] && price <= priceRange[1]) {
        newFilteredResults.push(product);
      }
    });
    //console.warn(newFilteredResults)
    setFilteredResults(newFilteredResults);
  }, [priceRange, initialResults]);

  //console.warn(initialResults)
  /*const selectedCategory = categories?.find(
    (category) => category.handle === params?.category,
  );
  const selectedCategoryId = selectedCategory?.id;
*/
    if(params?.category !== null)
    {
      selectedCategoryId = params?.category
    }
    const {
      tableQueryResult: { data: products, isLoading, isFetching },
      filters,
      setFilters,
    } = useTable<Product>({
      resource: "products",
      filters: {
        permanent: [
          {
            field: "cart_id",
            value: cartId,
            operator: "eq",
          },
        ],
        initial: [
          ...(selectedCategoryId
            ? [
                {
                  field: "category_id",
                  value: [selectedCategoryId],
                  operator: "eq",
                } as CrudFilter,
              ]
            : []),
          ...(searchQuery
            ? [
                {
                  field: "q",
                  value: searchQuery,
                  operator: "eq",
                } as CrudFilter,
              ]
            : []),
        ],
      },
      pagination: { mode: "off" },
      queryOptions: {
        initialData:
          searchQuery === initialQuery &&
          selectedCategoryId === initialCategory
            ? filteredResults
            : undefined,
        keepPreviousData: false,
        select: (response) => {
          // Assuming the actual data array is inside response.data
          const sortedData = response.data.sort(hsCodeSorter);
          return {
            ...response,
            data: sortedData,
          };
        },
      },
    });

  const activeSearchQuery = filters.find(
    (f) => "field" in f && f.field === "q",
  )?.value;
  const activeCategoryId = filters.find(
    (f) => "field" in f && f.field === "category_id",
  )?.value?.[0];

  const [localizedCatNames, setLocalizedCatNames] = React.useState<any[]>([]); // Ensure it's initialized as an array


  React.useEffect(() => {
    if (
      selectedCategoryId !== activeCategoryId ||
      searchQuery !== activeSearchQuery
    ) {
      setFilters(
        [
          {
            field: "category_id",
            operator: "eq",
            value: selectedCategoryId ? [selectedCategoryId] : undefined,
          },
          {
            field: "q",
            operator: "eq",
            value: searchQuery ? searchQuery : undefined,
          },
        ],
        "merge",
      );
    }

    const getCookieValue = (name) => {
      console.log(document.cookie)
      const cookies = document.cookie.split('; ');
      for (let cookie of cookies) {
        const [cookieName, cookieValue] = cookie.split('=');
        if (cookieName === name) {
          return decodeURIComponent(cookieValue);
        }
      }
      return null;
    };

    // Get language based on the cookie `medusa_region`
    const getLanguageFromRegionCookie = () => {
      const cookie = getCookieValue("medusa_region"); // Retrieve the cookie
      if (cookie) {
        try {
          const region = JSON.parse(cookie);
          const countryCode = region?.countryCode?.toLowerCase();
  
          console.log(countryCode)
          // Map country codes to language codes if needed
          switch (countryCode) {
            case "pt":
              return "pt";
            case "es":
              return "es";
            default:
              return "en";
          }
        } catch (e) { 
          console.error("Error parsing medusa_region cookie:", e);
        }
      }
      console.log(cookie)
      return "en"; // Default to English if not found
    };

    // Parse the description to extract the language-specific content
    const getLocalizedDescription = (description: string, lang: string) => {
      const regex = new RegExp(`<lang\\s+l="${lang}"\\s*>([\\s\\S]*?)</lang>`, "i");
      const match = description.match(regex);
  
      if (match && match[1]) {
        return match[1]; // Return the localized description
      }
  
      // If no match is found, fall back to the default or full description
      return description;
    };
    console.warn(categories)

    const getLocalizedCatNames = (categories: any[], lang: string) => {
      categories.forEach((category) => {
        console.log(category['name'])
        category['name'] = getLocalizedDescription(category['name'], lang); // Modify the name property directly
      });

      return categories
    };
    const userLang = getLanguageFromRegionCookie();
    const localizedCatNames = getLocalizedCatNames(categories, userLang)
    //console.warn(localizedCatNames)
    setLocalizedCatNames(localizedCatNames)

  }, [selectedCategoryId, activeCategoryId, searchQuery, activeSearchQuery, categories]);

  const selectCategory = React.useCallback(
    (value?: string | undefined) => {
      go({
        query: {
          category: value,
        },
        options: { keepQuery: false },
      });
    },
    [go],
  );

  const [menuOpen, setMenuOpen] = React.useState(false);
  const [filterOpen, setFilterOpen] = React.useState(false);

  return (
    <orinoco>
      <button
      className="lghidden appearance-none text-left transition-colors duration-200 ease-in-out w-full py-3 px-5 text-base font-bold text-gray-darkest rounded-3xl bg-gray-light hover:bg-gray-light"
      onClick={() => setFilterOpen(!filterOpen)}
      >
        Filters
      </button>
      <div
          className={clsx(
            "w-[200px]",
            "flex-shrink-0",
            "lg:flex",
            "flex-col",
            "gap-2",
            filterOpen ? "flex" : "hidden",  // toggled on small screens
          )}
        >

        <div >
        <h3>Price Range</h3>
        
        {/* Custom Price Slider */}
        <div className="price-slider">
          <input
            type="range"
            min="0"
            max="2000"
            step="50"
            value={priceRange[0]}
            onChange={(e) => handleMinPriceChange(e)}
          />
          <input
            type="range"
            min="0"
            max="2000"
            step="50"
            value={priceRange[1]}
            onChange={(e) => handleMaxPriceChange(e)}
          />
          <div className="slider-ticks">
            {[0, 500, 1000, 1500, 2000].map((tick) => (
              <span key={tick} className="tick" style={{ left: `${(tick / 2000) * 100}%` }}>
                ${tick}
              </span>
            ))}
          </div>
        </div>
        </div>

          <ButtonCategory
            onClick={() => {
              selectCategory();
              setFilterOpen(false);
            }}
            active={params?.category === undefined}
          >
            Reset Filters
          </ButtonCategory>
        </div>
            
      <button
      className="lghidden appearance-none text-left transition-colors duration-200 ease-in-out w-full py-3 px-5 text-base font-bold text-gray-darkest rounded-3xl bg-gray-light hover:bg-gray-light"
      onClick={() => setMenuOpen(!menuOpen)}
      >
        Categories
      </button>
      <div className={clsx("flex", "items-start", "justify-center", "gap-8")}>
      
        <div
          className={clsx(
            "w-[200px]",
            "flex-shrink-0",
            "lg:flex",
            "flex-col",
            "gap-2",
            menuOpen ? "flex" : "hidden",  // toggled on small screens
          )}
        >
          <ButtonCategory
            onClick={() => {
              selectCategory();
              setMenuOpen(false);
            }}
            active={params?.category === undefined}
          >
            All Items
          </ButtonCategory>
          {localizedCatNames?.map((category) => (
            
            (category.parent_category === null || params?.category !== null) && (
  
              <ButtonCategory
                key={category.id}
                onClick={() => {
                  selectCategory(category.handle);
                  setMenuOpen(false);
                }}
                active={params?.category === category.handle}
                hidden = {false}
              >
                {category.name}
              </ButtonCategory>
            )
            
          ))}
        </div>
        <div
          className={clsx(
            "flex-1",
            "grid",
            "grid-cols-1",
            "md:grid-cols-2",
            "lg:grid-cols-3",
            "gap-x-8",
            "gap-y-16",
          )}
        >
          {products?.data.map((product) => (
            <ProductGridItem key={product.id} product={product} />
          ))}
          {isLoading
            ? Array.from({ length: 6 }).map((_, i) => (
                <ProductGridItemSkeleton key={i} />
              ))
            : null}
          {!isLoading && !products?.data.length ? (
            <div
              className={clsx("text-xl", "font-semibold", "text-gray-darkest")}
            >
              <p>No products found.</p>
            </div>
          ) : null}
        </div>
      </div>
    </orinoco>
  );
};

export default Home;

export const getServerSideProps: GetServerSideProps<Props> = async (
  context,
) => {
  const { query } = context;
  const { category = undefined, q = undefined, minPrice = "0", maxPrice = "1000" } = query;
  
  const minPriceNumber = parseInt(minPrice as string, 10) || 0;
  const maxPriceNumber = parseInt(maxPrice as string, 10) || 1000;
  console.log("PRICES BETWEEN "+minPriceNumber+" AND "+maxPriceNumber)
  console.log("CAT IS:")
  console.log(category)
  const cookies = nookies.get(context);

  const medusaDataProvider = dataProvider(SERVER_API_URL);

  const getRegion = () => {
    const region = cookies[REGION_COOKIE_KEY];

    if (region) {
      return JSON.parse(region) as {
        regionId: string;
        countryCode: string;
      };
    }
    return null;
  };

  const createNewCart = async () => {
    const region = getRegion();

    const { data } = await medusaDataProvider.create<StoreCartsRes>({
      resource: "store/carts",
      variables: {
        region_id: region?.regionId,
      },
    });

    nookies.set(context, CART_COOKIE_KEY, data.cart.id, {
      path: "/",
    });
    nookies.set(
      context,
      REGION_COOKIE_KEY,
      JSON.stringify({
        regionId: data.cart.region.id,
        countryCode: region?.countryCode ?? data.cart.region.countries[0].iso_2,
      }),
      {
        path: "/",
      },
    );

    return data.cart.id;
  };



  try {
    let cartId = cookies[CART_COOKIE_KEY];

    if (!cartId) {
      cartId = await createNewCart();
    }
    let AFC = category
    if (category===undefined)
    {
      AFC = null
    }
/*
    const categories = await medusaDataProvider.getList<ProductCollection>({
      resource: "product-categories",
    });*/


    let categories = await medusaRequest("GET", "/product-categories", {
      query: {
        limit:750,
        parent_category_id:AFC
      }

    })
    categories = categories.body.product_categories
    //console.log(categories)
    /*if (!categories.length) {
      throw new Error(`Failed to fetch Categories`)
    }*/
   // console.log("CAT")
    //console.log(categories.body.product_categories)
    console.log("CAT")
    console.log(category)
    
    let categoryId = 0;
    if( AFC !== null)
    {
      categoryId = AFC;
      console.log("AFC")
    }
    /*if(category){
    categoryId = categories?.find(
      (cat) => cat.handle === category,
    )?.id;
    }*/
    /*
    const filters: CrudFilter[] = [
      {
        field: "cart_id",
        value: cartId,
        operator: "eq",
      },//@ts-ignore
      ...(categoryId && !q
        ? [
            {
              field: "category_id",
              operator: "eq",//@ts-ignore
              value: [categoryId],
            } as CrudFilter,
          ]
        : []),
      ...(q
        ? [
            {
              field: "q",
              operator: "eq",
              value: q,
            } as CrudFilter,
          ]
        : []),
    ];*/
    //console.log(filters)
    let products = false
    //console.log(priceRange)
    if (categoryId && !q)
    {
      products = await medusaRequest("GET", "/products", {
        query: {
          cart_id: cartId,
          category_id:[ categoryId]
        },
      })
  
    }
    if (q)
    {
      products = await medusaRequest("GET", "/products", {
        query: {
          cart_id: cartId,
          q: q
        },
      })
    }
    if (!products)
    {
      products = await medusaRequest("GET", "/products", {
        query: {
          cart_id: cartId,
        },
      })
    }
    //@ts-ignore
    products = products.body.products;

    const newFilteredResults: Product[] = [];  
    products.forEach((product) => {
      const price = product.variants[0]?.calculated_price;
      if (price >= minPriceNumber && price <= maxPriceNumber) {
        newFilteredResults.push(product);
      }
    });

/*
    const products = await medusaDataProvider.getList<Product>({
      resource: "products",
      filters,
    });*/

    context.res.setHeader(
      "Cache-Control",
      // cache for 12 hours
      // serve stale content while revalidating for 24 hours
      `public, s-maxage=${60 * 60 * 12}, stale-while-revalidate=${
        60 * 60 * 24
      }`,
      );
      console.log(newFilteredResults)
      console.log(minPriceNumber)
      console.log(maxPriceNumber)
      newFilteredResults.forEach((product) => {
        const price = product.variants[0]?.calculated_price;
        console.log("PP is" + price)
      })
    return {
      props: {
        initialResults: newFilteredResults,
        initialCategories: categories,
        ...(q && { initialQuery: q as string }),
        ...(category && { initialCategory: category as string }),
      },
    };
  } catch (error) {
    console.log("EER")
    console.log(error)
    console.log("EER")
    return { props: {} };
  }
};

const hsCodeSorter = (a: Product, b: Product) => {
  return Number(a.hs_code ?? 0) - Number(b.hs_code ?? 0);
};

Describe the thing to improve

As you can see in the above code in the clientside section I have code that edits the URL in the browser and tries to make a priceRange selector thing:

const Home = ({
initialCategories,
initialResults,
initialCategory,
initialQuery,
}: Props) => {
//  ...
const updatePriceRange = (newRange: number[]) => {
  setPriceRange(newRange);
  // Update the URL with new min and max prices
  router.push(
    {
      pathname: router.pathname,
      query: {
        ...router.query,
        minPrice: newRange[0],
        maxPrice: newRange[1],
      },
    },
    undefined,
    { shallow: true } // Prevent full page reload
  );
};

const handleMinPriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const newMin = Math.min(Number(e.target.value), priceRange[1] - 1);
  updatePriceRange([newMin, priceRange[1]]);
};

const handleMaxPriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const newMax = Math.max(Number(e.target.value), priceRange[0] + 1);
  updatePriceRange([priceRange[0], newMax]);
};

and also note that on clientside I am arleady TRYING mY BEST to filter the results:

  React.useEffect(() => {
    const newFilteredResults: typeof initialResults = [];
  
    // Using forEach to populate newFilteredResults based on price range
    initialResults.forEach((product) => {
      //console.warn(product)
      const price = product.variants[0]?.calculated_price;
      //console.warn(price)
      if (price >= priceRange[0] && price <= priceRange[1]) {
        newFilteredResults.push(product);
      }
    });
    //console.warn(newFilteredResults)
    setFilteredResults(newFilteredResults);
  }, [priceRange, initialResults]);
//...
//and then I pass them to here
      queryOptions: {
        initialData:
          searchQuery === initialQuery &&
          selectedCategoryId === initialCategory
            ? filteredResults //<-------- SEE HOW I PASS THEM FILTERED???? IT DONT WORK FOR SOME REASON
            : undefined,
        keepPreviousData: false,
        select: (response) => {
          // Assuming the actual data array is inside response.data
          const sortedData = response.data.sort(hsCodeSorter);
          return {
            ...response,
            data: sortedData,
          };
        },
      },

But it dont work simply working with the initialResults on clientside no matter how I change the priceRange values it won't filter them the way I want.
So I tried working on serverSide:

export const getServerSideProps: GetServerSideProps<Props> = async (
  context,
) => {
  const { query } = context;
  const { category = undefined, q = undefined, minPrice = "0", maxPrice = "1000" } = query;
  
  const minPriceNumber = parseInt(minPrice as string, 10) || 0;
  const maxPriceNumber = parseInt(maxPrice as string, 10) || 1000;
  console.log("PRICES BETWEEN "+minPriceNumber+" AND "+maxPriceNumber)

...

      console.log(newFilteredResults)
      console.log(minPriceNumber)
      console.log(maxPriceNumber)
      newFilteredResults.forEach((product) => {
        const price = product.variants[0]?.calculated_price;
        console.log("PP is" + price)
      })
    return {
      props: {
        initialResults: newFilteredResults,
        initialCategories: categories,
        ...(q && { initialQuery: q as string }),
        ...(category && { initialCategory: category as string }),
      },
    };

According to my console.log's in clientSide alone, the priceFiltering should work, but visually I'm seeing all products the same.
And serverSide section the console.log "PP is"+price only prints the filtered products, so the serverside also works BUT on UI I see all products, not only the filtered products.
What am I doing wrong?

Describe the solution (optional)

I also have another clientSide implementation that I don't know how to make work:

    const updatePriceRange = React.useMemo(
      () => (newRange: number[]) => {
        setPriceRange(newRange);
        router.push(
          {
            pathname: router.pathname,
            query: {
              ...router.query,
              minPrice: newRange[0],
              maxPrice: newRange[1],
            },
          },
          undefined,
          { shallow: true }
        );
        setFilters((prevFilters) => [
          ...prevFilters.filter(
            (filter) => filter.field !== "variants.calculated_price"
          ),
          { field: "variants.calculated_price", operator: "gte", value: newRange[0] },
          { field: "variants.calculated_price", operator: "lte", value: newRange[1] },
        ], "replace");
      },
      [router, setFilters]
    );

how do I make it access product.variants.calculated_price I dont think the way I implemented it it works good for medusajs data structure because it must access object within object or smth like this?

Thx

[BatuhanW]

Hey @spacewalkingninja you can use our AI chatbot in our documentation or in our discord for your questions.