Merge pull request #303 from ita-social-projects/#300-LoadMoreInforma…

…tionOnProfilePage #300 load more information on profile page
ita-social-projects · Nov 15, 2023 · c12c12b · c12c12b
2 parents 3e7bc69 + 77af5a3
commit c12c12b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 16 deletions.
diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.jsx b/FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.jsx
@@ -1,28 +1,42 @@
 import { useState } from 'react';
+import { Typography } from 'antd';
 import { PropTypes } from 'prop-types';
 import classes from './ReadMore.module.css';
 
+const { Paragraph } = Typography;
+
+const ELLIPSIS_PARAMETERS = {
+  rows: 6,
+  expandable: true,
+  symbol: 'читати далі',
+};
+
 const ReadMore = ({ children }) => {
   const text = children;
-  const [readMore, setReadMore] = useState(false);
+  const [ellipsis, setEllipsis] = useState(true);
 
   const toggleReadMore = () => {
-    setReadMore(!readMore);
+    setEllipsis(!ellipsis);
   };
-  const maxTextLength = 150;
 
-  const displayText = text && (readMore || text.length <= maxTextLength ? text : `${text.slice(0, maxTextLength)}...`);
+  const ellipsisSymbol = ellipsis ? (
+    <span className={classes['read-more-symbol']} onClick={toggleReadMore}>
+    {ELLIPSIS_PARAMETERS.symbol}
+    </span>
+  ) : null;
 
   return (
-    text ? (
-    <p className={classes['read-more']}>
-        {displayText}
-        {text.length > maxTextLength && (
-          <span onClick={toggleReadMore} className={classes['read-or-hide']}>
-            {!readMore ? 'читати далі' : 'приховати'}
-          </span>
-      )}
-    </p>) : null
+    <Paragraph
+      className={classes['read-more']}
+      onClick={toggleReadMore}
+      ellipsis={
+        ellipsis
+          ? { ...ELLIPSIS_PARAMETERS, symbol: ellipsisSymbol }
+          : false
+      }
+    >
+      {text}
+    </Paragraph>
   );
 };
 

diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.module.css b/FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.module.css
@@ -1,4 +1,4 @@
-.read-or-hide {
+.read-more-symbol {
     color: var(--primary-green-80, #1F9A7C);
     font-feature-settings: 'calt' off;
     font-family: Inter;

diff --git a/FrontEnd/src/components/ProfileDetail/ProfileDetailPage.jsx b/FrontEnd/src/components/ProfileDetail/ProfileDetailPage.jsx
@@ -10,15 +10,15 @@ import BannerImage from './BannerImage';
 import classes from './ProfileDetailPage.module.css';
 
 function ProfileDetailPage({ isAuthorized }) {
+  const authToken = localStorage.getItem('Token');
   const { id } = useParams();
   const urlProfile = `${process.env.REACT_APP_BASE_API_URL}/api/profiles/${id}`;
 
   async function fetcher(url) {
     const headers = {
       'Content-Type': 'application/json',
     };
-    if (isAuthorized) {
-      const authToken = localStorage.getItem('Token');
+    if (authToken) {
       headers.Authorization = `Token ${authToken}`;
     }
     return fetch(url, {