feat: add toastr service #23
Conversation
WalkthroughThe update modifies the Angular project to integrate toast notifications. The Changes
Suggested reviewers
Poem
Warning Rate limit exceeded@Hitesh-Kandpal has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 22 minutes and 24 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the 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. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
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
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
Files selected for processing (4)
- angular.json (3 hunks)
- package.json (3 hunks)
- src/app/shared/services/toastr.service.ts (1 hunks)
- tsconfig.json (1 hunks)
Additional comments not posted (11)
tsconfig.json (1)
9-9: LGTM!The addition of
"allowSyntheticDefaultImports": trueis a good enhancement for compatibility with various JavaScript modules and libraries.The code changes are approved.
src/app/shared/services/toastr.service.ts (5)
9-17: LGTM!The constructor correctly initializes the toastr options. Consider adding comments to explain the configuration options if needed.
The code changes are approved.
19-21: LGTM!The
successmethod correctly displays a success message using toastr.The code changes are approved.
23-25: LGTM!The
errormethod correctly displays an error message using toastr.The code changes are approved.
27-29: LGTM!The
infomethod correctly displays an info message using toastr.The code changes are approved.
31-33: LGTM!The
warningmethod correctly displays a warning message using toastr.The code changes are approved.
package.json (2)
34-34: LGTM!The addition of
toastras a dependency is appropriate for the toastr service.The code changes are approved.
49-49: LGTM!The addition of
@types/toastras a dependency is appropriate for TypeScript type definitions.The code changes are approved.
angular.json (3)
30-30: LGTM!The addition of the Toastr CSS file to the styles array is appropriate and necessary for styling the Toastr notifications.
The code changes are approved.
90-90: LGTM!The addition of the Toastr CSS file to the styles array in the test options is appropriate and necessary for styling the Toastr notifications during testing.
The code changes are approved.
106-107: LGTM!The addition of the
analyticsproperty with a unique identifier in the CLI settings is appropriate for tracking and analytics purposes.The code changes are approved.
package.json
Outdated
| @@ -31,6 +31,7 @@ | |||
| "primeicons": "^6.0.1", | |||
| "primeng": "^16.7.2", | |||
| "rxjs": "~7.8.0", | |||
| "toastr": "^2.1.4", | |||
There was a problem hiding this comment.
Any reason why we are using this?
We have created this foundation using primeNG. So we should be using toast from primeNG too?
There was a problem hiding this comment.
i took the toastr service from pickleball initial setup as suggested by Raj, there we were using toastr, also I don't see any primeng module imported in foundation right now, should I go ahead an add primeng.module.ts and use primeng toastr instead of this?
There was a problem hiding this comment.
Yes use primeng toastrs only. For Foundation we will rely on PrimeNG only
https://primeng.org/toast
There was a problem hiding this comment.
removed 'toastr' and used primeng toast module
package.json
Outdated
| @@ -31,6 +31,7 @@ | |||
| "primeicons": "^6.0.1", | |||
| "primeng": "^16.7.2", | |||
| "rxjs": "~7.8.0", | |||
| "toastr": "^2.1.4", | |||
There was a problem hiding this comment.
Yes use primeng toastrs only. For Foundation we will rely on PrimeNG only
https://primeng.org/toast
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
src/app/app.component.html (1)
1-1: Consider configuring toast position and behavior.The basic toast implementation looks good. Consider adding configuration options like position, life (duration), and severity based on your notification requirements.
Example configuration:
-<p-toast /> +<p-toast position="top-right" [life]="3000" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
angular.json(3 hunks)package.json(0 hunks)src/app/app.component.html(1 hunks)src/app/app.module.ts(2 hunks)
💤 Files with no reviewable changes (1)
- package.json
🧰 Additional context used
🪛 eslint
src/app/app.module.ts
[error] 11-11: @angular/platform-browser/animations import should occur before import of ./app.component
(import/order)
[error] 12-12: primeng/api import should occur before import of ./app.component
(import/order)
🪛 GitHub Check: Lint
src/app/app.module.ts
[failure] 11-11:
@angular/platform-browser/animations import should occur before import of ./app.component
[failure] 12-12:
primeng/api import should occur before import of ./app.component
🔇 Additional comments (3)
src/app/app.module.ts (1)
19-22: LGTM! Toast module setup is complete.
The necessary modules and providers are correctly configured:
- BrowserAnimationsModule for animations
- ToastModule for toast functionality
- MessageService provider for managing toast messages
Also applies to: 31-31
angular.json (2)
106-107: LGTM! Analytics configuration added.
The analytics UUID has been properly configured.
90-90:
Remove unused toastr CSS import.
Since the project is using PrimeNG's toast component and the toastr package has been removed from package.json, this CSS import should be removed to prevent build failures.
"styles": [
"node_modules/primeng/resources/themes/lara-light-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css",
- "node_modules/toastr/build/toastr.min.css",
"src/app/styles/main.styles.scss"
],Let's verify the toastr package removal:
src/app/app.module.ts
Outdated
| import { ToastModule } from 'primeng/toast'; | ||
| import AppComponent from './app.component'; | ||
| import AppRoutingModule from './app-routing.module'; | ||
| import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | ||
| import { MessageService } from 'primeng/api'; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix import ordering per linting rules.
The imports need to be reordered to follow the project's style guide.
import { NgModule } from '@angular/core';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
// eslint-disable-next-line import/no-extraneous-dependencies
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import HttpLoaderFactory from 'src/assets/i18n/loader';
import { BrowserModule } from '@angular/platform-browser';
+import { MessageService } from 'primeng/api';
+import { ToastModule } from 'primeng/toast';
import AppComponent from './app.component';
import AppRoutingModule from './app-routing.module';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MessageService } from 'primeng/api';📝 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 { ToastModule } from 'primeng/toast'; | |
| import AppComponent from './app.component'; | |
| import AppRoutingModule from './app-routing.module'; | |
| import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | |
| import { MessageService } from 'primeng/api'; | |
| import { NgModule } from '@angular/core'; | |
| import { HashLocationStrategy, LocationStrategy } from '@angular/common'; | |
| // eslint-disable-next-line import/no-extraneous-dependencies | |
| import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; | |
| import { HttpClient, HttpClientModule } from '@angular/common/http'; | |
| import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | |
| import HttpLoaderFactory from 'src/assets/i18n/loader'; | |
| import { BrowserModule } from '@angular/platform-browser'; | |
| import { MessageService } from 'primeng/api'; | |
| import { ToastModule } from 'primeng/toast'; | |
| import AppComponent from './app.component'; | |
| import AppRoutingModule from './app-routing.module'; |
🧰 Tools
🪛 eslint
[error] 11-11: @angular/platform-browser/animations import should occur before import of ./app.component
(import/order)
[error] 12-12: primeng/api import should occur before import of ./app.component
(import/order)
🪛 GitHub Check: Lint
[failure] 11-11:
@angular/platform-browser/animations import should occur before import of ./app.component
[failure] 12-12:
primeng/api import should occur before import of ./app.component
Changes in PR:
Summary by CodeRabbit
New Features
Enhancements
Dependencies
toastrdependency from the project.