add explore

2025-12-19 16:51:18 -03:00
parent 5959287fea
commit 9e4c97e7dd
8 changed files with 268 additions and 157 deletions
--- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx
+++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx
@@ -13,7 +13,7 @@ import {
  CheckIcon,
  BookIcon,
  ArrowDownAZIcon,
-  ArrowDownZAIcon,
+  ArrowUpAZIcon,
  AlertTriangleIcon,
  UserIcon
 } from 'lucide-react'
@@ -95,6 +95,7 @@ export async function loader({ context }: Route.LoaderArgs) {

 export async function action({ params, request, context }: Route.ActionArgs) {
  const body = (await request.json()) as object
+
  const r = await req({
    url: `enrollments`,
    headers: new Headers({ 'Content-Type': 'application/json' }),
@@ -508,7 +509,7 @@ function FacetedFilter({
                className="cursor-pointer text-muted-foreground"
                onClick={toggle}
              >
-                {sort == 'a-z' ? <ArrowDownAZIcon /> : <ArrowDownZAIcon />}
+                {sort == 'a-z' ? <ArrowDownAZIcon /> : <ArrowUpAZIcon />}
              </Button>
            </div>
          </div>
--- a/apps/saladeaula.digital/app/routes.ts
+++ b/apps/saladeaula.digital/app/routes.ts
@@ -8,7 +8,7 @@ import {
 export default [
  layout('routes/layout.tsx', [
    index('routes/index.tsx'),
-    route('catalog', 'routes/catalog.tsx'),
+    route('explore', 'routes/explore.tsx'),
    route('certs', 'routes/certs.tsx'),
    route('history', 'routes/history.tsx'),
    route('settings', 'routes/settings/layout.tsx', [
--- a/apps/saladeaula.digital/app/routes/catalog.tsx
+++ b/apps/saladeaula.digital/app/routes/catalog.tsx
@@ -1,150 +0,0 @@
-import type { Route } from './+types/catalog'
-
-import { Fragment, Suspense } from 'react'
-import { Await } from 'react-router'
-import { ListFilterIcon, PlusIcon, SearchIcon } from 'lucide-react'
-
-import { cloudflareContext } from '@repo/auth/context'
-import { createSearch } from '@repo/util/meili'
-import { Skeleton } from '@repo/ui/components/skeleton'
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput
-} from '@repo/ui/components/ui/input-group'
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemGroup,
-  ItemMedia,
-  ItemSeparator,
-  ItemTitle
-} from '@repo/ui/components/ui/item'
-import { Currency } from '@repo/ui/components/currency'
-import { Avatar, AvatarImage } from '@repo/ui/components/ui/avatar'
-
-import { Container } from '@/components/container'
-import placeholder from '@/assets/placeholder.webp'
-import { Button } from '@repo/ui/components/ui/button'
-
-export function meta({}: Route.MetaArgs) {
-  return [{ title: 'Expore nossos cursos' }]
-}
-
-export async function loader({ context, request, params }: Route.LoaderArgs) {
-  const cloudflare = context.get(cloudflareContext)
-  const courses = createSearch({
-    index: 'saladeaula_courses',
-    sort: ['created_at:desc'],
-    filter: 'unlisted NOT EXISTS',
-    hitsPerPage: 100,
-    env: cloudflare.env
-  })
-
-  return {
-    courses
-  }
-}
-
-export default function Component({
-  loaderData: { courses }
-}: Route.ComponentProps) {
-  return (
-    <Container className="space-y-5 max-w-2xl">
-      <Suspense fallback={<Skeleton />}>
-        {/*<Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbLink asChild>
-              <Link to="..">Meus cursos</Link>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbPage>Exporar mais cursos</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>*/}
-
-        <div className="space-y-1.5">
-          <h1 className="text-4xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">
-            Expore nossos cursos
-          </h1>
-          <p className="text-muted-foreground text-[1.05rem] text-balance sm:text-base">
-            Conheça todos os cursos que oferecemos, desenvolvidos para
-            fortalecer suas competências profissionais e apoiar seu crescimento
-            contínuo na carreira.
-          </p>
-        </div>
-
-        <InputGroup>
-          <InputGroupInput placeholder="Pesquisar curso" />
-          <InputGroupAddon>
-            <SearchIcon />
-          </InputGroupAddon>
-          <InputGroupAddon align="inline-end">
-            <ListFilterIcon />
-          </InputGroupAddon>
-        </InputGroup>
-
-        <Await resolve={courses}>
-          {({ hits }) => (
-            <>
-              <ItemGroup>
-                {hits
-                  .filter(
-                    ({ metadata__unit_price = 0 }) => metadata__unit_price > 0
-                  )
-                  .map(({ name, metadata__unit_price }, index) => (
-                    <Fragment key={index}>
-                      <Item className="px-0">
-                        <ItemMedia>
-                          <Avatar className="border size-12">
-                            <AvatarImage src={placeholder} alt={name} />
-                          </Avatar>
-                        </ItemMedia>
-                        <ItemContent>
-                          <ItemTitle>{name}</ItemTitle>
-                          <ItemDescription>
-                            <Currency>{metadata__unit_price}</Currency>
-                          </ItemDescription>
-                        </ItemContent>
-                        <ItemActions>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="rounded-full"
-                          >
-                            <PlusIcon />
-
-                            <span
-                              className="
-                                    transition-all
-                                    duration-200
-                                    ease-out
-                                    hidden
-                                    group-hover:block
-                                  "
-                            >
-                              <span className="overflow-hidden whitespace-nowrap">
-                                Matricular-se
-                              </span>
-                            </span>
-                          </Button>
-                        </ItemActions>
-                      </Item>
-
-                      {index !== hits.length - 1 && <ItemSeparator />}
-                    </Fragment>
-                  ))}
-              </ItemGroup>
-            </>
-          )}
-        </Await>
-      </Suspense>
-    </Container>
-  )
-}
--- a/apps/saladeaula.digital/app/routes/explore.tsx
+++ b/apps/saladeaula.digital/app/routes/explore.tsx
@@ -0,0 +1,171 @@
+import type { Route } from './+types/explore'
+
+import { useToggle } from 'ahooks'
+import { Fragment, Suspense, useMemo } from 'react'
+import { Await } from 'react-router'
+import { PlusIcon, ArrowDownAZIcon, ArrowUpAZIcon } from 'lucide-react'
+import Fuse from 'fuse.js'
+
+import { cloudflareContext } from '@repo/auth/context'
+import { createSearch } from '@repo/util/meili'
+import { Skeleton } from '@repo/ui/components/skeleton'
+import {
+  InputGroupAddon,
+  InputGroupButton
+} from '@repo/ui/components/ui/input-group'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle
+} from '@repo/ui/components/ui/item'
+import { Currency } from '@repo/ui/components/currency'
+import { Avatar, AvatarImage } from '@repo/ui/components/ui/avatar'
+import { Button } from '@repo/ui/components/ui/button'
+
+import placeholder from '@/assets/placeholder.webp'
+import { Container } from '@/components/container'
+import { SearchForm } from '@repo/ui/components/search-form'
+import { useSearchParams } from 'react-router'
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: 'Expore nossos cursos' }]
+}
+
+export async function loader({ context, request, params }: Route.LoaderArgs) {
+  const cloudflare = context.get(cloudflareContext)
+  const courses = createSearch({
+    index: 'saladeaula_courses',
+    sort: ['created_at:desc'],
+    filter: 'unlisted NOT EXISTS',
+    hitsPerPage: 100,
+    env: cloudflare.env
+  })
+
+  return {
+    courses
+  }
+}
+
+export default function Component({
+  loaderData: { courses }
+}: Route.ComponentProps) {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [sort, { toggle }] = useToggle('a-z', 'z-a')
+  const search = searchParams.get('s') as string
+
+  return (
+    <Container className="space-y-5 max-w-2xl">
+      <Suspense fallback={<Skeleton />}>
+        <div className="space-y-1.5">
+          <h1 className="text-4xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">
+            Expore nossos cursos
+          </h1>
+          <p className="text-muted-foreground text-[1.05rem] text-balance sm:text-base">
+            Conheça todos os cursos que oferecemos, desenvolvidos para
+            fortalecer suas competências profissionais e apoiar seu crescimento
+            contínuo na carreira.
+          </p>
+        </div>
+
+        <SearchForm
+          placeholder="Pesquisar curso"
+          defaultValue={search}
+          onChange={(value) =>
+            setSearchParams((searchParams) => {
+              searchParams.set('s', String(value))
+              return searchParams
+            })
+          }
+        >
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              variant="link"
+              size="icon-sm"
+              tabIndex={-1}
+              className="cursor-pointer text-muted-foreground"
+              onClick={toggle}
+            >
+              {sort == 'a-z' ? <ArrowDownAZIcon /> : <ArrowUpAZIcon />}
+            </InputGroupButton>
+          </InputGroupAddon>
+        </SearchForm>
+
+        <Await resolve={courses}>
+          {({ hits }) => (
+            <List
+              hits={hits.filter(
+                ({ metadata__unit_price = 0 }) => metadata__unit_price > 0
+              )}
+              search={search}
+              sort={sort}
+            />
+          )}
+        </Await>
+      </Suspense>
+    </Container>
+  )
+}
+
+function List({ hits, search, sort }) {
+  const fuse = useMemo(() => {
+    return new Fuse(hits, {
+      keys: ['name'],
+      threshold: 0.3,
+      includeMatches: true
+    })
+  }, [hits])
+
+  const filtered = useMemo(() => {
+    const results = !search ? hits : fuse.search(search).map(({ item }) => item)
+
+    return results.sort((a, b) => {
+      const comparison = a.name.localeCompare(b.name)
+      return sort === 'a-z' ? comparison : -comparison
+    })
+  }, [search, fuse, hits, sort])
+
+  return (
+    <ItemGroup className="relative">
+      {filtered.map(({ name, metadata__unit_price }, index) => (
+        <Fragment key={index}>
+          {index > 0 && <ItemSeparator />}
+
+          <Item
+            className="group px-px relative
+                       hover:px-2.5 hover:scale-105 hover:z-1
+                       hover:bg-gray-50 dark:hover:bg-neutral-900"
+          >
+            <ItemMedia>
+              <Avatar className="border size-16 bg-background">
+                <AvatarImage src={placeholder} alt={name} />
+              </Avatar>
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle className="lg:text-lg">{name}</ItemTitle>
+              <ItemDescription>
+                <Currency>{metadata__unit_price}</Currency>
+              </ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <Button
+                variant="secondary"
+                size="sm"
+                className="rounded-full cursor-pointer font-normal h-9"
+              >
+                <PlusIcon />
+                <span className="hidden group-hover:block transition">
+                  Matricular
+                </span>
+              </Button>
+            </ItemActions>
+          </Item>
+        </Fragment>
+      ))}
+    </ItemGroup>
+  )
+}
--- a/apps/saladeaula.digital/app/routes/layout.tsx
+++ b/apps/saladeaula.digital/app/routes/layout.tsx
@@ -141,8 +141,8 @@ export default function Component({
          </div>

          <div className="ml-auto flex gap-2.5 items-center">
-            <NavLink to="/catalog">
-              <HoverBorderGradient className="cursor-pointer text-sm h-9 flex items-center">
+            <NavLink to="/explore">
+              <HoverBorderGradient className="cursor-pointer text-sm h-9 flex items-center not-dark:bg-white not-dark:text-black">
                Explorar mais cursos
              </HoverBorderGradient>
            </NavLink>
--- a/enrollments-events/uv.lock
+++ b/enrollments-events/uv.lock
@@ -11,6 +11,18 @@ wheels = [
    { url = "https://files.pythonhosted.org/packages/78/b6/6307fbef88d9b5ee7421e68d78a9f162e0da4900bc5f5793f6d3d0e34fb8/annotated_types-0.7.0-py3-none-any.whl", hash = "sha256:1f02e8b43a8fbbc3f3e0d4f0f4bfc8131bcb4eebe8849b8e5c773f3a1c582a53", size = 13643, upload-time = "2024-05-20T21:33:24.1Z" },
 ]

+[[package]]
+name = "anyio"
+version = "4.12.0"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "idna" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/16/ce/8a777047513153587e5434fd752e89334ac33e379aa3497db860eeb60377/anyio-4.12.0.tar.gz", hash = "sha256:73c693b567b0c55130c104d0b43a9baf3aa6a31fc6110116509f27bf75e21ec0", size = 228266, upload-time = "2025-11-28T23:37:38.911Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/7f/9c/36c5c37947ebfb8c7f22e0eb6e4d188ee2d53aa3880f3f2744fb894f0cb1/anyio-4.12.0-py3-none-any.whl", hash = "sha256:dad2376a628f98eeca4881fc56cd06affd18f659b17a747d3ff0307ced94b1bb", size = 113362, upload-time = "2025-11-28T23:36:57.897Z" },
+]
+
 [[package]]
 name = "arnparse"
 version = "0.0.2"
@@ -256,6 +268,23 @@ wheels = [
    { url = "https://files.pythonhosted.org/packages/2c/1a/aff8bb287a4b1400f69e09a53bd65de96aa5cee5691925b38731c67fc695/click_default_group-1.2.4-py2.py3-none-any.whl", hash = "sha256:9b60486923720e7fc61731bdb32b617039aba820e22e1c88766b1125592eaa5f", size = 4123, upload-time = "2023-08-04T07:54:56.875Z" },
 ]

+[[package]]
+name = "cloudflare"
+version = "4.3.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "anyio" },
+    { name = "distro" },
+    { name = "httpx" },
+    { name = "pydantic" },
+    { name = "sniffio" },
+    { name = "typing-extensions" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/5d/48/e481c0a9b9010a5c41b5ca78ff9fbe00dc8a9a4d39da5af610a4ec49c7f7/cloudflare-4.3.1.tar.gz", hash = "sha256:b1e1c6beeb8d98f63bfe0a1cba874fc4e22e000bcc490544f956c689b3b5b258", size = 1933187, upload-time = "2025-06-16T21:43:18.716Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/3a/8f/c6c543565efd3144da4304efa5917aac06b6416a8663a6defe0e9b2b7569/cloudflare-4.3.1-py3-none-any.whl", hash = "sha256:6927135a5ee5633d6e2e1952ca0484745e933727aeeb189996d2ad9d292071c6", size = 4406465, upload-time = "2025-06-16T21:43:17.3Z" },
+]
+
 [[package]]
 name = "colorama"
 version = "0.4.6"
@@ -338,6 +367,15 @@ wheels = [
    { url = "https://files.pythonhosted.org/packages/47/ef/4cb333825d10317a36a1154341ba37e6e9c087bac99c1990ef07ffdb376f/dictdiffer-0.9.0-py2.py3-none-any.whl", hash = "sha256:442bfc693cfcadaf46674575d2eba1c53b42f5e404218ca2c2ff549f2df56595", size = 16754, upload-time = "2021-07-22T13:24:26.783Z" },
 ]

+[[package]]
+name = "distro"
+version = "1.9.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/fc/f8/98eea607f65de6527f8a2e8885fc8015d3e6f5775df186e443e0964a11c3/distro-1.9.0.tar.gz", hash = "sha256:2fa77c6fd8940f116ee1d6b94a2f90b13b5ea8d019b98bc8bafdcabcdd9bdbed", size = 60722, upload-time = "2023-12-24T09:54:32.31Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/12/b3/231ffd4ab1fc9d679809f356cebee130ac7daa00d6d6f3206dd4fd137e9e/distro-1.9.0-py3-none-any.whl", hash = "sha256:7bffd925d65168f85027d8da9af6bddab658135b840670a223589bc0c8ef02b2", size = 20277, upload-time = "2023-12-24T09:54:30.421Z" },
+]
+
 [[package]]
 name = "dnspython"
 version = "2.7.0"
@@ -436,6 +474,43 @@ wheels = [
    { url = "https://files.pythonhosted.org/packages/9c/a2/75fd80784ec33da8d39cf885e8811a4fbc045a90db5e336b8e345e66dbb2/glom-24.11.0-py3-none-any.whl", hash = "sha256:991db7fcb4bfa9687010aa519b7b541bbe21111e70e58fdd2d7e34bbaa2c1fbd", size = 102690, upload-time = "2024-11-02T23:17:46.468Z" },
 ]

+[[package]]
+name = "h11"
+version = "0.16.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/01/ee/02a2c011bdab74c6fb3c75474d40b3052059d95df7e73351460c8588d963/h11-0.16.0.tar.gz", hash = "sha256:4e35b956cf45792e4caa5885e69fba00bdbc6ffafbfa020300e549b208ee5ff1", size = 101250, upload-time = "2025-04-24T03:35:25.427Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/04/4b/29cac41a4d98d144bf5f6d33995617b185d14b22401f75ca86f384e87ff1/h11-0.16.0-py3-none-any.whl", hash = "sha256:63cf8bbe7522de3bf65932fda1d9c2772064ffb3dae62d55932da54b31cb6c86", size = 37515, upload-time = "2025-04-24T03:35:24.344Z" },
+]
+
+[[package]]
+name = "httpcore"
+version = "1.0.9"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "certifi" },
+    { name = "h11" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/06/94/82699a10bca87a5556c9c59b5963f2d039dbd239f25bc2a63907a05a14cb/httpcore-1.0.9.tar.gz", hash = "sha256:6e34463af53fd2ab5d807f399a9b45ea31c3dfa2276f15a2c3f00afff6e176e8", size = 85484, upload-time = "2025-04-24T22:06:22.219Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/7e/f5/f66802a942d491edb555dd61e3a9961140fd64c90bce1eafd741609d334d/httpcore-1.0.9-py3-none-any.whl", hash = "sha256:2d400746a40668fc9dec9810239072b40b4484b640a8c38fd654a024c7a1bf55", size = 78784, upload-time = "2025-04-24T22:06:20.566Z" },
+]
+
+[[package]]
+name = "httpx"
+version = "0.28.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "anyio" },
+    { name = "certifi" },
+    { name = "httpcore" },
+    { name = "idna" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/b1/df/48c586a5fe32a0f01324ee087459e112ebb7224f646c0b5023f5e79e9956/httpx-0.28.1.tar.gz", hash = "sha256:75e98c5f16b0f35b567856f597f06ff2270a374470a5c2392242528e3e3e42fc", size = 141406, upload-time = "2024-12-06T15:37:23.222Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/2a/39/e50c7c3a983047577ee07d2a9e53faf5a69493943ec3f6a384bdc792deb2/httpx-0.28.1-py3-none-any.whl", hash = "sha256:d909fcccc110f8c7faf814ca82a9a4d816bc5a6dbfea25d6591d6985b8ba59ad", size = 73517, upload-time = "2024-12-06T15:37:21.509Z" },
+]
+
 [[package]]
 name = "idna"
 version = "3.10"
@@ -501,12 +576,13 @@ wheels = [

 [[package]]
 name = "layercake"
-version = "0.11.2"
+version = "0.11.3"
 source = { directory = "../layercake" }
 dependencies = [
    { name = "arnparse" },
    { name = "authlib" },
    { name = "aws-lambda-powertools", extra = ["all"] },
+    { name = "cloudflare" },
    { name = "dictdiffer" },
    { name = "ftfy" },
    { name = "glom" },
@@ -532,6 +608,7 @@ requires-dist = [
    { name = "arnparse", specifier = ">=0.0.2" },
    { name = "authlib", specifier = ">=1.6.5" },
    { name = "aws-lambda-powertools", extras = ["all"], specifier = ">=3.23.0" },
+    { name = "cloudflare", specifier = ">=4.3.1" },
    { name = "dictdiffer", specifier = ">=0.9.0" },
    { name = "ftfy", specifier = ">=6.3.1" },
    { name = "glom", specifier = ">=24.11.0" },
@@ -997,6 +1074,15 @@ s3 = [
    { name = "boto3" },
 ]

+[[package]]
+name = "sniffio"
+version = "1.3.1"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/a2/87/a6771e1546d97e7e041b6ae58d80074f81b7d5121207425c964ddf5cfdbd/sniffio-1.3.1.tar.gz", hash = "sha256:f4324edc670a0f49750a81b895f35c3adb843cca46f0530f79fc1babb23789dc", size = 20372, upload-time = "2024-02-25T23:20:04.057Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/e9/44/75a9c9421471a6c4805dbf2356f7c181a29c1879239abab1ea2cc8f38b40/sniffio-1.3.1-py3-none-any.whl", hash = "sha256:2f6da418d1f1e0fddd844478f41680e794e6051915791a034ff65e5f100525a2", size = 10235, upload-time = "2024-02-25T23:20:01.196Z" },
+]
+
 [[package]]
 name = "sqlite-fts4"
 version = "1.0.3"
--- a/orders-events/app/events/billing/append_enrollment.py
+++ b/orders-events/app/events/billing/append_enrollment.py
@@ -45,7 +45,7 @@ def lambda_handler(event: EventBridgeEvent, context: LambdaContext) -> bool:
    enrollment = enrollment_layer.collection.get_items(
        TransactKey(new_image['id'])
        + SortKey('0')
-        + SortKey('CREATED_BY', rename_key='created_by', path_spec='created_by')
+        + SortKey('CREATED_BY', rename_key='created_by')
        # Post-migration: remove the following line
        + SortKey('author', rename_key='created_by')
    )
--- a/packages/ui/src/components/search-form.tsx
+++ b/packages/ui/src/components/search-form.tsx
@@ -16,6 +16,7 @@ export function SearchForm({
  className,
  onChange,
  defaultValue = '',
+  children,
  ...props
 }: {
  placeholder?: React.ReactNode
@@ -80,6 +81,8 @@ export function SearchForm({
          </InputGroupButton>
        </InputGroupAddon>
      )}
+
+      {children}
    </InputGroup>
  )
 }