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.

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

fix: misplaced layout #2230

Closed

Conversation

anuragnegi000
Copy link

@anuragnegi000 anuragnegi000 commented Aug 28, 2024

What kind of change does this PR introduce?

This fix the misplaced screen and title in user screen

Issue Number:

#2071

Fixes #

Did you add tests for your changes?

No, not required

Snapshots/Videos:
Before:-

before

After:-

after.mp4

If relevant, did you update the documentation?

Summary

Previously, the screen layout had an issue where the title was misplaced, rendering inside the child container instead of the parent container. This PR addresses and fixes that layout issue, ensuring the title is correctly positioned within the parent container.

Does this PR introduce a breaking change?
No

Other information

Have you read the contributing guide?

Yes

Summary by CodeRabbit

  • New Features

    • Added dedicated translation entries for posts in English, French, Hindi, Spanish, and Chinese to enhance localization support.
    • Updated routing paths to reflect a more intuitive navigation structure for accessing posts.
  • Bug Fixes

    • Adjusted navigation logic to correctly direct users to the posts page from the organization context.
  • Refactor

    • Revised data structures related to posts, comments, and likes for improved clarity and maintainability.
  • Chores

    • Updated component identification for the Posts component to ensure accurate routing and state management.

Copy link

coderabbitai bot commented Aug 28, 2024

Warning

Rate limit exceeded

@anuragnegi000 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 20 minutes and 47 seconds before requesting another review.

How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

Commits

Files that changed from the base of the PR and between b1012ea and 7df776e.

Walkthrough

The changes involve updates to localization files for multiple languages, modifications to routing paths for posts, and refinements in TypeScript types related to posts and comments within the application. New sections for posts have been added to the translation files, routing paths have been adjusted for clarity, and the data structures have been improved to enhance user interactions with posts and comments.

Changes

Files Change Summary
public/locales/en/translation.json, public/locales/fr/translation.json, public/locales/hi/translation.json, public/locales/sp/translation.json, public/locales/zh/translation.json Added new entry for posts in each localization file (e.g., "posts": { "title": "Posts" }).
src/App.tsx, src/components/UserPortal/OrganizationCard/OrganizationCard.tsx Changed route from /user/organization/:orgId to /user/posts/:orgId and updated navigation logic.
src/screens/UserPortal/Posts/Posts.tsx Removed InterfaceAdContent, modified InterfacePostComments, and introduced Comment and CommentLike types.
src/state/reducers/userRoutesReducer.ts, src/state/reducers/userRoutersReducer.test.ts Changed comp_id from 'organization' to 'posts' for the Posts component in routing configuration.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant OrganizationCard
    participant App
    participant PostsScreen

    User->>OrganizationCard: Click on Posts Button
    OrganizationCard->>App: Navigate to /user/posts/:orgId
    App->>PostsScreen: Load Posts Content
Loading

🐇 "In the world of code, we hop and play,
With posts now shining, bright as day!
Routes have changed, and types refined,
In this little app, new treasures we find!
So let’s celebrate with cheer and glee,
For every change brings more to see! 🌟"


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

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

Do not assign reviewers. Our Queue Monitors will review your PR and assign them.
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

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 6e51fc0 and c988096.

Files selected for processing (6)
  • public/locales/en/translation.json (1 hunks)
  • src/App.tsx (1 hunks)
  • src/components/UserPortal/OrganizationCard/OrganizationCard.tsx (1 hunks)
  • src/screens/UserPortal/Posts/Posts.tsx (5 hunks)
  • src/screens/UserPortal/UserScreen/UserScreen.tsx (1 hunks)
  • src/state/reducers/userRoutesReducer.ts (1 hunks)
Files skipped from review due to trivial changes (1)
  • public/locales/en/translation.json
Additional comments not posted (8)
src/state/reducers/userRoutesReducer.ts (1)

53-53: LGTM! But verify the comp_id usage in the codebase.

The change from comp_id: 'organization' to comp_id: 'posts' is straightforward and aligns with the PR objective. Ensure that all references to comp_id are updated accordingly to avoid breaking changes.

The code changes are approved.

Run the following script to verify the comp_id usage:

Verification successful

Change verified: comp_id update to 'posts' is correctly implemented.

The update to comp_id: 'posts' in userRoutesReducer.ts is isolated and does not affect other parts of the codebase. The change aligns with the intended modification and is safe to proceed.

  • src/state/reducers/userRoutesReducer.ts: comp_id: 'posts' is correctly used.
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify all references to `comp_id` are updated accordingly.

# Test: Search for the `comp_id` usage. Expect: Only occurrences of the new `comp_id`.
rg --type python -A 5 $'comp_id'

Length of output: 62


Script:

#!/bin/bash
# Description: Verify all references to `comp_id: 'posts'` are updated accordingly in TypeScript files.

# Test: Search for the `comp_id: 'posts'` usage. Expect: Occurrences of the new `comp_id`.
rg --type ts -A 5 $'comp_id: \'posts\''

Length of output: 521

src/screens/UserPortal/UserScreen/UserScreen.tsx (1)

16-16: LGTM! But verify the map usage in the codebase.

The addition of posts: 'posts' to the map object is straightforward and aligns with the PR objective. Ensure that all references to the map object are updated accordingly to avoid breaking changes.

The code changes are approved.

Run the following script to verify the map usage:

Verification successful

The addition of posts: 'posts' to the map object is isolated.

The map object is defined and used locally within UserScreen.tsx, and there are no external references or imports related to it. The addition of the posts key does not affect other parts of the codebase.

  • src/screens/UserPortal/UserScreen/UserScreen.tsx: The map object is defined and used locally.
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify all references to the `map` object are updated accordingly.

# Test: Search for the `map` usage. Expect: Only occurrences of the new `map`.
rg --type js -A 5 $'map'

Length of output: 23


Script:

#!/bin/bash
# Description: Verify all references to the `map` object in TypeScript files are updated accordingly.

# Test: Search for the `map` usage specifically for the 'posts' key in TypeScript files.
rg --type ts -A 5 'map.*posts'

Length of output: 32


Script:

#!/bin/bash
# Description: Verify all references to the `map` object in TypeScript files.

# Test: Search for the `map` object usage in TypeScript files.
rg --type ts -A 5 'map'

# Additionally, search for any imports or definitions related to `map`.
rg --type ts -A 5 'import.*map' 

Length of output: 99474

src/components/UserPortal/OrganizationCard/OrganizationCard.tsx (1)

196-196: LGTM! But verify the navigate usage in the codebase.

The change from /user/organization/${props.id} to /user/posts/${props.id} is straightforward and aligns with the PR objective. Ensure that all references to the navigate function are updated accordingly to avoid breaking changes.

The code changes are approved.

Run the following script to verify the navigate usage:

Verification successful

Verification Successful: The navigate function change is isolated to OrganizationCard.tsx.

The change to the navigate function in OrganizationCard.tsx is specific to this component and does not affect other parts of the codebase. The update aligns with the intended functionality without introducing any breaking changes.

  • Location: src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify all references to the `navigate` function are updated accordingly.

# Test: Search for the `navigate` usage. Expect: Only occurrences of the new `navigate`.
rg --type js -A 5 $'navigate'

Length of output: 28


Script:

#!/bin/bash
# Description: Verify all references to the `navigate` function are updated accordingly.

# Test: Search for the `navigate` usage in TypeScript files. Expect: Only occurrences of the new `navigate`.
rg --type ts -A 5 $'navigate'

Length of output: 44782

src/App.tsx (1)

198-198: LGTM!

The route change from /user/organization/:orgId to /user/posts/:orgId is semantically accurate and reflects the content being accessed.

The code changes are approved.

src/screens/UserPortal/Posts/Posts.tsx (4)

57-65: LGTM!

The change in the likedBy property from likedBy: { id: string; }[]; to likedBy: { _id: string; }[]; improves consistency with other ID properties in the codebase.

The code changes are approved.


101-103: LGTM!

The new CommentLike type improves type safety and clarity in the codebase.

The code changes are approved.


105-116: LGTM!

The new Comment type improves type safety and clarity in the codebase.

The code changes are approved.


Line range hint 225-257: LGTM!

The updated logic within the home function enhances type safety and maintainability by using the new Comment and CommentLike types and explicitly typing the allLikes array as InterfacePostLikes.

The code changes are approved.

coderabbitai[bot]
coderabbitai bot previously approved these changes Aug 28, 2024
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

Outside diff range, codebase verification and nitpick comments (1)
src/screens/LoginPage/LoginPage.tsx (1)

64-64: Ensure proper handling of the role state in LoginPage.tsx.

The role state is used in various conditional checks and rendering logic. Since it is initialized as undefined, ensure that it is set appropriately before any dependent logic is executed to avoid potential issues.

  • Verify that the handleRoleToggle function or other mechanisms set the role before its usage.
  • Consider adding default handling or checks to prevent errors when role is undefined.
Analysis chain

Verify the component's behavior with the updated role state initialization.

The change removes the default role initialization, which may impact the component's behavior. Ensure that the role is explicitly defined where necessary to avoid unintended consequences.

Run the following script to verify the component's behavior:

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the component's behavior with the updated role state initialization.

# Test: Search for the role state usage. Expect: Proper handling of undefined role state.
rg --type tsx -A 5 $'const [role, setRole] = useState<\'admin\' | \'user\'>()'

Length of output: 115


Script:

#!/bin/bash
# Description: Verify the component's behavior with the updated role state initialization.

# Test: Search for the role state usage in .tsx files. Expect: Proper handling of undefined role state.
rg --glob '*.tsx' -A 5 $'const [role, setRole] = useState<\'admin\' | \'user\'>()'

Length of output: 1121


Script:

#!/bin/bash
# Description: Search for the usage of the role state variable within LoginPage.tsx to verify proper handling.

# Test: Search for the usage of the role state variable in LoginPage.tsx.
rg 'role' src/screens/LoginPage/LoginPage.tsx -A 5 -B 5

Length of output: 2658

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between c988096 and efbf0d0.

Files selected for processing (5)
  • public/locales/fr/translation.json (1 hunks)
  • public/locales/hi/translation.json (1 hunks)
  • public/locales/sp/translation.json (1 hunks)
  • public/locales/zh/translation.json (1 hunks)
  • src/screens/LoginPage/LoginPage.tsx (1 hunks)
Additional comments not posted (4)
public/locales/zh/translation.json (1)

131-133: LGTM!

The new entry for "posts" is correctly formatted and integrated into the existing JSON structure.

The code changes are approved.

public/locales/hi/translation.json (1)

131-133: LGTM!

The addition of the "posts" section with the key-value pair "title": "पोस्ट्स" enhances the localization support and is correctly implemented.

The code changes are approved.

public/locales/fr/translation.json (1)

131-133: LGTM!

The addition of the "posts" key with the title "Messages" is correctly formatted and enhances localization support.

The code changes are approved.

public/locales/sp/translation.json (1)

191-193: LGTM!

The new entry for "posts" is added correctly in the translation JSON.

The code changes are approved.

coderabbitai[bot]
coderabbitai bot previously approved these changes Aug 28, 2024
@palisadoes
Copy link
Contributor

Please fix the failing tests

@anuragnegi000
Copy link
Author

Please fix the failing tests

working on it

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between efbf0d0 and a6a8dcc.

Files selected for processing (5)
  • public/locales/en/translation.json (1 hunks)
  • public/locales/fr/translation.json (1 hunks)
  • public/locales/hi/translation.json (1 hunks)
  • public/locales/sp/translation.json (1 hunks)
  • public/locales/zh/translation.json (1 hunks)
Files skipped from review due to trivial changes (4)
  • public/locales/en/translation.json
  • public/locales/fr/translation.json
  • public/locales/hi/translation.json
  • public/locales/sp/translation.json
Files skipped from review as they are similar to previous changes (1)
  • public/locales/zh/translation.json

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between a6a8dcc and b1012ea.

Files selected for processing (7)
  • public/locales/en/translation.json (1 hunks)
  • src/App.tsx (1 hunks)
  • src/components/UserPortal/OrganizationCard/OrganizationCard.tsx (1 hunks)
  • src/screens/UserPortal/Posts/Posts.tsx (5 hunks)
  • src/screens/UserPortal/UserScreen/UserScreen.tsx (1 hunks)
  • src/state/reducers/userRoutersReducer.test.ts (4 hunks)
  • src/state/reducers/userRoutesReducer.ts (1 hunks)
Files skipped from review as they are similar to previous changes (5)
  • public/locales/en/translation.json
  • src/App.tsx
  • src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
  • src/screens/UserPortal/Posts/Posts.tsx
  • src/screens/UserPortal/UserScreen/UserScreen.tsx
Additional comments not posted (5)
src/state/reducers/userRoutesReducer.ts (1)

53-53: LGTM!

The change in the comp_id property from 'organization' to 'posts' is semantically correct and accurately represents the 'Posts' component. This update enhances the clarity and correctness of component identification in the application's state management.

src/state/reducers/userRoutersReducer.test.ts (4)

14-14: LGTM!

The code change is approved.


29-29: LGTM!

The code change is approved.


54-54: LGTM!

The code change is approved.


69-69: LGTM!

The code change is approved.

coderabbitai[bot]
coderabbitai bot previously approved these changes Sep 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants