feat: correções e otimizações. A query não era exibida corretamente e…

… ficava com o início cortado em 3 caracteres. Resolvido.
jjgouveia · Aug 15, 2023 · 7616d5e · 7616d5e
1 parent 523bffa
commit 7616d5e
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 71 deletions.
diff --git a/components/DropDown.tsx b/components/DropDown.tsx
@@ -10,14 +10,14 @@ function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ");
 }
 
-export type levelType = "Senior" | "Junior" | "Do not specify";
+export type levelType = "Junior" | "Pleno" | "Senior";
 
 interface DropDownProps {
   level: levelType;
   setLevel: (level: levelType) => void;
 }
 
-let levels: levelType[] = ["Senior", "Junior", "Do not specify"];
+let levels: levelType[] = ["Junior", "Pleno", "Senior"];
 
 export default function DropDown({ level, setLevel }: DropDownProps) {
   return (
@@ -43,10 +43,12 @@ export default function DropDown({ level, setLevel }: DropDownProps) {
         enterTo="transform opacity-100 scale-100"
         leave="transition ease-in duration-75"
         leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95">
+        leaveTo="transform opacity-0 scale-95"
+      >
         <Menu.Items
           className="absolute left-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-          key={level}>
+          key={level}
+        >
           <div className="">
             {levels.map((levelItem) => (
               <Menu.Item key={levelItem}>
@@ -57,7 +59,8 @@ export default function DropDown({ level, setLevel }: DropDownProps) {
                       active ? "bg-gray-100 text-gray-900" : "text-gray-700",
                       level === levelItem ? "bg-gray-200" : "",
                       "px-4 py-2 text-sm w-full text-left flex items-center space-x-2 justify-between"
-                    )}>
+                    )}
+                  >
                     <span>{levelItem}</span>
                     {level === levelItem ? (
                       <CheckIcon className="w-4 h-4 text-bold" />

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -3,33 +3,30 @@ import Document, { Head, Html, Main, NextScript } from "next/document";
 class MyDocument extends Document {
   render() {
     return (
-      <Html lang="en">
+      <Html lang="pt-BR">
         <Head>
           <link rel="icon" href="/favicon.ico" />
           <meta
             name="description"
-            content="Search smarter, boost your chances with our LinkedIn assistant."
+            content="Busque vagas de forma melhorada e aumente as suas chances de conseguir o seu tão sonhado emprego."
           />
-          <meta property="og:site_name" content="linkesearch" />
+          <meta property="og:site_name" content="Explorador de Vagas" />
           <meta
             property="og:description"
-            content="Search smarter, boost your chances with our LinkedIn assistant."
-          />
-          <meta property="og:title" content="Linkesearch" />
-          <meta name="linkesearch:card" content="summary_large_image" />
-          <meta name="linkesearch:title" content="Linkesearch" />
-          <meta
-            name="Linkesearch:description"
-            content="Search smarter, boost your chances with our LinkedIn assistant."
+            content="Busque vagas de forma melhorada e aumente as suas chances de conseguir o seu tão sonhado emprego."
           />
+          <meta property="og:title" content="Explorador de Vagas" />
+          <meta name="Explorador de Vagas:card" content="summary_large_image" />
           <meta
-            property="og:image"
-            content="/searchbar.png"
+            name="Explorador de Vagas:title"
+            content="Explorador de Vagas"
           />
           <meta
-            name="linkesearch:image"
-            content="/searchbar.png"
+            name="Explorador de Vagas:description"
+            content="Search smarter, boost your chances with our LinkedIn assistant."
           />
+          <meta property="og:image" content="/searchbar.png" />
+          <meta name="Explorador de Vagas:image" content="/searchbar.png" />
         </Head>
         <body>
           <Main />

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,22 +1,22 @@
+import {
+  ParsedEvent,
+  ReconnectInterval,
+  createParser,
+} from "eventsource-parser";
 import type { NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
 import { useRef, useState } from "react";
 import { Toaster, toast } from "react-hot-toast";
 import DropDown, { levelType } from "../components/DropDown";
 import LoadingDots from "../components/LoadingDots";
-import {
-  createParser,
-  ParsedEvent,
-  ReconnectInterval,
-} from "eventsource-parser";
 
 const Home: NextPage = () => {
   const [loading, setLoading] = useState(false);
   const [title, setTitle] = useState("");
   const [tools, setTools] = useState("");
   const [boringTools, setBoringTools] = useState("");
-  const [level, setLevel] = useState<levelType>("Do not specify");
+  const [level, setLevel] = useState<levelType>("Junior");
   const [generatedBios, setGeneratedBios] = useState<String>("");
 
   const bioRef = useRef<null | HTMLDivElement>(null);
@@ -29,21 +29,18 @@ const Home: NextPage = () => {
 
   const switchLevel = () => {
     switch (level) {
-      case "Do not specify":
-        return "";
-        break;
+      case "Pleno":
+        return "only Pleno titles";
       case "Senior":
         return "only Seniors titles";
-        break;
       case "Junior":
         return "only Junior titles";
-        break;
       default:
         return "";
     }
   };
 
-  const prompt = `Create a perfect query for i use in linkedin searchbar, use the opperators AND, OR, NOT e () for that.Just give me the code, without explanation.
+  const prompt = `Create a perfect query for I use in linkedin searchbar, use the opperators AND, OR, NOT e () for that. Just give me the code, without explanation.
   I'm a ${title} professional that uses ${tools} and don't like to use ${boringTools}. , ${switchLevel()}
   `;
 
@@ -101,21 +98,21 @@ const Home: NextPage = () => {
   return (
     <div className="flex max-w-5xl mx-auto flex-col items-center justify-center py-2 min-h-screen">
       <Head>
-        <title>Linkesearch</title>
+        <title>Explorador de Vagas</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      {/* <Header /> */}
       <main className="flex flex-1 w-full flex-col items-center justify-center text-center px-4 mt-6 sm:mt-12">
         <a
           className="flex max-w-fit items-center justify-center space-x-2 rounded-full bg-blue-600 px-4 py-2 text-sm text-white shadow-md transition-colors hover:bg-blue-500 mb-5"
           href="https://www.linkedin.com/in/daniellimae/"
           target="_blank"
-          rel="noopener noreferrer">
-          <p>by @daniellimae</p>
+          rel="noopener noreferrer"
+        >
+          <p>by @jrgouveia</p>
         </a>
         <h1 className="sm:text-6xl text-4xl max-w-[708px] font-bold text-slate-900">
-          Linkesearch
+          Radar de Vagas
         </h1>
         <br />
         <Image
@@ -126,60 +123,47 @@ const Home: NextPage = () => {
           className="mb-5 sm:mb-0"
         />
         <p className="text-slate-500 mt-5">
-          Search smarter, boost your chances with our LinkedIn assistant
+          Busque de forma inteligente e encontre vagas que se encaixam no seu
+          perfil de acordo com o algoritmo do LinkedIn.
         </p>
         <div className="max-w-xl w-full">
           <div className="flex mt-10 items-center space-x-3">
             <p className="text-left font-medium text-blue-600">1</p>
-            <p className="text-left font-medium">
-              Your job title
-              <span className="text-slate-500">
-                ( don't worrie about details, just a word )
-              </span>
-              .
-            </p>
+            <p className="text-left font-medium">Sua profissão:</p>
           </div>
           <input
             value={title}
             onChange={(e) => setTitle(e.target.value)}
             className="mt-4 mb-4 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:focus:ring-blue-500 dark:focus:border-blue-500"
-            placeholder={"Example: Frontend"}
+            placeholder={"Ex.: Frontend, Backend, Fullstack ..."}
           />
           <div className="flex mt-10 items-center space-x-3">
             <p className="text-left font-medium text-blue-600">2</p>
-            <p className="text-left font-medium">
-              Tools that you use
-              <span className="text-slate-500">
-                ( Languages to code, excel toolkit ... )
-              </span>
-              .
-            </p>
+            <p className="text-left font-medium">Tecnologias que você usa:</p>
           </div>
           <input
             value={tools}
             onChange={(e) => setTools(e.target.value)}
             className="mt-4 mb-4 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:focus:ring-blue-500 dark:focus:border-blue-500"
-            placeholder={"Example: React, Angular, Javascript..."}
+            placeholder={"Ex.: Angular, Next.js, React, Java, Node..."}
           />
           <div className="flex mt-10 items-center space-x-3">
             <p className="text-left font-medium text-blue-600">3</p>
             <p className="text-left font-medium">
-              Tools that you wouldn't like to work with.
+              Tecnologias que você NÃO usa:
             </p>
           </div>
           <input
             value={boringTools}
             onChange={(e) => setBoringTools(e.target.value)}
             className="mt-4 mb-4 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:focus:ring-blue-500 dark:focus:border-blue-500"
-            placeholder={"Example: Php, Java, Javascript..."}
+            placeholder={"Ex.: PHP, Ruby, Magic"}
           />
           <div className="flex mb-5 items-center space-x-3">
             <p className="text-left font-medium text-blue-600">4</p>
             <p className="text-left font-medium">
-              Your level{" "}
-              <span className="text-slate-500">
-                ( mid-levels do not specify )
-              </span>
+              Seu nível de senioridade
+              <span className="text-slate-500"> (Padrão: Junior)</span>
             </p>
           </div>
           <div className="block">
@@ -192,14 +176,16 @@ const Home: NextPage = () => {
           {!loading && (
             <button
               className="bg-blue-600 rounded-xl text-white font-medium px-4 py-2 sm:mt-10 mt-8 hover:bg-blue-500 w-full"
-              onClick={(e) => generateBio(e)}>
-              Improve my linkesearch
+              onClick={(e) => generateBio(e)}
+            >
+              Melhore as minhas buscas
             </button>
           )}
           {loading && (
             <button
               className="bg-black rounded-xl text-white font-medium px-4 py-2 sm:mt-10 mt-8 hover:bg-black/80 w-full"
-              disabled>
+              disabled
+            >
               <LoadingDots color="white" style="large" />
             </button>
           )}
@@ -216,25 +202,27 @@ const Home: NextPage = () => {
               <div>
                 <h2
                   className="sm:text-4xl text-3xl font-bold text-slate-900 mx-auto"
-                  ref={bioRef}>
-                  Your query to search:
+                  ref={bioRef}
+                >
+                  Sua consulta personalizada:
                 </h2>
               </div>
               <div className="space-y-8 flex flex-col items-center justify-center max-w-xl mx-auto">
                 {generatedBios
-                  .substring(generatedBios.indexOf("1") + 3)
+                  .substring(generatedBios.indexOf("1") + 0)
                   .split("2.")
                   .map((generatedBio) => {
                     return (
                       <div
                         className="bg-white rounded-xl shadow-md p-4 hover:bg-gray-100 transition cursor-copy border"
                         onClick={() => {
                           navigator.clipboard.writeText(generatedBio);
-                          toast("Linkeseach copied to clipboard", {
+                          toast("Consulta copiada!", {
                             icon: "✂️",
                           });
                         }}
-                        key={generatedBio}>
+                        key={generatedBio}
+                      >
                         <p>{generatedBio}</p>
                       </div>
                     );

diff --git a/utils/OpenAIStream.ts b/utils/OpenAIStream.ts
@@ -53,11 +53,11 @@ export async function OpenAIStream(payload: OpenAIStreamPayload) {
           statusText: res.statusText,
           body: await res.text(),
         }
-        console.log(`Error: recieved non-200 status code, ${JSON.stringify(data)}`);
+        console.log(`Error: received non-200 status code, ${JSON.stringify(data)}`);
         controller.close();
         return
       }
-        
+
       // stream response (SSE) from OpenAI may be fragmented into multiple chunks
       // this ensures we properly read chunks and invoke an event for each SSE event stream
       const parser = createParser(onParse);
@@ -85,7 +85,7 @@ export async function OpenAIStream(payload: OpenAIStreamPayload) {
           return;
         }
         // stream transformed JSON resposne as SSE
-        const payload = {text: text};
+        const payload = { text: text };
         // https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#event_stream_format
         controller.enqueue(
           encoder.encode(`data: ${JSON.stringify(payload)}\n\n`)