elangptra/frontend_adaptive_learning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing user bug

Browse Source
This commit is contained in:
Dimas Atmodjo 2024-12-05 15:31:12 +07:00
parent b661043755
commit 7e31c5414d
12 changed files with 177 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/assets/styles/index.css
View File

@ -99,6 +99,10 @@ body {
color: #E9342D;
}
.text-green{
color: #00BC65;
}
.text-muted-50{
color: #A3A3A3;
}
@ -267,6 +271,15 @@ body {
color: #ffffff!important;
}
.btn-nope{
background-color: #00000000!important;
box-shadow: none!important;
}
.btn-nope:hover{
background-color: #00000007!important;
}
.btn-nav{
width: 140px;
}
@ -358,6 +371,29 @@ body {
font-size: 24px;
}
.drop-zone {
cursor: pointer;
background-color: #00000000;
width: 100%;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px dashed #dee2e6;
transition: border-color 0.3s ease-in-out;
}
.drop-zone:not(.active):hover{
background-color: #00000007!important;
}
.drop-zone.dragging,
.drop-zone.active {
background-color: #0cb61518;
border: 2px dashed #00BC65;
}
@media (max-width: 992px) {
.ilustration-img{

2
src/roles/user/UserRoutes.jsx
View File

@ -13,6 +13,7 @@ import Level from './level/views/Level';
import Exercise from './exercise/views/Exercise';
import ExerciseResult from './exercise/views/ExerciseResult';
import ExerciseHistory from './history/views/ExerciseHistory';
import Review from './review/views/Review';
import Material from './material/views/Material';
import ProtectedRoute from '../../utils/ProtectedRoute';
@ -35,6 +36,7 @@ const UserRoutes = () => {
<Route path="module" element={<Learning />} />
<Route path="setting" element={<Setting />} />
<Route path="history" element={<ExerciseHistory />} />
<Route path="review/:stdLearning" element={<Review />} />
<Route path="module/:section" element={<Topic />} />
<Route path="module/:section/:topic" element={<Level />} />

2
src/roles/user/exercise/hooks/useExercises.jsx
View File

@ -98,7 +98,7 @@ export const useExercises = (topic, level) => {
} catch (error) {
console.error(error);
}finally{
navigate(`/learning/module/${section}/${topic}/${level}/result`);
// navigate(`/learning/module/${section}/${topic}/${level}/result`);
}
};

2
src/roles/user/exercise/views/Exercise.jsx
View File

@ -106,7 +106,7 @@ const Exercise = () => {
<Col sm={2}>
<div className='p-3 rounded-4 bg-white'>
<div className="mb-3 d-flex justify-content-between align-items-center">
<h4 className='mb-0 text-gd fw-bold'>Pretest</h4>
<h4 className='mb-0 text-gd fw-bold'>Exercise</h4>
<OverlayTrigger trigger="click" placement="right" overlay={popover}>
<i className=" bi bi-info-circle cursor-pointer text-secondary"></i>
</OverlayTrigger>

9
src/roles/user/exercise/views/components/MatchingPairsQuestion.jsx
View File

@ -96,7 +96,6 @@ const MatchingPairsQuestion = ({ question, onAnswer, studentAnswer, index }) =>
const selectedRightValue = rightOptions[rightIndex];
newPairs[leftIndex].right = selectedRightValue;
setPairs(newPairs);
// console.log(newPairs);
setSelectedLeft(null);
setSelectedRight(null);
@ -106,7 +105,13 @@ const MatchingPairsQuestion = ({ question, onAnswer, studentAnswer, index }) =>
setIsComplete(true);
const rightAnswers = newPairs.map((pair) => pair.right);
onAnswer(index, arrayToString(rightAnswers), question.ID_ADMIN_EXERCISE);
const stringPairs = newPairs
.map(pair => `${pair.left}>${pair.right}`)
.join("| ");
// onAnswer(index, arrayToString(rightAnswers), question.ID_ADMIN_EXERCISE);
onAnswer(index, stringPairs, question.ID_ADMIN_EXERCISE);
}
};

1
src/roles/user/history/hooks/useHirtories.jsx
View File

@ -58,6 +58,7 @@ const useHistories = () => {
} else {
data = await serviceHistory.fetchHistoryBySection(sectionSlugMap[activeTab]);
}
console.log(data.payload);
setHistoryData(data.payload);
} catch (error) {
if (error.status == 404) {

6
src/roles/user/history/services/historyService.jsx
View File

@ -25,10 +25,10 @@ const fetchAllHistory = async () => {
const fetchHistoryBySection = async (section) => {
try {
const response = await axiosInstance.get(`/learningHistory/section/${section}`);
const historyData = response.data.payload;
const historyData = response.data.payload.history;
const validHistory = historyData.filter(history => history.STUDENT_FINISH !== null);
return {message: response.data.message, payload: validHistory, status: response.data.statusCode,};
return {message: response.data.message, payload: validHistory, status: response.data.statusCode};
} catch (error) {
return {payload: []};
}
@ -37,7 +37,7 @@ const fetchHistoryBySection = async (section) => {
const fetchHistoryByTopic = async (topic) => {
try {
const response = await axiosInstance.get(`/learningHistory/topic/${topic}`);
const historyData = response.data.payload;
const historyData = response.data.payload.history;
const validHistory = historyData.filter(history => history.STUDENT_FINISH !== null);
return {message: response.data.message, payload: validHistory, status: response.data.statusCode,};

64
src/roles/user/history/views/ExerciseHistory.jsx
View File

@ -28,12 +28,10 @@ const ExerciseHistory = () => {
<div className='exercise-history'>
<h3 className='fw-bold text-blue'>Your Exercise History!</h3>
<p className='text-secondary mb-4'>Track your progress with a personalized overview of all your workouts.</p>
<Container className='mb-4 d-flex align-items-center bg-white rounded rounded-4'>
<Container fluid className='mb-4 d-flex align-items-center bg-white rounded rounded-4'>
<Tab.Container id="left-tabs-example" defaultActiveKey="all" onSelect={(k) => { setActiveTab(k); setSelectedTopic(''); }}>
<Row>
<Col>
{/* <h3 className='fw-bold text-blue'>Your Exercise History!</h3>
<p className='text-secondary mb-4'>Track your progress with a personalized overview of all your workouts.</p> */}
<Nav variant="pills" className="p-2 bg-white">
<Nav.Item>
<Nav.Link eventKey="all">All</Nav.Link>
@ -86,40 +84,84 @@ const ExerciseHistory = () => {
historyData.map((history, index) => (
<Col key={index} className='mb-3'>
<Card className='flex-row p-3 border-primary rounded-4'>
<Card.Body className='p-0 d-flex flex-column justify-content-between'>
{/* <Card.Body className='p-0 d-flex flex-column justify-content-between'>
<Card.Title className='mb-1 w-100 d-flex justify-content-between'>
<h4 className='mb-0'>Exercise</h4>
<p className='mb-0 submit-time'>Submission: {formatLocalDate(history.STUDENT_FINISH)}</p>
<h4 className='mb-0'>{history.CURRENT_LEVEL}</h4>
</Card.Title>
<Breadcrumb className='custom-breadcrumb'>
<Breadcrumb.Item>{history.SECTION_NAME}</Breadcrumb.Item>
<Breadcrumb.Item>{history.TOPIC_NAME}</Breadcrumb.Item>
<Breadcrumb.Item active>{history.CURRENT_LEVEL}</Breadcrumb.Item>
<Breadcrumb.Item active>{history.TOPIC_NAME}</Breadcrumb.Item>
</Breadcrumb>
<p className='mt-2 mb-0 submit-time'>Submission: {formatLocalDate(history.STUDENT_FINISH)}</p>
<div className="w-100 d-flex align-items-center mt-2">
<h3 className='m-0'>
<i className="bi bi-trophy-fill text-warning"></i>
<span className='ms-3 text-blue fw-bold'>{history.SCORE}/100</span>
</h3>
<div className="ms-auto">
{compareLevels(history.CURRENT_LEVEL, history.NEXT_LEVEL) === 'jump' ?(
<div className='bg-warning ms-auto py-3 px-5 rounded-35'>
<div className='bg-warning py-3 px-5 rounded-35'>
<i className="bi bi-arrow-up me-1"></i>
Jump to Level {history.NEXT_LEVEL}
</div>
) : (
compareLevels(history.CURRENT_LEVEL, history.NEXT_LEVEL) === 'down' ?(
<div className='bg-red text-white ms-auto py-3 px-5 rounded-35'>
<div className='bg-red text-white py-3 px-5 rounded-35'>
<i className="bi bi-arrow-down me-1"></i>
Go Down to Level {history.NEXT_LEVEL}
</div>
) : (
<div className='bg-blue text-white ms-auto py-3 px-5 rounded-35'>
<div className='bg-blue text-white py-3 px-5 rounded-35'>
<i className="bi bi-arrow-repeat me-1"></i>
Stay in Level {history.NEXT_LEVEL}
</div>
)
)}
<Link to={`/review/${history.ID_STUDENT_LEARNING}`} className='btn btn-blue'>Review</Link>
</div>
</div>
</Card.Body> */}
<Card.Body className="p-2 d-flex justify-content-between">
<div className="d-flex flex-column">
<h4 className='mb-0'>{history.CURRENT_LEVEL}</h4>
<Breadcrumb className='mt-2 custom-breadcrumb'>
<Breadcrumb.Item>{history.SECTION_NAME}</Breadcrumb.Item>
<Breadcrumb.Item active>{history.TOPIC_NAME}</Breadcrumb.Item>
</Breadcrumb>
<p className='mt-2 mb-0 submit-time'>Submission: {formatLocalDate(history.STUDENT_FINISH)}</p>
<h3 className='mt-4 mb-0'>
<i className="bi bi-trophy-fill text-warning"></i>
<span className='ms-3 text-blue fw-bold'>{history.SCORE}/100</span>
</h3>
</div>
<div className="d-flex flex-column justify-content-between align-items-end">
{history.IS_PASS == 1?(
<h5 className='text-green'>
<i className="bi bi-check2-all me-1"></i>
Topic Finished!
</h5>
):(
compareLevels(history.CURRENT_LEVEL, history.NEXT_LEVEL) === 'jump' ?(
<h5 className='text-blue'>
<i className="bi bi-arrow-up me-1"></i>
Jump to {history.NEXT_LEVEL}
</h5>
) : (
compareLevels(history.CURRENT_LEVEL, history.NEXT_LEVEL) === 'down' ?(
<h5 className='text-red'>
<i className="bi bi-arrow-down me-1"></i>
Go Down to {history.NEXT_LEVEL}
</h5>
) : (
<h5 className='text-dark'>
<i className="bi bi-arrow-repeat me-1"></i>
Stay in {history.NEXT_LEVEL}
</h5>
)
)
)}
<Link to={`/learning/review/${history.ID_STUDENT_LEARNING}`} className='btn btn-blue py-2 px-5 rounded-35'>Review</Link>
</div>
</Card.Body>
</Card>

3
src/roles/user/level/hooks/useLevels.jsx
View File

@ -59,7 +59,8 @@ const useLevels = (section, topic) => {
const isLevelUnlocked = (levelIndex) => {
if (levelIndex !== 0) {
if (levels[levelIndex].CONTENT) {
console.log(levels[levelIndex]);
if ("CONTENT" in levels[levelIndex]) {
return true;
}else{
return false;

12
src/roles/user/level/views/Level.jsx
View File

@ -66,7 +66,14 @@ const Level = () => {
<p className='mb-3 text-white'>
{levelDesc[index]}
</p>
{!isLevelUnlocked(index) ? (
{level.IS_PRETEST === 1 && level.SCORE !== null ?(
<div className='py-2 px-5 mt-auto w-fit bg-light rounded-35'>
Review
</div>
):(
!isLevelUnlocked(index) ? (
<div className='py-2 px-5 mt-auto w-fit bg-light rounded-35'>
Not Allowed
</div>
@ -87,7 +94,10 @@ const Level = () => {
>
Learn Now
</Button>
)
)}
</div>
</Col>
))}

23
src/roles/user/setting/services/SettingService.jsx
View File

@ -1,5 +1,4 @@
import axios from 'axios';
import { API_URL } from '../../../../utils/Constant';
import axiosInstance from '../../../../utils/axiosInstance';
const config = {
headers: {
@ -9,7 +8,7 @@ const config = {
const fetchProfile = async () => {
try {
const response = await axios.get(`${API_URL}/getMe`, config);
const response = await axiosInstance.get(`/getMe`, config);
return response.data;
} catch (error) {
throw error;
@ -17,16 +16,8 @@ const fetchProfile = async () => {
};
const updateProfile = async (id, formData) => {
const cfg = {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: localStorage.getItem('token')
},
};
try {
const response = await axios.put(`${API_URL}/user/update/${id}`, formData, cfg);
const response = await axiosInstance.put(`/user/update/${id}`, formData);
return response.data;
} catch (error) {
throw error;
@ -34,14 +25,8 @@ const updateProfile = async (id, formData) => {
};
const updatePassword = async (userId, passwordData) => {
const cfg = {
headers: {
Authorization: localStorage.getItem('token'),
'Content-Type': 'application/json',
},
};
try {
const response = await axios.put(`${API_URL}/user/update/password/${userId}`, passwordData, cfg);
const response = await axiosInstance.put(`/user/update/password/${userId}`, passwordData);
return response.data;
} catch (error) {
throw error;

10
src/utils/Constant.jsx
View File

@ -1,6 +1,10 @@
export const API_URL = 'http://54.173.167.62/api';
export const MEDIA_URL = 'http://54.173.167.62/api/uploads';
export let headerSection = 'section';
export let headerTopic = 'topic';
export let headerLevel = 'level';
export const slugify = (text) => {
if (!text) {
return '';
@ -26,3 +30,9 @@ export const unSlugify = (text) => {
.replace(/-/g, ' ')
.replace(/\b\w/g, (char) => char.toUpperCase());
};
export const setReviewHeader = (section, topic, level) => {
headerSection = section;
headerTopic = topic;
headerLevel = level;
}