From e435d575ddc77fbd5f1b11d57742e55575445c30 Mon Sep 17 00:00:00 2001 From: Ian Mungai Date: Thu, 22 Sep 2022 11:25:53 +0300 Subject: [PATCH 1/3] Page not found --- .../src/app/app-routing.module.ts | 6 +++++ angular-apollo-tailwind/src/app/app.module.ts | 3 ++- .../page-not-found.component.css | 7 ++++++ .../page-not-found.component.html | 3 +++ .../page-not-found.component.spec.ts | 24 +++++++++++++++++++ .../page-not-found.component.ts | 8 +++++++ 6 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.css create mode 100644 angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.html create mode 100644 angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.spec.ts create mode 100644 angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.ts diff --git a/angular-apollo-tailwind/src/app/app-routing.module.ts b/angular-apollo-tailwind/src/app/app-routing.module.ts index e84ba9ff8..abe0e1e35 100644 --- a/angular-apollo-tailwind/src/app/app-routing.module.ts +++ b/angular-apollo-tailwind/src/app/app-routing.module.ts @@ -16,6 +16,12 @@ const routes: Routes = [ path: '', loadChildren: () => import('./home/home.module').then((m) => m.HomeModule), }, + //Wild Card Route for 404 request + // { + // path: '**', + // pathMatch: 'full', + // component: PagenotfoundComponent, + // }, ]; @NgModule({ diff --git a/angular-apollo-tailwind/src/app/app.module.ts b/angular-apollo-tailwind/src/app/app.module.ts index 9de94f48b..a2765b7c1 100644 --- a/angular-apollo-tailwind/src/app/app.module.ts +++ b/angular-apollo-tailwind/src/app/app.module.ts @@ -8,9 +8,10 @@ import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { GraphQLModule } from './gql/graphql.module'; import { TokenInterceptor } from './auth/token.interceptor'; +import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component'; @NgModule({ - declarations: [AppComponent], + declarations: [AppComponent, PageNotFoundComponent], imports: [ BrowserModule, BrowserAnimationsModule, diff --git a/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.css b/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.css new file mode 100644 index 000000000..2f9099de9 --- /dev/null +++ b/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.css @@ -0,0 +1,7 @@ +.container { + @apply flex items-center justify-center my-8; +} + +.title { + @apply text-lg; +} diff --git a/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.html b/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.html new file mode 100644 index 000000000..4e33179dd --- /dev/null +++ b/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.html @@ -0,0 +1,3 @@ +
+

404

+
diff --git a/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.spec.ts b/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.spec.ts new file mode 100644 index 000000000..d11a45e1d --- /dev/null +++ b/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PageNotFoundComponent } from './page-not-found.component'; + +describe('PageNotFoundComponent', () => { + let component: PageNotFoundComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [PageNotFoundComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PageNotFoundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.ts b/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.ts new file mode 100644 index 000000000..0d8510ab8 --- /dev/null +++ b/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-page-not-found', + templateUrl: './page-not-found.component.html', + styleUrls: ['./page-not-found.component.css'], +}) +export class PageNotFoundComponent {} From 87c6c6178370eec965dcd657cd591ed6ae55c7d0 Mon Sep 17 00:00:00 2001 From: Ian Mungai Date: Thu, 22 Sep 2022 20:51:26 +0300 Subject: [PATCH 2/3] wildcard --- angular-apollo-tailwind/src/app/app-routing.module.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/angular-apollo-tailwind/src/app/app-routing.module.ts b/angular-apollo-tailwind/src/app/app-routing.module.ts index abe0e1e35..30c4d8a06 100644 --- a/angular-apollo-tailwind/src/app/app-routing.module.ts +++ b/angular-apollo-tailwind/src/app/app-routing.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { RouteConfigModule } from '@this-dot/route-config'; +import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component'; const routes: Routes = [ { @@ -17,11 +18,11 @@ const routes: Routes = [ loadChildren: () => import('./home/home.module').then((m) => m.HomeModule), }, //Wild Card Route for 404 request - // { - // path: '**', - // pathMatch: 'full', - // component: PagenotfoundComponent, - // }, + { + path: '**', + pathMatch: 'full', + component: PageNotFoundComponent, + }, ]; @NgModule({ From 724846fa0529cf1f998f8e2041eb826046ff7a15 Mon Sep 17 00:00:00 2001 From: Ian Mungai Date: Fri, 23 Sep 2022 18:24:31 +0300 Subject: [PATCH 3/3] fix: user page --- .../src/app/app-routing.module.ts | 11 ++--- .../page-not-found.component.css | 7 --- .../page-not-found.component.html | 49 +++++++++++++++++-- .../app/components/toaster/toaster.service.ts | 7 ++- .../src/app/gql/graphql.module.ts | 6 ++- .../src/environments/environment.ts | 4 +- angular-apollo-tailwind/tailwind.config.js | 15 ++++++ 7 files changed, 78 insertions(+), 21 deletions(-) diff --git a/angular-apollo-tailwind/src/app/app-routing.module.ts b/angular-apollo-tailwind/src/app/app-routing.module.ts index 30c4d8a06..93c90aefe 100644 --- a/angular-apollo-tailwind/src/app/app-routing.module.ts +++ b/angular-apollo-tailwind/src/app/app-routing.module.ts @@ -14,15 +14,14 @@ const routes: Routes = [ redirectTo: 'signin/redirect', }, { - path: '', - loadChildren: () => import('./home/home.module').then((m) => m.HomeModule), - }, - //Wild Card Route for 404 request - { - path: '**', + path: '404', pathMatch: 'full', component: PageNotFoundComponent, }, + { + path: '', + loadChildren: () => import('./home/home.module').then((m) => m.HomeModule), + }, ]; @NgModule({ diff --git a/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.css b/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.css index 2f9099de9..e69de29bb 100644 --- a/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.css +++ b/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.css @@ -1,7 +0,0 @@ -.container { - @apply flex items-center justify-center my-8; -} - -.title { - @apply text-lg; -} diff --git a/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.html b/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.html index 4e33179dd..4a6217435 100644 --- a/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.html +++ b/angular-apollo-tailwind/src/app/components/page-not-found/page-not-found.component.html @@ -1,3 +1,46 @@ -
-

404

-
+ + +
+
+
+

+ Error404 +

+

+ Sorry, we couldn't find this page. +

+ + Back to homepage + +
+
+
diff --git a/angular-apollo-tailwind/src/app/components/toaster/toaster.service.ts b/angular-apollo-tailwind/src/app/components/toaster/toaster.service.ts index 898ef302b..34e2d9362 100644 --- a/angular-apollo-tailwind/src/app/components/toaster/toaster.service.ts +++ b/angular-apollo-tailwind/src/app/components/toaster/toaster.service.ts @@ -1,4 +1,5 @@ import { Injectable } from '@angular/core'; +import { Router } from '@angular/router'; import { Observable, Subject } from 'rxjs'; import { ToastEvent } from './toaster.model'; @@ -9,11 +10,15 @@ export class ToasterService { toastEvents: Observable; private _toastEvents = new Subject(); - constructor() { + constructor(private router: Router) { this.toastEvents = this._toastEvents.asObservable(); } showToast(toast: ToastEvent) { this._toastEvents.next(toast); } + + goTo404(err: any) { + this.router.navigate(['/404']); + } } diff --git a/angular-apollo-tailwind/src/app/gql/graphql.module.ts b/angular-apollo-tailwind/src/app/gql/graphql.module.ts index a9cc4cb47..cb002f6b1 100644 --- a/angular-apollo-tailwind/src/app/gql/graphql.module.ts +++ b/angular-apollo-tailwind/src/app/gql/graphql.module.ts @@ -16,15 +16,17 @@ export function createApollo( ): ApolloClientOptions { const http = httpLink.create({ uri }); const error = onError(({ networkError, graphQLErrors }) => { - if (graphQLErrors) + if (graphQLErrors) { graphQLErrors.map(({ message, locations, path }) => { toasterService.showToast({ type: ToasterType.ERROR, title: 'GraphQL error', - message: `Message: ${message}, + message: `Message: ${message}, Location: ${locations}, Path: ${path}`, }); }); + toasterService.goTo404(graphQLErrors); + } if (networkError) { toasterService.showToast({ diff --git a/angular-apollo-tailwind/src/environments/environment.ts b/angular-apollo-tailwind/src/environments/environment.ts index d204c442e..e0449f966 100644 --- a/angular-apollo-tailwind/src/environments/environment.ts +++ b/angular-apollo-tailwind/src/environments/environment.ts @@ -12,9 +12,9 @@ export const environment = { production: false, - apiUrl: 'https://api.starter.dev', + apiUrl: '', graphApiUrl: 'https://api.github.com/graphql', - redirectUrl: 'http://localhost:4200/redirect', + redirectUrl: 'https://localhost:4200/redirect', }; /* diff --git a/angular-apollo-tailwind/tailwind.config.js b/angular-apollo-tailwind/tailwind.config.js index 43a3a87fd..8947386bc 100644 --- a/angular-apollo-tailwind/tailwind.config.js +++ b/angular-apollo-tailwind/tailwind.config.js @@ -12,6 +12,21 @@ module.exports = { 30: '30ms', }, }, + fontSize: { + 'xs': '.75rem', + 'sm': '.875rem', + 'base': '1rem', + 'lg': '1.125rem', + 'xl': '1.25rem', + '2xl': '1.5rem', + '3xl': '1.875rem', + '4xl': '2.25rem', + '5xl': '3rem', + '6xl': '4rem', + '7xl': '4.5rem', + '8xl': '6rem', + '9xl': '8rem' + } }, variants: { extend: {},