Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#300 load more information on profile page #303

Merged
merged 4 commits into from
Nov 15, 2023
Merged

#300 load more information on profile page #303

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
393c736
readmore updated with antd
Lvyshnevska Nov 13, 2023
3ff890d
bug fixed
Lvyshnevska Nov 13, 2023
45f82c8
fragment removed
Lvyshnevska Nov 15, 2023
77af5a3
ellipsis parameters moved to contsant
Lvyshnevska Nov 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 27 additions & 13 deletions FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 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}>
читати далі
</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
<>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to add a fragment if there is only one element

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed

<Paragraph
className={classes['read-more']}
onClick={toggleReadMore}
ellipsis={
ellipsis
? {
rows: 6,
expandable: true,
symbol: ellipsisSymbol,
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we move it to constant with a meaningful name?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we do it if it is Ant Design component and its structure?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

: false
}
>
{text}
</Paragraph>
</>
);
};

Expand Down
2 changes: 1 addition & 1 deletion FrontEnd/src/components/ProfileDetail/DetailedInfo/ReadMore.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.read-or-hide {
.read-more-symbol {
color: var(--primary-green-80, #1F9A7C);
font-feature-settings: 'calt' off;
font-family: Inter;
Expand Down
4 changes: 2 additions & 2 deletions FrontEnd/src/components/ProfileDetail/ProfileDetailPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we use isAuthorized in the component? If no could we remove it?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's passed to child components

const authToken = localStorage.getItem('Token');
if (authToken) {
headers.Authorization = `Token ${authToken}`;
}
return fetch(url, {
Expand Down
Loading