Made the posts UI better #2218

ShubhamTiwari55 · 2023-12-06T10:12:57Z

What kind of change does this PR introduce?

Enhanced the UI of posts page by making it vertically scrollable.

Issue Number:

Fixes #2196

Did you add tests for your changes?
No

Snapshots/Videos:

If relevant, did you update the documentation?
No

Summary

I used listview to make the post page like a news feed which enhanced its UI and now it is looking better.

Does this PR introduce a breaking change?

No

github-actions · 2023-12-06T10:13:23Z

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 either of these two conditions occur:

The overall code coverage drops below the target threshold of the repository
Any file in the pull request has code coverage levels below the repository threshold

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:

comments in this PR or
our slack channel

Reviewing Your Code

Your reviewer(s) will have the following roles:

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

Other

🎯 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.

codecov · 2023-12-06T10:25:44Z

Codecov Report

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

Comparison is base (7d74da9) 87.65% compared to head (7b5b05f) 82.34%.

❗ Current head 7b5b05f differs from pull request most recent head 79f5b13. Consider uploading reports for the commit 79f5b13 to get more accurate results

Files	Patch %	Lines
...views/after_auth_screens/profile/profile_page.dart	50.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #2218      +/-   ##
===========================================
- Coverage    87.65%   82.34%   -5.32%     
===========================================
  Files          155      151       -4     
  Lines         7356     7029     -327     
===========================================
- Hits          6448     5788     -660     
- Misses         908     1241     +333

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

noman2002 · 2023-12-06T11:30:32Z

@ShubhamTiwari55 The asset is not loading in the screenshot, how can we check the post design. please upload a proper image showing before and after.

ShubhamTiwari55 · 2023-12-06T12:21:00Z

@ShubhamTiwari55 The asset is not loading in the screenshot, how can we check the post design. please upload a proper image showing before and after.

Here is the updated screenshot

noman2002 · 2023-12-06T12:23:10Z

@ShubhamTiwari55 Alse attach a screenshot of before.

noman2002 · 2023-12-06T12:26:22Z

@ShubhamTiwari55 Instead of just image. Use the same component used on home screen for posts.

ShubhamTiwari55 · 2023-12-06T12:27:31Z

@ShubhamTiwari55 Alse attach a screenshot of before.

Previously it was like this -

ShubhamTiwari55 · 2023-12-06T12:27:54Z

@ShubhamTiwari55 Instead of just image. Use the same component used on home screen for posts.

Okay, doing the required changes

ShubhamTiwari55 · 2023-12-06T13:36:05Z

@ShubhamTiwari55 Instead of just image. Use the same component used on home screen for posts.

@noman2002 Is it okay now ?

noman2002 · 2023-12-07T11:29:04Z

@ShubhamTiwari55 Instead of just image. Use the same component used on home screen for posts.

@noman2002 Is it okay now ?

This is not the component used on home screen. It has comments, likes and etc.

ShubhamTiwari55 · 2023-12-07T20:11:19Z

@ShubhamTiwari55 Instead of just image. Use the same component used on home screen for posts.

@noman2002 Is it okay now ?

This is not the component used on home screen. It has comments, likes and etc.

Is it okay now ??

noman2002 · 2023-12-08T05:57:27Z

@ShubhamTiwari55 Instead of just image. Use the same component used on home screen for posts.

@noman2002 Is it okay now ?

This is not the component used on home screen. It has comments, likes and etc.

Is it okay now ??

Yes, perfect now. Please write the tests for missing lines.

lib/views/after_auth_screens/profile/profile_page.dart

…nto develop

noman2002 · 2023-12-13T06:00:33Z

@ShubhamTiwari55 Merge the latest code into this branch.

ShubhamTiwari55 · 2023-12-13T09:06:14Z

@ShubhamTiwari55 Merge the latest code into this branch.

@noman2002 I have merged it already. Kindly merge this PR as all changes have been done.

lib/views/after_auth_screens/profile/profile_page.dart

noman2002 · 2023-12-16T14:06:02Z

lib/views/after_auth_screens/profile/profile_page.dart

-                                ],
-                              ),
-                            ),
+                            IndividualPostView(post: samplePost),


This is still not covered. Connect with @Ayush0Chaudhary or @Dante291, anyone will help you out.

ShubhamTiwari55 · 2023-12-16T14:15:46Z

@Ayush0Chaudhary Can you please help me out in test part ?

Dante291 · 2023-12-16T14:42:26Z

Hello @ShubhamTiwari55 hope you're doing well, ok so I checked out your commits and saw that in your test you've commented out the test for IndividualPostView(post: samplePost), this line, so I am considering you're facing difficulty in writing test for that widget.

Testing for UI is basically different than Unit testing as you need to check whether the required widgets appear on the screen and is performing task properly or not, in your case all you had to do is check whether the Individual post widget is present in profile page view.

You need to create the demo or mock Individual post widget in your test file and then create a test to check whether it shows up at the right section of the UI, that's it.

If you still get stuck hit me up on slack or ask your query in Talawa-mobile channel.

ShubhamTiwari55 · 2023-12-17T06:54:54Z

Hello @ShubhamTiwari55 hope you're doing well, ok so I checked out your commits and saw that in your test you've commented out the test for IndividualPostView(post: samplePost), this line, so I am considering you're facing difficulty in writing test for that widget.

Testing for UI is basically different than Unit testing as you need to check whether the required widgets appear on the screen and is performing task properly or not, in your case all you had to do is check whether the Individual post widget is present in profile page view.

You need to create the demo or mock Individual post widget in your test file and then create a test to check whether it shows up at the right section of the UI, that's it.

If you still get stuck hit me up on slack or ask your query in Talawa-mobile channel.

I have added the tests for IndividualPostView(post: samplePost), also but still the code coverage is not 100%. Here is the screenshot showing all tests passes for that test code also.

Can you suggest me what should I add more in order to reach the coverage to 100%

Dante291 · 2023-12-17T09:11:40Z

 testWidgets("Check if the IndividualPostView shows up",
        (WidgetTester tester) async {
      await tester.runAsync(() async {
        ///making a sample data
        /// also wrote all the detail
        /// used in the individual post
        final commentJson1 = {
          'creator': {
            '_id': '123',
            'firstName': 'Ayush',
            'lastName': 'Chaudhary',
            'email': '[email protected]',
          },
          'createdAt': '123456',
          'text': 'test text',
          'post': 'test post',
          'likeCount': 'test count',
        };
        final commentJson2 = {
          'creator': {
            '_id': '123',
            'firstName': 'John',
            'lastName': 'Doe',
            'email': '[email protected]',
          },
          'createdAt': '123456',
          'text': 'test text',
          'post': 'test post',
          'likeCount': 'test count',
        };

        final commentsJson = [commentJson1, commentJson2];

        ///returning a service response through mocking,
        ///this method was called in
        ///comment view model and was returning null
        ///until I made a mock response.
        when(commentsService.getCommentsForPost('PostID'))
            .thenAnswer((realInvocation) async {
          return commentsJson;
        });

        /// using the mock post made before me
        final Post post = getPostMockModel();

        ///returning mock reponse of post model when
        ///.likedby is called on the model
        when(post.likedBy).thenReturn([LikedBy(sId: "xzy1")]);

        await tester.pumpWidget(createIndividualPostViewWidget(post1: post));
        await tester.pump();

        /// checking if the individual post
        /// screen pops up
        expect(find.byType(Scaffold), findsNWidgets(2));

        ///finding the text field via its ID
        final textfield = find.byKey(const Key('indi_post_tf_key'));

        /// check if the textfield shows up
        expect(textfield, findsOneWidget);

        ///finding the text field via its type
        final textbtn = find.byType(TextButton);

        ///check if btn exist
        expect(textbtn, findsOneWidget);

        ///checking if the onPressed of
        ///text button is working when tapped
        await tester.tap(textbtn);
        await tester.pump();

        ///tapping the text field
        ///to check if it shows up
        await tester.tap(textfield);
        await tester.pump();

        /// Checking if the submit button is working,
        /// when keyboard send action is called
        await tester.showKeyboard(textfield);

        /// keyboard action can be
        /// simulated using the
        /// testTextInput method
        await tester.testTextInput.receiveAction(TextInputAction.send);
        await tester.pump();
      });

@ShubhamTiwari55 you're separately checking Individual post by directly rendering it by doing this await tester.pumpWidget(createIndividualPostViewWidget(post1: post)); but you need to render 'ProfilePage' widget. This is crucial because 'samplePost' is used within 'ProfilePage'. once you render 'ProfilePage' by doing this await tester.pumpWidget(ProfilePage(/* Pass necessary parameters or mocks */)); in your test then you need to assert that IndividualPostView is present. you could do that by looking for specific widgets or text that would only be rendered if IndividualPostView is correctly receiving samplePost.

Azad99-9 · 2023-12-19T08:24:53Z

@ShubhamTiwari55 for all the UI changes you have made in profile_page.dart please replicate them in demo_profile_page.dart also.

Dante291 · 2023-12-19T08:54:11Z

@Azad99-9 I don't think that it would be required because @ShubhamTiwari55 is working on showing some sample post in the profile_page view but since demo_profile_page.dart file contains the view only for tutorial, there is no need to show any type of post in it? demo_profile_page_.dart file is only for the tour of the app before user join in any organization or log in, since no user is logged in then there is no need for any sample post to be displayed.

literalEval · 2023-12-19T09:00:16Z

lib/views/after_auth_screens/profile/profile_page.dart

@@ -28,6 +33,40 @@ class ProfilePage extends StatelessWidget {
  ///
  final MainScreenViewModel? homeModel;

+  /// a_line_ending_with_end_punctuation.


Write a meaningful documentation here. Moreover, any mock data should be outside the component. If necessary, create a new file for this.

literalEval · 2023-12-19T09:02:04Z

test/widget_tests/after_auth_screens/profile/profile_page_test.dart

+///
+/// **returns**:
+///   None
+void main() {


Documentation for main function is not needed. Please remove.

literalEval · 2023-12-19T09:03:19Z

lib/views/after_auth_screens/profile/profile_page.dart

 class ProfilePage extends StatelessWidget {
-  const ProfilePage({
+  ProfilePage({


Remove dummy data as suggested and mark this class as const again. Having const classes improves performance; we should not remove them unnecessarily.

Azad99-9 · 2023-12-19T09:10:07Z

@Dante291 yeah but already there are these hard coded images in demo_profile_page.dart which are being shown in previous format 'tile format' this may cause UI inconsistentcy.

or else @ShubhamTiwari55 just please remove these hard coded images from demo_profile_page.dart. This way we can maintain Consistent UI.

ShubhamTiwari55 · 2023-12-27T06:34:55Z

Dear @palisadoes,

I hope this message finds you well. I wanted to inform you that due to my ongoing college end semester exams, I have been unable to dedicate the necessary time and focus to the issue associated with the Pull Request #2218

In light of this, and after discussing with @Dante291 on Slack, we believe that they have a better solution for the issue at hand. Therefore, I am closing the PR and unassigning myself from this particular issue. I have full confidence that @Dante291 will effectively handle and contribute to the resolution of this matter.

I sincerely apologize for any inconvenience caused, and I appreciate the understanding and support from the team. As my exams are concluding, I look forward to resuming regular contributions to the organization.

Once again, thank you to everyone for your valuable reviews and assistance.

Best regards,
Shubham Tiwari

Made the posts UI better

c1cedd1

ShubhamTiwari55 added 2 commits December 6, 2023 15:46

code formatted

ecb823a

code formatted

e303685

error resolved

2cbc4a6

noman2002 requested a review from Ayush0Chaudhary December 6, 2023 12:26

ShubhamTiwari55 and others added 2 commits December 8, 2023 11:39

changes done

db5e267

Merge branch 'PalisadoesFoundation:develop' into develop

69db8de

Ayush0Chaudhary previously approved these changes Dec 8, 2023

View reviewed changes

noman2002 requested changes Dec 8, 2023

View reviewed changes

lib/views/after_auth_screens/profile/profile_page.dart Outdated Show resolved Hide resolved

ShubhamTiwari55 added 3 commits December 9, 2023 18:11

changes done

bc8037a

Merge branch 'develop' of https://github.com/ShubhamTiwari55/talawa i…

b49ad3c

…nto develop

changes done

1ad1621

ShubhamTiwari55 dismissed Ayush0Chaudhary’s stale review via 1ad1621 December 9, 2023 12:45

ShubhamTiwari55 and others added 2 commits December 9, 2023 18:25

code reformatted

ce81c1f

Merge branch 'PalisadoesFoundation:develop' into develop

c15a04c

noman2002 reviewed Dec 13, 2023

View reviewed changes

lib/views/after_auth_screens/profile/profile_page.dart Show resolved Hide resolved

ShubhamTiwari55 added 3 commits December 16, 2023 08:32

added test file for profile_page.dart

2b59db3

Merge remote-tracking branch 'origin/develop' into develop

3869247

code formatted

973d320

noman2002 reviewed Dec 16, 2023

View reviewed changes

Added tests for individualPostView widget in the test file

e5bfb94

ShubhamTiwari55 added 2 commits December 18, 2023 00:01

Merge branch 'PalisadoesFoundation:develop' into develop

7b5b05f

Merge branch 'develop' into develop

7033e9e

literalEval requested changes Dec 19, 2023

View reviewed changes

Merge branch 'PalisadoesFoundation:develop' into develop

79f5b13

ShubhamTiwari55 closed this Dec 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Made the posts UI better #2218

Made the posts UI better #2218

ShubhamTiwari55 commented Dec 6, 2023

github-actions bot commented Dec 6, 2023

codecov bot commented Dec 6, 2023 •

edited

Loading

noman2002 commented Dec 6, 2023

ShubhamTiwari55 commented Dec 6, 2023 •

edited

Loading

noman2002 commented Dec 6, 2023 •

edited

Loading

noman2002 commented Dec 6, 2023

ShubhamTiwari55 commented Dec 6, 2023

ShubhamTiwari55 commented Dec 6, 2023 •

edited

Loading

ShubhamTiwari55 commented Dec 6, 2023 •

edited

Loading

noman2002 commented Dec 7, 2023 •

edited

Loading

ShubhamTiwari55 commented Dec 7, 2023 •

edited

Loading

noman2002 commented Dec 8, 2023

noman2002 commented Dec 13, 2023

ShubhamTiwari55 commented Dec 13, 2023 •

edited

Loading

noman2002 Dec 16, 2023

ShubhamTiwari55 commented Dec 16, 2023

Dante291 commented Dec 16, 2023 •

edited

Loading

ShubhamTiwari55 commented Dec 17, 2023 •

edited

Loading

Dante291 commented Dec 17, 2023 •

edited

Loading

Azad99-9 commented Dec 19, 2023 •

edited

Loading

Dante291 commented Dec 19, 2023

literalEval Dec 19, 2023

literalEval Dec 19, 2023

literalEval Dec 19, 2023

Azad99-9 commented Dec 19, 2023

ShubhamTiwari55 commented Dec 27, 2023

Made the posts UI better #2218

Made the posts UI better #2218

Conversation

ShubhamTiwari55 commented Dec 6, 2023

github-actions bot commented Dec 6, 2023

Our Pull Request Approval Process

Testing Your Code

Reviewers

Reviewing Your Code

Other

codecov bot commented Dec 6, 2023 • edited Loading

Codecov Report

noman2002 commented Dec 6, 2023

ShubhamTiwari55 commented Dec 6, 2023 • edited Loading

noman2002 commented Dec 6, 2023 • edited Loading

noman2002 commented Dec 6, 2023

ShubhamTiwari55 commented Dec 6, 2023

ShubhamTiwari55 commented Dec 6, 2023 • edited Loading

ShubhamTiwari55 commented Dec 6, 2023 • edited Loading

noman2002 commented Dec 7, 2023 • edited Loading

ShubhamTiwari55 commented Dec 7, 2023 • edited Loading

noman2002 commented Dec 8, 2023

noman2002 commented Dec 13, 2023

ShubhamTiwari55 commented Dec 13, 2023 • edited Loading

noman2002 Dec 16, 2023

Choose a reason for hiding this comment

ShubhamTiwari55 commented Dec 16, 2023

Dante291 commented Dec 16, 2023 • edited Loading

ShubhamTiwari55 commented Dec 17, 2023 • edited Loading

Dante291 commented Dec 17, 2023 • edited Loading

Azad99-9 commented Dec 19, 2023 • edited Loading

Dante291 commented Dec 19, 2023

literalEval Dec 19, 2023

Choose a reason for hiding this comment

literalEval Dec 19, 2023

Choose a reason for hiding this comment

literalEval Dec 19, 2023

Choose a reason for hiding this comment

Azad99-9 commented Dec 19, 2023

ShubhamTiwari55 commented Dec 27, 2023

codecov bot commented Dec 6, 2023 •

edited

Loading

ShubhamTiwari55 commented Dec 6, 2023 •

edited

Loading

noman2002 commented Dec 6, 2023 •

edited

Loading

ShubhamTiwari55 commented Dec 6, 2023 •

edited

Loading

ShubhamTiwari55 commented Dec 6, 2023 •

edited

Loading

noman2002 commented Dec 7, 2023 •

edited

Loading

ShubhamTiwari55 commented Dec 7, 2023 •

edited

Loading

ShubhamTiwari55 commented Dec 13, 2023 •

edited

Loading

Dante291 commented Dec 16, 2023 •

edited

Loading

ShubhamTiwari55 commented Dec 17, 2023 •

edited

Loading

Dante291 commented Dec 17, 2023 •

edited

Loading

Azad99-9 commented Dec 19, 2023 •

edited

Loading