1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
import { useEffect, useState, useRef } from "react"
import {SiteHeader} from "@/components/site-header"
import {SidebarInset, SidebarProvider} from "@/components/ui/sidebar"
import {Offerwall} from "@/pages/Offerwall.tsx"
import {QuestionsPage} from "@/pages/Questions.tsx";
import {Demographics} from "@/pages/Demographics.tsx"
import {CashoutMethodsPage} from "@/pages/CashoutMethods.tsx";
import {TransactionHistoryPage} from "@/pages/TransactionHistory.tsx"
import {TaskAttemptHistoryPage} from "@/pages/TaskAttemptHistory.tsx";
import {AppSidebar} from "@/components/app-sidebar"
import {useAppDispatch, useAppSelector} from "@/hooks.ts";
import {
CashoutMethodOut,
MarketProfileKnowledge,
OfferwallApi,
ProductUserApi,
ProfilingQuestionsApi,
QuestionInfo,
StatusApi,
UserProfileKnowledge,
UserWalletBalance,
WalletApi
} from "@/api";
import {ProfileQuestion, setQuestions} from "@/models/questionSlice.ts";
import {setBuckets} from "@/models/bucketSlice.ts";
import {setCashoutMethods} from "@/models/cashoutMethodSlice.ts";
import {setWallet} from "@/models/walletSlice.ts"
import {setUpkQuestions} from "@/models/upkQuestionSlice.ts"
import {setAvailabilityCount, setOfferwallId} from "@/models/appSlice.ts"
import {setUpkAnswers} from "@/models/userUpkAnswerSlice.ts";
import {setMarketplaceAnswers} from "@/models/userMarketplaceAnswerSlice.ts";
import {setUserProfile} from "@/models/userProfileSlice.ts";
import {setTaskStatuses} from "@/models/taskStatusSlice.ts"
import {App} from "@/models/app.ts"
import {ScrollArea} from "@/components/ui/scroll-area"
import './index.css';
export function useParentHeight() {
const ref = useRef<HTMLDivElement>(null)
const [height, setHeight] = useState<number | null>(null)
useEffect(() => {
if (!ref.current) return
const observer = new ResizeObserver(() => {
if (ref.current?.parentElement) {
const h = ref.current.parentElement.getBoundingClientRect().height
setHeight(h)
}
})
observer.observe(ref.current.parentElement!)
return () => observer.disconnect()
}, [])
return { ref, height }
}
const Widget = () => {
const { ref, height } = useParentHeight()
const dispatch = useAppDispatch()
const app: App = useAppSelector(state => state.app)
useEffect(() => {
// https://fsb.generalresearch.com/{product_id}/offerwall/37d1da64/?country
new OfferwallApi().offerwallSoftpairProductIdOfferwall37d1da64Get(app.bpid, app.bpuid, "104.9.125.144")
.then(res => {
// We want to set these questions first, because the Bucket Component views may do
// some redux lookups
const objects: ProfileQuestion[] = Object.values(res.data.offerwall.question_info) as ProfileQuestion[]
dispatch(setQuestions(objects))
dispatch(setAvailabilityCount(res.data.offerwall.availability_count))
dispatch(setOfferwallId(res.data.offerwall.id))
dispatch(setBuckets(res.data.offerwall.buckets))
})
.catch(err => console.log(err));
new StatusApi().listTaskStatusesProductIdStatusGet(app.bpid, app.bpuid)
.then(res => {
dispatch(setTaskStatuses(res.data.tasks_status))
})
.catch(err => console.log(err))
new ProductUserApi().userProfileProductIdUserProductUserIdProfileGet(app.bpid, app.bpuid)
.then(res => {
dispatch(setUserProfile(res.data["user-profile"]))
})
.catch(err => console.log(err))
new ProfilingQuestionsApi().getProfilingQuestionsProductIdProfilingQuestionsGet(app.bpid, app.bpuid, "104.9.125.144", undefined, undefined, 2500)
.then(res => {
dispatch(setQuestions(res.data.questions as ProfileQuestion[]))
})
.catch(err => console.log(err));
new ProfilingQuestionsApi().userProfileProductIdUserProfileGet(app.bpid, app.bpuid, "us")
.then(res => {
dispatch(setMarketplaceAnswers(res.data["user-profile"].marketplace_profile_knowledge as MarketProfileKnowledge[]))
dispatch(setUpkAnswers(res.data["user-profile"].user_profile_knowledge as UserProfileKnowledge[]))
}).catch(err => console.log(err))
new ProfilingQuestionsApi().profilingInfoProductIdProfilingInfoGet(app.bpid, "us")
.then(res => {
dispatch(setUpkQuestions(res.data["profiling-info"] as QuestionInfo[]))
})
.catch(err => console.log(err))
new WalletApi().getCashoutMethodsProductIdCashoutMethodsGet(app.bpid, app.bpuid)
.then(res => {
dispatch(setCashoutMethods(res.data.cashout_methods as CashoutMethodOut[]))
})
.catch(err => console.log(err))
new WalletApi().getUserWalletBalanceProductIdWalletGet(app.bpid, app.bpuid)
.then(res => {
dispatch(setWallet(res.data.wallet as UserWalletBalance))
})
.catch(() => {
// TODO: Wallet mode is likely off
})
}, []); // ← empty array means "run once"
return (
<div ref={ref} className="w-full h-full bg-white rounded-lg shadow relative">
<SidebarProvider className="bg-blend-darken h-full flex flex-1" style={{ height }}>
<AppSidebar className="h-full" style={{ height }}/>
<SidebarInset className="h-full" style={{ height }}>
<SiteHeader/>
<ScrollArea className="overflow-auto px-4" style={{ maxHeight: height ? height - 24 : undefined }}>
<div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
<div className="px-4 lg:px-6 bg-white">
{app.currentPage === 'offerwall' && <Offerwall/>}
{app.currentPage === 'questions' && <QuestionsPage/>}
{app.currentPage === 'cashout_methods' && <CashoutMethodsPage/>}
{app.currentPage === 'task_attempts' && <TaskAttemptHistoryPage/>}
{app.currentPage === 'demographics' && <Demographics/>}
{app.currentPage === 'transaction_history' && <TransactionHistoryPage/>}
</div>
</div>
</ScrollArea>
</SidebarInset>
</SidebarProvider>
</div>
)
}
export {Widget}
|
