Merge pull request #41 from incubyte/feature-LP-58-defaultTagInUpdate…

…Course Feature lp 58 default tag in update course
incubyte · Jul 3, 2023 · cd6b744 · cd6b744
2 parents d06818b + 25cd792
commit cd6b744
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 30 deletions.
diff --git a/admin/src/components/course/UpdateCourse.tsx b/admin/src/components/course/UpdateCourse.tsx
@@ -17,10 +17,33 @@ const UpdateCourse = () => {
   const [defaultTags, setDefaultTags] = useState([]);
   const [resourseUrls, setResourseUrls] = useState<string[]>([]);
   const [testUrls, setTestUrls] = useState<string[]>([]);
+  const [displaySelectedTags, setDisplaySelectedTags] = useState();
   const [imageUrl, setImageUrl] = useState("");
   const authToken = localStorage.getItem("authToken");
   const location = useLocation();
   const courseData = location.state;
+  const courseId = courseData.id;
+
+  const fetchSelectedTags = async () => {
+    const response = await fetch(
+      `https://backend-mu-plum.vercel.app/course/getTagsByCourseId/${courseId}`,
+      {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+        },
+      }
+    );
+    if (response && response.ok) {
+      const tagsResponse = await response.json();
+      setDisplaySelectedTags(tagsResponse);
+      const tagIds = tagsResponse.map((tag: any) => tag.id);
+      setTags(tagIds);
+    }
+  };
+
+  useEffect(() => {
+    fetchSelectedTags();
+  }, []);
 
   const changeAvatar = (e: any) => {
     const file = e.target.files[0];
@@ -81,6 +104,7 @@ const UpdateCourse = () => {
         }),
       }
     );
+
     if (response.ok) {
       const jsonResnponse = await response.json();
       setCreateCourse(jsonResnponse);
@@ -273,10 +297,12 @@ const UpdateCourse = () => {
             <label className="text-md font-bold">Tags</label>
             <Multiselect
               options={data.options}
+              selectedValues={displaySelectedTags}
+              data-testid="multiSelectInput"
               className="mt-2"
               displayValue="name"
               onSelect={(selectedOptions) => {
-                const updatedTagsIds: any = [...tags];
+                const updatedTagsIds: any = tags;
                 selectedOptions.forEach((option: any) => {
                   if (!updatedTagsIds.includes(option.id)) {
                     updatedTagsIds.push(option.id);
@@ -286,17 +312,11 @@ const UpdateCourse = () => {
               }}
               onRemove={(removedOptions) => {
                 const removedTagsIds = removedOptions.map(
-                  (removedTag: { id: any }) => removedTag.id
-                );
-                const updatedTags = tags.filter((tag) =>
-                  removedTagsIds.includes(tag)
+                  (removedTag: { id: number }) => removedTag.id
                 );
-                setTags(updatedTags);
+                setTags(removedTagsIds);
               }}
             />
-            <p className="text-xsm text-red-600">
-              NOTE: Please Select all the tags dedicated to the course.
-            </p>
           </div>
           <div className="form-group mt-3 justify-between">
             <label className="text-md font-bold">Resource URLs</label>

diff --git a/frontend/src/components/courseDetails/CourseDetails.tsx b/frontend/src/components/courseDetails/CourseDetails.tsx
@@ -159,29 +159,10 @@ const CourseDetails = () => {
     }
   };
 
-  const fetchTags = async () => {
-    try {
-      const response = await fetch("https://backend-mu-plum.vercel.app/tag/", {
-        headers: {
-          Authorization: `Bearer ${authToken}`,
-        },
-      });
-      if (response.ok) {
-        const tagsResponse = await response.json();
-        setTags(tagsResponse);
-      }
-    } catch (error) {
-      toast.error("An error occurred" + error, {
-        autoClose: 2500,
-        closeButton: false,
-      });
-    }
-  };
-
   const fetchData = async () => {
     setIsLoading(true);
 
-    await Promise.all([fetchCourse(), fetchTags(), fetchCourseStatus()]);
+    await Promise.all([fetchCourse(), fetchCourseStatus(), fetchCourseTag()]);
     setIsLoading(false);
   };
 
@@ -216,7 +197,9 @@ const CourseDetails = () => {
           </div>
           <div data-testid="courseTags" className="courseTagsDiv">
             {tags.map((tag, index) => (
-              <button key={index} className="courseTags"></button>
+              <button key={index} className="courseTags">
+                {tag.name}
+              </button>
             ))}
           </div>
           <div className="courseDescriptionContainer">