fix: update

Desc : update project

Project/Frontend/SignConnectPlus/src/pages/learning-management/learning-curriculums-subscribed/tutorial/tutorial.tsx

@@ -19,11 +19,13 @@ import ReportCard from "components/cards/statistics/ReportCard";
 import { itemResultProps, selectedCommonDataProps, selectedItemContentProps } from "./types/types";
 
 import CircularWithPath from "components/@extended/progress/CircularWithPath";
+import useAuth from "hooks/useAuth";
 import { useParams } from "react-router";
 import Webcam from 'react-webcam';
 import { useDispatch, useSelector } from "store";
 import { CalculateMarks, toInitialState } from "store/reducers/marksCalculator";
 import { openSnackbar } from "store/reducers/snackbar";
+import { fetchUserProgress, updateUserProgress, toInitialState as userProgressToInitialState } from "store/reducers/userProgress";
 
 // action style
 const actionSX = {
@@ -49,8 +51,9 @@ const Tutorial = () => {
     const theme = useTheme();
     const dispatch = useDispatch();
     const { marksCalculator, error, success, isLoading } = useSelector(state => state.marksCalculator);
-    const { userProgress } = useSelector(state => state.userProgress);
+    const { userProgress, error: errorUserProgress, isLoading: isLoadingUserProgress, success: successUserProgress } = useSelector(state => state.userProgress);
     const { curriculumIndex, tutorialIndex } = useParams();
+    const { user } = useAuth()
 
     const [data, setData] = useState<tutorialTypeUserProgress>()
     const [selectedItem, setSelectedItem] = useState<{ selectedCommonData: selectedCommonDataProps | null, backgroundColor: any | null }>({
@@ -127,11 +130,17 @@ const Tutorial = () => {
 
     //alert model
     const [openModel, setOpenModel] = useState(false);
+    const [modelOpenFor, setModelOpenFor] = useState<"Practice" | "Complete">("Practice")
 
     const handleModelClose = () => {
         setOpenModel(!openModel);
     };
 
+    const handleModelOpen = (modelFor: "Practice" | "Complete") => {
+        setModelOpenFor(modelFor)
+        setOpenModel(true);
+    };
+
     // web cam
     const webcamRef = useRef<Webcam>(null);
     const [capturedImage, setCapturedImage] = useState<string | null>(null);
@@ -147,7 +156,7 @@ const Tutorial = () => {
     const [uploadImage, setUploadImage] = useState<any>();
 
 
-    const PracticeTask = (uploadImage: any, imgData: any, title: string) => {
+    const TaskTrigger = (uploadImage: any, imgData: any, title: string) => {
         if (itemPracticeReferenceData == "capture") {
             if (typeof imgData === 'string' && imgData.trim() !== '') {
                 const curriculumIndex: number = 1;
@@ -265,7 +274,6 @@ const Tutorial = () => {
             dispatch(CalculateMarks(curriculumIndex, tutorialIndex, imageData, targetClass));
 
         }
-
     }
 
     /**
@@ -305,10 +313,59 @@ const Tutorial = () => {
                     close: true
                 })
             );
+            if (modelOpenFor == "Complete") {
+                dispatch(updateUserProgress(
+                    user?.id!,
+                    userProgress?.curriculums?.[parseInt(curriculumIndex!)].curriculumCode!,
+                    data?.tutorialCode!,
+                    selectedItemContent?.title!,
+                    ((selectedItemContent?.taskItemMark! * parseInt(marksCalculator?.confidence!)) / 100)!,
+                    0
+                ))
+            } 
             dispatch(toInitialState())
         }
     }, [success])
 
+
+    //  handel error 
+    useEffect(() => {
+        if (errorUserProgress != null) {
+            dispatch(
+                openSnackbar({
+                    open: true,
+                    //@ts-ignore
+                    message: errorUserProgress ? errorUserProgress.Message : "Something went wrong ...",
+                    variant: 'alert',
+                    alert: {
+                        color: 'error'
+                    },
+                    close: true
+                })
+            );
+            dispatch(userProgressToInitialState())
+        }
+    }, [errorUserProgress])
+
+    //  handel success
+    useEffect(() => {
+        if (successUserProgress != null) {
+            dispatch(
+                openSnackbar({
+                    open: true,
+                    message: successUserProgress,
+                    variant: 'alert',
+                    alert: {
+                        color: 'success'
+                    },
+                    close: true
+                })
+            );
+            dispatch(fetchUserProgress(user?.id!));
+            dispatch(userProgressToInitialState())
+        }
+    }, [successUserProgress])
+
     return (
         <>
             <Grid container spacing={2}>
@@ -524,7 +581,7 @@ const Tutorial = () => {
                                                     endIcon={<PlayCircleOutlined />}
                                                     fullWidth
                                                     sx={{ my: 1, width: "100%", height: "100%" }}
-                                                    onClick={() => { setOpenModel(true) }}
+                                                    onClick={() => { handleModelOpen("Practice") }}
                                                     color="warning"
                                                     size="small"
                                                 >
@@ -537,7 +594,7 @@ const Tutorial = () => {
                                                     endIcon={<CheckOutlined />}
                                                     fullWidth
                                                     sx={{ my: 1, width: "100%", height: "100%" }}
-                                                    onClick={() => { }}
+                                                    onClick={() => { handleModelOpen("Complete") }}
                                                     color="success"
                                                     size="small"
                                                 >
@@ -592,7 +649,7 @@ const Tutorial = () => {
                 sx={{ '& .MuiDialog-paper': { p: 0 }, transition: 'transform 225ms' }}
                 aria-describedby="alert-dialog-slide-description"
             >
-                <DialogTitle>Practice</DialogTitle>
+                <DialogTitle>{modelOpenFor} Item</DialogTitle>
                 <Divider />
                 <DialogContent sx={{ p: 2.5 }}>
                     <Grid container spacing={2}>
@@ -649,8 +706,8 @@ const Tutorial = () => {
                                             secondary="To Complete the task you should get 85% or higher of the task mark" color={theme.palette.success.dark} />
                                     </Grid>
                                     <Grid item md={12}>
-                                        <Button variant="contained" color="success" onClick={() => { PracticeTask(uploadImage, webcamRef.current?.getScreenshot(), selectedItemContent?.title!) }} fullWidth disabled={isLoading}>
-                                            {isLoading ? <CircularWithPath /> : <>Get Result</>}
+                                        <Button variant="contained" color="success" onClick={() => { TaskTrigger(uploadImage, webcamRef.current?.getScreenshot(), selectedItemContent?.title!) }} fullWidth disabled={isLoading && isLoadingUserProgress}>
+                                            {isLoading && isLoadingUserProgress ? <CircularWithPath /> : <>{modelOpenFor} Task</>}
                                         </Button>
                                     </Grid>
                                 </Grid>

Project/Frontend/SignConnectPlus/src/store/reducers/userProgress.ts

@@ -125,7 +125,7 @@ export function fetchUserProgress(userId: string) {
  * @param updatedUserProgress 
  * @returns 
  */
-export function updateUserProgress(userId: string, curriculumCode: string, tutorialCode: string, taskItemTitle: string, taskItemMarkUser: string, taskItemSpentTime: string) {
+export function updateUserProgress(userId: string, curriculumCode: string, tutorialCode: string, taskItemTitle: string, taskItemMarkUser: number, taskItemSpentTime: number) {
     return async () => {
         dispatch(slice.actions.startLoading());