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.

Sign up for GitHub

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

Jump to bottom

Removing unneccessary calls when opening/editing a post #1463

Open
wants to merge 9 commits into
base: development
Choose a base branch
from
Open

Removing unneccessary calls when opening/editing a post #1463

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1d59da8
Fetching post for post-details in a resolver rather than in the compo…
Angamanga Nov 15, 2024
d82ac98
Merge branch 'development' into USH-1667
Angamanga Nov 15, 2024
7522c60
Running resolver after status-change
Angamanga Nov 17, 2024
bf45529
Using post from resolver in edit-mode
Angamanga Nov 17, 2024
15baeba
Fix for modal-display
Angamanga Nov 17, 2024
f33a313
Using resolver when in collections
Angamanga Nov 17, 2024
da6cb53
Remove trying to get post-info when a post is deleted
Angamanga Nov 17, 2024
4d87575
Using skeleton while resolver is resolving
Angamanga Nov 19, 2024
86e2c7a
Removing error from category-prep
Angamanga Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions apps/web-mzima-client/src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { UshahidiPageTitleStrategy } from '@services';
import { AccessDeniedComponent } from './shared/components/access-denied/access-denied.component';
import { PostNotFoundComponent } from './post/post-not-found/post-not-found.component';
import { PostNotAllowedComponent } from './post/post-not-allowed/post-not-allowed.component';
import { RedirectByPostIdGuard } from './core/guards/redirect.post-id.guard';
import { PostResolver } from './core/resolvers/post-resolver';
import { DeploymentNotFoundComponent } from './shared/components/deployment-not-found/deployment-not-found.component';

const routes: Routes = [
Expand Down Expand Up @@ -128,12 +128,12 @@ const routes: Routes = [
------------------------------------------------------*/
{
path: 'posts/:id',
canActivate: [RedirectGuard, RedirectByPostIdGuard],
canActivate: [RedirectGuard, PostResolver],
component: PostNotFoundComponent,
},
{
path: 'posts/:id',
canActivate: [RedirectGuard, RedirectByPostIdGuard],
canActivate: [RedirectGuard, PostResolver],
component: PostNotAllowedComponent,
},
//-------------------------------------------
Expand All @@ -158,7 +158,7 @@ const routes: Routes = [
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
exports: [RouterModule],
providers: [{ provide: TitleStrategy, useClass: UshahidiPageTitleStrategy }],
})
Expand Down
71 changes: 31 additions & 40 deletions ...app/core/guards/redirect.post-id.guard.ts → ...t/src/app/core/resolvers/post-resolver.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
import { Resolve, ActivatedRouteSnapshot, Router } from '@angular/router';
import { Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { PostsService } from '@mzima-client/sdk';
import { Observable } from 'rxjs';

type QueryParams = { mode?: string; page?: string };

@Injectable({
providedIn: 'root',
})
export class RedirectByPostIdGuard implements CanActivate {
export class PostResolver implements Resolve<any> {
constructor(private router: Router, private postsService: PostsService) {}

/* ---------------------------------------------------
Guard for handling ID mode child routes in data view
----------------------------------------------------*/
canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | boolean {
resolve(route: ActivatedRouteSnapshot): Observable<any> {
const id = route.paramMap.get('id');
const postId = parseInt(id as string);

Expand All @@ -33,31 +30,45 @@ export class RedirectByPostIdGuard implements CanActivate {
/* --------------------------------------------
Workaround for getting collections url and ID
----------------------------------------------*/

const browserURL = window.location.pathname;
const collection = 'collection';
const cutURL = browserURL.replace(`/feed/${collection}/`, '');
const charAfterCollectionId = cutURL.indexOf('/');
const collectionRoute = browserURL.includes(`/${collection}`);
const collectionId = cutURL.slice(0, charAfterCollectionId);

/* -------------------------------------
Check if url is for collections or not
---------------------------------------*/
const url = collectionRoute ? `/feed/${collection}/${collectionId}/${id}` : `/feed/${id}`;
//--------------------------------------

this.postsService.getById(postId).subscribe({
return this.postsService.getById(postId).pipe(
catchError((error) => {
if (error.status === 404) {
//---------------------------------
const pageURL = [`${url}/not-found`];
/* --------------------------------
Redirect happens at router level!
----------------------------------*/
this.router.navigate(pageURL, {
queryParams,
queryParamsHandling: 'merge',
});
}
console.error('Error fetching post', error);
return of(null);
}),
// Posts exists (& user has access to view it)...
next: (post) => {
map((post: any) => {
/* ------------------------------------------------
Prevent accessible post from showing not-found UI
--------------------------------------------------*/
// --------------------------------------------------*/
if (route.routeConfig?.path?.includes('/not-found')) {
//---------------------------------
const pageURL = [`${url}/view`];
/* --------------------------------
Redirect happens at router level!
----------------------------------*/
Redirect happens at router level!
----------------------------------*/
this.router.navigate(pageURL, {
queryParams,
queryParamsHandling: 'merge',
Expand All @@ -71,35 +82,15 @@ export class RedirectByPostIdGuard implements CanActivate {
//---------------------------------
const pageURL = [`${url}/not-allowed`];
/* --------------------------------
Redirect happens at router level!
----------------------------------*/
Redirect happens at router level!
----------------------------------*/
this.router.navigate(pageURL, {
queryParams,
queryParamsHandling: 'merge',
});
}
},

// On error...
error: (err) => {
if (err.status === 404) {
//---------------------------------
const pageURL = [`${url}/not-found`];
/* --------------------------------
Redirect happens at router level!
----------------------------------*/
this.router.navigate(pageURL, {
queryParams,
queryParamsHandling: 'merge',
});
}
},
});

/* --------------------------------------------------
Always return true so that routing is not prevented
on PostCard click or on "Swith Mode" button click
---------------------------------------------------*/
return true;
return post;
}),
);
}
}
22 changes: 10 additions & 12 deletions apps/web-mzima-client/src/app/feed/feed-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@ import {
PostNotFoundComponent,
} from '@post';
import { FeedComponent } from './feed.component';
import { RedirectByPostIdGuard } from '../core/guards/redirect.post-id.guard';

import { PostResolver } from '../core/resolvers/post-resolver';
/* -------------------------------------------------------
RedirectByPostIdGuard added here to all child :id routes
PostResolver added here to all child :id routes
And also added to the parent posts:id in the app-routing
module file
--------------------------------------------------------*/
Expand All @@ -30,31 +29,31 @@ const routes: Routes = [
{
path: ':id/view',
component: PostDetailsComponent,
canActivate: [RedirectByPostIdGuard],
resolve: { post: PostResolver },
data: {
ogTitle: 'nav.feed',
},
runGuardsAndResolvers: 'always',
},
{
path: ':id/edit',
component: PostEditComponent,
canActivate: [RedirectByPostIdGuard],
resolve: { post: PostResolver },
data: {
ogTitle: 'nav.feed',
},
runGuardsAndResolvers: 'always',
},
{
path: ':id/not-found',
component: PostNotFoundComponent,
canActivate: [RedirectByPostIdGuard],
data: {
ogTitle: 'nav.feed',
},
},
{
path: ':id/not-allowed',
component: PostNotAllowedComponent,
canActivate: [RedirectByPostIdGuard],
data: {
ogTitle: 'nav.feed',
},
Expand All @@ -64,7 +63,6 @@ const routes: Routes = [
{
path: 'collection',
redirectTo: '',
// canActivate: [RedirectByPostIdGuard], (i can't get collection ID through this means to use within the guard, so... commenting out)
children: [
{
path: ':id',
Expand All @@ -76,31 +74,31 @@ const routes: Routes = [
{
path: ':id/view',
component: PostDetailsComponent,
canActivate: [RedirectByPostIdGuard],
resolve: { post: PostResolver },
data: {
ogTitle: 'nav.feed',
},
runGuardsAndResolvers: 'always',
},
{
path: ':id/edit',
component: PostEditComponent,
canActivate: [RedirectByPostIdGuard],
resolve: { post: PostResolver },
data: {
ogTitle: 'nav.feed',
},
runGuardsAndResolvers: 'always',
},
{
path: ':id/not-found',
component: PostNotFoundComponent,
canActivate: [RedirectByPostIdGuard],
data: {
ogTitle: 'nav.feed',
},
},
{
path: ':id/not-allowed',
component: PostNotAllowedComponent,
canActivate: [RedirectByPostIdGuard],
data: {
ogTitle: 'nav.feed',
},
Expand Down
28 changes: 26 additions & 2 deletions apps/web-mzima-client/src/app/feed/feed.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ <h3 class="menu-title">{{ 'app.mark_as' | translate }}</h3>
ngxMasonryItem
[feedView]="true"
(edit)="editPost(post)"
(refresh)="refreshPost()"
(refresh)="refreshPost(post)"
(deleted)="postDeleted([post])"
(click)="showPostDetails(post)"
[selectable]="isBulkOptionsVisible && !isLocked(post)"
Expand Down Expand Up @@ -299,7 +299,31 @@ <h3 class="menu-title">{{ 'app.mark_as' | translate }}</h3>
}"
>
<!-- Router outlet here is only for Desktop, the modal popup for small devices is in .ts file -->
<router-outlet *ngIf="isDesktop && mode === FeedMode.Id"></router-outlet>
<!-- Display skeleton while post is resolving -->
<div class="loader" *ngIf="showSkeleton && isDesktop && mode === FeedMode.Id">
<div class="loader__post-head">
<span class="loader__post-head-item"></span>
<span class="loader__post-head-item"></span>
<span class="loader__post-head-item"></span>
</div>
<div>
<div class="loader__spinner">
<app-spinner></app-spinner>
</div>
</div>
<div class="loader__post-survey"></div>
<div class="loader__post-title"></div>
<div class="loader__metadata">
<div class="loader__avatar"></div>
<div class="">
<div class="loader__metadata-top"></div>
<div class="loader__metadata-bottom"></div>
</div>
</div>
<div class="loader__content"></div>
</div>

<router-outlet *ngIf="!showSkeleton && mode === FeedMode.Id"></router-outlet>
</div>
</ng-container>
</div>
Expand Down
78 changes: 78 additions & 0 deletions apps/web-mzima-client/src/app/feed/feed.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,85 @@
.loader {
padding: 12px 0;
margin-inline-end: 8px;
opacity: 0.8;

&__post-head {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-bottom: 12px;

&-item {
height: 36px;
width: 36px;
background: var(--color-neutral-20);
border-radius: 5px;
}
}

&__post-survey {
height: 55px;
width: 100%;
background: var(--color-neutral-20);
margin-top: 12px;
margin-bottom: 12px;
border-radius: 5px;
}

&__post-title {
height: 30px;
width: 60%;
background: var(--color-neutral-20);
border-radius: 5px;
margin-bottom: 12px;
}

&__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-neutral-20);
margin-right: 16px;
}

&__metadata {
display: flex;
margin-bottom: 12px;

&-top {
height: 40%;
width: 80px;
background: var(--color-neutral-20);
margin-bottom: 8px;
border-radius: 5px;
}

&-bottom {
height: 40%;
width: 200px;
background: var(--color-neutral-20);
margin-bottom: 12px;
border-radius: 5px;
}
}

&__content {
width: 100%;
height: 500px;
background: var(--color-neutral-20);
border-radius: 5px;
}

&__spinner {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
width: 250px;
margin: 0 auto;
border: 2px solid var(--color-neutral-20);
border-radius: 15px;
}
&--border {
border: 1px solid var(--color-neutral-20);
border-radius: 4px;
Expand Down
Loading
Loading