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

Fixed #1266 Bug Report When a new post is added, the latest pos… #1324

Closed
wants to merge 10 commits into from
Closed

Fixed #1266 Bug Report When a new post is added, the latest pos… #1324

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d48c001
Fixed-Issue-#1266 Bug Report When a new post is added, the latest pos…
gauravsingh94 Dec 30, 2023
e2d895a
Fixed-Issue-#1266 Bug Report When a new post is added, the latest pos…
gauravsingh94 Jan 3, 2024
d3642ed
Fixed-Issue-#1266 Bug Report When a new post is added, the latest pos…
gauravsingh94 Jan 3, 2024
afdbb44
Fixed-Issue-#1266 Bug Report When a new post is added, the latest pos…
gauravsingh94 Jan 5, 2024
1f2553a
Fixed-Issue-#1266 Bug Report When a new post is added, the latest pos…
gauravsingh94 Jan 5, 2024
5945392
Fixed-Issue-#1266 Bug Report When a new post is added, the latest pos…
gauravsingh94 Jan 5, 2024
702cbe0
Fixed-Issue-#1266 Bug Report When a new post is added, the latest pos…
gauravsingh94 Jan 5, 2024
dd36013
Fixed-Issue-#1266 Bug Report When a new post is added, the latest pos…
gauravsingh94 Jan 7, 2024
e9f9b12
Fixed-Issue-#1266 Bug Report When a new post is added, the latest pos…
gauravsingh94 Jan 8, 2024
c470cfb
Fixed-Issue-#1266 Bug Report When a new post is added, the latest pos…
gauravsingh94 Jan 10, 2024
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
39 changes: 29 additions & 10 deletions src/components/OrganizationDashCards/CardItem.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,20 @@
position: relative;
display: flex;
align-items: center;
padding: 0.75rem 0;
background-color: #f1f3f68f;
border-radius: 8px;
padding: 15px;
margin-top: 20px;
}

.cardItem .iconWrapper {
position: relative;
height: 40px;
width: 40px;
height: 52px;
width: 52px;
display: flex;
justify-content: center;
align-items: center;
/* margin-right: 18px; */
}

.cardItem .iconWrapper .themeOverlay {
Expand All @@ -22,7 +26,8 @@
bottom: 0;
left: 0;
opacity: 0.12;
border-radius: 50%;
border-radius: 4px;
/* margin-right: 18px; */
rishav-jha-mech marked this conversation as resolved.
Show resolved Hide resolved
}

.cardItem .iconWrapper .dangerOverlay {
Expand All @@ -33,22 +38,30 @@
bottom: 0;
left: 0;
opacity: 0.12;
border-radius: 50%;
border-radius: 4px;
}

.cardItem .title {
font-size: 1rem;
font-size: 15px;
font-weight: 600;
flex: 1;
margin-right: 0.3rem;
word-wrap: break-word;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

.cardItem .time {
font-size: 0.9rem;
color: var(--bs-secondary);
font-size: 0.8rem;
font-weight: 300;
color: #808080;
Copy link
Contributor

Choose a reason for hiding this comment

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

Don't use hardcoded values, use css variables from bootstrap

}

.cardItem .creator {
font-size: 1rem;
color: rgb(33, 208, 21);
font-size: 0.8rem;
color: black;
Copy link
Contributor

Choose a reason for hiding this comment

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

Here also

}

.rightCard {
Expand All @@ -58,3 +71,9 @@
justify-content: center;
flex-direction: column;
}

.content {
display: flex;
flex-direction: column;
max-width: 85%;
}
4 changes: 2 additions & 2 deletions src/components/OrganizationDashCards/CardItem.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe('Testing the Organization Card', () => {

expect(screen.getByText(/Event Title/i)).toBeInTheDocument();
expect(
screen.getByText(dayjs(props.time).format('MMM D, YYYY'))
screen.getByText(dayjs(props.time).format('D MMM YYYY'))
).toBeInTheDocument();
expect(screen.getByText(/Event Location/i)).toBeInTheDocument();
});
Expand All @@ -40,7 +40,7 @@ describe('Testing the Organization Card', () => {

expect(screen.getByText(/Post Title/i)).toBeInTheDocument();
expect(
screen.getByText(dayjs(props.time).format('MMM D, YYYY'))
screen.getByText(dayjs(props.time).format('D MMM YYYY'))
).toBeInTheDocument();
expect(screen.getByText(/John Doe/i)).toBeInTheDocument();
});
Expand Down
67 changes: 27 additions & 40 deletions src/components/OrganizationDashCards/CardItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import React from 'react';
import { ReactComponent as EventsIcon } from 'assets/svgs/events.svg';
import { ReactComponent as PostsIcon } from 'assets/svgs/post.svg';
import { ReactComponent as MarkerIcon } from 'assets/svgs/location.svg';
import { ReactComponent as DateIcon } from 'assets/svgs/date.svg';
import { ReactComponent as UserIcon } from 'assets/svgs/user.svg';
import dayjs from 'dayjs';
import styles from './CardItem.module.css';
import { PersonAddAlt1Rounded } from '@mui/icons-material';
Expand Down Expand Up @@ -37,48 +35,37 @@ const cardItem = (props: InterfaceCardItem): JSX.Element => {
)
)}
</div>
<span className={styles.title}>{`${title}`}</span>
<div className={styles.content}>
<span className={styles.title}>{`${title}`}</span>

<div className={styles.rightCard}>
{creator && (
<small className={styles.creator}>
<UserIcon
title="Post Creator"
fill="var(--bs-primary)"
width={20}
height={20}
/>{' '}
{' '}
<a>
{creator.firstName} {creator.lastName}
</a>
</small>
)}
<div className={styles.rightCard}>
{time && (
<span className={styles.time}>
<span>Posted on: </span>
{dayjs(time).format('D MMM YYYY')}
</span>
)}
{creator && (
<small className={styles.creator}>
<span>Author: </span>
<a>
{creator.firstName} {creator.lastName}
</a>
</small>
)}

{location && (
<span className={styles.location}>
<MarkerIcon
title="Event Location"
fill="var(--bs-primary)"
width={20}
height={20}
/>{' '}
{location}
</span>
)}
{time && (
<span className={styles.time}>
{type === 'Event' && (
<DateIcon
title="Event Date"
fill="#4cd964"
{location && (
<span className={styles.location}>
<MarkerIcon
title="Event Location"
fill="var(--bs-primary)"
width={20}
height={20}
/>
)}{' '}
{dayjs(time).format('MMM D, YYYY')}
</span>
)}
/>{' '}
{location}
</span>
)}
</div>
</div>
</div>
</>
Expand Down
3 changes: 3 additions & 0 deletions src/screens/OrganizationDashboard/OrganizationDashboard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,6 @@
justify-content: center;
align-items: center;
}
.BottomRow {
margin-top: 45px;
}
172 changes: 85 additions & 87 deletions src/screens/OrganizationDashboard/OrganizationDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,93 +210,6 @@
</Col>
</Row>
)}
<Row>
<Col lg={6} className="mb-4">
<Card border="0" className="rounded-4">
<div className={styles.cardHeader}>
<div className={styles.cardTitle}>
{t('upcomingEvents')}
</div>
<Button
size="sm"
variant="light"
data-testid="viewAllEvents"
onClick={(): void => history.push(eventsLink)}
>
{t('viewAll')}
</Button>
</div>
<Card.Body className={styles.cardBody}>
{loadingEvent ? (
[...Array(4)].map((_, index) => {
return <CardItemLoading key={index} />;
})
) : upcomingEvents.length == 0 ? (
<div className={styles.emptyContainer}>
<h6>{t('noUpcomingEvents')}</h6>
</div>
) : (
upcomingEvents.map(
(event: InterfaceQueryOrganizationEventListItem) => {
return (
<CardItem
type="Event"
key={event._id}
time={event.startDate}
title={event.title}
location={event.location}
/>
);
}
)
)}
</Card.Body>
</Card>
</Col>
<Col lg={6} className="mb-4">
<Card border="0" className="rounded-4">
<div className={styles.cardHeader}>
<div className={styles.cardTitle}>{t('latestPosts')}</div>
<Button
size="sm"
variant="light"
data-testid="viewAllPosts"
onClick={(): void => history.push(postsLink)}
>
{t('viewAll')}
</Button>
</div>
<Card.Body className={styles.cardBody}>
{loadingPost ? (
[...Array(4)].map((_, index) => {
return <CardItemLoading key={index} />;
})
) : postData?.postsByOrganizationConnection.edges.length ==
0 ? (
/* eslint-disable */
<div className={styles.emptyContainer}>
<h6>{t('noPostsPresent')}</h6>
</div>
) : (
/* eslint-enable */
postData?.postsByOrganizationConnection.edges
.slice(0, 5)
.map((post: any) => {
return (
<CardItem
type="Post"
key={post._id}
title={post.title}
time={post.createdAt}
creator={post.creator}
/>
);
})
)}
</Card.Body>
</Card>
</Col>
</Row>
</Col>
<Col xl={4}>
<Card border="0" className="rounded-4">
Expand Down Expand Up @@ -341,6 +254,91 @@
</Card>
</Col>
</Row>
<Row className={styles.BottomRow}>
<Col lg={6} className="mb-4">
<Card border="0" className="rounded-4">
<div className={styles.cardHeader}>
<div className={styles.cardTitle}>{t('upcomingEvents')}</div>
<Button
size="sm"
variant="light"
data-testid="viewAllEvents"
onClick={(): void => history.push(eventsLink)}
>
{t('viewAll')}
</Button>
</div>
<Card.Body className={styles.cardBody}>
{loadingEvent ? (
[...Array(4)].map((_, index) => {
return <CardItemLoading key={index} />;
})
) : upcomingEvents.length == 0 ? (
<div className={styles.emptyContainer}>
<h6>{t('noUpcomingEvents')}</h6>
</div>
) : (
upcomingEvents.map(
(event: InterfaceQueryOrganizationEventListItem) => {
return (

Check warning on line 283 in src/screens/OrganizationDashboard/OrganizationDashboard.tsx

View check run for this annotation

Codecov / codecov/patch

src/screens/OrganizationDashboard/OrganizationDashboard.tsx#L281-L283 

Added lines #L281 - L283 were not covered by tests
<CardItem
type="Event"
key={event._id}
time={event.startDate}
title={event.title}
location={event.location}
/>
);
}
)
)}
</Card.Body>
</Card>
</Col>
<Col lg={6} className="mb-4">
<Card border="0" className="rounded-4">
<div className={styles.cardHeader}>
<div className={styles.cardTitle}>{t('latestPosts')}</div>
<Button
size="sm"
variant="light"
data-testid="viewAllPosts"
onClick={(): void => history.push(postsLink)}
>
{t('viewAll')}
</Button>
</div>
<Card.Body className={styles.cardBody}>
{loadingPost ? (
[...Array(4)].map((_, index) => {
return <CardItemLoading key={index} />;
})
) : postData?.postsByOrganizationConnection.edges.length ==
0 ? (
/* eslint-disable */
<div className={styles.emptyContainer}>
<h6>{t('noPostsPresent')}</h6>
</div>
) : (
/* eslint-enable */
postData?.postsByOrganizationConnection.edges
.slice(0, 5)
.map((post: any) => {
return (
<CardItem
type="Post"
key={post._id}
title={post.title}
time={post.createdAt}
creator={post.creator}
/>
);
})
)}
</Card.Body>
</Card>
</Col>
</Row>
</OrganizationScreen>
</>
);
Expand Down