Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Great/fix 3 question logic fix #1506

Merged
merged 5 commits into from
Nov 27, 2023
Merged

Great/fix 3 question logic fix #1506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bd0c6ab
Refactor-Fix: Assessment History Page code Refactor
B-lovedth Oct 23, 2023
682dd89
Refactor-Fix: Update Overview page
B-lovedth Oct 23, 2023
0824e72
Merge branch 'dev' of https://github.com/hngx-org/zuriportfolio-front…
B-lovedth Oct 24, 2023
079588b
Refactor-fix: Fixed logic for questions page
B-lovedth Oct 24, 2023
338953f
Merge branch 'dev' into Great/Fix-3-Question-logic-fix
incredible-phoenix246 Nov 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions http/userTakenAssessment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import axios from 'axios';
import $http from './axios';

const assessmentBaseUrl = `https://assessment.cofucan.tech/api/v1`;
const assessmentBaseUrl = `https://hng-stage-9.onrender.com/api/v1`;

export const fetchAssessmentHistory = async (token: string) => {
try {
Expand All @@ -10,7 +10,7 @@ export const fetchAssessmentHistory = async (token: string) => {
token: token,
},
});
return res.data;
return res.data.data;
} catch (error) {
console.error('Error Assessment History:', error);
throw error;
Expand Down Expand Up @@ -73,13 +73,13 @@ export const fetchUserTakenAssessment = async (token: string, id: any) => {

export const fetchUserAssessmentSession = async (token: string) => {
try {
const res = await axios.get(`${assessmentBaseUrl}/assessments/session/`, {
const res = await axios.get(`${assessmentBaseUrl}/assessments/session`, {
headers: {
'Content-Type': 'application/json',
token: token,
},
});
return res.data.data;
return res.data;
} catch (error) {
console.error('Error fetching user taken assessment:', error);
throw new Error('Failed to fetch user taken assessment');
Expand Down
5 changes: 2 additions & 3 deletions modules/assessment/component/History.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const History: React.FC = () => {
} = useQuery(['assessmentsHistory'], () => fetchAssessmentHistory(tokenRef.current as string));
console.log('history', assessmentsHistory);

const assessments = assessmentsHistory;


React.useEffect(() => {
tokenRef.current = localStorage.getItem('zpt');
Expand Down Expand Up @@ -71,8 +71,7 @@ const History: React.FC = () => {
setCurrentPage(1);
};

const filteredAssessments = assessments
?.filter(
const filteredAssessments = assessmentsHistory?.filter(
(assessment: Assessment) =>
assessment.assessment_name?.toLowerCase().includes(searchTerm.toLowerCase()) &&
(selectedLevel === 'All' ? true : assessment.badge_name?.toLowerCase() === selectedLevel),
Expand Down
79 changes: 54 additions & 25 deletions pages/assessments/overview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { TimerStart } from 'iconsax-react';
import { withUserAuth } from '../../../helpers/withAuth';
import Head from 'next/head';
import Loader from '@ui/Loader';
import { useQuery } from '@tanstack/react-query';

export interface Question {
answer_id: number;
Expand Down Expand Up @@ -56,7 +57,6 @@ function AssessmentOverview() {

useEffect(() => {
tokenRef.current = localStorage.getItem('zpt');
handleGetSession();
}, []);

useEffect(() => {
Expand Down Expand Up @@ -85,21 +85,6 @@ function AssessmentOverview() {
setTimeFunction();
}, [duration, minute, second]);

const handleGetSession = async () => {
const token = tokenRef.current;
try {
const res = await fetchUserAssessmentSession(token as string);
setResult(res);
if (!res) {
setIsLoading(false);
throw new Error('Network response was not ok');
} else {
setResult(res);
setIsLoading(false);
}
} catch (error) {}
};

function sortQuestionsByQuestionNo(input: QuestionArrays | undefined): Question[] {
if (!input) return [];
// Concatenate the 'answered_questions' and 'unanswered_questions' arrays
Expand Down Expand Up @@ -130,13 +115,57 @@ function AssessmentOverview() {
console.error('Error submitting assessment:', error);
}
};

return (
const {data:sessionData,isLoading:sessionIsLoading,isError} = useQuery(['assessment'], () => fetchUserAssessmentSession(tokenRef.current as string), {
notifyOnChangeProps: ['data',"isError","isLoading"],
})
console.log("data",sessionData)
console.log("isLoading",sessionIsLoading)
console.log("isError",isError)
if (isError) {
return (
<>
<Head>
<style>
{`

.overscroll::-webkit-scrollbar{
width: 7px;
height: 10px;
background: #eee;
}
.overscroll::-webkit-scrollbar-thumb{
background: #009254;
border-radius: 5px;
}
`}
</style>
<title>Assessment | Overview</title>
<meta name="description" content="Zuri Portfolio Assessment Question Page" />
<link rel="icon" href="/assets/zuriLogo.svg" />
</Head>
<MainLayout activePage={'Overview'} showTopbar showFooter showDashboardSidebar={false}>
<AssessmentBanner
title="Assessment test"
subtitle="Something went wrong while trying to get your assessment"
bannerImageSrc="/assets/images/banner/assm_1.svg"
/>
<div className="flex justify-center items-center h-screen">
<div className="flex flex-col items-center gap-5">
<h1 className="text-7xl font-extrabold text-brand-green-primary text-center">OOPS!</h1>
<h1 className="text-2xl text-brand-green-primary text-center font-bold mb-4">something went wrong</h1>
</div>
</div>
</MainLayout>
</>
);
}
else
{return (
<>
<Head>
<title>Assessment | Overview</title>
<title>Overview</title>
<meta name="description" content="Zuri Portfolio Assessment Overview" />
<link rel="icon" href="./public/assets/zuriLogo.svg" />
<link rel="icon" href="/assets/zuriLogo.svg" />
</Head>
{isTimeOut && (
<OutOfTime
Expand All @@ -151,7 +180,7 @@ function AssessmentOverview() {

<ConfirmSubmitModal showModal={showConfirm} setShowModal={setShowConfirm} onConfirmFn={handleOnSubmit} />
<SuccessFeedbackModal showModal={showSuccessConfirm} setShowModal={setShowSuccessConfirm} badgeID={badgeEarn} />
{isLoading ? (
{sessionIsLoading ? (
<div className="flex justify-center items-center h-screen">
<Loader />
</div>
Expand All @@ -165,21 +194,21 @@ function AssessmentOverview() {
/>
<div className="w-full md:max-w-full px-4 max-w-xs mt-8 mb-16 mx-auto font-manropeL flex flex-col items-stretch justify-between gap-y-8">
<div className="w-full lg:max-w-lg md:max-w-full sm:mx-w-xs rounded-lg flex items-center justify-between py-4 px-8 bg-brand-green-primary mt-5">
<p className="text-white-100 text-2xl font-bold">
<div className="text-white-100 text-2xl font-bold">
{(minute !== null || undefined) && (second !== null || undefined) ? (
<CountdownTimer action={() => setTimeUp(true)} minutes={minute} seconds={second} />
) : (
<span>- - : - -</span>
)}
</p>
</div>
<span>
<TimerStart color="#fff" />
</span>
</div>
</div>
<div className="w-full max-w-[1240px] mx-auto flex flex-col px-4">
<div className="w-full py-6 md:py-9 lg:py-12 flex flex-col gap-6 md:gap-8 lg:gap-10">
{sortQuestionsByQuestionNo(result)?.map((item) => (
{sessionData?.data?.length>1 && sortQuestionsByQuestionNo(sessionData)?.map((item) => (
<OverviewItem
key={item?.question_id}
data={item}
Expand All @@ -200,7 +229,7 @@ function AssessmentOverview() {
)}
</MainLayout>
</>
);
);}
}

export default withUserAuth(AssessmentOverview);
28 changes: 19 additions & 9 deletions pages/assessments/take-test/questions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,10 +98,10 @@ const Questions: React.FC = () => {
function sortQuestionsByQuestionNo(input: QuestionArrays | undefined): Question[] {
if (!input) return [];
// Concatenate the 'answered_questions' and 'unanswered_questions' arrays
const allQuestions = input.answered_questions.concat(input.unanswered_questions);
const allQuestions = input.answered_questions?.concat(input.unanswered_questions);

// Sort the combined array based on 'question_no'
return allQuestions.sort((a, b) => a.question_no - b.question_no);
return allQuestions?.sort((a, b) => a.question_no - b.question_no);
}
const handleUserAnswerClick = async (question_id: number, user_answer_id: number, answer_text: string) => {
const token = tokenRef.current;
Expand All @@ -123,8 +123,16 @@ const Questions: React.FC = () => {
useEffect(() => {
if (!sessionLoading && !sessionIsErrorr && session?.length !== 0 && !sessionError) {
const assessmentData = sortQuestionsByQuestionNo(session);
setStoredAssessment(assessmentData);
setIsLoading(false);
if (
session.data?.questions?.length === 0 ||
session?.data?.length <= 1 ||
session?.data?.questions === undefined
) {
setStoredAssessment(newQuestions?.data?.questions);
} else {
setStoredAssessment(assessmentData);
}
setIsLoading(sessionLoading);
setIsError(false);
} else if (!newIsLoading && !newIsError && newQuestions?.data?.questions?.length !== 0 && !newError) {
setStoredAssessment(newQuestions?.data?.questions);
Expand All @@ -133,11 +141,12 @@ const Questions: React.FC = () => {
} else {
setIsError(true);
}
setAssessmentData(assessment);
setAssessmentData(assessment?.data);
setDuration(assessmentData?.duration_minutes as number);
console.log(newIsLoading, newIsError, newQuestions?.data?.questions, newError);
console.log(sessionLoading, sessionIsErrorr, session, sessionError);
console.log(assessmentData);
console.log('stored', storedAssessment);
}, [
newQuestions?.data,
newIsLoading,
Expand All @@ -150,13 +159,14 @@ const Questions: React.FC = () => {
newError,
assessmentData?.duration_minutes,
assessmentData,
storedAssessment,
]);
useEffect(() => {
const setTimeFunction = () => {
if (typeof window !== 'undefined' && window.localStorage) {
const minuteString = localStorage.getItem('minute');
const secondString = localStorage.getItem('second');
const minuteInt = minuteString !== null ? parseInt(minuteString, 10) : 30;
const minuteInt = minuteString !== null ? parseInt(minuteString, 10) : duration as number;
const secondInt = secondString !== null ? parseInt(secondString, 10) : 0;
setMinute(minuteInt);
setSecond(secondInt);
Expand Down Expand Up @@ -200,7 +210,7 @@ const Questions: React.FC = () => {
getItemWithExpiry('duration');
}, [duration, minute, second]);

if (isError) {
if (newIsError) {
return (
<>
<Head>
Expand Down Expand Up @@ -274,7 +284,7 @@ const Questions: React.FC = () => {
<meta name="description" content={metaDescription} />
</Head>
<MainLayout activePage={'questions'} showTopbar showFooter showDashboardSidebar={false}>
{isLoading ? (
{newIsLoading ? (
<div className="flex justify-center items-center h-screen">
<Loader />
</div>
Expand All @@ -300,7 +310,7 @@ const Questions: React.FC = () => {
</div>
<form action="#">
<ul className="overscroll md:max-w-xl max-w-xs flex flex-col w-full gap-y-4 overflow-y-scroll max-h-screen h-full mb-4">
{storedAssessment.map((question: any, index: number) => (
{storedAssessment?.map((question: any, index: number) => (
<li key={index} className="w-full md:max-w-lg py-8 px-4 border border-slate-100 rounded-lg">
<h1 className="text-xl text-brand-green-primary text-center font-bold mb-4">
Question {storedAssessment.indexOf(question) + 1} of {storedAssessment?.length}
Expand Down