From ed201936813d9a720b51e6cb40a05267b94e7314 Mon Sep 17 00:00:00 2001 From: Max Nanis Date: Thu, 10 Sep 2026 17:46:41 -0700 Subject: Typescript prettier Committing seperate so it's easier to see actual changes. --- jb-ui/src/components/Profiling.tsx | 1297 ++++++++++++++++++------------------ 1 file changed, 663 insertions(+), 634 deletions(-) (limited to 'jb-ui/src/components/Profiling.tsx') diff --git a/jb-ui/src/components/Profiling.tsx b/jb-ui/src/components/Profiling.tsx index 9cefdda..96b06b2 100644 --- a/jb-ui/src/components/Profiling.tsx +++ b/jb-ui/src/components/Profiling.tsx @@ -1,536 +1,562 @@ -import { - UpkQuestionChoice -} from "@/api_fsb"; -import { - ChevronRightIcon -} from "lucide-react"; +import { UpkQuestionChoice } from "@/api_fsb"; +import { ChevronRightIcon } from "lucide-react"; import { KeyboardEvent, MouseEvent, useEffect, useRef, useState } from "react"; import { useAppDispatch, useAppSelector } from "@/hooks"; import { bpid } from "@/lib/utils"; import { - createColumnHelper, - flexRender, - getCoreRowModel, - getFilteredRowModel, - getSortedRowModel, - RowModel, - RowSelectionState, - useReactTable, -} from '@tanstack/react-table'; + createColumnHelper, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getSortedRowModel, + RowModel, + RowSelectionState, + useReactTable, +} from "@tanstack/react-table"; import { clsx } from "clsx"; import { - Pagination, - PaginationContent, - PaginationItem, - PaginationLink + Pagination, + PaginationContent, + PaginationItem, + PaginationLink, } from "@/components/ui/pagination"; import { - addAnswers, - fetchNewQuestions, - goToNextQuestion, - ProfileQuestion, - questionsSelectors, - saveAnswer, - selectActiveQuestion, - selectActiveQuestionValidation, - selectAllQuestions, - setActiveQuestion + addAnswers, + fetchNewQuestions, + goToNextQuestion, + ProfileQuestion, + questionsSelectors, + saveAnswer, + selectActiveQuestion, + selectActiveQuestionValidation, + selectAllQuestions, + setActiveQuestion, } from "@/models/profilingQuestionsSlice"; import { useSelector } from "react-redux"; // import {motion} from "framer-motion" const TextEntry = () => { - const dispatch = useAppDispatch() - - const activeQuestion = useSelector(selectActiveQuestion); - // const selectAnswer = useMemo(() => selectAnswerForQuestion(question), [question]); - // const selectAnswer = useSelector(selectAnswerForQuestion(question)); - const metadata = activeQuestion?._metadata - const validation = activeQuestion?._validation - const bpuid = useAppSelector(state => state.app.bpuid) - - if (!metadata) return null - if (!validation) return null - - const error = validation?.errors.length > 0 - - const handleInputChange = (event: React.KeyboardEvent) => { - if (!activeQuestion.question_id) return; - - const target = event.target as HTMLInputElement; - dispatch(addAnswers({ questionId: activeQuestion.question_id!, answers: [target.value] as string[] })) - }; - - const handleKeyPress = (event: KeyboardEvent) => { - if (!activeQuestion.question_id) return; - if (!bpuid) return; - - if (event.key === 'Enter') { - dispatch(saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid })) - } - }; - - return ( -
- - - { - validation.errors.map(e => { - return ( -

{e.message}

- ) - }) - } -
- ) -} - - -export default function useKeyboardMode( - rowModel: RowModel, -) { - // const [keyboardEnabled, setKeyboardEnabled] = useState( - // localStorage.getItem(keyboardMode) === "enabled", - // ); - const rowRefs = useRef<(HTMLTableRowElement | null)[]>([]); - - const dispatch = useAppDispatch() - const activeQuestion = useSelector(selectActiveQuestion); - const bpuid = useAppSelector(state => state.app.bpuid) - - const keyboardSelectionIdxRef = useRef(0); - - useEffect(() => { - const handleKeyDown = (event: KeyboardEvent) => { - - if (!activeQuestion) return; - if (!bpuid) return; - - // if (!keyboardEnabled) { - // return; - // } + const dispatch = useAppDispatch(); + + const activeQuestion = useSelector(selectActiveQuestion); + // const selectAnswer = useMemo(() => selectAnswerForQuestion(question), [question]); + // const selectAnswer = useSelector(selectAnswerForQuestion(question)); + const metadata = activeQuestion?._metadata; + const validation = activeQuestion?._validation; + const bpuid = useAppSelector((state) => state.app.bpuid); + + if (!metadata) return null; + if (!validation) return null; + + const error = validation?.errors.length > 0; + + const handleInputChange = (event: React.KeyboardEvent) => { + if (!activeQuestion.question_id) return; + + const target = event.target as HTMLInputElement; + dispatch( + addAnswers({ + questionId: activeQuestion.question_id!, + answers: [target.value] as string[], + }), + ); + }; + + const handleKeyPress = (event: KeyboardEvent) => { + if (!activeQuestion.question_id) return; + if (!bpuid) return; + + if (event.key === "Enter") { + dispatch( + saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid }), + ); + } + }; + + return ( +
+ - const { key } = event; - const totalRows = rowRefs.current.length; - const prevIdx = keyboardSelectionIdxRef.current; - let nextIdx = prevIdx; + {validation.errors.map((e) => { + return

{e.message}

; + })} +
+ ); +}; - if (key === "ArrowDown") nextIdx = Math.min(prevIdx + 1, totalRows - 1); - if (key === "ArrowUp") nextIdx = Math.max(prevIdx - 1, 0); - if (key === " ") { - const active = document.activeElement as HTMLElement | null; +export default function useKeyboardMode(rowModel: RowModel) { + // const [keyboardEnabled, setKeyboardEnabled] = useState( + // localStorage.getItem(keyboardMode) === "enabled", + // ); + const rowRefs = useRef<(HTMLTableRowElement | null)[]>([]); - if (active?.tabIndex === 0) { - return; - } else { - rowModel.rows[keyboardSelectionIdxRef.current].toggleSelected(); - } - } + const dispatch = useAppDispatch(); + const activeQuestion = useSelector(selectActiveQuestion); + const bpuid = useAppSelector((state) => state.app.bpuid); - if (event.key === 'Enter') { - dispatch(saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid })) - } + const keyboardSelectionIdxRef = useRef(0); + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (!activeQuestion) return; + if (!bpuid) return; - if (nextIdx !== prevIdx) { + // if (!keyboardEnabled) { + // return; + // } - rowRefs.current[prevIdx]?.classList.remove("bg-blue-400"); - rowRefs.current[nextIdx]?.classList.add("bg-blue-400"); + const { key } = event; + const totalRows = rowRefs.current.length; + const prevIdx = keyboardSelectionIdxRef.current; + let nextIdx = prevIdx; - rowRefs.current[nextIdx]?.scrollIntoView({ - behavior: "smooth", - block: "center", - }); - keyboardSelectionIdxRef.current = nextIdx; - } - }; + if (key === "ArrowDown") nextIdx = Math.min(prevIdx + 1, totalRows - 1); + if (key === "ArrowUp") nextIdx = Math.max(prevIdx - 1, 0); + if (key === " ") { + const active = document.activeElement as HTMLElement | null; - // I really don't know, and I don't really care enough to make this - // technically type'd correctly. - Max + if (active?.tabIndex === 0) { + return; + } else { + rowModel.rows[keyboardSelectionIdxRef.current].toggleSelected(); + } + } - // @ts-ignore - window.addEventListener("keydown", handleKeyDown); - // @ts-ignore - return () => window.removeEventListener("keydown", handleKeyDown); + if (event.key === "Enter") { + dispatch( + saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid }), + ); + } - }, [rowModel.rows]); + if (nextIdx !== prevIdx) { + rowRefs.current[prevIdx]?.classList.remove("bg-blue-400"); + rowRefs.current[nextIdx]?.classList.add("bg-blue-400"); - return { - // keyboardEnabled, - // setKeyboardEnabled, - rowRefs, - keyboardSelectionIdxRef, + rowRefs.current[nextIdx]?.scrollIntoView({ + behavior: "smooth", + block: "center", + }); + keyboardSelectionIdxRef.current = nextIdx; + } }; + + // I really don't know, and I don't really care enough to make this + // technically type'd correctly. - Max + + // @ts-ignore + window.addEventListener("keydown", handleKeyDown); + // @ts-ignore + return () => window.removeEventListener("keydown", handleKeyDown); + }, [rowModel.rows]); + + return { + // keyboardEnabled, + // setKeyboardEnabled, + rowRefs, + keyboardSelectionIdxRef, + }; } const MultipleChoice = () => { - const dispatch = useAppDispatch() - const activeQuestion = useSelector(selectActiveQuestion); - - // const error: Boolean = answer?.error_msg.length > 0 - // console.log("Rendering MultipleChoice with answer:", answer, error) - - // TODO! Retrieve store values to use as the initial state for the table - // This is useful for if they tab around before submitting the answer - const [rowSelection, setRowSelection] = useState({}); - const [globalFilter, setGlobalFilter] = useState(''); - - const handleRowSelectionChange = (updaterOrValue: RowSelectionState | ((old: RowSelectionState) => RowSelectionState)) => { - setRowSelection((oldSelection) => { - // Get the new selection state - const newSelection = typeof updaterOrValue === 'function' - ? updaterOrValue(oldSelection) - : updaterOrValue; - - // Find which row was just selected/deselected - const changedRowId = Object.keys(newSelection).find( - key => newSelection[key] !== oldSelection[key] - ); - - if (!changedRowId) return newSelection; - - // Get the actual row data - const row = table.getRow(changedRowId); - const rowData = row.original; // Your row data object - - // Check if "None of the Above" was selected - const normalized = rowData.choice_text.trim().toLowerCase(); - const isNoneOfTheAbove = (normalized === "none of the above") || (rowData.exclusive ?? false); - if (isNoneOfTheAbove && newSelection[changedRowId]) { - // Clear all other selections, keep only this one - return { [changedRowId]: true }; - } - - // Check if a regular option was selected while "None of the Above" exists - const noneOfTheAboveId = Object.keys(newSelection).find(id => { - const r = table.getRow(id); - const rowData = r.original as UpkQuestionChoice; - - const normalized = rowData.choice_text.trim().toLowerCase(); - const isNoneOfTheAbove = (normalized === "none of the above") || (rowData.exclusive ?? false); - - return isNoneOfTheAbove && newSelection[id]; - }); - - if (noneOfTheAboveId && changedRowId !== noneOfTheAboveId) { - // Remove "None of the Above" selection - const { [noneOfTheAboveId]: _, ...rest } = newSelection; - return rest; - } - - return newSelection; - }); - }; + const dispatch = useAppDispatch(); + const activeQuestion = useSelector(selectActiveQuestion); + + // const error: Boolean = answer?.error_msg.length > 0 + // console.log("Rendering MultipleChoice with answer:", answer, error) + + // TODO! Retrieve store values to use as the initial state for the table + // This is useful for if they tab around before submitting the answer + const [rowSelection, setRowSelection] = useState({}); + const [globalFilter, setGlobalFilter] = useState(""); + + const handleRowSelectionChange = ( + updaterOrValue: + | RowSelectionState + | ((old: RowSelectionState) => RowSelectionState), + ) => { + setRowSelection((oldSelection) => { + // Get the new selection state + const newSelection = + typeof updaterOrValue === "function" + ? updaterOrValue(oldSelection) + : updaterOrValue; + + // Find which row was just selected/deselected + const changedRowId = Object.keys(newSelection).find( + (key) => newSelection[key] !== oldSelection[key], + ); + + if (!changedRowId) return newSelection; + + // Get the actual row data + const row = table.getRow(changedRowId); + const rowData = row.original; // Your row data object + + // Check if "None of the Above" was selected + const normalized = rowData.choice_text.trim().toLowerCase(); + const isNoneOfTheAbove = + normalized === "none of the above" || (rowData.exclusive ?? false); + if (isNoneOfTheAbove && newSelection[changedRowId]) { + // Clear all other selections, keep only this one + return { [changedRowId]: true }; + } + + // Check if a regular option was selected while "None of the Above" exists + const noneOfTheAboveId = Object.keys(newSelection).find((id) => { + const r = table.getRow(id); + const rowData = r.original as UpkQuestionChoice; + + const normalized = rowData.choice_text.trim().toLowerCase(); + const isNoneOfTheAbove = + normalized === "none of the above" || (rowData.exclusive ?? false); + + return isNoneOfTheAbove && newSelection[id]; + }); + + if (noneOfTheAboveId && changedRowId !== noneOfTheAboveId) { + // Remove "None of the Above" selection + const { [noneOfTheAboveId]: _, ...rest } = newSelection; + return rest; + } + + return newSelection; + }); + }; + + useEffect(() => { + if (!activeQuestion?.question_id) return; + // Run this anytime a rowSelection changes, to update + // the answer in the store + const selectedChoices = Object.keys(rowSelection); + dispatch( + addAnswers({ + questionId: activeQuestion.question_id, + answers: selectedChoices, + }), + ); + }, [rowSelection]); + + // Define columns + const columnHelper = createColumnHelper(); + const columns = [ + columnHelper.display({ + id: "select", + cell: ({ row }) => { + const canSelected = row.getCanSelect(); - useEffect(() => { - if (!activeQuestion?.question_id) return; - // Run this anytime a rowSelection changes, to update - // the answer in the store - const selectedChoices = Object.keys(rowSelection) - dispatch(addAnswers({ questionId: activeQuestion.question_id, answers: selectedChoices })) - }, [rowSelection]) - - // Define columns - const columnHelper = createColumnHelper() - const columns = [ - columnHelper.display({ - id: 'select', - cell: ({ row }) => { - const canSelected = row.getCanSelect() - - return ( - - ) - }, - size: 20, - meta: { - align: 'center' - } - }), - - columnHelper.accessor("choice_text", { - header: () => 'Choice Text', - cell: (info) => { - const text = info.getValue(); - const selected = info.row.getIsSelected() - const canSelected = info.row.getCanSelect() - - return ( -

+ ); + }, + size: 20, + meta: { + align: "center", + }, + }), + + columnHelper.accessor("choice_text", { + header: () => "Choice Text", + cell: (info) => { + const text = info.getValue(); + const selected = info.row.getIsSelected(); + const canSelected = info.row.getCanSelect(); + + return ( +

- {text} -

- ) - }, - size: 380, - meta: { - align: 'left' - } - }), - ] - - const table = useReactTable({ - 'data': activeQuestion!.choices ?? [], - columns, - getRowId: (row) => row.choice_id, - state: { - rowSelection, - globalFilter, - }, - // enableRowSelection: true, - enableRowSelection: (row) => { - // Allow deselection always, but limit new selections - const currentSelectionCount = Object.keys(rowSelection).length; - const isRowSelected = rowSelection[row.id]; - - const max_selection = activeQuestion?.selector === "SA" ? 1 : activeQuestion?.choices?.length ?? 10 - - // Allow if: row is already selected OR we haven't hit the limit - return isRowSelected || currentSelectionCount < max_selection; - }, - onRowSelectionChange: handleRowSelectionChange, - onGlobalFilterChange: setGlobalFilter, - getCoreRowModel: getCoreRowModel(), - getSortedRowModel: getSortedRowModel(), - getFilteredRowModel: getFilteredRowModel(), - }); - - const selectedCount = table.getSelectedRowModel().rows.length; - - //const { rowRefs, setKeyboardEnabled, keyboardSelectionIdxRef } = useKeyboardMode(table.getRowModel()); - const { rowRefs } = useKeyboardMode(table.getRowModel()); - - return ( - <> - - {/* Controls */} -
-
- - {/* Search */} -
- setGlobalFilter(e.target.value)} - className="w-full px-4 py-1 + ${selected ? "font-bold" : "font-medium"} + ${canSelected ? "text-blue-950" : "text-blue-600"} + `} + > + {text} +

+ ); + }, + size: 380, + meta: { + align: "left", + }, + }), + ]; + + const table = useReactTable({ + data: activeQuestion!.choices ?? [], + columns, + getRowId: (row) => row.choice_id, + state: { + rowSelection, + globalFilter, + }, + // enableRowSelection: true, + enableRowSelection: (row) => { + // Allow deselection always, but limit new selections + const currentSelectionCount = Object.keys(rowSelection).length; + const isRowSelected = rowSelection[row.id]; + + const max_selection = + activeQuestion?.selector === "SA" + ? 1 + : (activeQuestion?.choices?.length ?? 10); + + // Allow if: row is already selected OR we haven't hit the limit + return isRowSelected || currentSelectionCount < max_selection; + }, + onRowSelectionChange: handleRowSelectionChange, + onGlobalFilterChange: setGlobalFilter, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + }); + + const selectedCount = table.getSelectedRowModel().rows.length; + + //const { rowRefs, setKeyboardEnabled, keyboardSelectionIdxRef } = useKeyboardMode(table.getRowModel()); + const { rowRefs } = useKeyboardMode(table.getRowModel()); + + return ( + <> + {/* Controls */} +
+
+ {/* Search */} +
+ setGlobalFilter(e.target.value)} + className="w-full px-4 py-1 border border-blue-900 bg-blue-400 rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" - /> -
+ /> +
- {/* Selected Count */} - {selectedCount > 0 && ( -
setRowSelection({})}> - {selectedCount} selected - -
- )} - -
+ onClick={() => setRowSelection({})} + > + {selectedCount} selected +
+ )} +
+
- {/* Table */} -
- - - {table.getRowModel().rows.map((row, idx) => ( - { - rowRefs.current[idx] = el; - }} - onClick={() => row.toggleSelected()} - className={`cursor-pointer transition-colors w-full - ${row.getIsSelected() ? 'bg-blue-600 ' : ' ' + " + > +
+ + {table.getRowModel().rows.map((row, idx) => ( + { + rowRefs.current[idx] = el; + }} + onClick={() => row.toggleSelected()} + className={`cursor-pointer transition-colors w-full + ${ + row.getIsSelected() ? "bg-blue-600 " : " " }`} - > - - {row.getVisibleCells().map((cell) => { - const align = cell.column.columnDef.meta?.align || 'left'; - const alignClass = align === 'center' ? 'text-center' : - align === 'right' ? 'text-right' : 'text-left'; - - return ( - - ) - })} - - - ))} - -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
-
- - {/* Empty State */} - {table.getRowModel().rows.length === 0 && ( -
- No items found matching your search -
- )} + > + {row.getVisibleCells().map((cell) => { + const align = cell.column.columnDef.meta?.align || "left"; + const alignClass = + align === "center" + ? "text-center" + : align === "right" + ? "text-right" + : "text-left"; + + return ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + + ); + })} + + ))} + + + + + {/* Empty State */} + {table.getRowModel().rows.length === 0 && ( +
+ No items found matching your search +
+ )} - {/* Footer */} -
- - Showing {table.getRowModel().rows.length} of {activeQuestion?.choices?.length} choices - - {selectedCount > 0 && ( - - {selectedCount} choice{selectedCount !== 1 ? 's' : ''} selected - - )} -
- - - ) - -} + " + > + + Showing {table.getRowModel().rows.length} of{" "} + {activeQuestion?.choices?.length} choices + + {selectedCount > 0 && ( + + {selectedCount} choice{selectedCount !== 1 ? "s" : ""} selected + + )} + + + ); +}; const ProfilingQuestionTitle = () => { - const activeQuestion = useSelector(selectActiveQuestion); - const question_active_tasks = activeQuestion?.importance?.task_count ?? 0 + const activeQuestion = useSelector(selectActiveQuestion); + const question_active_tasks = activeQuestion?.importance?.task_count ?? 0; - if (!activeQuestion) return null; - - let text = activeQuestion?.question_text + if (!activeQuestion) return null; - if (activeQuestion.explanation_template && activeQuestion._validation?.isComplete && activeQuestion._metadata.answers.length == 1) { - const template = activeQuestion.explanation_template; - const pre_code = activeQuestion._metadata.answers[0]; + let text = activeQuestion?.question_text; - const choice = activeQuestion.choices?.find(c => c.choice_id === pre_code) - const choice_text = choice ? choice.choice_text : "your answer" + if ( + activeQuestion.explanation_template && + activeQuestion._validation?.isComplete && + activeQuestion._metadata.answers.length == 1 + ) { + const template = activeQuestion.explanation_template; + const pre_code = activeQuestion._metadata.answers[0]; - text = template.replace("{answer}", choice_text) - } + const choice = activeQuestion.choices?.find( + (c) => c.choice_id === pre_code, + ); + const choice_text = choice ? choice.choice_text : "your answer"; + text = template.replace("{answer}", choice_text); + } - return ( -
- -

+

- {text} -

- -
-

- {question_active_tasks.toLocaleString()} -

-
- Surveys use - this question -
-
-
- ) -} + " + > + {text} + + +
+

+ {question_active_tasks.toLocaleString()} +

+
Surveys use this question
+
+ + ); +}; const ProfilingQuestionSubmitButton = () => { - const dispatch = useAppDispatch() - - const activeQuestion = useSelector(selectActiveQuestion); - const activeQuestionValidation = useSelector(selectActiveQuestionValidation) - const bpuid = useAppSelector(state => state.app.bpuid) - - const handleOnClick = () => { - if (!activeQuestion) return - if (!activeQuestionValidation?.isComplete) return - if (!bpuid) return; - - dispatch(saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid })) - } - - return ( - - ) -} - + disabled={!activeQuestionValidation?.isComplete} + onClick={handleOnClick} + > + Answer Question + + ); +}; export const ProfileQuestionFull = () => { - const activeQuestion = useSelector(selectActiveQuestion); - - const renderContent = () => { - if (!activeQuestion) return null; - switch (activeQuestion.question_type) { - case 'TE': - return - case 'MC': - return - default: - return - } - }; + const activeQuestion = useSelector(selectActiveQuestion); + + const renderContent = () => { + if (!activeQuestion) return null; + switch (activeQuestion.question_type) { + case "TE": + return ; + case "MC": + return ; + default: + return ; + } + }; - if (!activeQuestion) return null + if (!activeQuestion) return null; - return ( - <> - {/* {answer && answer.processing && ( + return ( + <> + {/* {answer && answer.processing && ( { /> )} */} - {renderContent()} - - ) -} + {renderContent()} + + ); +}; const PaginationIcon: React.FC<{ - question: ProfileQuestion, idx: number, + question: ProfileQuestion; + idx: number; }> = ({ question, idx }) => { - const dispatch = useAppDispatch() + const dispatch = useAppDispatch(); - // const answers = useAppSelector(state => state.answers) - const isActive = question._metadata?.isActive ?? false - const completed = question._validation?.isComplete ?? false + // const answers = useAppSelector(state => state.answers) + const isActive = question._metadata?.isActive ?? false; + const completed = question._validation?.isComplete ?? false; - const handleSetQuestion = (evt: MouseEvent) => { - if (completed) { - evt.preventDefault() - } else { - dispatch(setActiveQuestion(question.question_id!)) - } + const handleSetQuestion = (evt: MouseEvent) => { + if (completed) { + evt.preventDefault(); + } else { + dispatch(setActiveQuestion(question.question_id!)); } - - return ( - - - {idx + 1} - - - ) -} + }; + + return ( + + + {idx + 1} + + + ); +}; const ProfilingQuestionPagination = () => { - const dispatch = useAppDispatch() - - const questions = useSelector(selectAllQuestions) - const activeQuestion = useSelector(selectActiveQuestion) - - // All the variables needed for a sliding window - const q_idx = questions.findIndex(q => q.question_id === activeQuestion!.question_id) - - const handleNextClick = () => { - dispatch(goToNextQuestion()); - }; - - const questionsWindow = ( - items: ProfileQuestion[], currentIndex: number, windowSize: number = 5 - ): ProfileQuestion[] => { - const half: number = Math.floor(windowSize / 2) - const total: number = items.length - let start: number = currentIndex - half - let end: number = currentIndex + half + 1 - - if (start < 0) { - end += Math.abs(start) - start = 0 - } - - // Adjust if window goes past the end - if (end > total) { - const overflow: number = end - total - start = Math.max(0, start - overflow) - end = total - } + const dispatch = useAppDispatch(); + + const questions = useSelector(selectAllQuestions); + const activeQuestion = useSelector(selectActiveQuestion); + + // All the variables needed for a sliding window + const q_idx = questions.findIndex( + (q) => q.question_id === activeQuestion!.question_id, + ); + + const handleNextClick = () => { + dispatch(goToNextQuestion()); + }; + + const questionsWindow = ( + items: ProfileQuestion[], + currentIndex: number, + windowSize: number = 5, + ): ProfileQuestion[] => { + const half: number = Math.floor(windowSize / 2); + const total: number = items.length; + let start: number = currentIndex - half; + let end: number = currentIndex + half + 1; + + if (start < 0) { + end += Math.abs(start); + start = 0; + } - return items.slice(start, end) + // Adjust if window goes past the end + if (end > total) { + const overflow: number = end - total; + start = Math.max(0, start - overflow); + end = total; } - return ( - - - { - questionsWindow(questions, q_idx).map(q => { - return qq.question_id === q.question_id)} - /> - }) - } - - - - Next - - - - - - - ) -} + onClick={handleNextClick} + href="#" + > + Next + + + + + + ); +}; const ProfilingHeader = () => { - const questions = useSelector(questionsSelectors.selectAll); + const questions = useSelector(questionsSelectors.selectAll); - return ( -

- {questions.length} Profiling Questions -

- ) -} + return ( +

+ {questions.length} Profiling Questions +

+ ); +}; const ProfilingModalBody = () => { - const activeQuestion = useSelector(selectActiveQuestion); - - if (!activeQuestion) { - return ( -
-

No Profiling Questions Available

-

Please check back later.

-
- ) - } + const activeQuestion = useSelector(selectActiveQuestion); + if (!activeQuestion) { return ( -
- {/* */} - -
- -
- - {/* Scrollable Content */} -
- -
- - {/* Sticky Footer */} -
-
- -
-
- -
-
- +
+

No Profiling Questions Available

+

Please check back later.

+
+ ); + } + + return ( +
+ {/* */} + +
+ +
+ + {/* Scrollable Content */} +
+ +
+ + {/* Sticky Footer */} +
+
+
- ) -} +
+ +
+
+
+ ); +}; const Profiling = () => { - /* This is the main UI for any User Profiling (before entering a task). It's + /* This is the main UI for any User Profiling (before entering a task). It's primary window and position should be dedictated by it's parent so this can be positioned as a window or a sidebar as needed. */ - const [showProfiling, setShowProfiling] = useState(false); + const [showProfiling, setShowProfiling] = useState(false); - const dispatch = useAppDispatch() - const bpuid = useAppSelector(state => state.app.bpuid) + const dispatch = useAppDispatch(); + const bpuid = useAppSelector((state) => state.app.bpuid); - useEffect(() => { - if (!bpuid) return; - dispatch(fetchNewQuestions(bpuid)); - }, [bpid, bpuid]) + useEffect(() => { + if (!bpuid) return; + dispatch(fetchNewQuestions(bpuid)); + }, [bpid, bpuid]); - if (!bpuid) return null; + if (!bpuid) return null; - return ( -
- -
+
setShowProfiling(!showProfiling)} - > - - -

- (Click to {showProfiling ? 'hide' : 'show'}) -

-
- - {showProfiling && ( - - )} - -
- ) -} - -export { - Profiling + onClick={() => setShowProfiling(!showProfiling)} + > + + +

+ (Click to {showProfiling ? "hide" : "show"}) +

+
+ + {showProfiling && } +
+ ); }; + +export { Profiling }; -- cgit v1.2.3 From f82ac61b6a044467ab37c0645c3fe99b40bedfc5 Mon Sep 17 00:00:00 2001 From: Max Nanis Date: Fri, 11 Sep 2026 23:06:59 -0700 Subject: replace references to bpuid with logged in user --- jb-ui/src/JBApp.tsx | 14 +++----- jb-ui/src/components/Footer.tsx | 7 ++-- jb-ui/src/components/Profiling.tsx | 38 ++++++++++++-------- jb-ui/src/components/Wallet.tsx | 19 +++++----- jb-ui/src/models/authAPI.ts | 3 +- jb-ui/src/pages/Preview.tsx | 3 +- jb-ui/src/pages/Transfer.tsx | 9 ++--- jb-ui/src/pages/Work.tsx | 71 +++++++++----------------------------- jb-ui/src/types/authApi.ts | 6 ++++ 9 files changed, 73 insertions(+), 97 deletions(-) create mode 100644 jb-ui/src/types/authApi.ts (limited to 'jb-ui/src/components/Profiling.tsx') diff --git a/jb-ui/src/JBApp.tsx b/jb-ui/src/JBApp.tsx index fd0eeba..a69cc85 100644 --- a/jb-ui/src/JBApp.tsx +++ b/jb-ui/src/JBApp.tsx @@ -16,6 +16,7 @@ import { import Footer from "@/components/Footer"; import { useAppDispatch } from "@/hooks"; import { bpid, routeBasename, tagManager } from "@/lib/utils"; +import { useGetMeQuery } from "@/models/authAPI"; import { setAssignmentID, setProductUserID, @@ -72,24 +73,19 @@ function isPingMessage(msg: Message): msg is PingMessage { function QueryParamProcessor() { const dispatch = useAppDispatch(); const [searchParams] = useSearchParams(); + const { data: user, isLoading, isError } = useGetMeQuery(); useEffect(() => { - const worker_id = searchParams.get("workerId"); const assignment_id = searchParams.get("assignmentId"); const tsid = searchParams.get("tsid"); - const turkSubmitTo = searchParams.get("turkSubmitTo"); - if (turkSubmitTo) { - dispatch(setTurkSubmitTo(turkSubmitTo)); - } - - if (worker_id) { - dispatch(setProductUserID(worker_id)); + if (user?.product_user_id) { + dispatch(setProductUserID(user.product_user_id)); new WalletApi() .getUserWalletBalanceProductIdWalletGet( bpid, // productId - worker_id, // bpuid + user.product_user_id, ) .then((res) => { const response = res.data as UserWalletBalanceResponse; diff --git a/jb-ui/src/components/Footer.tsx b/jb-ui/src/components/Footer.tsx index eede06c..ec458f2 100644 --- a/jb-ui/src/components/Footer.tsx +++ b/jb-ui/src/components/Footer.tsx @@ -1,8 +1,7 @@ -import { useAppSelector } from "@/hooks"; +import { useGetMeQuery } from "@/models/authAPI"; const Footer = () => { - const bpuid = useAppSelector((state) => state.app.bpuid); - const assignment_id = useAppSelector((state) => state.app.assignment_id); + const { data: user, isLoading, isError } = useGetMeQuery(); return (
{

help:{" "} support@jamesbillings67.com diff --git a/jb-ui/src/components/Profiling.tsx b/jb-ui/src/components/Profiling.tsx index 96b06b2..23b8457 100644 --- a/jb-ui/src/components/Profiling.tsx +++ b/jb-ui/src/components/Profiling.tsx @@ -1,4 +1,5 @@ import { UpkQuestionChoice } from "@/api_fsb"; +import { useGetMeQuery } from "@/models/authAPI"; import { ChevronRightIcon } from "lucide-react"; import { KeyboardEvent, MouseEvent, useEffect, useRef, useState } from "react"; @@ -46,7 +47,7 @@ const TextEntry = () => { // const selectAnswer = useSelector(selectAnswerForQuestion(question)); const metadata = activeQuestion?._metadata; const validation = activeQuestion?._validation; - const bpuid = useAppSelector((state) => state.app.bpuid); + const { data: user, isLoading, isError } = useGetMeQuery(); if (!metadata) return null; if (!validation) return null; @@ -67,11 +68,14 @@ const TextEntry = () => { const handleKeyPress = (event: KeyboardEvent) => { if (!activeQuestion.question_id) return; - if (!bpuid) return; + if (!user?.product_user_id) return; if (event.key === "Enter") { dispatch( - saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid }), + saveAnswer({ + questionId: activeQuestion.question_id!, + bpuid: user.product_user_id, + }), ); } }; @@ -109,14 +113,14 @@ export default function useKeyboardMode(rowModel: RowModel) { const dispatch = useAppDispatch(); const activeQuestion = useSelector(selectActiveQuestion); - const bpuid = useAppSelector((state) => state.app.bpuid); + const { data: user, isLoading, isError } = useGetMeQuery(); const keyboardSelectionIdxRef = useRef(0); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (!activeQuestion) return; - if (!bpuid) return; + if (!user?.product_user_id) return; // if (!keyboardEnabled) { // return; @@ -141,7 +145,10 @@ export default function useKeyboardMode(rowModel: RowModel) { if (event.key === "Enter") { dispatch( - saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid }), + saveAnswer({ + questionId: activeQuestion.question_id!, + bpuid: user.product_user_id, + }), ); } @@ -507,15 +514,18 @@ const ProfilingQuestionSubmitButton = () => { const activeQuestion = useSelector(selectActiveQuestion); const activeQuestionValidation = useSelector(selectActiveQuestionValidation); - const bpuid = useAppSelector((state) => state.app.bpuid); + const { data: user, isLoading, isError } = useGetMeQuery(); const handleOnClick = () => { if (!activeQuestion) return; if (!activeQuestionValidation?.isComplete) return; - if (!bpuid) return; + if (!user?.product_user_id) return; dispatch( - saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid }), + saveAnswer({ + questionId: activeQuestion.question_id!, + bpuid: user.product_user_id, + }), ); }; @@ -749,14 +759,14 @@ const Profiling = () => { const [showProfiling, setShowProfiling] = useState(false); const dispatch = useAppDispatch(); - const bpuid = useAppSelector((state) => state.app.bpuid); + const { data: user, isLoading, isError } = useGetMeQuery(); useEffect(() => { - if (!bpuid) return; - dispatch(fetchNewQuestions(bpuid)); - }, [bpid, bpuid]); + if (!user?.product_user_id) return; + dispatch(fetchNewQuestions(user.product_user_id)); + }, [bpid, user?.product_user_id]); - if (!bpuid) return null; + if (!user?.product_user_id) return null; return (

{ const WalletTransactions = () => { const dispatch = useAppDispatch(); - const bpuid = useAppSelector((state) => state.app.bpuid); + const { data: user, isLoading, isError } = useGetMeQuery(); const userLedgerTxs = useAppSelector((state) => state.app.userLedgerTxs); const txPagination = useAppSelector((state) => state.app.txPagination); const txTotalPages = useAppSelector((state) => state.app.txTotalPages); useEffect(() => { - if (!bpuid) return; + if (!user?.product_user_id) return; new WalletApi() .getUserTransactionHistoryProductIdTransactionHistoryGet( bpid, // productId - bpuid, // bpuid + user.product_user_id, undefined, // createdAfter undefined, // createdBefore "-created", // orderBy @@ -215,7 +216,7 @@ const WalletTransactions = () => { dispatch(setTxTotalItems(response.total!)); dispatch(setTxTotalPages(response.pages!)); }); - }, [bpuid, txPagination.pageIndex, txPagination.pageSize]); + }, [user?.product_user_id, txPagination.pageIndex, txPagination.pageSize]); const columnHelper = createColumnHelper(); @@ -438,16 +439,16 @@ const WalletTransactions = () => { const Wallet = () => { const dispatch = useAppDispatch(); - const bpuid = useAppSelector((state) => state.app.bpuid); const pagination = useAppSelector((state) => state.app.txPagination); + const { data: user, isLoading, isError } = useGetMeQuery(); useEffect(() => { - if (!bpuid) return; + if (!user?.product_user_id) return; new WalletApi() .getUserTransactionHistoryProductIdTransactionHistoryGet( bpid, // productId - bpuid, // bpuid + user.product_user_id, undefined, // createdAfter undefined, // createdBefore "-created", // orderBy @@ -468,9 +469,9 @@ const Wallet = () => { dispatch(setTxTotalItems(response.total ?? 0)); dispatch(setTxTotalPages(response.pages ?? 9)); }); - }, [bpuid]); + }, [user?.product_user_id]); - if (!bpuid) return null; + if (!user?.product_user_id) return null; return (
({ - getMe: builder.query({ + getMe: builder.query({ query: () => "/session", providesTags: ["User"], }), diff --git a/jb-ui/src/pages/Preview.tsx b/jb-ui/src/pages/Preview.tsx index 6e50b0d..1926975 100644 --- a/jb-ui/src/pages/Preview.tsx +++ b/jb-ui/src/pages/Preview.tsx @@ -95,7 +95,6 @@ export const Leaderboards = () => { const [payouts, setPayouts] = useState(null); const [completes, setCompletes] = useState(null); - // const bpuid = useAppSelector(state => state.app.bpuid) const bpuid = undefined; useEffect(() => { @@ -105,7 +104,7 @@ export const Leaderboards = () => { LeaderboardCode.CompleteCount, frequency, "us", - bpuid, // bpuid + bpuid, undefined, // within_time 10, ) diff --git a/jb-ui/src/pages/Transfer.tsx b/jb-ui/src/pages/Transfer.tsx index bef40d4..4192eee 100644 --- a/jb-ui/src/pages/Transfer.tsx +++ b/jb-ui/src/pages/Transfer.tsx @@ -1,5 +1,6 @@ import { type FormEvent, useState } from "react"; import { useAppDispatch, useAppSelector } from "@/hooks"; +import { useGetMeQuery } from "@/models/authAPI"; import { Button } from "@/components/ui/button"; import max_lulu from "./max-and-lulu.jpg"; @@ -43,7 +44,7 @@ type RequestState = "idle" | "working" | "sent" | "failed"; const TransferSubmit = function ({ onSubmitSuccess }) { const [email, setEmail] = useState(""); const [state, setState] = useState("idle"); - const bpuid = useAppSelector((state) => state.app.bpuid); + const { data: user, isLoading, isError } = useGetMeQuery(); const submit = async (event: FormEvent) => { event.preventDefault(); @@ -56,7 +57,7 @@ const TransferSubmit = function ({ onSubmitSuccess }) { headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: email, - amt_worker_id: bpuid, + amt_worker_id: user?.product_user_id, }), }); @@ -132,10 +133,10 @@ const TransferSubmit = function ({ onSubmitSuccess }) { const Transfer = function () { const assignment_id = useAppSelector((state) => state.app.assignment_id); - const bpuid = useAppSelector((state) => state.app.bpuid); + const { data: user, isLoading, isError } = useGetMeQuery(); const [submitted, setSubmitted] = useState(false); - if (!bpuid) { + if (!user?.product_user_id) { return (

No Worker ID found. Please access this page through the Amazon diff --git a/jb-ui/src/pages/Work.tsx b/jb-ui/src/pages/Work.tsx index e33328e..84cb946 100644 --- a/jb-ui/src/pages/Work.tsx +++ b/jb-ui/src/pages/Work.tsx @@ -51,8 +51,7 @@ import Markdown from "react-markdown"; const Report = ({ onClose }: { onClose: () => void }) => { const [showComplete, setShowComplete] = useState(false); const [selectedValues, setSelectedValues] = useState([]); - - const bpuid = useAppSelector((state) => state.app.bpuid); + const { data: user, isLoading, isError } = useGetMeQuery(); const ts = useAppSelector((state) => state.app.taskStatus); const handleCheckboxChange = (value: ReportValue, checked: boolean) => { @@ -62,12 +61,12 @@ const Report = ({ onClose }: { onClose: () => void }) => { }; const clicked_submit = () => { - if (!bpuid) return; + if (!user?.product_user_id) return; // ReportValue.NUMBER_0 console.log("selectedValues:", selectedValues); const rt: ReportTask = { - bpuid: bpuid, + bpuid: user.product_user_id, reasons: selectedValues, notes: "", }; @@ -122,9 +121,10 @@ const Report = ({ onClose }: { onClose: () => void }) => { return

Please finish a Task to report its status.

; } - if (showComplete) { - return ; - } + // TODO! What do we do here, redirect back to / with a thank you + wallet refresh? + // if (showComplete) { + // return ; + // } return (
@@ -189,43 +189,6 @@ const Report = ({ onClose }: { onClose: () => void }) => { ); }; -const SubimtAMT = () => { - const bpuid = useAppSelector((state) => state.app.bpuid); - const assignment_id = useAppSelector((state) => state.app.assignment_id); - const ts = useAppSelector((state) => state.app.taskStatus); - const turkSubmitTo = useAppSelector((state) => state.app.turkSubmitTo); - - const formRef = useRef(null); - - useEffect(() => { - if (!ts) return; - if (!bpuid) return; - if (!assignment_id) return; - if (!turkSubmitTo) return; - - if (formRef.current) { - formRef.current.submit(); - } - }, [ts?.tsid, bpuid, assignment_id, turkSubmitTo]); - - return ( - <> -
- - - - - -
- - ); -}; - const SurveyMonitor = () => { const dispatch = useAppDispatch(); @@ -235,7 +198,7 @@ const SurveyMonitor = () => { const [showComplete, setShowComplete] = useState(false); const [showReport, setShowReport] = useState(false); - const bpuid = useAppSelector((state) => state.app.bpuid); + const { data: user, isLoading, isError } = useGetMeQuery(); const entered = useAppSelector((state) => state.app.currentBucketEntered); const isLow = useAppSelector((state) => isLowBalance(state)); @@ -263,7 +226,7 @@ const SurveyMonitor = () => { // }, [ts]); useEffect(() => { - if (!bpuid) return; + if (!user?.product_user_id) return; if (!entered) return; if (!isPolling) return; @@ -271,7 +234,7 @@ const SurveyMonitor = () => { new StatusApi() .listTaskStatusesProductIdStatusGet( bpid, // productId - bpuid, // Worker ID + user.product_user_id, // Worker ID entered, // startedAfter moment.utc().unix(), // startedBefore ) @@ -418,8 +381,9 @@ const SurveyMonitor = () => { Report Survey
- - {showComplete && } + {/* TODO! What do we do here, redirect back to / with wallet */} + {/* TODO! refresh? The confetti is on a different page. */} + {/* {showComplete && } */} {showReport && setShowReport(false)} />} ) : ( @@ -731,7 +695,7 @@ const BucketDetails = () => { const SurveyEnter = () => { const dispatch = useAppDispatch(); const loi = useAppSelector((state) => state.app.loi); - const bpuid = useAppSelector((state) => state.app.bpuid); + const { data: user, isLoading, isError } = useGetMeQuery(); const available_cnt = useAppSelector((state) => getAvailabilityCount(state)); const buckets = useAppSelector((state) => state.app.currentBuckets); @@ -739,12 +703,12 @@ const SurveyEnter = () => { const isLow = useAppSelector((state) => isLowBalance(state)); useEffect(() => { - if (!bpuid) return; + if (!user?.product_user_id) return; new OfferwallApi() .topNPlusBlockOfferwallProductIdOfferwallD48cce47Get( bpid, // productId - bpuid, // bpuid + user.product_user_id, undefined, // ip undefined, // countryIso undefined, // languages @@ -766,7 +730,7 @@ const SurveyEnter = () => { dispatch(setCurrentBuckets(top_n_res.buckets)); dispatch(setOfferwallReasons(top_n_res.offerwall_reasons ?? [])); }); - }, [loi, bpuid]); + }, [loi, user?.product_user_id]); const start_survey = () => { if (!bucket?.uri) return; @@ -834,7 +798,6 @@ type RequestState = "idle" | "working" | "sent" | "failed"; const Login = () => { const [email, setEmail] = useState(""); const [state, setState] = useState("idle"); - const bpuid = useAppSelector((state) => state.app.bpuid); // const dispatch = useAppDispatch(); const submit = async (event: FormEvent) => { diff --git a/jb-ui/src/types/authApi.ts b/jb-ui/src/types/authApi.ts new file mode 100644 index 0000000..19aeee0 --- /dev/null +++ b/jb-ui/src/types/authApi.ts @@ -0,0 +1,6 @@ +export interface User { + email: string; + display_name: string | null; + blocked: boolean; + product_user_id: string; +} -- cgit v1.2.3 From b464e311b44a5f3baeb1568ba55b6322a1a11638 Mon Sep 17 00:00:00 2001 From: Max Nanis Date: Sun, 13 Sep 2026 11:43:52 -0700 Subject: Fix pnpm build error requirements --- jb-ui/src/AuthContext.tsx | 28 ---------------------------- jb-ui/src/JBApp.tsx | 8 +------- jb-ui/src/components/Footer.tsx | 2 +- jb-ui/src/components/Profiling.tsx | 10 +++++----- jb-ui/src/components/Redemption.tsx | 14 ++++---------- jb-ui/src/components/Wallet.tsx | 4 ++-- jb-ui/src/pages/Preview.tsx | 9 ++++++--- jb-ui/src/pages/Transfer.tsx | 11 +++++++---- jb-ui/src/pages/Work.tsx | 12 ++++++------ 9 files changed, 32 insertions(+), 66 deletions(-) delete mode 100644 jb-ui/src/AuthContext.tsx (limited to 'jb-ui/src/components/Profiling.tsx') diff --git a/jb-ui/src/AuthContext.tsx b/jb-ui/src/AuthContext.tsx deleted file mode 100644 index 85bcdb0..0000000 --- a/jb-ui/src/AuthContext.tsx +++ /dev/null @@ -1,28 +0,0 @@ -// AuthContext.jsx -import { createContext, useContext, useEffect, useState } from "react"; - -const AuthContext = createContext(null); - -export function AuthProvider({ children }) { - const [user, setUser] = useState(null); - const [loading, setLoading] = useState(true); - - useEffect(() => { - fetch("/api/me", { credentials: "include" }) - .then((res) => (res.ok ? res.json() : null)) - .then(setUser) - .finally(() => setLoading(false)); - }, []); - - return ( - - {children} - - ); -} - -export function useAuth() { - return useContext(AuthContext); -} diff --git a/jb-ui/src/JBApp.tsx b/jb-ui/src/JBApp.tsx index 4870e9b..c55cd73 100644 --- a/jb-ui/src/JBApp.tsx +++ b/jb-ui/src/JBApp.tsx @@ -13,7 +13,6 @@ import { UserWalletBalanceResponse, UserLedgerWallets, UserLedgerWalletAccountTypeEnum, - UserDisplayedWalletBalance, WalletApi, CashoutMethodsResponse, } from "@/api_fsb"; @@ -33,9 +32,7 @@ import { addCashoutMethods } from "@/models/cashoutMethodsSlice"; import { addEvent } from "@/models/grlEventsSlice"; import { addStatsData } from "@/models/grlStatsSlice"; -import Home from "@/pages/Home"; import MagicLink from "@/pages/MagicLink"; -import Preview from "@/pages/Preview"; import Result from "@/pages/Result"; import clsx from "clsx"; @@ -44,7 +41,6 @@ import Transfer from "@/pages/Transfer"; import { BrowserRouter, Outlet, - useLocation, useMatch, Route, Routes, @@ -83,7 +79,7 @@ function isPingMessage(msg: Message): msg is PingMessage { function QueryParamProcessor() { const dispatch = useAppDispatch(); const [searchParams] = useSearchParams(); - const { data: user, isLoading, isError } = useGetMeQuery(); + const { data: user } = useGetMeQuery(); useEffect(() => { if (user?.product_user_id) { @@ -169,8 +165,6 @@ function QueryParamProcessor() { } const Layout = () => { - const location = useLocation(); - const isWork = useMatch("/work/*"); const isPreview = useMatch("/preview/*"); const isSpecialSubview = Boolean(isWork || isPreview); diff --git a/jb-ui/src/components/Footer.tsx b/jb-ui/src/components/Footer.tsx index ec458f2..e65255f 100644 --- a/jb-ui/src/components/Footer.tsx +++ b/jb-ui/src/components/Footer.tsx @@ -1,7 +1,7 @@ import { useGetMeQuery } from "@/models/authAPI"; const Footer = () => { - const { data: user, isLoading, isError } = useGetMeQuery(); + const { data: user } = useGetMeQuery(); return (
{ // const selectAnswer = useSelector(selectAnswerForQuestion(question)); const metadata = activeQuestion?._metadata; const validation = activeQuestion?._validation; - const { data: user, isLoading, isError } = useGetMeQuery(); + const { data: user } = useGetMeQuery(); if (!metadata) return null; if (!validation) return null; @@ -113,7 +113,7 @@ export default function useKeyboardMode(rowModel: RowModel) { const dispatch = useAppDispatch(); const activeQuestion = useSelector(selectActiveQuestion); - const { data: user, isLoading, isError } = useGetMeQuery(); + const { data: user } = useGetMeQuery(); const keyboardSelectionIdxRef = useRef(0); @@ -514,7 +514,7 @@ const ProfilingQuestionSubmitButton = () => { const activeQuestion = useSelector(selectActiveQuestion); const activeQuestionValidation = useSelector(selectActiveQuestionValidation); - const { data: user, isLoading, isError } = useGetMeQuery(); + const { data: user } = useGetMeQuery(); const handleOnClick = () => { if (!activeQuestion) return; @@ -759,7 +759,7 @@ const Profiling = () => { const [showProfiling, setShowProfiling] = useState(false); const dispatch = useAppDispatch(); - const { data: user, isLoading, isError } = useGetMeQuery(); + const { data: user } = useGetMeQuery(); useEffect(() => { if (!user?.product_user_id) return; diff --git a/jb-ui/src/components/Redemption.tsx b/jb-ui/src/components/Redemption.tsx index 0a91ab3..1d76f17 100644 --- a/jb-ui/src/components/Redemption.tsx +++ b/jb-ui/src/components/Redemption.tsx @@ -1,14 +1,10 @@ import { clsx } from "clsx"; -import { useAppDispatch, useAppSelector } from "@/hooks"; -import { UpkQuestionChoice } from "@/api_fsb"; -import { useGetMeQuery } from "@/models/authAPI"; -import { ChevronRightIcon } from "lucide-react"; -import { KeyboardEvent, MouseEvent, useEffect, useRef, useState } from "react"; -import { useSelector } from "react-redux"; -import { cashoutMethodsSelectors } from "@/models/cashoutMethodsSlice"; +import { useState } from "react"; +// import { useSelector } from "react-redux"; +// import { cashoutMethodsSelectors } from "@/models/cashoutMethodsSlice"; const RedemptionHeader = () => { - const cashout_methods = useSelector(cashoutMethodsSelectors.selectAll); + // const cashout_methods = useSelector(cashoutMethodsSelectors.selectAll); return ( <> @@ -32,8 +28,6 @@ const RedemptionModalBody = () => { }; const Redemption = () => { - const dispatch = useAppDispatch(); - const { data: user, isLoading, isError } = useGetMeQuery(); const [showRedemption, setShowRedemption] = useState(false); return ( diff --git a/jb-ui/src/components/Wallet.tsx b/jb-ui/src/components/Wallet.tsx index 3bb23a9..819eff7 100644 --- a/jb-ui/src/components/Wallet.tsx +++ b/jb-ui/src/components/Wallet.tsx @@ -194,7 +194,7 @@ const WalletTransactionsHeader = () => { const WalletTransactions = () => { const dispatch = useAppDispatch(); - const { data: user, isLoading, isError } = useGetMeQuery(); + const { data: user } = useGetMeQuery(); const userLedgerTxs = useAppSelector((state) => state.app.userLedgerTxs); const txPagination = useAppSelector((state) => state.app.txPagination); @@ -446,7 +446,7 @@ const WalletTransactions = () => { const Wallet = () => { const dispatch = useAppDispatch(); const pagination = useAppSelector((state) => state.app.txPagination); - const { data: user, isLoading, isError } = useGetMeQuery(); + const { data: user } = useGetMeQuery(); useEffect(() => { if (!user?.product_user_id) return; diff --git a/jb-ui/src/pages/Preview.tsx b/jb-ui/src/pages/Preview.tsx index 900621e..c58a85e 100644 --- a/jb-ui/src/pages/Preview.tsx +++ b/jb-ui/src/pages/Preview.tsx @@ -5,13 +5,12 @@ import { LeaderboardFrequency, LeaderboardRow, } from "@/api_fsb"; -import { Button } from "@/components/ui/button"; import { useAppSelector } from "@/hooks"; import { bpid, formatCentsToUSD, truncate } from "@/lib/utils"; import { activeSurveys, activeUsers, maxPayout } from "@/models/grlStatsSlice"; import { clsx } from "clsx"; import moment from "moment"; -import { useEffect, useState } from "react"; +import { FormEvent, useEffect, useState } from "react"; const showSmartRank = ( item: LeaderboardRow, @@ -247,7 +246,11 @@ export const Leaderboards = () => { type RequestState = "idle" | "working" | "failed"; -const LoginForm = function ({ onSubmitSuccess }) { +interface LoginFormProps { + onSubmitSuccess: () => void; +} + +const LoginForm = function ({ onSubmitSuccess }: LoginFormProps) { const [email, setEmail] = useState(""); const [state, setState] = useState("idle"); diff --git a/jb-ui/src/pages/Transfer.tsx b/jb-ui/src/pages/Transfer.tsx index 0d174c1..8079da2 100644 --- a/jb-ui/src/pages/Transfer.tsx +++ b/jb-ui/src/pages/Transfer.tsx @@ -1,5 +1,5 @@ import { type FormEvent, useState } from "react"; -import { useAppDispatch, useAppSelector } from "@/hooks"; +import { useAppSelector } from "@/hooks"; import { useGetMeQuery } from "@/models/authAPI"; import { Button } from "@/components/ui/button"; import max_lulu from "./max-and-lulu.jpg"; @@ -41,10 +41,14 @@ const TransferComplete = function () { type RequestState = "idle" | "working" | "sent" | "failed"; -const TransferSubmit = function ({ onSubmitSuccess }) { +interface TransferSubmitProps { + onSubmitSuccess: () => void; +} + +const TransferSubmit = function ({ onSubmitSuccess }: TransferSubmitProps) { const [email, setEmail] = useState(""); const [state, setState] = useState("idle"); - const { data: user, isLoading, isError } = useGetMeQuery(); + const { data: user } = useGetMeQuery(); const submit = async (event: FormEvent) => { event.preventDefault(); @@ -133,7 +137,6 @@ const TransferSubmit = function ({ onSubmitSuccess }) { const Transfer = function () { const bpuid = useAppSelector((state) => state.app.bpuid); - const { data: user, isLoading, isError } = useGetMeQuery(); const [submitted, setSubmitted] = useState(false); if (!bpuid) { diff --git a/jb-ui/src/pages/Work.tsx b/jb-ui/src/pages/Work.tsx index 50ed930..6d0b1c1 100644 --- a/jb-ui/src/pages/Work.tsx +++ b/jb-ui/src/pages/Work.tsx @@ -47,13 +47,13 @@ import { } from "@tanstack/react-table"; import { XIcon } from "lucide-react"; import moment from "moment/moment"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useState } from "react"; import Markdown from "react-markdown"; const Report = ({ onClose }: { onClose: () => void }) => { - const [showComplete, setShowComplete] = useState(false); + const [, setShowComplete] = useState(false); const [selectedValues, setSelectedValues] = useState([]); - const { data: user, isLoading, isError } = useGetMeQuery(); + const { data: user } = useGetMeQuery(); const ts = useAppSelector((state) => state.app.taskStatus); const handleCheckboxChange = (value: ReportValue, checked: boolean) => { @@ -197,10 +197,10 @@ const SurveyMonitor = () => { const [isPolling, setIsPolling] = useState(true); // const [timeAgo, setTimeAgo] = useState(""); - const [showComplete, setShowComplete] = useState(false); + const [, setShowComplete] = useState(false); const [showReport, setShowReport] = useState(false); - const { data: user, isLoading, isError } = useGetMeQuery(); + const { data: user } = useGetMeQuery(); const entered = useAppSelector((state) => state.app.currentBucketEntered); const isLow = useAppSelector((state) => isLowBalance(state)); @@ -691,7 +691,7 @@ const BucketDetails = () => { const SurveyEnter = () => { const dispatch = useAppDispatch(); const loi = useAppSelector((state) => state.app.loi); - const { data: user, isLoading, isError } = useGetMeQuery(); + const { data: user } = useGetMeQuery(); const available_cnt = useAppSelector((state) => getAvailabilityCount(state)); const buckets = useAppSelector((state) => state.app.currentBuckets); -- cgit v1.2.3