diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/CashoutMethods.tsx | 11 | ||||
| -rw-r--r-- | src/pages/Community.tsx | 15 | ||||
| -rw-r--r-- | src/pages/Questions.tsx | 122 |
3 files changed, 95 insertions, 53 deletions
diff --git a/src/pages/CashoutMethods.tsx b/src/pages/CashoutMethods.tsx index 86727ee..9656087 100644 --- a/src/pages/CashoutMethods.tsx +++ b/src/pages/CashoutMethods.tsx @@ -1,11 +1,9 @@ import React, {useEffect, useState} from 'react' -import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card.tsx"; -import {GRLWidgetSettings} from "@/Widget.tsx" -import {CashoutMethodsResponse, WalletApi} from "@/api" -import {CashoutMethod} from "@/models/CashoutMethod.ts"; +import {Card, CardContent, CardHeader} from "@/components/ui/card.tsx"; +import {CashoutMethodOut, CashoutMethodsResponse, WalletApi} from "@/api" -const CashoutMethodPreview: React.FC<{ cashout_method: CashoutMethod }> = ({cashout_method}) => { +const CashoutMethodPreview: React.FC<{ cashout_method: CashoutMethodOut }> = ({cashout_method}) => { return ( <Card key={cashout_method.id}> @@ -37,8 +35,7 @@ const CashoutMethodsPage: React.FC<GRLWidgetSettings> = ({settings}) => { <div className="grid grid-cols-3 gap-1 p-1"> { cashoutMethods.map((m, index) => { - const cm = new CashoutMethod(m); - return <CashoutMethodPreview key={index} cashout_method={cm} />; + return <CashoutMethodPreview key={index} cashout_method={m}/>; }) } </div> diff --git a/src/pages/Community.tsx b/src/pages/Community.tsx index 88cb74d..9b49608 100644 --- a/src/pages/Community.tsx +++ b/src/pages/Community.tsx @@ -1,11 +1,11 @@ import React, {useEffect, useState} from 'react' import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card.tsx"; -import {GRLWidgetSettings} from "@/Widget.tsx" import {CashoutMethodsResponse, WalletApi} from "@/api" -import {CashoutMethod} from "@/models/CashoutMethod.ts"; +import {CashoutMethodOut} from "@/api"; +import {useAppSelector} from "@/hooks.ts"; -const CashoutMethodPreview: React.FC<{ cashout_method: CashoutMethod }> = ({cashout_method}) => { +const CashoutMethodPreview: React.FC<{ cashout_method: CashoutMethodOut }> = ({cashout_method}) => { console.log("CashoutMethodPreview", cashout_method) @@ -22,12 +22,14 @@ const CashoutMethodPreview: React.FC<{ cashout_method: CashoutMethod }> = ({cash ) } -const CommunityPage: React.FC<GRLWidgetSettings> = ({settings}) => { +const CommunityPage = () => { + const app = useAppSelector(state => state.app) + const [cashoutMethods, setCashoutMethods] = useState([]); useEffect(() => { const x = new WalletApi(); - x.getCashoutMethodsProductIdCashoutMethodsGet(settings.bpid, settings.bpuid) + x.getCashoutMethodsProductIdCashoutMethodsGet(app.bpid, app.bpuid) .then(res => { const data: CashoutMethodsResponse = res.data; setCashoutMethods(data.cashout_methods); @@ -39,8 +41,7 @@ const CommunityPage: React.FC<GRLWidgetSettings> = ({settings}) => { <div className="grid grid-cols-3 gap-1 p-1"> { cashoutMethods.map((m, index) => { - const cm = new CashoutMethod(m); - return <CashoutMethodPreview key={index} cashout_method={cm} />; + return <CashoutMethodPreview key={index} cashout_method={m} />; }) } </div> diff --git a/src/pages/Questions.tsx b/src/pages/Questions.tsx index 13d31c4..0a3f43e 100644 --- a/src/pages/Questions.tsx +++ b/src/pages/Questions.tsx @@ -1,32 +1,28 @@ -import React, {useEffect, useState} from 'react' - -import {ProfilingQuestionsApi, UpkQuestionResponse} from "@/api" -import {ProfilingQuestion} from "@/models/question.ts"; -import {setAnswer} from "@/models/questionSlice.ts" -import {UpkQuestion} from "@/api/models/upk-question.ts" +import React from 'react' +import {UpkQuestion} from "@/api"; +import {UpkQuestionChoice} from "@/api/models/upk-question-choice.ts"; import {Card, CardContent, CardHeader} from "@/components/ui/card.tsx"; -import {useAppDispatch, useAppSelector} from "@/hooks.ts"; - +import {useAppSelector} from "@/hooks.ts"; const TextEntry: React.FC<{ question: UpkQuestion }> = ({question}) => { - const dispatch = useAppDispatch() + // const dispatch = useAppDispatch() // const buckets = useAppSelector(state => state.buckets) - const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { - // Don't allow any input changes after they triggered submission... - if (question._complete || question._processing) { - return - } - - // Assign the input value as an answer to the question - const newValue = event.target.value; - dispatch(setAnswer({questionId: question.questionId, val: newValue})) - }; + // const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { + // // Don't allow any input changes after they triggered submission... + // if (question._complete || question._processing) { + // return + // } + // + // // Assign the input value as an answer to the question + // const newValue = event.target.value; + // dispatch(setAnswer({questionId: question.questionId, val: newValue})) + // }; return ( <Card className="@container/card"> <CardHeader> - {question.questionText} + {question.question_text} </CardHeader> <CardContent> @@ -34,34 +30,91 @@ const TextEntry: React.FC<{ question: UpkQuestion }> = ({question}) => { id="text-entry-input" aria-describedby="" placeholder="" - onInput={handleInputChange} + // onInput={handleInputChange} /> - <small id="text-entry-msg">{question.error_msg}</small> + {/*<small id="text-entry-msg">{question.error_msg}</small>*/} </CardContent> </Card> ) } +const MultiChoiceItem: React.FC<{ question: UpkQuestion, choice: UpkQuestionChoice }> = ({question, choice}) => { + + // const onclick = function () { + // // Assign the input value as an answer to the question + // let answer = getAnswer; + // let click_value = childView.model.get("choice_id") + // + // switch (question.selector) { + // + // case "SA": /// Single Answer + // answer.set("values", [{"value": click_value}]); + // break + // + // case "MA": /// Multi Answer + // let current_values: AnswerValueItemType[] = answer.get("values") ?? []; + // + // if (includes(map(current_values, "value"), click_value)) { + // // The item has already been selected + // current_values = remove(current_values, (v) => { + // return v["value"] != click_value + // }) + // + // } else { + // // It's a new selection + // current_values.push({"value": click_value}) + // } + // + // answer.set("values", current_values); + // break + // } + // childView.render(); + // + // // Validate the answer and show any information + // let res: QuestionValidationResult = this.model.validateAnswer() + // this.ui.message.text(res["message"]); + // } + + // const render = function () { + // let answer = this.getOption("answer"); + // let current_values: AnswerValueItemType[] = answer.get("values") ?? []; + // let current_values_values = map(current_values, "value"); + // + // if (includes(current_values_values, this.model.get("choice_id"))) { + // this.$el.addClass("selected"); + // } + // } + + return ( + <> + {choice.choice_text} + </> + ) +} + const MultipleChoice: React.FC<{ question: UpkQuestion }> = ({question}) => { return ( <Card> <CardHeader> - {question.questionText} + {question.question_text} + {/*<small id="text-entry-msg">{question.error_msg}</small>*/} </CardHeader> <CardContent> - <p>MultipleChoice ... </p> + { + question.choices.map(c => { + return <MultiChoiceItem key={`${question.question_id}-${c.choice_id}`} question={question} choice={c}/> + }) + } </CardContent> </Card> ) } -const ProfileQuestionFull: React.FC<{ question: UpkQuestion }> = ({question}) => { - console.log("ProfileQuestionFull", question, question) - - switch (question.questionType) { +const ProfileQuestionFull: React.FC<UpkQuestion> = ({question}) => { + switch (question.question_type) { case "TE": return <TextEntry question={question}/> @@ -73,15 +126,6 @@ const ProfileQuestionFull: React.FC<{ question: UpkQuestion }> = ({question}) => } } -const ProfileQuestionPreview: React.FC<{ question: UpkQuestion }> = ({question}) => { - - return ( - <div> - {question.questionText} - </div> - ) -}; - const QuestionsPage = () => { const questions = useAppSelector(state => state.questions) @@ -92,8 +136,8 @@ const QuestionsPage = () => { </p> { - questions.forEach(q => { - return <ProfileQuestionFull key={q.questionId} question={q} className="mt-4 mb-4"/>; + questions.map(q => { + return <ProfileQuestionFull key={q.question_id} question={q} className="mt-4 mb-4"/>; }) } </div> |