fix: truncated reviews and t&c

frontend/src/app/page.tsx

@@ -42,7 +42,20 @@ export default async function Home() {
           ratingValue: course.reviewCount === 0 ? 0 : course.overallRating,
           bestRating: 5,
         },
-      },
+        offers: [{
+          "@type": "Offer",
+          category: "Paid"
+        }],
+        hasCourseInstance: course.terms.map((term: number) => ({
+          "@type": "CourseInstance",
+          courseMode: "Blended",
+          courseSchedule: {
+            "@type": "Schedule",
+            repeatCount: term === 0 ? 5 : 10,
+            repeatFrequency: "Weekly",
+          }
+        }))
+      }
     })),
   };
 

frontend/src/app/terms-and-conditions/page.tsx

@@ -7,7 +7,7 @@ export const metadata: Metadata = {
 
 export default function TermsAndConditions() {
   return (
-    <div className="p-20 xs:m-12 sm:m-12 xs:text-xs sm:text-sm">
+    <div className="p-20 sm:p-10 xs:text-xs sm:text-sm">
       <h1 className="text-lg font-bold">Terms and Conditions</h1>
       <br />
       <p>

frontend/src/components/CoursesList/CoursesList.tsx

@@ -32,7 +32,7 @@ export default function CoursesList({
         // default courses
         try {
           const { courses } = (await get(
-            `/courses?offset=${index}`
+            `/courses?offset=${index}`,
           )) as Courses;
           fetchedCourses = courses;
         } catch (err) {
@@ -71,7 +71,7 @@ export default function CoursesList({
     const getSearchResults = async () => {
       try {
         const { courses } = (await get(
-          `/course/search/${searchTerm}`
+          `/course/search/${searchTerm}`,
         )) as Courses;
         searchCoursesRef.current = courses;
       } catch (err) {
@@ -84,6 +84,9 @@ export default function CoursesList({
     const getInitialDisplayCourses = () => {
       if (searchTerm !== "") {
         getSearchResults();
+      } else {
+        setDisplayCourses(initialCourses.slice(0, paginationOffset));
+        setInitialLoading(false);
       }
     };
     const loadOnScroll = () => {
@@ -119,7 +122,7 @@ export default function CoursesList({
                 terms={c.terms}
               />
             </a>
-          )
+          ),
         )}
         {!initialLoading ? (
           <p className="text-center opacity-50">No more courses</p>

frontend/src/components/TruncatedDescription/TruncatedDescription.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function TruncatedDescription({
   content,
@@ -9,26 +9,63 @@ export default function TruncatedDescription({
   content: string;
   maxCharacters: number;
 }) {
+
   const [showFullContent, setShowFullContent] = useState(false);
+  const [exceed, setExceed] = useState(false);
+  const [shortenedContent, setShortenedContent] = useState(" ");
 
-  const shortenedContent =
-    content.length < maxCharacters
-      ? content
-      : `${content.slice(0, maxCharacters)}...`;
+  /**
+   * If the content exceeds the maxCharacters, find the next whitespace
+   * and make the cutoff point there so the break does not happen mid-word
+   * 
+   * If the new cutoff point is the end of the entire content, make it so
+   * the See More/Less button does not appear
+   */
+  useEffect(() => {
+    if (content.length > maxCharacters) {
+      // Description exceeds max characters
+      setShowFullContent(false);
+      let newMax = maxCharacters;
+      let index = newMax - 1;
+      while (true) {
+        if (content[index] === ' ' || index === content.length) {
+          newMax = index;
+          break;
+        }
+        newMax++;
+        index++;
+      }
+      if (index === content.length) {
+        setShortenedContent(content);
+      } else {
+        setExceed(true);
+        setShortenedContent(content.slice(0, newMax) + '...');
+      }
+    } else {
+      // Description length is less than maxCharacters
+      setShowFullContent(true);
+      setExceed(false);
+      setShortenedContent(content);
+    }
+  }, [content])
 
   return (
     <div>
-      <p className="whitespace-pre-line break-all inline">
-        {showFullContent ? content : shortenedContent}{" "}
+      <p className="whitespace-pre-line text-justify">
+        {showFullContent ? content : shortenedContent}
       </p>
-      {content.length > maxCharacters && (
-        <button
-          className="text-unilectives-blue hover:underline"
-          onClick={() => setShowFullContent((prev) => !prev)}
-        >
-          {showFullContent ? "See Less" : "See More"}
-        </button>
-      )}
+      <div className="mt-1">
+        {exceed && 
+          (
+            <button
+              className="text-unilectives-blue hover:underline"
+              onClick={() => setShowFullContent((prev) => !prev)}
+            >
+              {showFullContent ? "See Less" : "See More"}
+            </button>
+          )
+        }
+      </div>
     </div>
   );
 }