diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.jsx b/FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.jsx index 90577d1f7..9bcf780a5 100644 --- 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 ? ( + + {ELLIPSIS_PARAMETERS.symbol} + + ) : null; return ( - text ? ( -

- {displayText} - {text.length > maxTextLength && ( - - {!readMore ? 'читати далі' : 'приховати'} - - )} -

) : null + + {text} + ); }; diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.module.css b/FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.module.css index 32bcec138..c0a33aeb5 100644 --- 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 index d931e2f92..7608825c4 100644 --- a/FrontEnd/src/components/ProfileDetail/ProfileDetailPage.jsx +++ b/FrontEnd/src/components/ProfileDetail/ProfileDetailPage.jsx @@ -10,6 +10,7 @@ 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}`; @@ -17,8 +18,7 @@ function ProfileDetailPage({ isAuthorized }) { const headers = { 'Content-Type': 'application/json', }; - if (isAuthorized) { - const authToken = localStorage.getItem('Token'); + if (authToken) { headers.Authorization = `Token ${authToken}`; } return fetch(url, {