resource ask question implemented

2023-07-24 15:34:29 +01:00
parent 77c538ca79
commit 11dc8fc659
5 changed files with 161 additions and 29 deletions
@@ -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">
-                                        <option className="rounded-full">Find answer on:</option>
+                                    <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">
+                                        {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>
        </>