From f65b67b2a571407d3d36b4444d4f4aee900f134e Mon Sep 17 00:00:00 2001 From: Suvodip Date: Tue, 30 Jul 2024 13:00:26 +0530 Subject: [PATCH] s1 --- app/components/KnowledgeQuestsPageContent.tsx | 572 ++++-------------- app/components/TopPerformers.tsx | 3 +- app/routes/knowledge-quest.tsx | 18 +- 3 files changed, 124 insertions(+), 469 deletions(-) diff --git a/app/components/KnowledgeQuestsPageContent.tsx b/app/components/KnowledgeQuestsPageContent.tsx index 79de513..cd82b6f 100644 --- a/app/components/KnowledgeQuestsPageContent.tsx +++ b/app/components/KnowledgeQuestsPageContent.tsx @@ -1,469 +1,113 @@ -import {Layout, Menu, theme, Button, Modal, MenuProps, Tabs} from 'antd'; +import { Tabs } from 'antd'; import '../../public/assets/knowledge-quest.css'; -const { TabPane } = Tabs; -let performersData = [ - { - id: "1", - name: "Eiden", - score: "48/50", - points: "999", - rank: "1", - program: "Graduate Program", - avatar: "avatar1.png" - }, - { - id: "2", - name: "Jackson", - score: "45/50", - points: "997", - rank: "2", - program: "Graduate Program", - avatar: "avatar2.png" - }, - { - id: "3", - name: "Emma Aria", - score: "43/50", - points: "994", - rank: "3", - program: "Graduate Program", - avatar: "avatar3.png" - }, - { - id: "4", - name: "John Doe", - score: "40/50", - points: "990", - rank: "4", - program: "Graduate Program", - avatar: "avatar4.png" - }, - { - id: "5", - name: "Jane Cooper", - score: "37/50", - points: "987", - rank: "5", - program: "Graduate Program", - avatar: "avatar5.png" - }, - { - id: "6", - name: "John Doe", - score: "35/50", - points: "982", - rank: "6", - program: "Graduate Program", - avatar: "avatar6.png" - }, - { - id: "7", - name: "Alice", - score: "33/50", - points: "980", - rank: "7", - program: "Graduate Program", - avatar: "avatar1.png" - }, - { - id: "8", - name: "Bob", - score: "32/50", - points: "978", - rank: "8", - program: "Graduate Program", - avatar: "avatar2.png" - }, - { - id: "9", - name: "Charlie", - score: "30/50", - points: "975", - rank: "9", - program: "Graduate Program", - avatar: "avatar3.png" - }, - { - id: "10", - name: "Diana", - score: "28/50", - points: "972", - rank: "10", - program: "Graduate Program", - avatar: "avatar4.png" - }, - { - id: "11", - name: "Edward", - score: "27/50", - points: "970", - rank: "11", - program: "Graduate Program", - avatar: "avatar5.png" - }, - { - id: "12", - name: "Fiona", - score: "26/50", - points: "968", - rank: "12", - program: "Graduate Program", - avatar: "avatar6.png" - }, - { - id: "13", - name: "George", - score: "25/50", - points: "965", - rank: "13", - program: "Graduate Program", - avatar: "avatar1.png" - }, - { - id: "14", - name: "Hannah", - score: "23/50", - points: "962", - rank: "14", - program: "Graduate Program", - avatar: "avatar2.png" - }, - { - id: "15", - name: "Ian", - score: "22/50", - points: "960", - rank: "15", - program: "Graduate Program", - avatar: "avatar3.png" - }, - { - id: "16", - name: "Julia", - score: "20/50", - points: "957", - rank: "16", - program: "Graduate Program", - avatar: "avatar4.png" - }, - { - id: "17", - name: "Kyle", - score: "19/50", - points: "955", - rank: "17", - program: "Graduate Program", - avatar: "avatar5.png" - }, - { - id: "18", - name: "Laura", - score: "18/50", - points: "953", - rank: "18", - program: "Graduate Program", - avatar: "avatar6.png" - }, - { - id: "19", - name: "Michael", - score: "17/50", - points: "950", - rank: "19", - program: "Graduate Program", - avatar: "avatar1.png" - }, - { - id: "20", - name: "Nancy", - score: "16/50", - points: "947", - rank: "20", - program: "Graduate Program", - avatar: "avatar2.png" - }, - { - id: "21", - name: "Oliver", - score: "15/50", - points: "945", - rank: "21", - program: "Graduate Program", - avatar: "avatar3.png" - } -]; -let knowledgeData = [ - { - id: "1", - status: "1", - title: "Assessment on Special Education", - challenge: "Challenge yourself & climb the leaderboard.", - question: "Subjective Question", - img: "../../assets/knowledge1.jpg" - }, - { - id: "2", - status: "1", - title: "Quiz on Children Psychology", - challenge: "Challenge yourself & climb the leaderboard.", - question: "MCQ", - img: "../../assets/knowledge2.jpg" - }, - { - id: "3", - status: "1", - title: "Quiz on Montessori Methods", - challenge: "Challenge yourself & climb the leaderboard.", - question: "MCQ", - img: "../../assets/knowledge3.jpg" - }, - { - id: "4", - status: "1", - title: "Assessment on Special Education", - challenge: "Challenge yourself & climb the leaderboard.", - question: "Subjective Question", - img: "../../assets/knowledge1.jpg" - }, - { - id: "5", - status: "1", - title: "Quiz on Children Psychology", - challenge: "Challenge yourself & climb the leaderboard.", - question: "MCQ", - img: "../../assets/knowledge2.jpg" - }, - { - id: "6", - status: "1", - title: "Quiz on Montessori Methods", - challenge: "Challenge yourself & climb the leaderboard.", - question: "MCQ", - img: "../../assets/knowledge3.jpg" - }, - { - id: "7", - status: "1", - title: "Workshop on Child Development", - challenge: "Expand your knowledge & earn badges.", - question: "Interactive Session", - img: "../../assets/knowledge1.jpg" - }, - { - id: "8", - status: "1", - title: "Webinar on Educational Psychology", - challenge: "Join & enhance your skills.", - question: "Discussion", - img: "../../assets/knowledge2.jpg" - }, - { - id: "9", - status: "1", - title: "Seminar on Inclusive Education", - challenge: "Participate & gain insights.", - question: "Lecture", - img: "../../assets/knowledge3.jpg" - }, - { - id: "10", - status: "1", - title: "Course on Early Childhood Education", - challenge: "Complete the course & get certified.", - question: "Multiple Modules", - img: "../../assets/knowledge1.jpg" - }, - { - id: "11", - status: "1", - title: "Training on Classroom Management", - challenge: "Improve your teaching strategies.", - question: "Practical Tasks", - img: "../../assets/knowledge2.jpg" - }, - { - id: "12", - status: "1", - title: "Lecture on Cognitive Development", - challenge: "Expand your understanding & get certified.", - question: "Q&A Session", - img: "../../assets/knowledge3.jpg" - }, - { - id: "13", - status: "1", - title: "Workshop on Behavioral Issues", - challenge: "Join & learn from experts.", - question: "Interactive Session", - img: "../../assets/knowledge1.jpg" - }, - { - id: "14", - status: "1", - title: "Seminar on Learning Disabilities", - challenge: "Participate & enhance your knowledge.", - question: "Lecture", - img: "../../assets/knowledge2.jpg" - }, - { - id: "15", - status: "1", - title: "Webinar on Child Psychology", - challenge: "Join & expand your skills.", - question: "Discussion", - img: "../../assets/knowledge3.jpg" - }, - { - id: "16", - status: "1", - title: "Course on Special Education Needs", - challenge: "Complete the course & get certified.", - question: "Multiple Modules", - img: "../../assets/knowledge1.jpg" - }, - { - id: "17", - status: "1", - title: "Training on Autism Spectrum Disorder", - challenge: "Improve your teaching strategies.", - question: "Practical Tasks", - img: "../../assets/knowledge2.jpg" - }, - { - id: "18", - status: "1", - title: "Lecture on Emotional Development", - challenge: "Expand your understanding & get certified.", - question: "Q&A Session", - img: "../../assets/knowledge3.jpg" - }, - { - id: "19", - status: "1", - title: "Workshop on ADHD", - challenge: "Join & learn from experts.", - question: "Interactive Session", - img: "../../assets/knowledge1.jpg" - }, - { - id: "20", - status: "1", - title: "Seminar on Speech and Language Disorders", - challenge: "Participate & enhance your knowledge.", - question: "Lecture", - img: "../../assets/knowledge2.jpg" - }, - { - id: "21", - status: "1", - title: "Webinar on Child Nutrition", - challenge: "Join & expand your skills.", - question: "Discussion", - img: "../../assets/knowledge3.jpg" - } -]; -const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank)); +import React, { useEffect, useState } from 'react'; -const highestRank = sortedData[0]; -const secondHighestRank = sortedData[1]; -const thirdHighestRank = sortedData[2]; +interface Performer { + id: number; + img: string; + title: string; + challenge: string; + question: string; +} -export default function Index(){ - return( -
-
-
-
- - -
- {knowledgeData.map(data => ( -
-
- -
-

{data.title}

-

{data.challenge}

-

{data.question}

-
-
- -
- ))} -
- - -
- {knowledgeData.map(data => ( -
-
- -
-

{data.title}

-

{data.challenge}

-

{data.question} | 200 people have taken this quiz

-
-

Score: 9/10

-

Earned: 9  

-
-
-
-

Review

-
- ))} -
- - -
-
-
-

Top Performers

-

Knowledge Quest

-
-
-
- - -
-

{secondHighestRank.name}

-

{secondHighestRank.score}

-
-
-
- - - -
-

{highestRank.name}

-

{highestRank.score}

-
-
-
- - -
-

{thirdHighestRank.name}

-

{thirdHighestRank.score}

-
-
-
- {sortedData.slice(3).map(data => ( -
-

# {data.rank}

- -
-

{data.name}

-

{data.program}

-
-
- -

{data.points} Points

-
-
- ))} -
+export default function Index() { + const [knowledgeDataAll, setKnowledgeDataAll] = useState([]); + const [knowledgeCompleted, setKnowledgeCompleted] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchData = async () => { + try { + const [allResponse, completedResponse] = await Promise.all([ + fetch('https://iimtt-api.s38.siliconpin.com/api/all-assesment'), + fetch('https://iimtt-api.s38.siliconpin.com/api/complete-assesment') + ]); + + if (!allResponse.ok || !completedResponse.ok) { + throw new Error('Network response was not ok'); + } + + const allData = await allResponse.json(); + const completedData = await completedResponse.json(); + + setKnowledgeDataAll(allData); + setKnowledgeCompleted(completedData); + setLoading(false); + } catch (error) { + console.error('Error fetching data:', error); + if (error instanceof Error) { + setError(error); + } else { + setError(new Error('An unexpected error occurred')); + } + setLoading(false); + } + }; + + fetchData(); + }, []); + + if (loading) { + return
Loading...
; + } + + if (error) { + return
Error: {error.message}
; + } + + const tabItems = [ + { + key: '1', + label: 'All', + children: ( +
+ {knowledgeDataAll.map(data => ( +
+
+ +
+

{data.title}

+

{data.challenge}

+

{data.question}

+
+
-
- ) -} \ No newline at end of file + ))} + + ), + }, + { + key: '2', + label: 'Completed', + children: ( +
+ {knowledgeCompleted.map(data => ( +
+
+ +
+

{data.title}

+

{data.challenge}

+

{data.question} | 200 people have taken this quiz

+
+

Score: 9/10

+

Earned: 9  

+
+
+
+ Review +
+ ))} +
+ ), + } + ]; + + return ( +
+ +
+ ); +} diff --git a/app/components/TopPerformers.tsx b/app/components/TopPerformers.tsx index 316f533..661e37a 100644 --- a/app/components/TopPerformers.tsx +++ b/app/components/TopPerformers.tsx @@ -24,6 +24,7 @@ export default function TopPerformers() { return res.json(); }) .then(data => { + // console.log(data) const sortedData: Performer[] = data.sort((a: Performer, b: Performer) => a.rank - b.rank); setData(sortedData); setLoading(false); @@ -64,7 +65,7 @@ export default function TopPerformers() {
- +

{highestRank.name}

{highestRank.score}

diff --git a/app/routes/knowledge-quest.tsx b/app/routes/knowledge-quest.tsx index fc6e0d2..24e0974 100644 --- a/app/routes/knowledge-quest.tsx +++ b/app/routes/knowledge-quest.tsx @@ -6,6 +6,7 @@ import ExaminationIcon from '~/components/customIcon/ExaminationIcon'; import CommunityIcon from '~/components/customIcon/CommunityIcon'; import NotificationIcon from '~/components/customIcon/NotificationIcon'; import KnowledgeQuestsPageContent from '~/components/KnowledgeQuestsPageContent'; +import TopPerformers from '~/components/TopPerformers'; import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd'; import { Dropdown, Space } from 'antd'; import '../../public/assets/left_side_nav.css'; @@ -33,7 +34,7 @@ const items2: MenuProps['items'] = [ }, { key: '2sd', - label: (Classmate Directory), + label: (Classmate Directory), }, { key: '3sd', @@ -223,9 +224,18 @@ const App: React.FC = () => { {/* Place Content from here */} -
- -
+
+
+
+ +
+
+ +
+ +
+
+