Reapply "create: fetch data in assessmentsQueries to FE still error"
This reverts commit 51d249f4c6.
This commit is contained in:
falendikategar
parent
51d249f4c6
commit
208a1a1fff
|
|
@ -0,0 +1,72 @@
|
|||
import client from "@/honoClient";
|
||||
import fetchRPC from "@/utils/fetchRPC";
|
||||
import { queryOptions } from "@tanstack/react-query";
|
||||
import { InferRequestType } from "hono";
|
||||
|
||||
export const questionsQueryOptions = (page: number, limit: number, q?: string) =>
|
||||
queryOptions({
|
||||
queryKey: ["questions", { page, limit, q }],
|
||||
queryFn: async () => {
|
||||
const result = await fetchRPC(
|
||||
client.assessments.getAllQuestions.$get({
|
||||
query: {
|
||||
limit: String(limit),
|
||||
page: String(page),
|
||||
q,
|
||||
},
|
||||
})
|
||||
);
|
||||
console.log('Result from fetchRPC:', result);
|
||||
return result;
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
export const getUserByIdQueryOptions = (userId: string | undefined) =>
|
||||
queryOptions({
|
||||
queryKey: ["user", userId],
|
||||
queryFn: () =>
|
||||
fetchRPC(
|
||||
client.users[":id"].$get({
|
||||
param: {
|
||||
id: userId!,
|
||||
},
|
||||
query: {},
|
||||
})
|
||||
),
|
||||
enabled: Boolean(userId),
|
||||
});
|
||||
|
||||
export const createUser = async (
|
||||
form: InferRequestType<typeof client.users.$post>["form"]
|
||||
) => {
|
||||
return await fetchRPC(
|
||||
client.users.$post({
|
||||
form,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
export const updateUser = async (
|
||||
form: InferRequestType<(typeof client.users)[":id"]["$patch"]>["form"] & {
|
||||
id: string;
|
||||
}
|
||||
) => {
|
||||
return await fetchRPC(
|
||||
client.users[":id"].$patch({
|
||||
param: {
|
||||
id: form.id,
|
||||
},
|
||||
form,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
export const deleteUser = async (id: string) => {
|
||||
return await fetchRPC(
|
||||
client.users[":id"].$delete({
|
||||
param: { id },
|
||||
form: {},
|
||||
})
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
import { createLazyFileRoute } from '@tanstack/react-router'
|
||||
|
||||
import { Button } from "@/shadcn/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shadcn/components/ui/card"
|
||||
import { Label } from "@/shadcn/components/ui/label"
|
||||
import { RadioGroup, RadioGroupItem } from "@/shadcn/components/ui/radio-group"
|
||||
// import ExtractQueryDataType from '@/types/ExtractQueryDataType'
|
||||
// import { createColumnHelper } from '@tanstack/react-table'
|
||||
import { questionsQueryOptions } from "@/modules/assessmentsManagement/queries/assessmentsQueries";
|
||||
// import { useForm } from '@mantine/form'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
|
||||
// type DataType = ExtractQueryDataType<typeof getAllAssessmentsQueryOptions>;
|
||||
// const columnHelper = useForm<DataType>();
|
||||
|
||||
export function CardWithAssessment() {
|
||||
// const { handleSubmit, form } = useForm<DataType>();
|
||||
|
||||
const { page = 1, limit = 10, q = '' } = {}
|
||||
|
||||
const { data, isLoading, isError } = useQuery(questionsQueryOptions(page, limit, q));
|
||||
|
||||
console.log(data)
|
||||
|
||||
if (isLoading) return <div>Loading...</div>;
|
||||
if (isError) return <div>Error fetching data</div>;
|
||||
|
||||
// const groupedQuestions = data?.reduce((acc, item) => {
|
||||
// const { subAspectId, subAspectName } = item;
|
||||
// if (!acc[subAspectId]) {
|
||||
// acc[subAspectId] = {
|
||||
// subAspectName,
|
||||
// questions: [],
|
||||
// };
|
||||
// }
|
||||
// acc[subAspectId].questions.push(item);
|
||||
// return acc;
|
||||
// }, {} as Record<string, { subAspectName: string, questions: DataType[] }>);
|
||||
|
||||
|
||||
const renderQuestions = () => {
|
||||
return data?.data.map((subAspect) => (
|
||||
<div key={subAspect.subAspectId}>
|
||||
<h2 className="text-lg font-bold mb-4">{subAspect.subAspectName}</h2>
|
||||
{data?.data.map((question) => (
|
||||
<div key={question.questionId} className="mb-6">
|
||||
<Label className='text-base font-semibold' htmlFor={`question-${question.questionId}`}>
|
||||
{question.questionText}
|
||||
</Label>
|
||||
<RadioGroup className='gap-y-3 mt-2' defaultValue="">
|
||||
{data?.data.map((option) => (
|
||||
<div key={option.optionId} className="flex items-center space-x-2">
|
||||
<RadioGroupItem value={option.optionText} id={`option-${option.optionId}`} />
|
||||
<Label htmlFor={`option-${option.optionId}`}>{option.questionText}</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
));
|
||||
};
|
||||
|
||||
const renderQuestionNumbers = () => {
|
||||
const questionNumbers: number[] = [];
|
||||
data?.data.forEach((subAspect) => {
|
||||
data?.data.forEach((question, index) => {
|
||||
questionNumbers.push(index + 1);
|
||||
});
|
||||
});
|
||||
|
||||
return questionNumbers.map((num) => (
|
||||
<Button key={num} className='w-12 h-12' variant="outline">
|
||||
{num}
|
||||
</Button>
|
||||
));
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full flex">
|
||||
<div className='flex-none w-3/5 border-r-2'>
|
||||
<CardHeader className='border-b-2'>
|
||||
<CardTitle className='text-xl'>Pertanyaan</CardTitle>
|
||||
<CardDescription className='text-sm italic'>
|
||||
Bacalah pertanyaan dengan hati-hati dan jawablah dengan teliti!
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className='flex'>
|
||||
<div className="w-full mt-5">
|
||||
<form>
|
||||
{renderQuestions()}
|
||||
</form>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex gap-3">
|
||||
<Button variant="outline">Back</Button>
|
||||
<Button>Next</Button>
|
||||
</CardFooter>
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
<CardHeader>
|
||||
<CardTitle className='text-xl ml-7'>Daftar Nomor</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="w-full">
|
||||
<div className="flex flex-wrap gap-3 p-1 justify-center">
|
||||
{renderQuestionNumbers()}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export const Route = createLazyFileRoute('/_dashboardLayout/assessments/')({
|
||||
component: () =>
|
||||
<div>
|
||||
<h1 className="font-semibold text-2xl text-gray-800 dark:text-white leading-tight mb-5">
|
||||
Halaman Assessments
|
||||
</h1>
|
||||
<CardWithAssessment />
|
||||
</div>
|
||||
})
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { createFileRoute } from '@tanstack/react-router'
|
||||
|
||||
export const Route = createFileRoute('/_dashboardLayout/assessments/')({
|
||||
component: () => <div>Hello /_dashboardLayout/assessments/!</div>
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user