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

[gauravsingh94]

…t section in the organization's dashboard becomes distorted.

What kind of change does this PR introduce?

Issue Number:

Fixes #1266

Did you add tests for your changes?

Snapshots/Videos:

Screencast.from.2023-12-30.20-10-30.webm

If relevant, did you update the documentation?

Summary

Does this PR introduce a breaking change?

Other information

Have you read the contributing guide?

[github-actions]

Our Pull Request Approval Process

We have these basic policies to make the approval process smoother for our volunteer team.

Testing Your Code

Please make sure your code passes all tests. Our test code coverage system will fail if these conditions occur:

1. The overall code coverage drops below the target threshold of the repository
2. Any file in the pull request has code coverage levels below the repository threshold
3. Merge conflicts

The process helps maintain the overall reliability of the code base and is a prerequisite for getting your PR approved. Assigned reviewers regularly review the PR queue and tend to focus on PRs that are passing.

Reviewers

When your PR has been assigned reviewers contact them to get your code reviewed and approved via:

1. comments in this PR or
2. our slack channel

Reviewing Your Code

Your reviewer(s) will have the following roles:

1. arbitrators of future discussions with other contributors about the validity of your changes
2. point of contact for evaluating the validity of your work
3. person who verifies matching issues by others that should be closed.
4. person who gives general guidance in fixing your tests

CONTRIBUTING.md

Read our CONTRIBUTING.md file. Most importantly:

1. PRs with issues not assigned to you will be closed by the reviewer
2. Fix the first comment in the PR so that each issue listed automatically closes

Other

1. 🎯 Please be considerate of our volunteers' time. Contacting the person who assigned the reviewers is not advised unless they ask for your input. Do not @ the person who did the assignment otherwise.
2. Read the CONTRIBUTING.md file make

[codecov]

Codecov Report

Attention: 3 lines in your changes are missing coverage. Please review.

Comparison is base (4506b74) 95.60% compared to head (e9f9b12) 97.44%.
Report is 76 commits behind head on develop.

❗ Current head e9f9b12 differs from pull request most recent head c470cfb. Consider uploading reports for the commit c470cfb to get more accurate results

Files	Patch %	Lines
...ns/OrganizationDashboard/OrganizationDashboard.tsx	83.33%	3 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #1324      +/-   ##
===========================================
+ Coverage    95.60%   97.44%   +1.84%     
===========================================
  Files          137      138       +1     
  Lines         3344     3681     +337     
  Branches       937     1074     +137     
===========================================
+ Hits          3197     3587     +390     
+ Misses         141       89      -52     
+ Partials         6        5       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[aashimawadhwa]

this is not much appealing, can we hide the name of the post creator on smaller screen sizes? @gauravsingh94

[gauravsingh94]

this is not much appealing, can we hide the name of the post creator on smaller screen sizes? @gauravsingh94

Yes, I can hide the name of posts creater on smaller screen.

I will update the changes.

[gauravsingh94]

this is not much appealing, can we hide the name of the post creator on smaller screen sizes? @gauravsingh94

I've attempted to conceal the 'Author' section when the div is narrower than 284 pixels, but unfortunately, it doesn't seem to be functioning as intended:

@media (max-width: 284px) {
  .cardItem .rightCard {
    display: none;
  }
}

Afterward, I aimed to center all the content within the div and also utilized word-break, but I noticed it affected the title differently. When a single character is particularly lengthy, the intended behavior isn't achieved:

Given the circumstances, it seems the pull request (PR) I've submitted might be the most suitable option for this scenario. Alternatively, an overhaul of the entire design of the card component might be necessary.

[gauravsingh94]

this is not much appealing, can we hide the name of the post creator on smaller screen sizes? @gauravsingh94

I've attempted to conceal the 'Author' section when the div is narrower than 284 pixels, but unfortunately, it doesn't seem to be functioning as intended:

@media (max-width: 284px) {
  .cardItem .rightCard {
    display: none;
  }
}

Afterward, I aimed to center all the content within the div and also utilized word-break, but I noticed it affected the title differently. When a single character is particularly lengthy, the intended behavior isn't achieved:

Given the circumstances, it seems the pull request (PR) I've submitted might be the most suitable option for this scenario. Alternatively, an overhaul of the entire design of the card component might be necessary.

@aashimawadhwa @rishav-jha-mech

[rishav-jha-mech]

@gauravsingh94

1. Use this layout
   

2. To limit the number of lines using CSS. you refer to this popular question on Stack Overflow, https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css.

PS. set the limit to number of lines to one, for both the author name and post title.

[gauravsingh94]

Please Review this one i have updated it according to the given design.

Screenrecoding

Screencast.from.2024-01-03.23-19-27.webm

[rishav-devraj]

@gauravsingh94 increase the column width for post section, design looks fine to me

[gauravsingh94]

@rishav-devraj is it ok?

[rishav-jha-mech]

@gauravsingh94 no its not, it should take more width where it is currently, I asked you to limit the no of lines of post title to one, also the left icon of post is taking too much width. fix these issues

[gauravsingh94]

Now this one is ok?
It is the max width of the posts.
@rishav-jha-mech

[rishav-jha-mech]

@gauravsingh94 this should be the actual layout

[gauravsingh94]

I have updated it according the above layout you have given.

Please review the new changes. @rishav-jha-mech

[rishav-jha-mech]

@gauravsingh94 write tests for the changes you have made, make the membership requests section similar in height as per design, rest UI wise all looks good

[gauravsingh94]

@gauravsingh94 write tests for the changes you have made, make the membership requests section similar in height as per design, rest UI wise all looks good

Ok i will add the tests and and update the height.

[gauravsingh94]

@rishav-jha-mech Can you please help me how i can cover the test case for that line.I have tried but i am not able to.

[rishav-jha-mech]

@gauravsingh94 the issue is around upcomingEvents not being loaded in the screen, there must be something wrong with your mocks setup, please check that.

This is how one should debug the tests #1193 (comment)

[rishav-jha-mech]

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

[rishav-jha-mech]

Here also

[gauravsingh94]

I have update the hard coded values to the css variables from bootstrap.

[gauravsingh94]

This is the section which is not getting covered in the tests.

: (
  upcomingEvents.map(
	(event: InterfaceQueryOrganizationEventListItem) => {
	  return (
		<CardItem
		  type="Event"
		  key={event._id}
		  time={event.startDate}
		  title={event.title}
		  location={event.location}
		/>
	  );

I have also updated the mock

export const EVENT_MOCK = [
  {
    request: {
      query: ORGANIZATION_EVENT_CONNECTION_LIST,
      variables: {
        organization_id: '6437904485008f171cf29924',
      },
    },
    result: {
      data: {
        eventsByOrganizationConnection: [
          {
            _id: '1',
            title: 'Sample Event',
            description: 'Sample Description',
            startDate: '2023-10-29T00:00:00.000Z',
            endDate: '2023-10-29T23:59:59.000Z',
            location: 'Sample Location',
            startTime: '08:00:00',
            endTime: '17:00:00',
            allDay: false,
            recurring: false,
            isPublic: true,
            isRegisterable: true,
          },
        ],
      },
    },
  },
];

I have added the test case for checking the that upcoming event get render or not.

test('Checking for Upcoming Event is getting rendered or not.', async () => {
    await act(async () => {
      render(
        <MockedProvider addTypename={false} link={link4}>
          <BrowserRouter>
            <Provider store={store}>
              <I18nextProvider i18n={i18nForTest}>
                <OrganizationDashboard />
              </I18nextProvider>
            </Provider>
          </BrowserRouter>
        </MockedProvider>
      );
    });

    await wait();
    expect(screen.getByText('Sample Event')).toBeInTheDocument();
  });

I am not able figure our why organization is not loading getting error.

Error Occured while loading the Organization

@rishav-jha-mech
Please help me how i can fix this issue.

[rishav-jha-mech]

@gauravsingh94 check if to query the Organization, its id is taken from the url of that page, check if something is missing in the local storage while you are running this test. Are you using jest preview ?

[gauravsingh94]

@gauravsingh94 check if to query the Organization, its id is taken from the url of that page, check if something is missing in the local storage while you are running this test. Are you using jest preview ?

Yes I am using jest preview and there also I am getting error while getting organization

[github-actions]

This pull request did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please verify it has no conflicts with the develop branch and rebase if needed. Mention it now if you need help or give permission to other people to finish your work.

[palisadoes]

Closing due to inactivity