generated from muhtadeetaron/nextjs-template
feat(ui): add topic, subject screen
fix(api): fix api endpoint logic for pretest screen
This commit is contained in:
shafin-r
142
app/(tabs)/categories/mocks/page.tsx
Normal file
142
app/(tabs)/categories/mocks/page.tsx
Normal file
@ -0,0 +1,142 @@
|
||||
"use client";
|
||||
|
||||
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, getToken } from "@/lib/auth";
|
||||
import { Loader, RefreshCw } from "lucide-react";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
|
||||
type Mock = {
|
||||
test_id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
num_questions: number;
|
||||
time_limit_minutes: number;
|
||||
deduction: number;
|
||||
total_possible_score: number;
|
||||
unit: string;
|
||||
};
|
||||
|
||||
export default function MockScreen() {
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
|
||||
const [mocks, setMocks] = useState<Mock[]>([]);
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
||||
const [refreshing, setRefreshing] = useState<boolean>(false);
|
||||
async function fetchMocks() {
|
||||
setRefreshing(true);
|
||||
try {
|
||||
const token = await getToken();
|
||||
const response = await fetch(`${API_URL}/tests/mock/`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch topics");
|
||||
}
|
||||
|
||||
const fetchedMocks: Mock[] = await response.json();
|
||||
setMocks(fetchedMocks);
|
||||
} catch (error) {
|
||||
setErrorMsg(
|
||||
"Error fetching mocks: " +
|
||||
(error instanceof Error ? error.message : "Unknown error")
|
||||
);
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
if (await getToken()) {
|
||||
fetchMocks();
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const onRefresh = async () => {
|
||||
fetchMocks();
|
||||
};
|
||||
|
||||
if (errorMsg) {
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
<Header displayTabTitle="Mocks" />
|
||||
<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="Mocks" />
|
||||
<div className="mx-10 pb-20 overflow-y-auto">
|
||||
<h1 className="text-2xl font-semibold my-5">
|
||||
{user?.preparation_unit}
|
||||
</h1>
|
||||
<div className="border border-[#c0dafc] flex flex-col gap-4 w-full rounded-[25px] p-4">
|
||||
{mocks.length > 0 ? (
|
||||
mocks.map((mocks) => (
|
||||
<div key={mocks.test_id}>
|
||||
<button
|
||||
onClick={() =>
|
||||
router.push(
|
||||
`/exam/pretest?type=mock&test_id=${mocks.test_id}`
|
||||
)
|
||||
}
|
||||
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">{mocks.name}</h3>
|
||||
<div className="flex space-x-2">
|
||||
<p className="text-md font-normal bg-slate-500 w-fit px-3 py-1 rounded-full text-white">
|
||||
{mocks.unit}
|
||||
</p>
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
75
app/(tabs)/categories/page.tsx
Normal file
75
app/(tabs)/categories/page.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
"use client";
|
||||
|
||||
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
||||
import Header from "@/components/Header";
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const CategoriesPage = () => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
<main>
|
||||
<Header displayTabTitle="Categories" />
|
||||
<div className="grid grid-cols-2 gap-4 pt-6 mx-4">
|
||||
<button
|
||||
onClick={() => router.push("/categories/topics")}
|
||||
className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
|
||||
>
|
||||
<Image
|
||||
src="/images/icons/topic-test.png"
|
||||
alt="Topic Test"
|
||||
width={85}
|
||||
height={85}
|
||||
/>
|
||||
<span className="font-medium text-[#113768]">Topic Test</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => router.push("/categories/mocks")}
|
||||
className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
|
||||
>
|
||||
<Image
|
||||
src="/images/icons/mock-test.png"
|
||||
alt="Mock Test"
|
||||
width={85}
|
||||
height={85}
|
||||
/>
|
||||
<span className="font-medium text-[#113768]">Mock Test</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
disabled
|
||||
className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
|
||||
>
|
||||
<Image
|
||||
src="/images/icons/past-paper.png"
|
||||
alt="Past Papers"
|
||||
width={68}
|
||||
height={68}
|
||||
className="opacity-50"
|
||||
/>
|
||||
<span className="font-medium text-[#113768]/50">Past Papers</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => router.push("/categories/subjects")}
|
||||
className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
|
||||
>
|
||||
<Image
|
||||
src="/images/icons/subject-test.png"
|
||||
alt="Subject Test"
|
||||
width={80}
|
||||
height={80}
|
||||
/>
|
||||
<span className="font-medium text-[#113768]">Subject Test</span>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</BackgroundWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoriesPage;
|
||||
137
app/(tabs)/categories/subjects/page.tsx
Normal file
137
app/(tabs)/categories/subjects/page.tsx
Normal file
@ -0,0 +1,137 @@
|
||||
"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, getToken } from "@/lib/auth";
|
||||
import { Loader, RefreshCw } from "lucide-react";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { Question } from "@/types/exam";
|
||||
|
||||
type Subject = {
|
||||
subject_id: string;
|
||||
name: string;
|
||||
unit: string;
|
||||
};
|
||||
|
||||
export default function PaperScreen() {
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
|
||||
const [subjects, setSubjects] = useState<Subject[]>([]);
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
||||
const [refreshing, setRefreshing] = useState<boolean>(false);
|
||||
async function fetchSubjects() {
|
||||
setRefreshing(true);
|
||||
try {
|
||||
const token = await getToken();
|
||||
const response = await fetch(`${API_URL}/subjects/`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch subjects");
|
||||
}
|
||||
|
||||
const fetchedSubjects: Subject[] = await response.json();
|
||||
setSubjects(fetchedSubjects);
|
||||
} catch (error) {
|
||||
setErrorMsg(
|
||||
"Error fetching subjects: " +
|
||||
(error instanceof Error ? error.message : "Unknown error")
|
||||
);
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
if (await getToken()) {
|
||||
fetchSubjects();
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const onRefresh = async () => {
|
||||
fetchSubjects();
|
||||
};
|
||||
|
||||
if (errorMsg) {
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
<Header displayTabTitle="Subjects" />
|
||||
<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">
|
||||
{subjects.length > 0 ? (
|
||||
subjects
|
||||
.filter((subject) => subject.unit === user?.preparation_unit)
|
||||
.map((subject) => (
|
||||
<div key={subject.subject_id}>
|
||||
<button
|
||||
onClick={() =>
|
||||
router.push(
|
||||
`/exam/pretest?type=subject&test_id=${subject.subject_id}`
|
||||
)
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
144
app/(tabs)/categories/topics/page.tsx
Normal file
144
app/(tabs)/categories/topics/page.tsx
Normal file
@ -0,0 +1,144 @@
|
||||
"use client";
|
||||
|
||||
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, getToken } from "@/lib/auth";
|
||||
import { Loader, RefreshCw } from "lucide-react";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
|
||||
type Topic = {
|
||||
topic_id: string;
|
||||
name: string;
|
||||
subject: {
|
||||
subject_id: string;
|
||||
name: string;
|
||||
unit: string;
|
||||
};
|
||||
};
|
||||
|
||||
export default function TopicScreen() {
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
|
||||
const [topics, setTopics] = useState<Topic[]>([]);
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
||||
const [refreshing, setRefreshing] = useState<boolean>(false);
|
||||
async function fetchTopics() {
|
||||
setRefreshing(true);
|
||||
try {
|
||||
const token = await getToken();
|
||||
const response = await fetch(`${API_URL}/topics/`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch topics");
|
||||
}
|
||||
|
||||
const fetchedTopics: Topic[] = await response.json();
|
||||
setTopics(fetchedTopics);
|
||||
} catch (error) {
|
||||
setErrorMsg(
|
||||
"Error fetching subjects: " +
|
||||
(error instanceof Error ? error.message : "Unknown error")
|
||||
);
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
if (await getToken()) {
|
||||
fetchTopics();
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const onRefresh = async () => {
|
||||
fetchTopics();
|
||||
};
|
||||
|
||||
if (errorMsg) {
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
<Header displayTabTitle="Subjects" />
|
||||
<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="Topics" />
|
||||
<div className="mx-10 pb-20 overflow-y-auto">
|
||||
<h1 className="text-2xl font-semibold my-5">
|
||||
{user?.preparation_unit}
|
||||
</h1>
|
||||
<div className="border border-[#c0dafc] flex flex-col gap-4 w-full rounded-[25px] p-4">
|
||||
{topics.length > 0 ? (
|
||||
topics.map((topic) => (
|
||||
<div key={topic.topic_id}>
|
||||
<button
|
||||
onClick={() =>
|
||||
router.push(
|
||||
`/exam/pretest?type=topic&test_id=${topic.topic_id}`
|
||||
)
|
||||
}
|
||||
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">{topic.name}</h3>
|
||||
<div className="flex space-x-2">
|
||||
<p className="text-md font-normal bg-slate-500 w-fit px-3 py-1 rounded-full text-white">
|
||||
{topic.subject.name}
|
||||
</p>
|
||||
<p className="text-md font-normal bg-slate-500 w-fit px-3 py-1 rounded-full text-white">
|
||||
{topic.subject.unit}
|
||||
</p>
|
||||
</div>
|
||||
</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