Merge pull request #560 from shreyas1434shinde/YouthNet

task #2952:- The Back arrow in Assessment screen does not work properly. If we have already selected Post test and then when we come back it automatically defaults to the pretest in most cases
tekdi · Jan 2, 2025 · 4d7a1ed · 4d7a1ed
2 parents a78f8be + 1ca856d
commit 4d7a1ed
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 23 deletions.
diff --git a/src/pages/assessments/index.tsx b/src/pages/assessments/index.tsx
@@ -85,6 +85,8 @@ const Assessments = () => {
     totalCount: 0,
   });
 
+  const { query } = router;
+
   useEffect(() => {
     if (typeof window !== 'undefined' && window.localStorage) {
       const token = localStorage.getItem('token');
@@ -373,6 +375,20 @@ const Assessments = () => {
     }
   };
 
+  const handleAssessmentTypeChange = (newType: string) => {
+    setAssessmentType(newType);
+
+    const queryParams = { ...query };
+    if (newType === 'post') queryParams.type = 'post';
+    else delete queryParams.type;
+
+    router.push({ pathname: router.pathname, query: queryParams }, undefined, { shallow: true });
+  };
+
+  useEffect(() => {
+    setAssessmentType(query.type === 'post' ? 'post' : 'pre');
+  }, [query.type]);
+
   return (
     <>
       <Box>
@@ -437,26 +453,7 @@ const Assessments = () => {
                 style={{
                   borderRadius: '4px',
                 }}
-                onChange={(e) => {
-                  setAssessmentType(e.target.value);
-                  const windowUrl = window.location.pathname;
-                  const cleanedUrl = windowUrl.replace(/^\//, '');
-
-                  const telemetryInteract = {
-                    context: {
-                      env: 'assessments',
-                      cdata: [],
-                    },
-                    edata: {
-                      id: 'filter-by-assessment-type:' + e.target.value,
-                      type: Telemetry.CLICK,
-                      subtype: '',
-                      pageid: cleanedUrl,
-                    },
-                  };
-                  telemetryFactory.interact(telemetryInteract);
-                }}
-                defaultValue={'pre'}
+                onChange={(e) => handleAssessmentTypeChange(e.target.value)}
                 value={assessmentType}
               >
                 <MenuItem value={'pre'} style={{ textAlign: 'right' }}>

diff --git a/src/pages/assessments/user/[userId]/index.tsx b/src/pages/assessments/user/[userId]/index.tsx
@@ -286,6 +286,25 @@ function AssessmentsDetails() {
     return '';
   };
 
+  const handleAssessmentTypeChange = (newType: string) => {
+    setAssessmentType(newType);
+
+    // Create a new query object based on the current query
+    const queryParams = { ...router.query };
+
+    // Add or remove the 'type' query parameter based on the selected value
+    if (newType === 'post') queryParams.type = 'post';
+    else delete queryParams.type;
+
+    // Update the URL with the new query parameters without a full page reload
+    router.push({ pathname: router.pathname, query: queryParams }, undefined, { shallow: true });
+  };
+
+  // Sync the initial state with the query parameter
+  useEffect(() => {
+    setAssessmentType(router.query.type === 'post' ? 'post' : 'pre');
+  }, [router.query.type]);
+
   return (
     <>
       <Header />
@@ -331,9 +350,8 @@ function AssessmentsDetails() {
                 id="demo-simple-select"
                 label={t('ASSESSMENTS.ASSESSMENT_TYPE')}
                 style={{ borderRadius: '4px' }}
-                onChange={(e) => setAssessmentType(e.target.value)}
-                defaultValue={'pre'}
-                value={assessmentType}
+                onChange={(e) => handleAssessmentTypeChange(e.target.value)}
+                value={assessmentType} // Bind the select value to the state
               >
                 <MenuItem value={'pre'}>{t('PROFILE.PRE_TEST')}</MenuItem>
                 <MenuItem value={'post'}>{t('PROFILE.POST_TEST')}</MenuItem>