@canva/cli 1.11.0 → 1.12.0

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

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,135 @@
+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>
+  );
+};