chore/uni-270-desc-and-tnc-fix (#279)

* feat: update devsoc branding references (#260) * chore(landing): update landing meta description * Update README.md * fixed truncated descriptions * deleted some useless code * Fixed some eedge cases and added comments * reverted some old changes regarding fetching reviews * Merge Develop To Main (#289) * fix: added schema (#285) Added Offers and hasCourseInstance schema to the metadata of courses Schema Docs: https://developers.google.com/search/docs/appearance/structured-data/course-info#structured-data-type-definitions * fix: UNI-278 add else branch in getInitialDisplayCourses to reset search bar state (#284) --------- Co-authored-by: 3syth <[email protected]> Co-authored-by: Adrian Balbalosa <[email protected]> * Fixed bug of review card showing another review's description * removed inline from review desc --------- Co-authored-by: Bob Chen <[email protected]> Co-authored-by: Jared L <[email protected]> Co-authored-by: Dylan W <[email protected]> Co-authored-by: eaglethrost <[email protected]> Co-authored-by: Dimas Putra Anugerah <[email protected]> Co-authored-by: 3syth <[email protected]> Co-authored-by: Adrian Balbalosa <[email protected]>
devsoc-unsw · May 13, 2024 · 4f9eaa2 · 4f9eaa2
1 parent ca55f1d
commit 4f9eaa2
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 16 deletions.
diff --git a/frontend/src/app/terms-and-conditions/page.tsx b/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>

diff --git a/frontend/src/components/TruncatedDescription/TruncatedDescription.tsx b/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>
   );
 }