feat: added use server on top of page.tsx (#328)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

apps/web/app/(roles)/api/vagas/publique/route.ts

@@ -2,6 +2,19 @@ import { FormSchema } from 'app/(roles)/formSchema'
 import { getSupabaseClient } from 'db'
 import { StatusCodes } from 'http-status-codes'
 
+interface RoleRecommendationInsert {
+  minimum_years: number
+  topic_id: number
+  company: string
+  country: string
+  currency: string
+  description: string
+  language: 'English' | 'Portuguese'
+  salary: number
+  title: string
+  url: string
+}
+
 export const POST = async (req: Request) => {
   const body = (await req.json()) as FormSchema
   const supabaseClient = getSupabaseClient()
@@ -11,24 +24,28 @@ export const POST = async (req: Request) => {
     .select('id')
     .eq('title', body.title)
     .eq('company', body.company)
-  if (persistedData.data.length) {
+  if (persistedData.data && persistedData.data.length > 0) {
     return new Response('Esta vaga já esta cadastrada', {
       status: StatusCodes.BAD_REQUEST,
     })
   }
 
-  const { error } = await supabaseClient.from('rolesRecommendation').insert({
+  const insertData: RoleRecommendationInsert = {
     minimum_years: Number(body.minimumYears),
     topic_id: Number(body.topicsId),
     company: body.company,
     country: body.country,
     currency: body.currency,
     description: body.description,
-    language: body.language,
+    language: body.language as 'English' | 'Portuguese',
     salary: Number(body.salary),
     title: body.title,
     url: body.url,
-  })
+  }
+
+  const { error } = await supabaseClient
+    .from('rolesRecommendation')
+    .insert(insertData)
 
   if (error) throw error
 

apps/web/app/(roles)/vagas/action.ts

@@ -1,12 +1,7 @@
 'use server'
 
-import { createClient } from '@supabase/supabase-js'
 import { Filter } from 'app/components/SelectInput'
-
-const supabase = createClient(
-  process.env.SUPABASE_URL as string,
-  process.env.SUPABASE_SERVICE_ROLE as string
-)
+import { getSupabaseClient } from 'db'
 
 interface ItemExtracted {
   option: {
@@ -22,6 +17,8 @@ const getFilter = (filters: Filter[], filterType: string) => {
   )
 }
 
+const supabase = getSupabaseClient()
+
 export const getFilterFromPreferences = async (email: string) => {
   const { data } = await supabase
     .from('Subscribers')
@@ -97,9 +94,18 @@ export const fetchJobs = async (
     }
 
     const sortedData = data?.sort((a, b) => {
-      if (a.salary === null || a.salary === undefined) return 1
-      if (b.salary === null || b.salary === undefined) return -1
-      return b.salary - a.salary
+      const parseSalary = (salary: string) => {
+        if (!salary) return 0
+        const cleanedSalary = salary.replace(/[^0-9.-]+/g, '')
+        return parseFloat(cleanedSalary) || 0
+      }
+
+      const salaryA = parseSalary(a.salary)
+      const salaryB = parseSalary(b.salary)
+
+      if (salaryA === null || salaryA === undefined) return 1
+      if (salaryB === null || salaryB === undefined) return -1
+      return salaryB - salaryA
     })
 
     return {

apps/web/app/(roles)/vagas/page.tsx

@@ -1,69 +1,72 @@
+'use server'
+
+import { getSupabaseClient } from 'db'
 import { RolesPage } from './RolesPage'
-import { createClient } from '@supabase/supabase-js'
-import { createClient as createClientRedis } from 'redis'
 import { fetchJobs } from './action'
-
-export const revalidate = 0
+import getRedisClient from 'app/utils/getRedisClient'
 
 const ONE_DAY_IN_MINUTES = 86_400
 
-const client = createClientRedis({
-  socket: {
-    host: process.env['REDIS_HOST'],
-    port: parseInt(process.env['REDIS_PORT'] || '6379'),
-  },
-})
-
-client.connect()
-
-const supabase = createClient(
-  process.env['SUPABASE_URL'] as string,
-  process.env['SUPABASE_SERVICE_ROLE'] as string
-)
-
 async function getJobs() {
-  const jobsFromCache = await client.get('web_jobs')
-
-  if (jobsFromCache) {
-    return JSON.parse(jobsFromCache)
+  try {
+    const client = await getRedisClient()
+    const jobsFromCache = await client.get('web_jobs')
+    if (jobsFromCache) {
+      await client.quit()
+      return JSON.parse(jobsFromCache)
+    }
+
+    const { data: jobs } = await fetchJobs([])
+
+    await client.set('web_jobs', JSON.stringify(jobs), {
+      EX: ONE_DAY_IN_MINUTES,
+    })
+    await client.quit()
+    return jobs
+  } catch (error) {
+    console.error('Failed to fetch jobs:', error)
+    return []
   }
-
-  const { data: jobs } = await supabase
-    .from('Roles')
-    .select('*', { count: 'exact' })
-    .eq('ready', true)
-    .order('salary', { nullsFirst: false })
-
-  await client.set('web_jobs', JSON.stringify(jobs), { EX: ONE_DAY_IN_MINUTES })
-  return jobs
 }
 
 async function getSkills() {
-  const skillsFromCache = await client.get('Skills')
-
-  if (skillsFromCache) {
-    return JSON.parse(skillsFromCache)
+  try {
+    const client = await getRedisClient()
+    const skillsFromCache = await client.get('Skills')
+    if (skillsFromCache) {
+      await client.quit()
+      return JSON.parse(skillsFromCache)
+    }
+
+    const supabase = getSupabaseClient()
+    const { data: skills } = await supabase
+      .from('vw_skills_in_roles')
+      .select('*')
+      .order('name')
+
+    await client.set('getSkills', JSON.stringify(skills), {
+      EX: ONE_DAY_IN_MINUTES,
+    })
+    await client.quit()
+    return skills
+  } catch (error) {
+    console.error('Failed to fetch skills:', error)
+    return []
   }
-
-  const { data: skills } = await supabase
-    .from('vw_skills_in_roles')
-    .select('*')
-    .order('name')
-
-  await client.set('getSkills', JSON.stringify(skills), {
-    EX: ONE_DAY_IN_MINUTES,
-  })
-
-  return skills
 }
 
 async function getCountries() {
-  const { data: countries } = await supabase
-    .from('vw_countries_in_roles')
-    .select('*')
-    .order('country')
-
-  return countries
+  try {
+    const supabase = getSupabaseClient()
+    const { data: countries } = await supabase
+      .from('vw_countries_in_roles')
+      .select('*')
+      .order('country')
+    return countries
+  } catch (error) {
+    console.error('Failed to fetch countries:', error)
+    return []
+  }
 }
 
 export default async function Page() {

apps/web/app/components/PTBRRolePage.tsx

@@ -2,7 +2,6 @@
 
 import React, { useEffect, useState, useCallback, useMemo } from 'react'
 import { FocusBanner } from 'app/landing-page/FocusBanner'
-import SanitizedHTML from 'app/components/SanitizedHTML'
 import {
   ExternalLink,
   MapPin,
@@ -55,10 +54,7 @@ const getJobDetails = (role) => {
 }
 
 export const PTBRRolePage = ({ role }) => {
-  const jobDetails = useMemo(
-    () => getJobDetails(role),
-    [role]
-  )
+  const jobDetails = useMemo(() => getJobDetails(role), [role])
   const [showShareMenu, setShowShareMenu] = useState(false)
   const [isCopied, setIsCopied] = useState(false)
   const shareMenuRef = React.useRef(null)
@@ -168,11 +164,7 @@ export const PTBRRolePage = ({ role }) => {
                 Descrição da role
               </h2>
               <div className="space-y-4 text-gray-600">
-                {isHtml(role.description) ? (
-                  <SanitizedHTML html={role.description} />
-                ) : (
-                  formatDescription(role.description)
-                )}
+                {formatDescription(role.description)}
               </div>
             </section>
 

apps/web/app/components/USRolePage.tsx

@@ -2,7 +2,6 @@
 
 import React, { useEffect, useState, useCallback, useMemo } from 'react'
 import { FocusBanner } from 'app/landing-page/FocusBanner'
-import SanitizedHTML from 'app/components/SanitizedHTML'
 import {
   ExternalLink,
   MapPin,
@@ -55,10 +54,7 @@ const getJobDetails = (role) => {
 }
 
 export const USRolePage = ({ role }) => {
-  const jobDetails = useMemo(
-    () => getJobDetails(role),
-    [role]
-  )
+  const jobDetails = useMemo(() => getJobDetails(role), [role])
 
   const [showShareMenu, setShowShareMenu] = useState(false)
   const [isCopied, setIsCopied] = useState(false)
@@ -169,11 +165,7 @@ export const USRolePage = ({ role }) => {
                 Job Description
               </h2>
               <div className="space-y-4 text-gray-600">
-                {isHtml(role.description) ? (
-                  <SanitizedHTML html={role.description} />
-                ) : (
-                  formatDescription(role.description)
-                )}
+                {formatDescription(role.description)}
               </div>
             </section>
 

apps/web/app/landing-page/SubscribersCount.tsx

@@ -1,12 +1,11 @@
 'use server'
-import { createClient } from '@supabase/supabase-js'
+
+import { getSupabaseClient } from 'db'
 import { Entities } from 'shared'
 
 const getSubscriberCount = async (): Promise<number | null> => {
-  const supabase = createClient(
-    process.env['SUPABASE_URL'],
-    process.env['SUPABASE_SERVICE_ROLE']
-  )
+  const supabase = getSupabaseClient()
+
   const { count, error } = await supabase
     .from(Entities.Subcribers)
     .select('id', { count: 'exact', head: true })

apps/web/app/utils/LoginPreferencesActions.ts

@@ -1,13 +1,9 @@
 'use server'
-import { createClient } from '@supabase/supabase-js'
+
+import { getSupabaseClient } from 'db'
 import { encrypt } from 'shared'
 import { sendProfileEmail } from 'shared/src/email/sendProfileEmail'
 
-const supabase = createClient(
-  process.env.SUPABASE_URL,
-  process.env.SUPABASE_SERVICE_ROLE
-)
-
 export async function encryptId(id: string) {
   const secretKey = process.env['CRYPT_SECRET'] || ''
 
@@ -25,6 +21,7 @@ export async function sendEditPreferencesEmail(email: string, id: string) {
 
 export default async function login(email: string) {
   try {
+    const supabase = getSupabaseClient()
     const { data, error } = await supabase
       .from('Subscribers')
       .select('*')

apps/web/app/utils/getRedisClient.ts

@@ -0,0 +1,12 @@
+import { createClient as createClientRedis } from 'redis'
+
+export default async function getRedisClient() {
+  const client = createClientRedis({
+    socket: {
+      host: process.env['REDIS_HOST'],
+      port: parseInt(process.env['REDIS_PORT'] || '6379'),
+    },
+  })
+  await client.connect()
+  return client
+}