From 217686fdfbea6260ccbf10f3906a5452a19f2e51 Mon Sep 17 00:00:00 2001 From: J Yoon Date: Thu, 26 Oct 2023 22:33:05 +0200 Subject: [PATCH] fixed followed seller --- app/src/app/features/home/home.component.html | 108 ++++++++------ app/src/app/features/home/home.component.scss | 140 ++++++++++-------- app/src/app/features/home/home.component.ts | 24 ++- app/src/app/features/home/home.module.ts | 2 + .../profile/services/profile.facade.ts | 7 +- .../profile/states/profile.selector.ts | 6 +- .../features/profile/states/profile.state.ts | 1 + .../seller-details.component.ts | 3 +- 8 files changed, 176 insertions(+), 115 deletions(-) diff --git a/app/src/app/features/home/home.component.html b/app/src/app/features/home/home.component.html index a0e52b6c..84df54c7 100644 --- a/app/src/app/features/home/home.component.html +++ b/app/src/app/features/home/home.component.html @@ -8,7 +8,7 @@ (click)="onCatClicked(page.path)">
+ style="background-image: url({{ page.img }})">
{{ page.title }}
@@ -150,6 +150,66 @@

Trending products



+ + +
+

Followed Sellers

+
+ + + + + + + + + + + + + + + + +

+ + +
@@ -168,52 +228,6 @@



- - -
-
-

Followed Sellers

-
-
- - - - - - - - -
-
-

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