New Search and Profile Frontend

agency/Makefile_ECR

@@ -1,11 +1,11 @@
 Image = curieo-agency
 ECR = 698471419283.dkr.ecr.eu-central-1.amazonaws.com/curieo-agency
-TAG = 2.0
+TAG = 3.0
 
 ecr_deploy: login
-	docker buildx build --platform linux/amd64 -t $(Image) .
+docker buildx build --platform linux/amd64 -t $(Image) .
 	docker tag $(Image) $(ECR):$(TAG)
-	docker push $(ECR):$(TAG)
+docker push $(ECR):$(TAG)
 
 login:
-	aws ecr get-login-password --region eu-central-1 | docker login --username AWS --password-stdin 698471419283.dkr.ecr.eu-central-1.amazonaws.com
+aws ecr get-login-password --region eu-central-1 | docker login --username AWS --password-stdin 698471419283.dkr.ecr.eu-central-1.amazonaws.com

frontend/package.json

@@ -13,6 +13,7 @@
     "@auth/core": "^0.32.0",
     "@tanstack/react-query": "^5.37.1",
     "date-fns": "^3.6.0",
+    "dompurify": "^3.1.5",
     "lodash": "^4.17.21",
     "next": "^14.2.3",
     "next-auth": "^5.0.0-beta.19",
@@ -27,6 +28,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "@types/lodash": "^4.17.4",
     "@types/node": "^20",
     "@types/react": "^18",

frontend/src/actions/fetch.ts

@@ -1,3 +1,4 @@
+import { signOut } from '@/auth'
 import { headers as next_headers } from 'next/headers'
 
 function curieoApiUrl(reqInfo?: RequestInfo): URL {
@@ -36,6 +37,13 @@ export async function curieoFetch(reqInfo: RequestInfo, init?: RequestInit): Pro
   } else {
     init = { headers }
   }
+
   const url: URL = curieoApiUrl(reqInfo)
-  return fetch(url, init)
+  const response = await fetch(url, init)
+
+  if (response.status === 405) {
+    await signOut()
+  }
+
+  return response.ok ? Promise.resolve(response) : Promise.reject(response)
 }

frontend/src/actions/search.ts

@@ -1,15 +1,7 @@
 'use server'
 
-import { SearchReactionBody, SearchResult } from '@/types/search'
 import { curieoFetch } from '@/actions/fetch'
-
-export async function search(query: string): Promise<SearchResult> {
-  const response = await curieoFetch(`/search?${new URLSearchParams({ query })}`)
-  if (response.ok) {
-    return (await response.json()) as SearchResult
-  }
-  throw new Error('Search failed')
-}
+import { SearchHistoryResponse, SearchReactionBody, SearchResult, ThreadByIdResponse } from '@/types/search'
 
 export async function searchById(id: string): Promise<SearchResult> {
   const response = await curieoFetch(`/search/one?search_history_id=${id}`)
@@ -19,21 +11,35 @@ export async function searchById(id: string): Promise<SearchResult> {
   throw new Error('Retrieving search failed')
 }
 
-export async function searchHistory({ limit, offset }: { limit: number; offset: number }): Promise<SearchResult[]> {
+export async function searchHistory({
+  limit,
+  offset,
+}: {
+  limit: number
+  offset: number
+}): Promise<SearchHistoryResponse> {
   const response = await curieoFetch(`/search/history?limit=${limit ?? 10}${offset ? `&offset=${offset}` : ``}`)
   if (response.ok) {
-    return (await response.json()) as SearchResult[]
+    return (await response.json()) as SearchHistoryResponse
   }
   throw new Error('Retrieving search history failed')
 }
 
-export async function searchReaction(reaction: SearchReactionBody): Promise<SearchResult> {
+export async function searchReaction(reaction: SearchReactionBody): Promise<void> {
   const response = await curieoFetch('/search/reaction', {
     method: 'PATCH',
     body: JSON.stringify(reaction),
   })
   if (response.ok) {
-    return (await response.json()) as SearchResult
+    return
   }
   throw new Error('Could not submit reaction')
 }
+
+export async function threadById(id: string): Promise<ThreadByIdResponse> {
+  const response = await curieoFetch(`/search/threads?thread_id=${id}`)
+  if (response.ok) {
+    return (await response.json()) as ThreadByIdResponse
+  }
+  throw new Error('Retrieving search failed')
+}

frontend/src/actions/settings.ts

@@ -0,0 +1,38 @@
+'use server'
+
+import { UpdatePasswordBody, UpdateProfileBody, UserProfile } from '@/types/settings'
+import { encodeAsUrlSearchParams } from '@/utils'
+import { curieoFetch } from './fetch'
+
+export async function fetchUserProfile(): Promise<UserProfile> {
+  const response = await curieoFetch('/users/me')
+  if (response.ok) {
+    return (await response.json()) as UserProfile
+  }
+  throw new Error('Could not retrieve user profile')
+}
+
+export async function updateUserProfile(payload: UpdateProfileBody): Promise<UserProfile> {
+  const response = await curieoFetch('/users/me', {
+    method: 'PATCH',
+    body: JSON.stringify(payload),
+  })
+  if (response.ok) {
+    return (await response.json()) as UserProfile
+  }
+  throw new Error('Could not update user profile')
+}
+
+export async function updatePassword(payload: UpdatePasswordBody): Promise<void> {
+  const response = await curieoFetch('/users/update-password', {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: encodeAsUrlSearchParams(payload),
+  })
+  if (response.ok) {
+    return
+  }
+  throw new Error('Could not update password')
+}

frontend/src/app/api/search/route.ts

@@ -0,0 +1,47 @@
+import { curieoFetch } from '@/actions/fetch'
+import { NextRequest, NextResponse } from 'next/server'
+
+export const GET = async (req: NextRequest) => {
+  const { searchParams } = new URL(req.url)
+  const searchQuery = searchParams.get('searchQuery')
+  const threadId = searchParams.get('threadId')
+
+  if (!searchQuery) {
+    return NextResponse.json({ error: 'searchQuery is required' }, { status: 400 })
+  }
+
+  async function pump(reader: ReadableStreamDefaultReader<Uint8Array>, writer: WritableStreamDefaultWriter<any>) {
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      writer.write(value)
+    }
+    writer.close()
+  }
+
+  try {
+    const response = await curieoFetch(`/search?query=${searchQuery}${threadId ? `&thread_id=${threadId}` : ``}`)
+
+    if (!response.ok) {
+      return NextResponse.json({ error: 'Failed to fetch data from external API' }, { status: response.status })
+    }
+
+    const reader = response.body?.getReader()
+    if (!reader) {
+      return NextResponse.json({ error: 'Failed to read from external API stream' }, { status: 500 })
+    }
+
+    const headers = new Headers(response.headers)
+    headers.delete('content-encoding')
+    headers.set('content-encoding', 'none')
+
+    const { readable, writable } = new TransformStream()
+    const writer = writable.getWriter()
+
+    pump(reader!, writer).catch(err => err)
+
+    return new NextResponse(readable, { headers })
+  } catch (error) {
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}

frontend/src/app/layout.tsx

@@ -3,11 +3,11 @@ import Providers from '@/components/wrappers/providers'
 import { appDescription, appTitle } from '@/constants/app'
 import '@/styles/globals.css'
 import type { Metadata } from 'next'
-import { Onest } from 'next/font/google'
+import { Manrope } from 'next/font/google'
 import { ReactNode } from 'react'
 import 'react-toastify/dist/ReactToastify.css'
 
-const onest = Onest({ subsets: ['latin'] })
+const manrope = Manrope({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
   title: appTitle,
@@ -25,7 +25,7 @@ export default async function RootLayout({ children }: LayoutProps) {
         <link rel="icon" type="image/x-icon" href="/images/curieo-logo.svg" />
         <title>Curieo Search</title>
       </head>
-      <body className={onest.className} suppressHydrationWarning={true}>
+      <body className={manrope.className} suppressHydrationWarning={true}>
         <Providers>
           <App>{children}</App>
         </Providers>