From 289b6137089031db49a5a65f7edde7b915a3f523 Mon Sep 17 00:00:00 2001
From: auraticabhi <abhijeetgupta989@gmail.com>
Date: Tue, 2 Apr 2024 15:31:54 +0530
Subject: [PATCH] keyword generation and ui changes

---
 app/[postTitle]/page.tsx |  6 ++++++
 app/page.tsx             |  7 +++++--
 components/Navbar.tsx    | 21 ++++++++++++++++++---
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/app/[postTitle]/page.tsx b/app/[postTitle]/page.tsx
index aa9a1ff..ef37b1e 100644
--- a/app/[postTitle]/page.tsx
+++ b/app/[postTitle]/page.tsx
@@ -130,6 +130,7 @@ const PostPage = ({ params: { postTitle } }: Props) => {
   const [imageUrl, setImageUrl] = useState<string | null>(null);
   const [progress , setProgress] = useState<number | null>(0);
   const [ansLoading, setAnsLoading] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
 
   //need the actual postId of the question to send to the PostVoteClient
   const [postId , setPostId] = useState<string>("");
@@ -383,6 +384,10 @@ const PostPage = ({ params: { postTitle } }: Props) => {
                     render={({ field }) => (
                       <FormItem>
                         {/* <FormLabel>Write an answer...</FormLabel> */}
+                        <FormLabel>Description</FormLabel>
+                                <div className={`${isFocused?"border-black border-[2.3px]": "border-[2px] border-[#d3d7dd]"} rounded-lg`} onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      >
                         <FormControl>
                           <Controller
                             control={form.control}
@@ -390,6 +395,7 @@ const PostPage = ({ params: { postTitle } }: Props) => {
                             render={({ field }) => <Tiptap {...field} setImageUpload={setImageUpload} uploadImage={uploadImage} progress={progress}/>}
                           />
                         </FormControl>
+                        </div>
                         <FormMessage />
                       </FormItem>
                     )}
diff --git a/app/page.tsx b/app/page.tsx
index 3467cb3..d11da01 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -97,6 +97,7 @@ export default function Home() {
   const [previewImg, setPreviewImg] = useState<any>(null);
   const [selectC, setSelectC] = useState<any>([]);
   const [onFirstVisit, setOnFirstVisit] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
 
   const [selectedCategory, setSelectedCategory] = useState<string | undefined>('');
 
@@ -338,7 +339,7 @@ export default function Home() {
     try {
       console.log("keyword Gen.....")
       const docRef = await addDoc(collection(db, 'keywords'), {
-        prompt: `Generate some keywords and hashtags on topic ${data.title} and give it to me in array format without any formatting marks`,
+        prompt: `Generate some keywords and hashtags on topic ${data.title} and give it to me in "**Keywords:**["Keyword1", "Keyword2",...] **Hashtags:**["Hashtag1", "Hashtag2",...]" this format`,
       });
       console.log('Keyword Document written with ID: ', docRef.id);
   
@@ -541,7 +542,9 @@ export default function Home() {
                             render = {({field}) => (
                               <FormItem>
                                 <FormLabel>Description</FormLabel>
-                                <div className="border-2 border-black">
+                                <div className={`${isFocused?"border-black border-[2.1px]": "border-[1.2px]"} rounded-lg`} onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      >
                                 <FormControl>
                                   <Controller
                                     control={form.control}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 998f456..3e9da88 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -124,6 +124,7 @@ const Navbar = ({}: Props) => {
   const [limitCount, setLimitCount] = useState(6); // Number of notifications to fetch at a time
   const [lastVisible, setLastVisible] = useState<any>(null);
   const [showLoadMoreButton , setShowLoadMoreButton] = useState(true);
+  const [isFocused, setIsFocused] = useState(false);
 
   //for algolia search
   const dispatch = useDispatch();
@@ -248,7 +249,7 @@ const Navbar = ({}: Props) => {
     try {
       console.log("keyword Gen.....")
       const docRef = await addDoc(collection(db, 'keywords'), {
-        prompt: `Generate some keywords and hashtags on topic ${data.title}`,
+        prompt: `Generate some keywords and hashtags on topic ${data.title} and give it to me in "**Keywords:**["Keyword1", "Keyword2",...] **Hashtags:**["Hashtag1", "Hashtag2",...]" this format`,
       });
       console.log('Keyword Document written with ID: ', docRef.id);
   
@@ -257,11 +258,21 @@ const Navbar = ({}: Props) => {
         const data = snap.data();
         if (data && data.response) {
           console.log('RESPONSE: ' + data.response);
-          const keywordsString = `${data.response}`;
+          const keywordsStr = `${data.response}`;
+
+          const cleanedString = keywordsStr.replace(/\*|\`/g, '');
+
+          const splitString = cleanedString.split("Keywords:");
+          const keywordsString = splitString[1].split("Hashtags:")[0].trim();
+          const hashtagsString = splitString[1].split("Hashtags:")[1].trim();
+
+          const keywordsArray = JSON.parse(keywordsString);
+          const hashtagsArray = JSON.parse(hashtagsString);
 
           const questionDocRef = doc(db, 'questions', quesId);
           await updateDoc(questionDocRef, {
-          keywords: keywordsString, // Add your keywords here
+          keywords: keywordsArray,
+          hashtags: hashtagsArray
       });
         }
       });
@@ -549,6 +560,9 @@ const clearNotifications = async () => {
                             render = {({field}) => (
                               <FormItem>
                                 <FormLabel>Description</FormLabel>
+                                <div className={`${isFocused?"border-black border-[2.1px]": "border-[1.2px]"} rounded-lg`} onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      >
                                 <FormControl>
                                   <Controller
                                     control={form.control}
@@ -558,6 +572,7 @@ const clearNotifications = async () => {
                                     )}
                                    /> 
                                 </FormControl>
+                                </div>
                                 <div className="text-sm opacity-70">This is the description, give more details about your question here.</div>
                                 <FormMessage/>
                               </FormItem>