resource ask question implemented

src/components/Blogs/index.jsx

@@ -1,38 +1,67 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
+import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 export default function BlogItem(props) {
+
+    const apiCall = new usersService()
+    const navigate = useNavigate()
+
+    const [blogdata, setBlogdata] = useState({loading: true, data:{}})
+
     const [selectTab, setValue] = useState("today");
     const filterHandler = (value) => {
         setValue(value);
     };
+    const queryParams = new URLSearchParams(location?.search);
+    const blog_id = queryParams.get("blog_id");
+    
+    useEffect(()=>{
+        if(!blog_id){
+            navigate('/',{replace:true})
+        }
+        apiCall.getSingleBlogData({blog_id}).then(res => {
+            setBlogdata({loading: false, data:res.data})
+        }).catch(error => {
+            setBlogdata({loading: false, data:{}})
+            console.log('ERROR', error)
+        })
+    },[blog_id])
     return (
         <Layout>
             <CommonHead
                 commonHeadData={props.commonHeadData}
             />
             <div className="notification-page w-full mb-10">
-                <div className="notification-wrapper w-full">
+                <div className="notification-wrapper w-full bg-white p-8">
-                    {/* heading */}
+                    {blogdata.loading ? 
-                    <div className="sm:flex justify-between items-center mb-6">
+                        <LoadingSpinner size='8' color='sky-blue' height='h-[100px]' />
-                        <div className="mb-5 sm:mb-0">
+                    :
-                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+                        blogdata?.data?.blogdata && blogdata.data?.blogdata.length ?
-                <span
+                        <div className="w-full">
-                    className={`${selectTab === "today" ? "block" : "hidden"}`}
+                            {/* heading */}
-                >
+                            <div className="sm:flex justify-between items-center mb-6">
-                  Title of this Blog Items
+                                <div className="mb-5 sm:mb-0">
-                </span>
+                                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">
-                            </h1>
+                                        <span
-                        </div>
+                                            className={`${selectTab === "today" ? "block" : "hidden"}`}
-                        <div className="slider-btns flex space-x-4">
+                                        >
-
+                                        {blogdata.data?.blogdata?.[0]?.post_title}
-                        </div>
+                                        </span>
+                                    </h1>
+                                </div>
+                                {/* <div className="slider-btns flex space-x-4">
+                                </div> */}
+                            </div>
+                            <div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}}>
+                            </div>
                     </div>
-                   <div>
+                    :
-                       Blog Items Details need implenet
+                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">No Blog Found!</h1>
-                   </div>
+                    }  
                 </div>
             </div>
         </Layout>

src/components/Helpers/SearchCom.jsx

@@ -7,6 +7,7 @@ export default function SearchCom({
   placeholder,
   handleSearch,
   value,
+  name,
 }) {
   return (
     <div
@@ -22,6 +23,7 @@ export default function SearchCom({
           className={`w-full h-full focus:outline-0 focus:ring-0 dark:bg-dark-white dark:text-white ${
             inputClasses || ""
           }`}
+          name={name}
           type="text"
           onInput={handleSearch}
           value={value}

src/components/Resources/tabs/QuestionsTab.jsx

@@ -1,9 +1,65 @@
+import { useEffect, useState } from "react";
+
 import ProductCardStyleTwo from "../../Cards/ProductCardStyleTwo";
 import DataIteration from "../../Helpers/DataIteration";
 import SearchCom from "../../Helpers/SearchCom";
 import localImgLoad from "../../../lib/localImgLoad";
 
+import usersService from "../../../services/UsersService";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
 export default function QuestionsTab({ className, products }) {
+    const apiCall = new usersService()
+
+    const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''})
+
+    const [error, setError] = useState({question: '', searchPhrase: ''})
+
+    const [questions, setQuestions] = useState({loading: true, data: []})
+
+    const [askQuestion, setAskQuestion] = useState({question: '', searchPhrase: ''})
+
+    const changeAskQuestion = ({target: {name, value}}) => {
+        setAskQuestion(prev => ({...prev, [name]: value}))
+        setRequestStatus({loading: false, status: false, message: ''})
+    }
+
+    const onSearch = () => {
+        setError({question: '', searchPhrase: ''}) // sets error to false
+        if(!askQuestion.question){
+            return setError(prev => ({...prev, question: 'Select a question'}))
+        }
+        if(!askQuestion.searchPhrase){
+            return setError(prev => ({...prev, searchPhrase: 'Enter search parameter'}))
+        }
+        if(askQuestion.searchPhrase.length > 60){
+            return setError(prev => ({...prev, searchPhrase: 'Max of 60 characters'}))
+        }
+        
+        setRequestStatus({loading: true, status: false, message: ''})
+        let reqData = {
+            question_key: '',
+            question: ''
+        }
+        apiCall.askResourcesResult().then(res => {
+            console.log(res.data.choices[0].text)
+            if(!res.data || res.data?.choices?.length < 1){
+            setRequestStatus({loading: false, status: false, message: 'No result found!'})
+            }
+            setRequestStatus({loading: false, status: false, message: res.data?.choices[0].text})
+        }).catch(error => {
+            setRequestStatus({loading: false, status: false, message: 'No result found!'})
+        })
+    }
+   
+    useEffect(()=>{
+        apiCall.getResourceList().then(res => {
+            setQuestions({loading: false, data: res.data?.ask_categories?.data})
+        }).catch(error => {
+            setQuestions({loading: false, data: []})
+            console.log('ERROR', error)
+        })
+    }, [])
     return (
         <>
             <div className={`onsale-tab-wrapper w-full ${className || ""}`}>
@@ -16,29 +72,49 @@ export default function QuestionsTab({ className, products }) {
                             </div>
                             <div className="p-8 bg-white rounded-2xl h-full">
                                 <div className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base">
-                                    <select className="input-field px-2 placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none">
+                                    <select value={askQuestion.question} name='question' onChange={changeAskQuestion} className="input-field px-2 placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#fafafa] focus:ring-0 focus:outline-none">
-                                        <option className="rounded-full">Find answer on:</option>
+                                        {questions.loading ? 
+                                            <option value='' className="">Loading...</option>
+                                            :
+                                            <>
+                                            <option value='' className="">Find answer on:</option>
+                                            {questions.data.length > 0 && questions.data.map((item, index)=>(
+                                                <option key={index} value={item.question_key} className="">{item.name}</option>
+                                                ))}
+                                            </>
+                                        }
+                                        
                                     </select>
                                 </div>
+                                {error.question && <p className="text-red-500 text-[12px]">{error.question}</p>} 
                                 {/* filter-search */}
                                 <div className="w-full my-5 border-2 rounded-full">
-                                    <SearchCom />
+                                    <SearchCom 
+                                        name={'searchPhrase'}
+                                        value={askQuestion.searchPhrase}
+                                        handleSearch={changeAskQuestion}
+                                        />
                                 </div>
+                                {error.searchPhrase && <p className="text-red-500 text-[12px]">{error.searchPhrase}</p>}
                                 <div className="w-full flex justify-end items-center border-b-2 pb-4">
                                     <button
+                                        onClick={onSearch}
+                                        disabled={requestStatus.loading}
                                         className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
                                         >
                                         Search
                                     </button>
                                 </div>
+                                <div className="search_result my-2 max-h-[400px] overflow-auto">
+                                {requestStatus.loading ?
+                                    <LoadingSpinner size='8' color='sky-blue' height='h-[100px]' />
+                                    :
+                                    <p className="py-2 text-sm font-bold text-dark-gray dark:text-white tracking-wide">{requestStatus.message}</p>
+                                    }
+                                </div>
                             </div>
                         </div>
-
                     </div>
-                    {/* <div className="content-section w-full-width">
-                        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
-                        </div>
-                    </div> */}
                 </div>
             </div>
         </>

src/components/UserHeader/RecomendedSliders.jsx

@@ -100,7 +100,7 @@ export default function RecomendedSliders({ className, bannerData }) {
       <div className="slider-content">
         <SliderCom settings={settings} selector={sellSlider}>
           {bannerData.map((item, index) => (
-            <Link key={index} to={`/${item.link_path}`}>
+            <Link key={index} to={item.link_path == 'blog-page' ? `/${item.link_path}?blog_id=${item.blog_id}` : `/${item.link_path}`}>
               <div className="item">
                 <div
                   className={`commonHeaderSliderItem flex gap-1 flex-col justify-between items-center ${item.short_style}`}

src/services/UsersService.js

@@ -411,6 +411,19 @@ class usersService {
     };
     return this.postAuxEnd("/resources", postData);
   }
+
+  // ASK QUESTION RESOURCES
+  askResourcesResult(reqData) {
+    var postData = {
+      uuid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 22010,
+      ...reqData,
+    };
+    return this.postAuxEnd("/askresources", postData);
+  }
+
   getMyWiatingJobList() {
     // jobs you have shown inteterest in
     var postData = {
@@ -991,6 +1004,18 @@ class usersService {
       return this.postAuxEnd("/payremcard", postData);
     }
 
+    // FUNCTION TO GET SINGLE BLOG ITEM
+    getSingleBlogData(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        limit: 4,
+        ...reqData,
+      };
+      return this.postAuxEnd("/blogdata", postData);
+    }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)