diff --git a/app/library/page.tsx b/app/library/page.tsx index f315b82..7662e48 100644 --- a/app/library/page.tsx +++ b/app/library/page.tsx @@ -1,216 +1,109 @@ "use client" -import React, { useState } from 'react'; -import BottomNavigationBar from '@/components/BottomNavigationBar'; -import Loading from '../loading'; -import TopBar from '@/components/TopBar'; +import React, { useState, useEffect } from 'react'; +import { useRouter } from 'next/navigation'; import PrimaryButton from '@/components/Button'; -import { getSubjects, getChapters, getResourcesWithSource, getTopics, getGrades } from '../../api/afdb/library'; -import { Chapter, Resource, Topic } from '../types'; -import { useEffect } from 'react'; -import Link from 'next/link'; -import ExpandIcon from "../../assets/expand.png"; -import CollapseIcon from "../../assets/collapse.png"; -import PlayIcon from "../../assets/play.png" +import TopBar from '@/components/TopBar'; +import BottomNavigationBar from '@/components/BottomNavigationBar'; import Image from 'next/image'; +import StethoscopeIcon from '../../assets/stethoscope.png'; +import BlueprintIcon from '../../assets/blueprint.png'; -const Page = () => { - const [activeTab, setActiveTab] = useState('Physics'); - const [chapters, setChapters] = useState([]); - const [topics, setTopics] = useState([]); - const [resources, setResources] = useState([]); - const [expandedChapters, setExpandedChapters] = useState>({}); - const [page, setPage] = useState(1); - const [selectedGrade, setSelectedGrade] = useState(9); - const [selectedChapter, setSelectedChapter] = useState(null); - const [chapterList, setChapterList] = useState([]); - const limit = 4; - const gradeOptions = [9, 10, 11, 12]; - - const handleTabClick = async (tabName: string) => { - setActiveTab(tabName); - if (activeTab != tabName) { - setPage(1); - setSelectedChapter(null) - } - - try { - const actualTabName = tabName.toLowerCase(); - const subjectData = await getSubjects(actualTabName); - const gradeData = await getGrades(selectedGrade); - if (subjectData.length > 0) { - const subjectId = subjectData[0].id; - const gradeId = gradeData[0].id; - const offset = (page - 1) * limit; - - const finalOffset = offset >= 0 ? offset : 0; - await fetchChapters(subjectId, gradeId); - const chapterData = selectedChapter - ? await getChapters(subjectId, gradeId, limit, finalOffset, selectedChapter) - : await getChapters(subjectId, gradeId, limit, finalOffset); +const Page: React.FC = () => { + const [selectedLibrary, setSelectedLibrary] = useState('Content'); + const { push } = useRouter(); - if (chapterData.length > 0) { - setChapters(chapterData); - const chapterIds = chapterData.map((chapter) => chapter.id); - const topicData = await getTopics(chapterIds, limit, 0); - setTopics(topicData); - const topicIds = topicData.map((topic) => topic.id); - const resourceData = await getResourcesWithSource(topicIds); - setResources(resourceData); - } - else { - setPage(page - 1); - } - } else { - console.log("Bad request") - } - } catch (error) { - console.error('Error fetching data:', error); - } + const handleLibraryChange = (library: string) => { + setSelectedLibrary(library); }; useEffect(() => { - handleTabClick(activeTab); - }, [selectedGrade, page, selectedChapter]); + if (selectedLibrary === 'NEET Content' || selectedLibrary === 'JEE Content') { + push(`/library/show?course=${selectedLibrary}`); + } + }, [selectedLibrary, push]); - const toggleChapterExpansion = (chapterId: number) => { - setExpandedChapters((prevExpanded) => ({ - ...prevExpanded, - [chapterId]: !prevExpanded[chapterId], - })); - }; + const buttonStyle = 'mx-4 w-40 md:w-64'; + const selectedButtonStyle = 'bg-white text-primary font-semibold'; + const unselectedButtonStyle = 'bg-heading text-slate-600'; - const handleNextPage = () => { - const nextPage = page + 1; - setPage(nextPage); - handleTabClick(activeTab); - }; + return ( +
+ - const handlePreviousPage = () => { - const previousPage = page - 1; - if (previousPage >= 1) { - setPage(previousPage); - handleTabClick(activeTab); - } - }; + {selectedLibrary !== 'NEET Content' && selectedLibrary !== 'JEE Content' && ( +
+ handleLibraryChange('Content')} + className={`${buttonStyle} ${selectedLibrary === 'Content' ? selectedButtonStyle : unselectedButtonStyle}`} + > + Content Library + + handleLibraryChange('Class')} + className={`${buttonStyle} ${selectedLibrary === 'Class' ? selectedButtonStyle : unselectedButtonStyle}`} + > + Class Library + +
+ )} - const handleGradeChange = (grade: number) => { - setSelectedGrade(grade); - setSelectedChapter(null) - }; + {selectedLibrary === 'Content' && ( +
+
handleLibraryChange('NEET Content')} className="pt-4"> +
+
+ Stethoscope Icon +
+

NEET course

+
Browse all the NEET courses
+
+
+
- const fetchChapters = async (subjectId: number, gradeId: number) => { - const chapterData = await getChapters(subjectId, gradeId); - setChapterList(chapterData); - }; +
+
handleLibraryChange('JEE Content')}> +
+
+ Blueprint Icon +
+

JEE Mains course

+
Browse all the JEE courses
+
+
+
+
+ +
+ )} - return ( -
- -
-

NEET Course

- New Delhi -
-
- handleTabClick('Physics')} - className={activeTab === 'Physics' ? 'bg-heading text-primary' : 'bg-white text-slate-600'} - > - Physics - - handleTabClick('Chemistry')} - className={activeTab === 'Chemistry' ? 'bg-heading text-primary' : 'bg-white text-slate-600'} - > - Chemistry - - handleTabClick('Maths')} - className={activeTab === 'Maths' ? 'bg-heading text-primary' : 'bg-white text-slate-600'} - > - Maths - - handleTabClick('Biology')} - className={activeTab === 'Biology' ? 'bg-heading text-primary' : 'bg-white text-slate-600'} - > - Biology - -
-
- - -
- {resources.length > 0 ? ( -
- {chapters.map((chapter) => ( -
-
toggleChapterExpansion(chapter.id)} - > -
{chapter.name}
-
- {expandedChapters[chapter.id] ? ( - Collapse - ) : ( - Expand - )} + {selectedLibrary === 'Class' && ( +
+
handleLibraryChange('NEET Classes')} className="pt-4"> +
+
+ Stethoscope Icon +
+

NEET classes

+
Browse all the NEET classes
+
+
+
+ +
+
handleLibraryChange('JEE Classes')}> +
+
+ Blueprint Icon +
+

JEE Mains classes

+
Browse all the JEE classes
- {expandedChapters[chapter.id] && ( -
    - {topics - .filter((topic) => topic.chapter_id === chapter.id) - .map((topic) => ( -
    -

    {topic.name}

    -
      - {resources - .filter((resource) => resource.topic_id === topic.id) - .map((resource) => ( -
    • - - Play {resource.name} - -
      • - ))} -
    -
    - ))} -
- )}
- ))} -
- Previous - Next
- ) : ( - )}
); diff --git a/app/library/show/page.tsx b/app/library/show/page.tsx new file mode 100644 index 0000000..d746d8d --- /dev/null +++ b/app/library/show/page.tsx @@ -0,0 +1,226 @@ +"use client" + +import React, { useState } from 'react'; +import { useRouter } from 'next/navigation'; +import BottomNavigationBar from '@/components/BottomNavigationBar'; +import Loading from '../../loading'; +import TopBar from '@/components/TopBar'; +import PrimaryButton from '@/components/Button'; +import { getSubjects, getChapters, getResourcesWithSource, getTopics, getGrades } from '../../../api/afdb/library'; +import { Chapter, Resource, Topic } from '../../types'; +import { useEffect } from 'react'; +import Link from 'next/link'; +import ExpandIcon from "../../../assets/expand.png"; +import CollapseIcon from "../../../assets/collapse.png"; +import PlayIcon from "../../../assets/play.png"; +import BackIcon from "../../../assets/icon.png"; +import Image from 'next/image'; +import { useSearchParams } from 'next/navigation'; + +const ContentLibrary = () => { + const [activeTab, setActiveTab] = useState('Physics'); + const [chapters, setChapters] = useState([]); + const [topics, setTopics] = useState([]); + const [resources, setResources] = useState([]); + const [expandedChapters, setExpandedChapters] = useState>({}); + const [page, setPage] = useState(1); + const [selectedGrade, setSelectedGrade] = useState(9); + const [selectedChapter, setSelectedChapter] = useState(null); + const [chapterList, setChapterList] = useState([]); + const limit = 4; + const gradeOptions = [9, 10, 11, 12]; + const router = useRouter(); + const searchParams = useSearchParams(); + const selectedCourse = searchParams.get('course'); + const neetSubjects = ['Physics', 'Chemistry', 'Biology']; + const jeeSubjects = ['Physics', 'Chemistry', 'Maths']; + + const handleTabClick = async (tabName: string) => { + setActiveTab(tabName); + if (activeTab != tabName) { + setPage(1); + setSelectedChapter(null) + } + + try { + const actualTabName = tabName.toLowerCase(); + const subjectData = await getSubjects(actualTabName); + const gradeData = await getGrades(selectedGrade); + if (subjectData.length > 0) { + const subjectId = subjectData[0].id; + const gradeId = gradeData[0].id; + const offset = (page - 1) * limit; + + const finalOffset = offset >= 0 ? offset : 0; + await fetchChapters(subjectId, gradeId); + const chapterData = selectedChapter + ? await getChapters(subjectId, gradeId, limit, finalOffset, selectedChapter) + : await getChapters(subjectId, gradeId, limit, finalOffset); + + if (chapterData.length > 0) { + setChapters(chapterData); + const chapterIds = chapterData.map((chapter) => chapter.id); + const topicData = await getTopics(chapterIds, limit, 0); + setTopics(topicData); + const topicIds = topicData.map((topic) => topic.id); + const resourceData = await getResourcesWithSource(topicIds); + setResources(resourceData); + } + else { + setPage(page - 1); + } + } else { + console.log("Bad request") + } + } catch (error) { + console.error('Error fetching data:', error); + } + }; + + useEffect(() => { + const fetchData = async () => { + await handleTabClick(activeTab); + }; + + fetchData(); + }, [selectedGrade, page, selectedChapter]); + + + const toggleChapterExpansion = (chapterId: number) => { + setExpandedChapters((prevExpanded) => ({ + ...prevExpanded, + [chapterId]: !prevExpanded[chapterId], + })); + }; + + const handleNextPage = () => { + const nextPage = page + 1; + setPage(nextPage); + handleTabClick(activeTab); + }; + + const handlePreviousPage = () => { + const previousPage = page - 1; + if (previousPage >= 1) { + setPage(previousPage); + handleTabClick(activeTab); + } + }; + + const handleBackClick = () => { + router.push('/library'); + }; + + const handleGradeChange = (grade: number) => { + setSelectedGrade(grade); + setSelectedChapter(null) + }; + + const fetchChapters = async (subjectId: number, gradeId: number) => { + const chapterData = await getChapters(subjectId, gradeId); + setChapterList(chapterData); + }; + + const generateSubjectButton = (subject: string, label: string) => ( + handleTabClick(subject)} + className={activeTab === subject ? 'bg-heading text-primary' : 'bg-white text-slate-600'} + > + {label} + + ); + + return ( +
+ +
+
+ Play +

{selectedCourse === 'NEET Content' ? "NEET Course" : "JEE Course"}

+
+ Content Library +
+
+ {selectedCourse === 'NEET Content' && neetSubjects.map(subject => generateSubjectButton(subject, subject))} + {selectedCourse === 'JEE Content' && jeeSubjects.map(subject => generateSubjectButton(subject, subject))} +
+
+ + +
+ {resources.length > 0 ? ( +
+ {chapters.map((chapter) => ( +
+
toggleChapterExpansion(chapter.id)} + > +
{chapter.name}
+
+ {expandedChapters[chapter.id] ? ( + Collapse + ) : ( + Expand + )} +
+
+ {expandedChapters[chapter.id] && ( +
    + {topics + .filter((topic) => topic.chapter_id === chapter.id) + .map((topic) => ( +
    +

    {topic.name}

    +
      + {resources + .filter((resource) => resource.topic_id === topic.id) + .map((resource) => ( +
    • + + Play {resource.name} + +
      • + ))} +
    +
    + ))} +
+ )} +
+ ))} +
+ Previous + Next +
+ +
+ ) : ( + + )} +
+ ); +}; + +export default ContentLibrary; diff --git a/assets/blueprint.png b/assets/blueprint.png new file mode 100644 index 0000000..deaeadb Binary files /dev/null and b/assets/blueprint.png differ diff --git a/assets/icon.png b/assets/icon.png new file mode 100644 index 0000000..234a07e Binary files /dev/null and b/assets/icon.png differ diff --git a/assets/stethoscope.png b/assets/stethoscope.png new file mode 100644 index 0000000..ccd65d4 Binary files /dev/null and b/assets/stethoscope.png differ