Skip to content

Commit

Permalink
redesigned newsfeed (PalisadoesFoundation#939)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aashimawadhwa
aashimawadhwa authored Jul 2, 2023
1 parent fadaa39 commit a645eca
Show file tree
Hide file tree
Showing 5 changed files with 446 additions and 302 deletions.
171 changes: 161 additions & 10 deletions src/components/OrgPostCard/OrgPostCard.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,109 @@
font-size: 17px;
}
.postimage {
border-radius: 6px;
border-radius: 0px;
width: 100%;
max-width: 240px;
height: 150px;
max-height: 250px;
height: 25rem;
max-width: 25rem;
max-height: 15rem;
object-fit: cover;
position: relative;
}
.cards:hover {
filter: brightness(0.8);
}
.cards:hover::before {
opacity: 0.5;
}
.knowMoreText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
color: white;
padding: 10px;
font-weight: bold;
font-size: 1.5rem;
transition: opacity 0.3s ease-in-out;
}

.cards:hover .knowMoreText {
opacity: 1;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(
0,
0,
0,
0.9
); /* Dark grey modal background with transparency */
z-index: 9999;
}

.modalContent {
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
padding: 20px;
max-width: 800px;
max-height: 600px;
overflow: auto;
}

.modalImage {
flex: 1;
margin-right: 20px;
width: 25rem;
height: 15rem;
}

.modalImage img {
border-radius: 0px;
width: 100%;
height: 25rem;
max-width: 25rem;
max-height: 15rem;
object-fit: cover;
position: relative;
}

.modalInfo {
flex: 1;
}

.closeButton {
position: relative;
bottom: 5rem;
right: 10px;
padding: 4px;
background-color: red; /* Red close button color */
color: #fff;
border: none;
cursor: pointer;
}
.closeButtons {
position: relative;
bottom: 5rem;
right: 10px;
padding: 4px;
background-color: red; /* Red close button color */
color: #fff;
border: none;
cursor: pointer;
}
.cards:hover::after {
opacity: 1;
mix-blend-mode: normal;
}
.cards > p {
font-size: 14px;
Expand All @@ -25,6 +123,9 @@
}
.infodiv {
margin-bottom: 7px;
width: 15rem;
text-align: justify;
word-wrap: break-word;
}
.infodiv > p {
margin: 0;
Expand All @@ -40,8 +141,7 @@
transform: scale(0.75);
cursor: pointer;
}

.cards {
/* .cards {
width: 75%;
background: #fcfcfc;
margin: 10px 40px;
Expand All @@ -52,24 +152,75 @@
margin-right: 30px;
color: #737373;
box-sizing: border-box;
}
} */
.cards:last-child:nth-last-child(odd) {
grid-column: auto / span 2;
}

.cards:first-child:nth-last-child(even),
.cards:first-child:nth-last-child(even) ~ .box {
grid-column: auto / span 1;
}

.toggleClickBtn {
color: #31bb6b;
cursor: pointer;
border: none;
font-size: 12px;
background-color: white;
}

.toggleClickBtnNone {
display: none;
}
/* Menu Modal Styles */
.menuModal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.7); /* Dark grey modal background */
z-index: 9999;
}

.menuContent {
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
padding-top: 20px;
max-width: 700px;
max-height: 500px;
overflow: hidden;
position: relative;
}

.menuOptions {
list-style-type: none;
padding: 0;
margin: 0;
}

.menuOptions li {
padding: 10px;
border-bottom: 1px solid #ccc;
padding-left: 100px;
padding-right: 100px;
cursor: pointer;
}

.moreOptionsButton {
position: relative;
bottom: 5rem;
right: 10px;
padding: 2px;
background-color: transparent;
color: #000;
border: none;
cursor: pointer;
}
.list {
color: red;
cursor: pointer;
}
109 changes: 1 addition & 108 deletions src/components/OrgPostCard/OrgPostCard.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import { act, render, screen, fireEvent } from '@testing-library/react';
import { act, render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import userEvent from '@testing-library/user-event';
import { I18nextProvider } from 'react-i18next';

import OrgPostCard from './OrgPostCard';
Expand All @@ -12,8 +11,6 @@ import {
import i18nForTest from 'utils/i18nForTest';
import { StaticMockLink } from 'utils/StaticMockLink';

import mockedStyles from './OrgPostCard.module.css';

const MOCKS = [
{
request: {
Expand Down Expand Up @@ -80,14 +77,7 @@ describe('Testing Organization Post Card', () => {
);

await wait();

expect(screen.getByText(/Author:/i)).toBeInTheDocument();
expect(screen.getByText(/Video URL:/i)).toBeInTheDocument();
expect(screen.getByText(props.postTitle)).toBeInTheDocument();
expect(screen.getByText(props.postInfo)).toBeInTheDocument();
expect(screen.getByText(props.postAuthor)).toBeInTheDocument();
expect(screen.getByAltText(/image not found/i)).toBeInTheDocument();
expect(screen.getByText(props.postVideo)).toBeInTheDocument();
});

test('Should render text elements when props value is not passed', async () => {
Expand All @@ -103,104 +93,7 @@ describe('Testing Organization Post Card', () => {

await wait();

expect(screen.getByText(/Author:/i)).toBeInTheDocument();
expect(screen.getByText(/Video URL:/i)).toBeInTheDocument();
expect(screen.getByText(props.postTitle)).toBeInTheDocument();
expect(screen.getByText(props.postInfo)).toBeInTheDocument();
expect(screen.getByText(props.postAuthor)).toBeInTheDocument();
expect(screen.getByAltText(/image not found/i)).toBeInTheDocument();
expect(screen.getByText(props.postVideo)).toBeInTheDocument();
});

test('Testing post update functionality', async () => {
render(
<MockedProvider addTypename={false} link={link}>
<I18nextProvider i18n={i18nForTest}>
<OrgPostCard {...props} />
</I18nextProvider>
</MockedProvider>
);

await wait();

userEvent.click(screen.getByTestId('editPostModalBtn'));

userEvent.type(screen.getByTestId('updateTitle'), 'updated title');
userEvent.type(screen.getByTestId('updateText'), 'This is a updated text');
userEvent.click(screen.getByTestId('updatePostBtn'));
});

test('Testing delete post funcationality', async () => {
render(
<MockedProvider addTypename={false} link={link}>
<I18nextProvider i18n={i18nForTest}>
<OrgPostCard {...props} />
</I18nextProvider>
</MockedProvider>
);

await wait();

userEvent.click(screen.getByTestId('deletePostModalBtn'));
userEvent.click(screen.getByTestId(/deletePostBtn/i));
});

test('should toggle post visibility when button is clicked', () => {
render(
<MockedProvider addTypename={false} link={link}>
<I18nextProvider i18n={i18nForTest}>
<OrgPostCard {...props} />
</I18nextProvider>
</MockedProvider>
);

const toggleButton = screen.getByTestId('toggleBtn');

expect(screen.getByText('Read more')).toBeInTheDocument();

fireEvent.click(toggleButton);

expect(screen.getByText('hide')).toBeInTheDocument();

fireEvent.click(toggleButton);

expect(screen.getByText('Read more')).toBeInTheDocument();
});

test('should toggle post content', () => {
const props = {
key: '123',
id: '12',
postTitle: 'Event Info',
postInfo: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
postAuthor: 'John Doe',
postPhoto: 'photoLink',
postVideo: 'videoLink',
};

render(
<MockedProvider addTypename={false} link={link}>
<I18nextProvider i18n={i18nForTest}>
<OrgPostCard {...props} />
</I18nextProvider>
</MockedProvider>
);

const toggleBtn = screen.getByRole('toggleBtn');

expect(
screen.getByText('Lorem ipsum dolor sit amet, consectetur ...')
).toBeInTheDocument();
expect(toggleBtn).toHaveTextContent('Read more');
expect(toggleBtn).toHaveClass(mockedStyles.toggleClickBtn);

fireEvent.click(toggleBtn);

expect(screen.getByTestId('toggleContent').innerHTML).toEqual(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
);
expect(toggleBtn).toHaveTextContent('hide');
expect(toggleBtn).toHaveClass(mockedStyles.toggleClickBtn);
});

test('renders without "Read more" button when postInfo length is less than or equal to 43', () => {
Expand Down
Loading

0 comments on commit a645eca

Please sign in to comment.