share route itens

apps/studio.saladeaula.digital/app/lib/meili.ts

@@ -1,34 +0,0 @@
-import { Meilisearch, type SearchResponse } from 'meilisearch'
-
-const MAX_HITS_PER_PAGE = 100
-
-export async function createSearch({
-  query,
-  filter = undefined,
-  index,
-  page,
-  hitsPerPage,
-  sort,
-  env
-}: {
-  query?: string
-  filter?: string
-  index: string
-  page?: number
-  hitsPerPage: number
-  sort: string[]
-  env: Env
-}): Promise<SearchResponse> {
-  const host = env.MEILI_HOST
-  const apiKey = env.MEILI_API_KEY
-  const client = new Meilisearch({ host, apiKey })
-  const index_ = client.index(index)
-
-  return index_.search(query, {
-    sort,
-    filter,
-    page,
-    hitsPerPage:
-      hitsPerPage > MAX_HITS_PER_PAGE ? MAX_HITS_PER_PAGE : hitsPerPage
-  })
-}

apps/studio.saladeaula.digital/app/lib/request.ts

@@ -1,49 +0,0 @@
-import type { User } from '@repo/auth/auth'
-import { requestIdContext, userContext } from '@repo/auth/context'
-
-import type { LoaderFunctionArgs } from 'react-router'
-
-export enum HttpMethod {
-  GET = 'GET',
-  POST = 'POST',
-  PUT = 'PUT',
-  PATCH = 'PATCH',
-  DELETE = 'DELETE'
-}
-
-type RequestArgs = {
-  url: string
-  method?: HttpMethod
-  headers?: HeadersInit
-  body?: BodyInit | null
-  request: LoaderFunctionArgs['request']
-  context: LoaderFunctionArgs['context']
-}
-
-export function request({
-  url,
-  method = HttpMethod.GET,
-  body = null,
-  headers: _headers = {},
-  request: { signal },
-  context
-}: RequestArgs): Promise<Response> {
-  const requestId = context.get(requestIdContext) as string
-  const user = context.get(userContext) as User
-  const url_ = new URL(url, context.cloudflare.env.API_URL)
-  const headers = new Headers({
-    Authorization: `Bearer ${user.accessToken}`
-  })
-
-  if (_headers instanceof Headers) {
-    _headers.forEach((value, key) => headers.set(key, value))
-  } else {
-    Object.entries(_headers).forEach(([key, value]) => headers.set(key, value))
-  }
-
-  console.log(
-    `[${new Date().toISOString()}] [${requestId}] ${method} ${url_.toString()}`
-  )
-
-  return fetch(url_.toString(), { method, headers, body, signal })
-}

apps/studio.saladeaula.digital/app/routes/edit.tsx

@@ -8,8 +8,7 @@ import { Await, useAsyncValue, useFetcher } from 'react-router'
 import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { HttpMethod, request as req } from '@/lib/request'
-
+import { request as req, HttpMethod } from '@repo/util/request'
 import { Skeleton } from '@repo/ui/components/skeleton'
 import {
   Breadcrumb,
@@ -134,27 +133,27 @@ export async function action({ params, request, context }: Route.ActionArgs) {
 
 export default function Component({ loaderData: { data } }) {
   return (
-    <div className="space-y-4">
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbLink href="/">Cursos</BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbPage>Editar curso</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
+    <Suspense fallback={<Skeleton />}>
+      <div className="space-y-4">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Cursos</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Editar curso</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
 
-      <Suspense fallback={<Skeleton />}>
         <div className="lg:max-w-2xl mx-auto">
           <Await resolve={data}>
             <Editing />
           </Await>
         </div>
-      </Suspense>
-    </div>
+      </div>
+    </Suspense>
   )
 }
 

apps/studio.saladeaula.digital/app/routes/index.tsx

@@ -5,10 +5,7 @@ import { AwardIcon, BanIcon, FileBadgeIcon, LaptopIcon } from 'lucide-react'
 import { Suspense, useMemo } from 'react'
 import { Await, NavLink, useSearchParams } from 'react-router'
 
-import placeholder from '@/assets/placeholder.webp'
-
-import { createSearch } from '@/lib/meili'
-
+import { createSearch } from '@repo/util/meili'
 import { SearchForm } from '@repo/ui/components/search-form'
 import { Skeleton } from '@repo/ui/components/skeleton'
 import {
@@ -31,19 +28,24 @@ import {
   TooltipContent,
   TooltipTrigger
 } from '@repo/ui/components/ui/tooltip'
+
 import type { Course } from './edit'
+import placeholder from '@/assets/placeholder.webp'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Gerenciar seus cursos' }]
 }
 
 export const loader = async ({ context }: Route.ActionArgs) => {
+  const courses = createSearch({
+    index: 'saladeaula_courses',
+    sort: ['created_at:desc'],
+    hitsPerPage: 100,
+    env: context.cloudflare.env
+  })
+
   return {
-    data: createSearch({
-      index: 'saladeaula_courses',
-      sort: ['created_at:desc'],
-      env: context.cloudflare.env
-    })
+    data: courses
   }
 }
 
@@ -52,20 +54,20 @@ export default function Component({ loaderData: { data } }) {
   const term = searchParams.get('term') as string
 
   return (
-    <div className="space-y-4">
-      <div className="space-y-0.5 mb-8">
-        <h1 className="text-2xl font-bold tracking-tight">Cursos</h1>
-        <p className="text-muted-foreground">
-          Gerencie seus cursos com facilidade e organize seu conteúdo.
-        </p>
-      </div>
+    <Suspense fallback={<Skeleton />}>
+      <div className="space-y-4">
+        <div className="space-y-0.5 mb-8">
+          <h1 className="text-2xl font-bold tracking-tight">Cursos</h1>
+          <p className="text-muted-foreground">
+            Gerencie seus cursos com facilidade e organize seu conteúdo.
+          </p>
+        </div>
 
-      <Suspense fallback={<Skeleton />}>
-        <div className="w-full xl:w-92">
+        <div className="w-full xl:w-1/3">
           <SearchForm
             placeholder={
               <>
-                Pressione <Kbd>/</Kbd> para filtrar...
+                Digite <Kbd>/</Kbd> para pesquisar
               </>
             }
             defaultValue={term}
@@ -75,15 +77,11 @@ export default function Component({ loaderData: { data } }) {
           />
         </div>
 
-        <div className="grid lg:grid-cols-4 gap-5">
-          <Await resolve={data}>
-            {({ hits = [] }) => {
-              return <List term={term} hits={hits} />
-            }}
-          </Await>
-        </div>
-      </Suspense>
-    </div>
+        <Await resolve={data}>
+          {({ hits = [] }) => <List term={term} hits={hits} />}
+        </Await>
+      </div>
+    </Suspense>
   )
 }
 
@@ -106,7 +104,7 @@ function List({ term, hits = [] }: { term: string; hits: Course[] }) {
 
   if (hits_.length === 0) {
     return (
-      <Empty>
+      <Empty className="border border-dashed">
         <EmptyHeader>
           <EmptyMedia variant="icon">
             <BanIcon />
@@ -120,9 +118,13 @@ function List({ term, hits = [] }: { term: string; hits: Course[] }) {
     )
   }
 
-  return hits_.map((props: Course, idx) => {
-    return <Course key={idx} {...props} />
-  })
+  return (
+    <div className="grid lg:grid-cols-4 gap-5">
+      {hits_.map((props: Course, idx) => {
+        return <Course key={idx} {...props} />
+      })}
+    </div>
+  )
 }
 
 function Course({ id, name, access_period, cert, draft }: Course) {

apps/studio.saladeaula.digital/app/routes/layout.tsx

@@ -23,7 +23,7 @@ export default function Component({ loaderData }: Route.ComponentProps) {
         className="bg-background/15 backdrop-blur-sm
                    px-4 py-2 lg:py-4 sticky top-0 z-5"
       >
-        <div className="container mx-auto flex items-center">
+        <div className="container mx-auto flex items-center max-w-7xl">
           <Link to="/">
             <ThemedImage className="flex gap-1">
               <span className="text-muted-foreground text-xs">Estúdio</span>
@@ -38,7 +38,7 @@ export default function Component({ loaderData }: Route.ComponentProps) {
       </header>
 
       <main className="p-4">
-        <div className="container mx-auto">
+        <div className="container mx-auto max-w-7xl">
           <Outlet />
         </div>
       </main>