@canva/cli 1.19.0 → 1.21.0

package/templates/mls/src/pages/list_page/agent_tab_panel.tsx

@@ -1,126 +0,0 @@
-import { Box, Rows, Scrollable, Text } from "@canva/app-ui-kit";
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { useState } from "react";
-import InfiniteScroll from "react-infinite-scroller";
-import { useIntl } from "react-intl";
-import { useNavigate } from "react-router-dom";
-import { fetchAgents } from "../../adapter";
-import { AgentGrid } from "../../components/agent/agent_grid";
-import { AgentList } from "../../components/agent/agent_list";
-import { AgentSearchFilters } from "../../components/agent/agent_search_filters";
-import {
-  GridPlaceholder,
-  ListPlaceholder,
-} from "../../components/placeholders/placeholders";
-import type { Agent, Office } from "../../real_estate.type";
-
-type Layout = "grid" | "list";
-
-interface AgentTabContentProps {
-  office: Office;
-}
-
-export const AgentTabPanel = ({ office }: AgentTabContentProps) => {
-  const intl = useIntl();
-  const [layout, setLayout] = useState<Layout>("grid");
-  const [query, setQuery] = useState<string>("");
-  const [sort, setSort] = useState<string>("");
-
-  const toggleLayout = () => {
-    setLayout(layout === "grid" ? "list" : "grid");
-  };
-
-  const {
-    data: agentItems,
-    hasNextPage,
-    isLoading,
-    fetchNextPage,
-    isFetchingNextPage,
-    isError,
-  } = useInfiniteQuery({
-    queryKey: ["agents", query, sort, office],
-    queryFn: async ({ pageParam }: { pageParam: string | undefined }) => {
-      return fetchAgents(office, query, pageParam, sort);
-    },
-    getNextPageParam: (lastPage) => lastPage?.continuation,
-    initialPageParam: undefined,
-  });
-
-  const agents = agentItems?.pages?.flatMap((page) => page.agents) || [];
-  const navigate = useNavigate();
-  const handleAgentClick = (item: Agent) => {
-    navigate(`/details/agent`, { state: { office, agent: item } });
-  };
-
-  return (
-    <Scrollable>
-      <InfiniteScroll
-        loadMore={() => fetchNextPage()}
-        hasMore={hasNextPage}
-        useWindow={false}
-      >
-        <Box height="full">
-          <Rows spacing="2u">
-            {((!isError && !isLoading && agents.length > 0) ||
-              query?.length) && (
-              <AgentSearchFilters
-                query={query}
-                onQueryChange={setQuery}
-                layout={layout}
-                onLayoutToggle={toggleLayout}
-                sort={sort}
-                onSortChange={setSort}
-              />
-            )}
-            {isError && (
-              <Text tone="critical">
-                {intl.formatMessage({
-                  defaultMessage: "Error loading agents. Please try again.",
-                  description: "Error message when agents fail to load",
-                })}
-              </Text>
-            )}
-            {isLoading && (
-              <Box width="full" paddingBottom="2u">
-                {layout === "grid" ? <GridPlaceholder /> : <ListPlaceholder />}
-              </Box>
-            )}
-            {!isError && !isLoading && agents.length === 0 && (
-              <Box
-                height="full"
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-              >
-                <Text>
-                  {intl.formatMessage({
-                    defaultMessage: "No agents found in this office.",
-                    description: "Message shown when no agents are found",
-                  })}
-                </Text>
-              </Box>
-            )}
-            {!isError && !isLoading && agents.length > 0 && (
-              <Rows spacing={layout === "grid" ? "2u" : "0"}>
-                {layout === "grid" ? (
-                  <AgentGrid agents={agents} onAgentClick={handleAgentClick} />
-                ) : (
-                  <AgentList agents={agents} onAgentClick={handleAgentClick} />
-                )}
-                {isFetchingNextPage && (
-                  <Box width="full" paddingBottom="2u">
-                    {layout === "grid" ? (
-                      <GridPlaceholder />
-                    ) : (
-                      <ListPlaceholder />
-                    )}
-                  </Box>
-                )}
-              </Rows>
-            )}
-          </Rows>
-        </Box>
-      </InfiniteScroll>
-    </Scrollable>
-  );
-};

package/templates/mls/src/pages/list_page/list_page.tsx

@@ -1,67 +0,0 @@
-import {
-  Box,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-} from "@canva/app-ui-kit";
-import { useIntl } from "react-intl";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
-import { Breadcrumb } from "../../components/breadcrumb/breadcrumb";
-import type { Office } from "../../real_estate.type";
-import { AgentTabPanel } from "./agent_tab_panel";
-import { ListingTabPanel } from "./listing_tab_panel";
-
-export const ListPage = () => {
-  const navigate = useNavigate();
-  const { tab = "listings" } = useParams<{
-    tab?: string;
-  }>();
-  const { office } = useLocation().state as { office: Office };
-  const intl = useIntl();
-
-  return (
-    <Tabs
-      onSelect={(value) => navigate(`/list/${value}`, { state: { office } })}
-      activeId={tab}
-      height="fill"
-    >
-      <Box height="full" display="flex" flexDirection="column" paddingTop="2u">
-        <Breadcrumb />
-        <Box paddingBottom="1u">
-          <TabList>
-            <Tab
-              id="listings"
-              active={tab === "listings"}
-              onClick={() => navigate(`/list/listings`, { state: { office } })}
-            >
-              {intl.formatMessage({
-                defaultMessage: "Listings",
-                description: "Tab label for property listings",
-              })}
-            </Tab>
-            <Tab
-              id="agents"
-              active={tab === "agents"}
-              onClick={() => navigate(`/list/agents`, { state: { office } })}
-            >
-              {intl.formatMessage({
-                defaultMessage: "Agents",
-                description: "Tab label for real estate agents",
-              })}
-            </Tab>
-          </TabList>
-        </Box>
-        <TabPanels>
-          <TabPanel id="listings">
-            <ListingTabPanel office={office} />
-          </TabPanel>
-          <TabPanel id="agents">
-            <AgentTabPanel office={office} />
-          </TabPanel>
-        </TabPanels>
-      </Box>
-    </Tabs>
-  );
-};

package/templates/mls/src/pages/list_page/listing_tab_panel.tsx

@@ -1,135 +0,0 @@
-import { Box, Rows, Scrollable, Text } from "@canva/app-ui-kit";
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { useState } from "react";
-import InfiniteScroll from "react-infinite-scroller";
-import { useIntl } from "react-intl";
-import { useNavigate } from "react-router-dom";
-import { fetchListings } from "../../adapter";
-import { ListingGrid } from "../../components/listing/listing_grid";
-import { ListingList } from "../../components/listing/listing_list";
-import { ListingSearchFilters } from "../../components/listing/listing_search_filters";
-import {
-  GridPlaceholder,
-  ListPlaceholder,
-} from "../../components/placeholders/placeholders";
-import type { Office, Property } from "../../real_estate.type";
-
-type Layout = "grid" | "list";
-
-interface ListingTabContentProps {
-  office: Office;
-}
-
-export const ListingTabPanel = ({ office }: ListingTabContentProps) => {
-  const intl = useIntl();
-  const [layout, setLayout] = useState<Layout>("grid");
-  const [query, setQuery] = useState<string>("");
-  const [propertyType, setPropertyType] = useState<string>("");
-  const [sort, setSort] = useState<string>("");
-
-  const toggleLayout = () => {
-    setLayout(layout === "grid" ? "list" : "grid");
-  };
-
-  const {
-    data: listingItems,
-    hasNextPage,
-    isLoading,
-    fetchNextPage,
-    isFetchingNextPage,
-    isError,
-  } = useInfiniteQuery({
-    queryKey: ["listings", query, propertyType, sort, office],
-    queryFn: async ({ pageParam }: { pageParam: string | undefined }) => {
-      return fetchListings(office, query, propertyType, sort, pageParam);
-    },
-    getNextPageParam: (lastPage) => lastPage?.continuation,
-    initialPageParam: undefined,
-  });
-  const navigate = useNavigate();
-
-  const listings = listingItems?.pages?.flatMap((page) => page.listings) || [];
-  const handleListingClick = (item: Property) => {
-    navigate(`/details/listing`, { state: { office, listing: item } });
-  };
-
-  return (
-    <Scrollable>
-      <InfiniteScroll
-        loadMore={() => fetchNextPage()}
-        hasMore={hasNextPage}
-        useWindow={false}
-      >
-        <Box height="full">
-          <Rows spacing="2u">
-            {((!isError && !isLoading && !!listings.length) ||
-              !!query?.length) && (
-              <ListingSearchFilters
-                query={query}
-                onQueryChange={setQuery}
-                layout={layout}
-                onLayoutToggle={toggleLayout}
-                propertyType={propertyType}
-                onPropertyTypeChange={setPropertyType}
-                sort={sort}
-                onSortChange={setSort}
-              />
-            )}
-            {isError && (
-              <Text tone="critical">
-                {intl.formatMessage({
-                  defaultMessage: "Error loading listings. Please try again.",
-                  description: "Error message when listings fail to load",
-                })}
-              </Text>
-            )}
-            {isLoading && (
-              <Box width="full" paddingBottom="2u">
-                {layout === "grid" ? <GridPlaceholder /> : <ListPlaceholder />}
-              </Box>
-            )}
-            {!isError && !isLoading && !listings.length && (
-              <Box
-                height="full"
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-              >
-                <Text>
-                  {intl.formatMessage({
-                    defaultMessage: "No listings found.",
-                    description: "Message shown when no listings are found",
-                  })}
-                </Text>
-              </Box>
-            )}
-            {!isError && !isLoading && !!listings.length && (
-              <Rows spacing={layout === "grid" ? "2u" : "0"}>
-                {layout === "grid" ? (
-                  <ListingGrid
-                    listings={listings}
-                    onListingClick={handleListingClick}
-                  />
-                ) : (
-                  <ListingList
-                    listings={listings}
-                    onListingClick={handleListingClick}
-                  />
-                )}
-                {isFetchingNextPage && (
-                  <Box width="full" paddingBottom="2u">
-                    {layout === "grid" ? (
-                      <GridPlaceholder />
-                    ) : (
-                      <ListPlaceholder />
-                    )}
-                  </Box>
-                )}
-              </Rows>
-            )}
-          </Rows>
-        </Box>
-      </InfiniteScroll>
-    </Scrollable>
-  );
-};