implemented a 'Visit' button for the Joined Organizations filter in the Talawa User Portal #3231
Conversation
…he Talawa User Portal
WalkthroughThis pull request introduces comprehensive changes to the Changes
Assessment against linked issues
Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
Documentation and Community
|
Our Pull Request Approval ProcessThanks for contributing! Testing Your CodeRemember, your PRs won't be reviewed until these criteria are met:
Our policies make our code better. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
src/components/OrganizationCard/OrganizationCard.tsx (1)
179-179: Simplify address check using optional chainingYou can use optional chaining to simplify the conditional rendering of the address. This makes the code cleaner and more readable.
Apply this diff:
-{props.address && props.address.city && ( +{props.address?.city && (🧰 Tools
🪛 Biome (1.9.4)
[error] 179-179: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/OrganizationCard/OrganizationCard.spec.tsx(2 hunks)src/components/OrganizationCard/OrganizationCard.tsx(1 hunks)src/screens/UserPortal/Organizations/Organizations.tsx(2 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/components/OrganizationCard/OrganizationCard.tsx
[error] 179-179: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyse Code With CodeQL (javascript)
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/components/OrganizationCard/OrganizationCard.tsx (3)
23-48: Add JSDoc documentation and consider type extractionThe interface is well-structured but could benefit from documentation and type extraction for reusability.
Consider:
- Adding JSDoc documentation to describe the interface and its properties
- Extracting reusable types:
interface Address { city: string; countryCode: string; line1: string; postalCode: string; state: string; } interface Member { id: string; } interface MembershipRequest { _id: string; user: { _id: string; }; } /** Props for the OrganizationCard component */ interface InterfaceOrganizationCardProps { /** Unique identifier for the organization */ id: string; /** Name of the organization */ name: string; /** URL of the organization's image */ image: string; /** Description of the organization */ description: string; /** List of organization administrators */ admins: Member[]; /** List of organization members */ members: Member[]; /** Organization's address details */ address: Address; /** Current status of user's membership request */ membershipRequestStatus: string; /** Whether user registration is required to join */ userRegistrationRequired: boolean; /** List of pending membership requests */ membershipRequests: MembershipRequest[]; }🧰 Tools
🪛 GitHub Actions: PR Workflow
[error] File contains eslint-disable statement. Please remove them and ensure the code adheres to the specified ESLint rules.
169-177: Use optional chaining for safer property accessThe address check could be simplified using optional chaining.
-{address && address.city && ( +{address?.city && ( <div className={styles.address}> <h6 className="text-secondary"> - <span className="address-line">{address.line1}, </span> - <span className="address-line">{address.city}, </span> - <span className="address-line">{address.countryCode}</span> + <span className="address-line">{address?.line1}, </span> + <span className="address-line">{address?.city}, </span> + <span className="address-line">{address?.countryCode}</span> </h6> </div> )}🧰 Tools
🪛 Biome (1.9.4)
[error] 169-169: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 GitHub Actions: PR Workflow
[error] File contains eslint-disable statement. Please remove them and ensure the code adheres to the specified ESLint rules.
184-217: Refactor button rendering for better maintainabilityThe conditional button rendering could be simplified using a mapping approach.
Consider refactoring to:
const buttonConfig = { accepted: { variant: 'success', testId: 'manageBtn', className: styles.joinedBtn, onClick: () => navigate(`/user/organization/${id}`), label: t('visit') }, pending: { variant: 'danger', testId: 'withdrawBtn', className: styles.withdrawBtn, onClick: withdrawMembershipRequest, label: t('withdraw') }, '': { variant: 'outline-success', testId: 'joinBtn', className: styles.joinBtn, onClick: joinOrganization, label: t('joinNow') } }; const config = buttonConfig[membershipRequestStatus]; {config && ( <Button variant={config.variant} data-testid={config.testId} className={config.className} onClick={config.onClick} > {config.label} </Button> )}🧰 Tools
🪛 GitHub Actions: PR Workflow
[error] File contains eslint-disable statement. Please remove them and ensure the code adheres to the specified ESLint rules.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/OrganizationCard/OrganizationCard.tsx(1 hunks)src/screens/UserPortal/Organizations/Organizations.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/screens/UserPortal/Organizations/Organizations.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
src/components/OrganizationCard/OrganizationCard.tsx
[error] 169-169: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 GitHub Actions: PR Workflow
src/components/OrganizationCard/OrganizationCard.tsx
[error] File contains eslint-disable statement. Please remove them and ensure the code adheres to the specified ESLint rules.
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyse Code With CodeQL (javascript)
🔇 Additional comments (2)
src/components/OrganizationCard/OrganizationCard.tsx (2)
51-94: Well-structured component implementation with proper hook usageThe component implementation follows React best practices with:
- Clean props destructuring
- Proper hook organization
- Well-configured mutations with appropriate refetch queries
🧰 Tools
🪛 GitHub Actions: PR Workflow
[error] File contains eslint-disable statement. Please remove them and ensure the code adheres to the specified ESLint rules.
95-146: Robust membership management implementationThe membership management functions are well-implemented with:
- Comprehensive error handling
- Proper success notifications
- Clear separation of concerns between joining and withdrawing
🧰 Tools
🪛 GitHub Actions: PR Workflow
[error] File contains eslint-disable statement. Please remove them and ensure the code adheres to the specified ESLint rules.
gkbishnoi07
changed the title
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/components/OrganizationCard/OrganizationCard.tsx (2)
159-161: Handle the error parameter in catch blockThe error parameter in the catch block is unused. Consider logging it or using it in the error message.
Apply this diff:
- } catch (error) { + } catch (error: unknown) { + console.error('Failed to withdraw membership request:', error); toast.error(t('errorOccured') as string); }🧰 Tools
🪛 eslint
[error] 159-159: 'error' is defined but never used.
(@typescript-eslint/no-unused-vars)
186-196: Simplify address check with optional chainingThe address check can be simplified using optional chaining.
Apply this diff:
- {props.address && props.address.city && ( + {address?.city && ( <div className={styles.address}> <h6 className="text-secondary"> - <span className="address-line">{props.address.line1}, </span> - <span className="address-line">{props.address.city}, </span> + <span className="address-line">{address.line1}, </span> + <span className="address-line">{address.city}, </span> <span className="address-line"> - {props.address.countryCode} + {address.countryCode} </span> </h6> </div> )}🧰 Tools
🪛 Biome (1.9.4)
[error] 186-186: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 eslint
[error] 186-186: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 186-186: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 189-189: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 190-190: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 192-192: Must use destructuring props assignment
(react/destructuring-assignment)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/OrganizationCard/OrganizationCard.tsx(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/components/OrganizationCard/OrganizationCard.tsx
[error] 186-186: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 eslint
src/components/OrganizationCard/OrganizationCard.tsx
[error] 12-12: '@apollo/client' imported multiple times.
(import/no-duplicates)
[error] 20-20: All imports in the declaration are only used as types. Use import type.
(@typescript-eslint/consistent-type-imports)
[error] 20-20: '@apollo/client' imported multiple times.
(import/no-duplicates)
[error] 85-85: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 90-90: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 95-95: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 108-108: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 111-111: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 118-118: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 143-143: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 159-159: 'error' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 169-169: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 170-170: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 170-170: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 173-173: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 174-174: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 180-180: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 181-181: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 184-184: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 186-186: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 186-186: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 189-189: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 190-190: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 192-192: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 198-198: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 200-200: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 204-204: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 210-210: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 217-217: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 228-228: Must use destructuring props assignment
(react/destructuring-assignment)
🪛 GitHub Check: Performs linting, formatting, type-checking, checking for different source and target branch
src/components/OrganizationCard/OrganizationCard.tsx
[failure] 12-12:
'/home/runner/work/talawa-admin/talawa-admin/node_modules/@apollo/client/index.js' imported multiple times
[failure] 20-20:
All imports in the declaration are only used as types. Use import type
[failure] 20-20:
'/home/runner/work/talawa-admin/talawa-admin/node_modules/@apollo/client/index.js' imported multiple times
[failure] 85-85:
Must use destructuring props assignment
[failure] 90-90:
Must use destructuring props assignment
[failure] 95-95:
Must use destructuring props assignment
[failure] 108-108:
Must use destructuring props assignment
[failure] 111-111:
Must use destructuring props assignment
[failure] 118-118:
Must use destructuring props assignment
[failure] 143-143:
Must use destructuring props assignment
🪛 GitHub Actions: PR Workflow
src/components/OrganizationCard/OrganizationCard.tsx
[error] 12-12: '/home/runner/work/talawa-admin/talawa-admin/node_modules/@apollo/client/index.js' imported multiple times (import/no-duplicates)
🔇 Additional comments (2)
src/components/OrganizationCard/OrganizationCard.tsx (2)
53-70: Well-documented component!The JSDoc documentation is comprehensive and clearly describes the component's purpose, props, and functionality.
204-214: Successfully implemented visit button functionality!The implementation of the visit button for accepted members is well-done and aligns with the PR objectives. The button is properly integrated with the navigation system and includes appropriate test IDs for testing.
🧰 Tools
🪛 eslint
[error] 204-204: Must use destructuring props assignment
(react/destructuring-assignment)
[error] 210-210: Must use destructuring props assignment
(react/destructuring-assignment)
| */ | ||
| const userId: string | null = getItem('userId'); | ||
|
|
||
| function OrganizationCard(props: InterfaceOrganizationCardProps): JSX.Element { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Destructure props in component parameters
Destructure props in the component parameters to improve readability and fix ESLint warnings.
Apply this diff:
-function OrganizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
+function OrganizationCard({
+ id,
+ name,
+ image,
+ description,
+ admins,
+ members,
+ address,
+ membershipRequestStatus,
+ userRegistrationRequired,
+ membershipRequests
+}: InterfaceOrganizationCardProps): JSX.Element {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function OrganizationCard(props: InterfaceOrganizationCardProps): JSX.Element { | |
| function OrganizationCard({ | |
| id, | |
| name, | |
| image, | |
| description, | |
| admins, | |
| members, | |
| address, | |
| membershipRequestStatus, | |
| userRegistrationRequired, | |
| membershipRequests | |
| }: InterfaceOrganizationCardProps): JSX.Element { |
| import { | ||
| CANCEL_MEMBERSHIP_REQUEST, | ||
| JOIN_PUBLIC_ORGANIZATION, | ||
| SEND_MEMBERSHIP_REQUEST, | ||
| } from 'GraphQl/Mutations/OrganizationMutations'; | ||
| import { useMutation, useQuery } from '@apollo/client'; | ||
| import { | ||
| USER_JOINED_ORGANIZATIONS, | ||
| USER_ORGANIZATION_CONNECTION, | ||
| } from 'GraphQl/Queries/OrganizationQueries'; | ||
| import useLocalStorage from 'utils/useLocalstorage'; | ||
| import Avatar from 'components/Avatar/Avatar'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import { ApolloError } from '@apollo/client'; |
There was a problem hiding this comment.
Consolidate duplicate imports from '@apollo/client'
There are duplicate imports from '@apollo/client'. Consolidate them and use proper type imports.
Apply this diff to fix the imports:
-import { useMutation, useQuery } from '@apollo/client';
-import { ApolloError } from '@apollo/client';
+import { useMutation, useQuery, type ApolloError } from '@apollo/client';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { | |
| CANCEL_MEMBERSHIP_REQUEST, | |
| JOIN_PUBLIC_ORGANIZATION, | |
| SEND_MEMBERSHIP_REQUEST, | |
| } from 'GraphQl/Mutations/OrganizationMutations'; | |
| import { useMutation, useQuery } from '@apollo/client'; | |
| import { | |
| USER_JOINED_ORGANIZATIONS, | |
| USER_ORGANIZATION_CONNECTION, | |
| } from 'GraphQl/Queries/OrganizationQueries'; | |
| import useLocalStorage from 'utils/useLocalstorage'; | |
| import Avatar from 'components/Avatar/Avatar'; | |
| import { useNavigate } from 'react-router-dom'; | |
| import { ApolloError } from '@apollo/client'; | |
| import { | |
| CANCEL_MEMBERSHIP_REQUEST, | |
| JOIN_PUBLIC_ORGANIZATION, | |
| SEND_MEMBERSHIP_REQUEST, | |
| } from 'GraphQl/Mutations/OrganizationMutations'; | |
| import { useMutation, useQuery, type ApolloError } from '@apollo/client'; | |
| import { | |
| USER_JOINED_ORGANIZATIONS, | |
| USER_ORGANIZATION_CONNECTION, | |
| } from 'GraphQl/Queries/OrganizationQueries'; | |
| import useLocalStorage from 'utils/useLocalstorage'; | |
| import Avatar from 'components/Avatar/Avatar'; | |
| import { useNavigate } from 'react-router-dom'; |
🧰 Tools
🪛 eslint
[error] 12-12: '@apollo/client' imported multiple times.
(import/no-duplicates)
[error] 20-20: All imports in the declaration are only used as types. Use import type.
(@typescript-eslint/consistent-type-imports)
[error] 20-20: '@apollo/client' imported multiple times.
(import/no-duplicates)
🪛 GitHub Check: Performs linting, formatting, type-checking, checking for different source and target branch
[failure] 12-12:
'/home/runner/work/talawa-admin/talawa-admin/node_modules/@apollo/client/index.js' imported multiple times
[failure] 20-20:
All imports in the declaration are only used as types. Use import type
[failure] 20-20:
'/home/runner/work/talawa-admin/talawa-admin/node_modules/@apollo/client/index.js' imported multiple times
🪛 GitHub Actions: PR Workflow
[error] 12-12: '/home/runner/work/talawa-admin/talawa-admin/node_modules/@apollo/client/index.js' imported multiple times (import/no-duplicates)
|
We have a policy of unassigning contributors who close PRs without getting validation from our reviewer team. This is because:
Please be considerate of our volunteers' limited time and our desire to improve our code base. This policy is stated as a pinned post in all our Talawa repositories. Our YouTube videos explain why this practice is not acceptable to our Community. In most cases you don’t have to close the PR to trigger the GitHub workflow to run again. Making a new commit and pushing it to your GitHub account will normally be sufficient. Unfortunately, if this continues we will have to close the offending PR and unassign you from the issue. |
|
@palisadoes Thank you for the clarification and detailed explanation regarding the policy. I now fully understand the importance of respecting the time and effort of the reviewers, as well as maintaining the continuity of feedback for the benefit of the codebase. Moving forward, I will make sure to follow the process correctly and avoid closing PRs unnecessarily. I truly appreciate the effort the community invests in reviewing contributions and will do my best to align with the guidelines. I sincerely apologize for closing the PR earlier—I did so for some specific reasons. I’ll ensure this doesn’t happen again without proper communication and validation. Thank you for your understanding and support! |
Pull Request for the Talawa User Portal
What kind of change does this PR introduce?
Feature
Issue Number:
Fixes #3162
Did you add tests for your changes?
No
Snapshots/Videos:
issue.3162.mp4
Summary
This PR introduces a 'Visit' button in the Joined Organizations filter.
Does this PR introduce a breaking change?
No
Other information
The feature was tested in multiple scenarios to ensure seamless functionality.
Have you read the contributing guide?
Yes
Summary by CodeRabbit
New Features
Bug Fixes
Refactor