From 0dea861a42c1fd31ed352369e708713d92b2c6ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Or=C4=99ziak?= <micorix.dev@gmail.com>
Date: Sun, 14 May 2023 22:22:08 +0200
Subject: [PATCH] Trim school description in overview section (#12)

---
 .../schoolInfoSections/OverviewSection.tsx    | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/app/SchoolPage/schoolInfoSections/OverviewSection.tsx b/src/components/app/SchoolPage/schoolInfoSections/OverviewSection.tsx
index a73a6a2..4523010 100644
--- a/src/components/app/SchoolPage/schoolInfoSections/OverviewSection.tsx
+++ b/src/components/app/SchoolPage/schoolInfoSections/OverviewSection.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import dynamic from 'next/dynamic';
 import { MdHome } from '@react-icons/all-files/md/MdHome';
 import { MdLink } from '@react-icons/all-files/md/MdLink';
@@ -29,13 +29,32 @@ const ItemWithIcon: FC<ItemWithIconProps> = ({ children, icon: Icon }) => (
   </span>
 );
 
-const SchoolDescription = ({ description }) => {
+interface SchoolDescriptionProps {
+  description: string;
+}
+const SchoolDescription: FC<SchoolDescriptionProps> = ({ description }) => {
+  const [isWholeContentVisible, setIsWholeContentVisible] = useState(false);
+  const shouldTrim = description.length > 200;
+  const content =
+    isWholeContentVisible || !shouldTrim ? description : `${description.slice(0, 200)}...`;
+  const buttonText = isWholeContentVisible ? 'Pokaż mniej' : 'Pokaż więcej';
+
   return (
     <div className="border-t border-light py-2 px-5">
       <h4 className="text-dark text-base font-semibold">O szkole</h4>
       <div className="my-2 mx-auto prose max-w-none">
-        <ReactMarkdown>{description}</ReactMarkdown>
+        <ReactMarkdown>{content}</ReactMarkdown>
       </div>
+      {shouldTrim && (
+        <div>
+          <button
+            className="underline hover:text-gray-700"
+            onClick={() => setIsWholeContentVisible((v) => !v)}
+          >
+            {buttonText}
+          </button>
+        </div>
+      )}
     </div>
   );
 };
@@ -92,7 +111,9 @@ const OverviewSection: FC<SectionComponentProps> = ({ school }) => {
           </div>
         </div>
       </div>
-      {school.description && <SchoolDescription description={school.description} />}
+      {school.description && school.description.trim().length > 0 && (
+        <SchoolDescription description={school.description.trim()} />
+      )}
     </SchoolInfoSection>
   );
 };