fixing get material by duplicate name topic

src/roles/user/material/hooks/useMaterials.jsx

@@ -6,12 +6,21 @@ const useMaterials = (section, topic, level) => {
   const [materials, setMaterial] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const { topicSlugMap } = useSlugContext();
+  const { sectionSlugMap, topicSlugMap, groupSlugMap } = useSlugContext();
 
   useEffect(() => {
     const fetchData = async () => {
         try {
-            const data = await materialService.fetchMaterials(topicSlugMap[topic], level);
+            const secId = sectionSlugMap[section]; 
+            const findTopic = groupSlugMap[secId].find(
+              (item) => item.nametopic === topic
+            );
+
+            // console.log('slug', topicSlugMap[topic]);
+            // console.log('find', findTopic.idtopic);
+
+            // const data = await materialService.fetchMaterials(topicSlugMap[topic], level);
+            const data = await materialService.fetchMaterials(findTopic.idtopic, level);
             setMaterial(data[0]);
         } catch (err) {
             setError(err);

src/utils/SlugContext.jsx

@@ -15,8 +15,12 @@ const config = {
 export const SlugProvider = ({ children, logout }) => {
     const [sectionSlugMap, setSectionSlugMap] = useState({});
     const [topicSlugMap, setTopicSlugMap] = useState({});
+    const [groupSlugMap, setGroupSlugMap] = useState({});
     const [loading, setLoading] = useState(true);
 
+    const [sectionSuccess, setSectionSuccess] = useState(false);
+    const [topicSuccess, setTopicSuccess] = useState(false);
+
     const fetchData = async () => {
       try {
           const sectionMapping = {};
@@ -27,6 +31,7 @@ export const SlugProvider = ({ children, logout }) => {
               sectionMapping[slug] = section.ID_SECTION;
           });
           setSectionSlugMap(sectionMapping);
+          setSectionSuccess(true);
       } catch (error) {
         if (error.status === 403 || error.status === 401) {
           logout();
@@ -43,6 +48,30 @@ export const SlugProvider = ({ children, logout }) => {
                 topicMapping[slug] = topic.ID_TOPIC;
             });
             setTopicSlugMap(topicMapping);
+            setTopicSuccess(true);
+        } catch (error) {
+          if (error.status === 403 || error.status === 401) {
+            logout();
+          }else{
+            console.error('Error fetching section', error);
+            setLoading(false);
+          }
+        } finally{
+          try{
+              const groupMapping = {};
+              const topicResponse = await axiosInstance.get(`/topic`);
+              topicResponse.data.payload.forEach((topic) => {
+                  // const slug = slugify(topic.NAME_TOPIC);
+                  // groupMapping[slug] = topic.ID_TOPIC;
+
+                  if (!groupMapping[topic.ID_SECTION]) {
+                    groupMapping[topic.ID_SECTION] = [];
+                  }
+                  const idtopic = topic.ID_TOPIC;
+                  const nametopic = slugify(topic.NAME_TOPIC);
+                  groupMapping[topic.ID_SECTION].push({ idtopic, nametopic });
+              });
+              setGroupSlugMap(groupMapping);
           } catch (error) {
             if (error.status === 403 || error.status === 401) {
               logout();
@@ -54,6 +83,7 @@ export const SlugProvider = ({ children, logout }) => {
               setLoading(false);
           }
         }
+      }
     };
 
   useEffect(() => {
@@ -65,7 +95,7 @@ export const SlugProvider = ({ children, logout }) => {
   }
 
   return (
-    <SlugContext.Provider value={{ sectionSlugMap, topicSlugMap }}>
+    <SlugContext.Provider value={{ sectionSlugMap, topicSlugMap, groupSlugMap }}>
       {children}
     </SlugContext.Provider>
   );