file.svelte

<script lang="ts">
  // svelte
  import { page } from '$app/stores';

  // custom components
  import { AddSquareButton } from '@components/custom';

  // parts
  import {
    FoodItem,
    FoodContextMenu,
    FoodsSidebar,
    FoodDrawer,
    FoodsSubHeader,
    FoodsNoResults,
    FoodsEmptyState
  } from '@components/parts';

  // utils
  import { cn } from '$lib/utils';

  // helpers
  import { getSimilarFoods } from '@helpers/foods';
  import { setFoodsPageInitialParams as setInitialParams } from '@helpers/navigation';

  // types
  import type {
    Food,
    Category,
    Menu,
    DrawerItemClickEventValues
  } from '@types';

  import type { FoodsPageData } from './+page.server';

  // ssr data
  export let data: FoodsPageData;
  const {
    initialMenuId,
    initialCategoryId,
    foodsByCategoryData,
    categoriesByMenuData,
    menusData: menus
  } = data;

  // set initial params
  setInitialParams({ initialMenuId, initialCategoryId });

  // main states
  let activeMenu: Menu = menus.find(
    (m) => m.id === initialMenuId
  )!; /* binded to child */

  let categories: Category[] = categoriesByMenuData[activeMenu.id];

  let activeCategory: Category | undefined =
    categories.find((c) => c.id === initialCategoryId) ??
    categories[0]; /* binded to child */

  let foodsByCategory: Record<string, Food[]> =
    foodsByCategoryData[activeMenu.id];

  // action states
  let searchKeyword: string = ''; /* binded to child */
  let drawerFood: Food | undefined = undefined;
  let drawerSimilarFoods: Food[] | undefined = undefined;
  let ctxMenuOpened = false; /* binded to child */
  let openDrawer = false; /* binded to child */

  // not reacting
  $: console.log($page.url.searchParams.get('cat'));
  
  // reactive values
  $: categories = categoriesByMenuData[activeMenu.id];
  $: foodsByCategory = foodsByCategoryData[activeMenu.id];

  let foodsDisplay: Food[] | undefined;
  $: if (!searchKeyword) {
    // no search keyword, just display all foods
    foodsDisplay = foodsByCategory?.[activeCategory?.id ?? ''];
  } else {
    // create a reference to all foods in the active category
    const activeCategoryFoods = foodsByCategory?.[activeCategory?.id ?? ''];

    // filter them by search keyword
    foodsDisplay = activeCategoryFoods.filter(
      (f) => f.title.toLowerCase().indexOf(searchKeyword.toLowerCase()) !== -1
    );
  }

  // handlers
  const onItemClick = (food: Food): void => {
    drawerFood = food;
    drawerSimilarFoods = getSimilarFoods(foodsDisplay, drawerFood);
    // avoid to open the drawer if the context menu is opened
    openDrawer = true && !ctxMenuOpened;
  };

  // custom event listeners
  const onDrawerItemClick = (
    ev: CustomEvent<DrawerItemClickEventValues>
  ): void => {
    drawerFood = ev.detail.food;
  };
</script>