generated from muhtadeetaron/nextjs-template
fix(api): fix api endpoint logic #5
chore(env): obscure api url in env feat(ui): render subjects according to user preparation unit
This commit is contained in:
Dacca Retro
228
app/(tabs)/subjects/page.tsx
Normal file
228
app/(tabs)/subjects/page.tsx
Normal file
@ -0,0 +1,228 @@
|
||||
"use client";
|
||||
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import Header from "@/components/Header";
|
||||
import DestructibleAlert from "@/components/DestructibleAlert";
|
||||
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
||||
import { API_URL } from "@/lib/auth";
|
||||
import { Loader, RefreshCw } from "lucide-react";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
|
||||
interface Mock {
|
||||
id: string;
|
||||
title: string;
|
||||
rating: number;
|
||||
}
|
||||
export default function PaperScreen() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const name = searchParams.get("name") || "";
|
||||
const {user} = useAuth()
|
||||
|
||||
const [questions, setQuestions] = useState<Mock[] | null>(null);
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
||||
const [refreshing, setRefreshing] = useState<boolean>(false);
|
||||
const [componentKey, setComponentKey] = useState<number>(0);
|
||||
|
||||
interface Subject {
|
||||
subject_id: string;
|
||||
name: string;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
const [subjects, setSubjects] = useState<Subject[]>([
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Biology",
|
||||
unit: "Science"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Chemistry",
|
||||
unit: "Science"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Physics",
|
||||
unit: "Science"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Accounting",
|
||||
unit: "Business"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Finance",
|
||||
unit: "Business"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Marketing",
|
||||
unit: "Business"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "History",
|
||||
unit: "Humanities"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Geography",
|
||||
unit: "Humanities"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Sociology",
|
||||
unit: "Humanities"
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
|
||||
// async function fetchMocks() {
|
||||
// try {
|
||||
// const questionResponse = await fetch(`${API_URL}/mocks`, {
|
||||
// method: "GET",
|
||||
// });
|
||||
// const fetchedQuestionData: Mock[] = await questionResponse.json();
|
||||
// setQuestions(fetchedQuestionData);
|
||||
// } catch (error) {
|
||||
// setErrorMsg(error instanceof Error ? error.message : "An error occurred");
|
||||
// }
|
||||
// }
|
||||
|
||||
// useEffect(() => {
|
||||
// if (name) {
|
||||
// fetchMocks();
|
||||
// }
|
||||
// }, [name]);
|
||||
|
||||
const onRefresh = async () => {
|
||||
setRefreshing(true);
|
||||
|
||||
setSubjects([{
|
||||
subject_id: uuidv4(),
|
||||
name: "Biology",
|
||||
unit: "Science"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Chemistry",
|
||||
unit: "Science"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Physics",
|
||||
unit: "Science"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Accounting",
|
||||
unit: "Business Studies"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Finance",
|
||||
unit: "Business Studies"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Marketing",
|
||||
unit: "Business Studies"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "History",
|
||||
unit: "Humanities"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Geography",
|
||||
unit: "Humanities"
|
||||
},
|
||||
{
|
||||
subject_id: uuidv4(),
|
||||
name: "Sociology",
|
||||
unit: "Humanities"
|
||||
}])
|
||||
setComponentKey((prevKey) => prevKey + 1);
|
||||
setTimeout(() => {
|
||||
setRefreshing(false);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
if (errorMsg) {
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
<Header displayTabTitle={name} />
|
||||
<div className="overflow-y-auto">
|
||||
<div className="mt-5 px-5">
|
||||
<DestructibleAlert text={errorMsg} extraStyles="" />
|
||||
</div>
|
||||
<div className="flex justify-center mt-4">
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={refreshing}
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
|
||||
>
|
||||
{refreshing ? <Loader /> : <RefreshCw />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</BackgroundWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
<div>
|
||||
<Header displayTabTitle="Subjects" />
|
||||
<div className="mx-10 pt-10 overflow-y-auto">
|
||||
<h1 className="text-2xl font-semibold mb-5">{user?.preparation_unit}</h1>
|
||||
<div className="border border-[#c0dafc] flex flex-col gap-4 w-full rounded-[25px] p-4 mb-20">
|
||||
{subjects ? (
|
||||
subjects
|
||||
.filter(subject => subject.unit === user?.preparation_unit)
|
||||
.map((subject) => (
|
||||
<div key={subject.subject_id}>
|
||||
<button
|
||||
onClick={() =>
|
||||
router.push(
|
||||
`/exam/pretest?unitname=${name}&id=${subject.subject_id}&title=${subject.name}`
|
||||
)
|
||||
}
|
||||
className="w-full border-2 border-[#B0C2DA] py-4 rounded-[10px] px-6 space-y-2 text-left hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<h3 className="text-xl font-medium">{subject.name}</h3>
|
||||
<p className="text-md font-normal">
|
||||
Rating: 8/10
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
|
||||
<p className="text-xl font-medium text-center">Loading...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-center mt-4">
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={refreshing}
|
||||
className="p-2 bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 rounded-full"
|
||||
>
|
||||
{refreshing ? <Loader /> : <RefreshCw />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <CustomBackHandler fallbackRoute="unit" useCustomHandler={false} /> */}
|
||||
</BackgroundWrapper>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user