@@ -168,52 +228,6 @@
-
-
-
-
-
Followed Sellers
-
-
-
-
-
- 0"
- style="height: 100px"
- (click)="redirect(seller.id)"
- [src]="seller.logo"
- [alt]="seller.name">
-
-
-
-
-
-
-
-
-
-
diff --git a/app/src/app/features/home/home.component.scss b/app/src/app/features/home/home.component.scss
index 588c7187..79b9d43e 100644
--- a/app/src/app/features/home/home.component.scss
+++ b/app/src/app/features/home/home.component.scss
@@ -26,48 +26,61 @@ ion-button {
}
swiper-container {
- max-width: 400px;
+ // max-width: 400px;
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100px;
+}
+swiper-slide ion-img {
+ display: block;
// width: 100%;
- // height: 100px;
+ height: 100%;
+ object-fit: contain;
}
swiper-slide {
- // display: flex;
- // flex-direction: row;
- // align-items: center;
- // justify-content: center;
-}
-.swiper-button-prev,
-.swiper-button-next {
- background-color: navy;
- color: white;
- padding: 0.5rem;
- border-radius: 0.5rem;
+ text-align: center;
+ // font-size: 18px;
+ // background: #fff;
+ width: fit-content;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
+// .swiper-button-prev,
+// .swiper-button-next {
+// background-color: navy;
+// color: white;
+// padding: 0.5rem;
+// border-radius: 0.5rem;
+// }
-.swiper-button-prev {
- left: 2rem;
- right: auto;
-}
+// .swiper-button-prev {
+// left: 2rem;
+// right: auto;
+// }
-.swiper-button-next {
- right: 2rem;
- left: auto;
-}
+// .swiper-button-next {
+// right: 2rem;
+// left: auto;
+// }
@media (min-width: 640px) {
- .swiper-button-prev,
- .swiper-button-next {
- padding: 1rem;
- }
+ // .swiper-button-prev,
+ // .swiper-button-next {
+ // padding: 1rem;
+ // }
- .swiper-button-prev {
- left: 10rem;
- }
+ // .swiper-button-prev {
+ // left: 10rem;
+ // }
- .swiper-button-next {
- right: 10rem;
- }
+ // .swiper-button-next {
+ // right: 10rem;
+ // }
}
a {
@@ -269,20 +282,25 @@ a {
}
@media (max-width: 768px) {
+ .side-pannel,
+ .cat-container,
+ .register-title,
+ .register-btn {
+ width: 100%;
+ }
+ .row1 {
+ height: auto;
+ }
+ .carousel-container,
+ .custom-carousel,
+ .row,
+ .register-container {
+ flex-wrap: wrap;
+ }
- .side-pannel,.cat-container,.register-title, .register-btn{
- width: 100%;
- }
- .row1{
- height: auto;
- }
- .carousel-container,.custom-carousel, .row,.register-container{
- flex-wrap: wrap;
- }
-
- h2{
- font-size: 6vw !important;
- }
+ h2 {
+ font-size: 6vw !important;
+ }
}
.cat-img {
@@ -358,28 +376,32 @@ a {
padding-right: 20px;
}
}
-@media (max-width: 600px){
-.cat-container.parents {
+@media (max-width: 600px) {
+ .cat-container.parents {
max-width: 90%;
padding-left: 0px;
padding-right: 0px;
-}}
+ }
+}
-@media (max-width: 768px){
-.subCategory {
- width: 33%!important;
-}}
+@media (max-width: 768px) {
+ .subCategory {
+ width: 33% !important;
+ }
+}
-@media (max-width: 600px){
-.subCategory {
- width: 50%!important;
-}}
+@media (max-width: 600px) {
+ .subCategory {
+ width: 50% !important;
+ }
+}
.hoverZoom {
transition: transform 0.5s;
}
-@media (max-width: 600px){
-.cat-container.parents .subCategoryCard .inner {
- font-size: 1.1rem!important;
-}}
\ No newline at end of file
+@media (max-width: 600px) {
+ .cat-container.parents .subCategoryCard .inner {
+ font-size: 1.1rem !important;
+ }
+}
diff --git a/app/src/app/features/home/home.component.ts b/app/src/app/features/home/home.component.ts
index 3f91587d..a136c6c7 100644
--- a/app/src/app/features/home/home.component.ts
+++ b/app/src/app/features/home/home.component.ts
@@ -5,6 +5,8 @@ import {
OnInit,
ViewChild,
OnDestroy,
+ AfterViewInit,
+ ChangeDetectorRef,
} from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
import { ProductService } from '@shared/servicies/product/product.service';
@@ -14,7 +16,8 @@ import { ProfileFacade } from '@features/profile/services/profile.facade';
import { ProductCardFacade } from '@app/shared/components/product-card/services/product-card.facade';
import { AuthFacade } from '../auth/services/auth.facade';
-import { register } from 'swiper/element/bundle';
+import { register, SwiperContainer } from 'swiper/element/bundle';
+import Swiper from 'swiper';
register();
@Component({
selector: 'app-home',
@@ -77,7 +80,6 @@ export class HomeComponent implements OnInit, OnDestroy {
path: '/category/Toys%20and%20Games',
img: 'assets/images/categories/toys.png',
},
-
];
// isAuthenticated$;
constructor(
@@ -85,10 +87,20 @@ export class HomeComponent implements OnInit, OnDestroy {
private productService: ProductService,
public profileFacade: ProfileFacade,
public productCardFacade: ProductCardFacade,
- public authFacade: AuthFacade
+ public authFacade: AuthFacade,
+ private changeDetector: ChangeDetectorRef
) {
- this.followedSellers$ = this.profileFacade.followedSellers$;
-
+ this.followedSellers$ = this.profileFacade.followedSellersDetails$;
+ this.followedSellers$.pipe(debounceTime(500)).subscribe(data => {
+ if (data.length > 0) {
+ setTimeout(() => {
+ const swiperEl: SwiperContainer | null =
+ document.querySelector('swiper-container');
+ swiperEl?.swiper.update();
+ }, 1000);
+ // this.swiperr.update();
+ }
+ });
this.forYouProducts$ = of(null);
// this.followSubs = this.profileFacade.followedSellers$.subscribe(val => {
// if ((val !== null || val !== undefined) && val.length > 0) {
@@ -110,9 +122,11 @@ export class HomeComponent implements OnInit, OnDestroy {
}
});
}
+
async ionViewWillEnter() {
this.profileFacade.fetchRecommendedProducts();
}
+
async fetchFollowedSellerDetails() {
await this.profileFacade.fetchFollowedSellerDetails();
}
diff --git a/app/src/app/features/home/home.module.ts b/app/src/app/features/home/home.module.ts
index c58acc47..68474fb2 100644
--- a/app/src/app/features/home/home.module.ts
+++ b/app/src/app/features/home/home.module.ts
@@ -26,6 +26,7 @@ import { FooterModule } from '@shared/components/footer/footer.module';
import { ProductCardModule } from '../../shared/components/product-card/product-card.module';
// import { ProfileModule } from '@features/profile/profile.module';
import { ComboStateModule } from '@features/combo-state/combo-state.module';
+import { ViewSizeModule } from '@app/shared/directives/view-size/view-size.module';
// const routes: Routes = [
// { path: '', pathMatch: 'full', component: HomeComponent },
@@ -64,6 +65,7 @@ import { ComboStateModule } from '@features/combo-state/combo-state.module';
ProductCardModule,
// ProfileModule,
ComboStateModule,
+ ViewSizeModule,
// RouterModule.forChild(routes),
],
})
diff --git a/app/src/app/features/profile/services/profile.facade.ts b/app/src/app/features/profile/services/profile.facade.ts
index c276f1a9..0a149ab2 100644
--- a/app/src/app/features/profile/services/profile.facade.ts
+++ b/app/src/app/features/profile/services/profile.facade.ts
@@ -24,6 +24,8 @@ export class ProfileFacade implements OnDestroy {
private wishlist$!: Observable
;
@Select(ProfileSelectors.getFollowedSellers)
public followedSellers$!: Observable;
+ @Select(ProfileSelectors.getDetailedFollowedSellers)
+ public followedSellersDetails$!: Observable;
@Select(ProfileSelectors.getRecommendedProducts)
public recommendedProducts$!: Observable;
private authSubscription = new Subscription();
@@ -144,7 +146,10 @@ export class ProfileFacade implements OnDestroy {
} else {
try {
this.profileService.toggleFollowSeller(seller.name);
- return new ProfileActions.UpdateFollowedSeller(seller);
+ return [
+ new ProfileActions.ToggleSellers(seller.name),
+ new ProfileActions.UpdateFollowedSeller(seller),
+ ];
} catch (error) {
return this.setError(error);
}
diff --git a/app/src/app/features/profile/states/profile.selector.ts b/app/src/app/features/profile/states/profile.selector.ts
index eb82c155..902c0566 100644
--- a/app/src/app/features/profile/states/profile.selector.ts
+++ b/app/src/app/features/profile/states/profile.selector.ts
@@ -25,7 +25,11 @@ export class ProfileSelectors {
return state.recommended_products || [];
}
@Selector([ProfileState])
- static getFollowedSellers(state: ProfileStateModel): ISellerCard[] {
+ static getFollowedSellers(state: ProfileStateModel): string[] {
+ return state.profile?.details.followed_sellers || [];
+ }
+ @Selector([ProfileState])
+ static getDetailedFollowedSellers(state: ProfileStateModel): ISellerCard[] {
return state.followed_sellers || [];
}
}
diff --git a/app/src/app/features/profile/states/profile.state.ts b/app/src/app/features/profile/states/profile.state.ts
index 91b93c9a..44e4bb1e 100644
--- a/app/src/app/features/profile/states/profile.state.ts
+++ b/app/src/app/features/profile/states/profile.state.ts
@@ -174,6 +174,7 @@ export class ProfileState {
const index = draft.profile.details.followed_sellers.indexOf(
action.name
);
+ console.log(action.name);
if (index === -1) {
draft.profile.details.followed_sellers.push(action.name);
} else {
diff --git a/app/src/app/features/seller-details/seller-details.component.ts b/app/src/app/features/seller-details/seller-details.component.ts
index e5798003..c51ce071 100644
--- a/app/src/app/features/seller-details/seller-details.component.ts
+++ b/app/src/app/features/seller-details/seller-details.component.ts
@@ -51,7 +51,6 @@ export class SellerDetailsComponent implements OnInit, OnDestroy {
'Home and Kitchen',
'Sports and Outdoors',
'Toys and Games',
-
];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@Input() sellerID: any;
@@ -78,7 +77,7 @@ export class SellerDetailsComponent implements OnInit, OnDestroy {
setTimeout(() => {
this.showSpinner = false;
- }, 6000);
+ }, 1000);
// Subscribe to changes in the query parameters (seller_id)
this.paramMapSubscription = this.route.queryParamMap