From 4f9eaa2863a0164e16b332c140d655eb753e38fd Mon Sep 17 00:00:00 2001
From: Maximilian Falco Widjaya
 <97402501+maximilianfalco@users.noreply.github.com>
Date: Mon, 13 May 2024 18:07:36 +1000
Subject: [PATCH] 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 <120223314+3syth@users.noreply.github.com>
Co-authored-by: Adrian Balbalosa <87012111+adrianbalbs@users.noreply.github.com>

* Fixed bug of review card showing another review's description

* removed inline from review desc

---------

Co-authored-by: Bob Chen <83627389+3bobchen@users.noreply.github.com>
Co-authored-by: Jared L <48422312+lhjt@users.noreply.github.com>
Co-authored-by: Dylan W <119717655+dylanwz@users.noreply.github.com>
Co-authored-by: eaglethrost <dimazanugrah12@gmail.com>
Co-authored-by: Dimas Putra Anugerah <63914983+eaglethrost@users.noreply.github.com>
Co-authored-by: 3syth <120223314+3syth@users.noreply.github.com>
Co-authored-by: Adrian Balbalosa <87012111+adrianbalbs@users.noreply.github.com>
---
 .../src/app/terms-and-conditions/page.tsx     |  2 +-
 .../TruncatedDescription.tsx                  | 67 ++++++++++++++-----
 2 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/terms-and-conditions/page.tsx b/frontend/src/app/terms-and-conditions/page.tsx
index 065947c30..d6381f6ca 100644
--- 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
index 0e2ea920d..e08fa3074 100644
--- 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>
   );
 }