```
Another article based on the above is [here](https://georgebyte.com/state-management-in-angular-with-observable-store-services/)
@@ -131,7 +134,7 @@ Create a categories component to view the list.
A category has the following properties:
-```
+```txt
category
language
wdt
@@ -140,7 +143,7 @@ wd
The language should be the setting from the i18n selector pre-existing in the app. There are two predetermined categories to start:
-```
+```txt
name=fallacies
wdt=P31
wd=Q186150
@@ -154,26 +157,26 @@ This project has a hardwired category of "cognitive biases" which has a lot of t
The lists will need to have pagination, with the number of items per page configured in an options page. The initial categories list will be short, so it's OK to wait until the items lists to implement this, but be aware that this will be part of the state.
-# Issue #4: Fetch a list of wikidata items for the selected category
+## Issue #4: Fetch a list of wikidata items for the selected category
Create an Items component to display the list of items for a category.
Categories can be used to construct a sparql query can be created like this:
-```
- SELECT ?${category} ?${category}Label ?${category}Description WHERE {
- SERVICE wikibase:label {
- bd:serviceParam wikibase:language "[AUTO_LANGUAGE],${language}".
- }
- ?${category} wdt:${wdt} wd:${wd}.
- }
- LIMIT 1000
+```SQL
+SELECT ?${category} ?${category}Label ?${category}Description WHERE {
+ SERVICE wikibase:label {
+ bd:serviceParam wikibase:language "[AUTO_LANGUAGE],${language}".
+ }
+ ?${category} wdt:${wdt} wd:${wd}.
+}
+LIMIT 1000
const url = wdk.sparqlQuery(sparql);
```
This will construct a url that will return a result with properties like this.
-```
+```json
"head":{
"vars":[
"fallacies",
@@ -220,9 +223,30 @@ Create a details page to show the details of an item selected.
An item can be used to get a detail page from Wikipedia.
Wikidata will also hold a list of languages available for each item. This property can be used to get translated pages.
-Detail pages also contain preamble icons with warnings which need to be captures and shown as collapsable icons under the description.
+Detail pages also contain preamble icons with warnings which need to be captures and shown as collapsible icons under the description.
https://github.com/timofeysie/strumosa-pipe#the-items-api
+I'm not sure about the routing for item details. It seems strange now to have categories as the root for it.
+
+```txt
+/categories/item-details/Q295150
+```
+
+The [Conchifolia details page](https://github.com/timofeysie/conchifolia/blob/master/my-dream-app/src/app/pages/detail/detail.page.ts) uses a backendApiService.getDetail(this.title,listLanguage, false) to get the details.
+
+The only comment there is /api/detail/id/lang/leaveCaseAlone.
+
+A sample item uri looks like this: http://www.wikidata.org/entity/Q295150
+
+https://en.wikipedia.org/wiki/Ecological_fallacy
+
+It could also look like this example from Conchifolia:
+https://en.wikipedia.org/wiki/Actor-observer%20bias
+
+Some reasons to get the wikidata page first is we get a list of available languages, and we get the exact url for the Wikipedia page. In the other projects, this was not a straight forward thing, as there were items that had different labels or different formats or would result in redirects. So to simplify that, parsing the wikidata page for the list of languages and Wikipedia uri links is a good idea.
+
+Next, we used various Node server program to get around CORS issues for this. However, we don't want to have to maintain another app to do this. Also, we would have to pay for traffic if there ever was any. Using React Native was the only client that was able to handle the calls without issue.
+
## Issue #8: Create a form to enter a new category
This will just be a simple input to let the user enter a new category. It will end up being a SPARQL query such as 'list of ' where is a plural word such as "cognitive biases" or "fallacies".
@@ -358,7 +382,7 @@ npm run serve:sw
To test the service worker in production the app must be hosted somewhere. Deployment from the master branch was done with Firebase like this:
-```
+```txt
m$ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
diff --git a/src/app/core/interfaces/item-details.ts b/src/app/core/interfaces/item-details.ts
new file mode 100644
index 0000000..485c5fa
--- /dev/null
+++ b/src/app/core/interfaces/item-details.ts
@@ -0,0 +1,7 @@
+export interface ItemDetails {
+ name: string;
+ label?: string;
+ language: string;
+ wdt: string;
+ wd: string;
+}
diff --git a/src/app/features/category-item-details/category-item-details-routing.module.ts b/src/app/features/category-item-details/category-item-details-routing.module.ts
index 8889523..4c0a2a4 100755
--- a/src/app/features/category-item-details/category-item-details-routing.module.ts
+++ b/src/app/features/category-item-details/category-item-details-routing.module.ts
@@ -5,12 +5,18 @@ import { extract } from '@app/core';
import { ItemsContainerComponent } from './items/container/items-container.component';
import { CategoriesContainerComponent } from './categories/container/categories-list/categories-container.component';
import { AddCategoryContainerComponent } from './categories/container/add-category/add-category-container.component';
+import { ItemDetailsContainerComponent } from './item-details/container/item-details/item-details-container.component';
const routes: Routes = [
// Module is lazy loaded, see app-routing.module.ts
{ path: '', component: CategoriesContainerComponent, data: { title: extract('Categories') } },
{ path: ':name/:wdt/:wd/:language/items', component: ItemsContainerComponent, data: { title: extract('items') } },
- { path: 'add', component: AddCategoryContainerComponent, data: { title: extract('items') } }
+ { path: 'add', component: AddCategoryContainerComponent, data: { title: extract('items') } },
+ {
+ path: 'item-details/:qcode',
+ component: ItemDetailsContainerComponent,
+ data: { title: extract('items') }
+ }
];
@NgModule({
diff --git a/src/app/features/category-item-details/category-item-details.module.ts b/src/app/features/category-item-details/category-item-details.module.ts
index ccb04b3..8fe2a08 100755
--- a/src/app/features/category-item-details/category-item-details.module.ts
+++ b/src/app/features/category-item-details/category-item-details.module.ts
@@ -6,11 +6,17 @@ import { IonicModule } from '@ionic/angular';
import { ItemsContainerComponent } from './items/container/items-container.component';
import { ItemsComponent } from './items/components/items.component';
import { ItemsListEndpoint } from './items/items.endpoint';
+
+import { ItemDetailsContainerComponent } from './item-details/container/item-details/item-details-container.component';
+import { ItemDetailsComponent } from './item-details/components/item-details/item-details.component';
+import { ItemDetailsEndpoint } from './item-details/item-details.endpoint';
+
import { CategoryItemDetailsRoutingModule } from './category-item-details-routing.module';
import { CategoriesContainerComponent } from './categories/container/categories-list/categories-container.component';
import { CategoryComponent } from './categories/components/categories-list/category.component';
import { ReactiveFormsModule } from '@angular/forms';
import { CategoriesEndpoint } from './categories/categories.endpoint';
+
import { AddCategoryContainerComponent } from './categories/container/add-category/add-category-container.component';
import { AddCategoryComponent } from './categories/components/add-category/add-category.component';
@@ -22,9 +28,11 @@ import { AddCategoryComponent } from './categories/components/add-category/add-c
CategoryComponent,
ItemsContainerComponent,
ItemsComponent,
+ ItemDetailsContainerComponent,
+ ItemDetailsComponent,
AddCategoryContainerComponent,
AddCategoryComponent
],
- providers: [ItemsListEndpoint, CategoriesEndpoint]
+ providers: [ItemsListEndpoint, CategoriesEndpoint, ItemDetailsEndpoint]
})
export class CategoryItemDetailsModule {}
diff --git a/src/app/features/category-item-details/category-item-details.service.spec.ts b/src/app/features/category-item-details/category-item-details.service.spec.ts
new file mode 100644
index 0000000..faa6e6c
--- /dev/null
+++ b/src/app/features/category-item-details/category-item-details.service.spec.ts
@@ -0,0 +1,59 @@
+import { Type } from '@angular/core';
+import { TestBed, async } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+import { CoreModule, HttpCacheService } from '@app/core';
+import { QuoteService } from './quote.service';
+
+describe('QuoteService', () => {
+ let quoteService: QuoteService;
+ let httpMock: HttpTestingController;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [CoreModule, HttpClientTestingModule],
+ providers: [HttpCacheService, QuoteService]
+ });
+
+ quoteService = TestBed.get(QuoteService);
+ httpMock = TestBed.get(HttpTestingController as Type);
+
+ const htttpCacheService = TestBed.get(HttpCacheService);
+ htttpCacheService.cleanCache();
+ });
+
+ afterEach(() => {
+ httpMock.verify();
+ });
+
+ describe('getRandomQuote', () => {
+ it('should return a random Chuck Norris quote', () => {
+ // Arrange
+ const mockQuote = { value: 'a random quote' };
+
+ // Act
+ const randomQuoteSubscription = quoteService.getRandomQuote({ category: 'toto' });
+
+ // Assert
+ randomQuoteSubscription.subscribe((quote: string) => {
+ expect(quote).toEqual(mockQuote.value);
+ });
+ httpMock.expectOne({}).flush(mockQuote);
+ });
+
+ it('should return a string in case of error', () => {
+ // Act
+ const randomQuoteSubscription = quoteService.getRandomQuote({ category: 'toto' });
+
+ // Assert
+ randomQuoteSubscription.subscribe((quote: string) => {
+ expect(typeof quote).toEqual('string');
+ expect(quote).toContain('Error');
+ });
+ httpMock.expectOne({}).flush(null, {
+ status: 500,
+ statusText: 'error'
+ });
+ });
+ });
+});
diff --git a/src/app/features/category-item-details/category-item-details.service.ts b/src/app/features/category-item-details/category-item-details.service.ts
new file mode 100644
index 0000000..b6796ec
--- /dev/null
+++ b/src/app/features/category-item-details/category-item-details.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+
+const routes = {
+ entities: (c: WikidataContext) => `/Special:EntityData/Q295150${c.qcode}.json`
+};
+
+export interface WikidataContext {
+ qcode: string;
+}
+
+@Injectable({
+ providedIn: 'root'
+})
+export class CategoryItemDetailsService {
+ constructor(private httpClient: HttpClient) {}
+
+ getRandomQuote(context: WikidataContext): Observable {
+ return this.httpClient
+ .cache()
+ .get(routes.entities(context))
+ .pipe(
+ map((body: any) => body.value),
+ catchError(() => of('Error, could not load joke :-('))
+ );
+ }
+}
diff --git a/src/app/features/category-item-details/item-details/components/item-details/item-details.component.html b/src/app/features/category-item-details/item-details/components/item-details/item-details.component.html
new file mode 100644
index 0000000..a500dad
--- /dev/null
+++ b/src/app/features/category-item-details/item-details/components/item-details/item-details.component.html
@@ -0,0 +1,3 @@
+
+ Coming soon.
+
diff --git a/src/app/features/category-item-details/item-details/components/item-details/item-details.component.scss b/src/app/features/category-item-details/item-details/components/item-details/item-details.component.scss
new file mode 100644
index 0000000..19bd73b
--- /dev/null
+++ b/src/app/features/category-item-details/item-details/components/item-details/item-details.component.scss
@@ -0,0 +1,3 @@
+ion-item {
+ cursor: pointer;
+}
diff --git a/src/app/features/category-item-details/item-details/components/item-details/item-details.component.ts b/src/app/features/category-item-details/item-details/components/item-details/item-details.component.ts
new file mode 100644
index 0000000..69101e7
--- /dev/null
+++ b/src/app/features/category-item-details/item-details/components/item-details/item-details.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ItemDetails } from '@app/core/interfaces/item-details';
+
+@Component({
+ selector: 'item-details',
+ templateUrl: './item-details.component.html',
+ styleUrls: ['./item-details.component.scss']
+})
+export class ItemDetailsComponent implements OnInit {
+ @Input() itemDetails: ItemDetails;
+
+ constructor() {}
+
+ ngOnInit() {}
+}
diff --git a/src/app/features/category-item-details/item-details/container/item-details/item-details-container.component.html b/src/app/features/category-item-details/item-details/container/item-details/item-details-container.component.html
new file mode 100644
index 0000000..1dde6cf
--- /dev/null
+++ b/src/app/features/category-item-details/item-details/container/item-details/item-details-container.component.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+ Categories
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/features/category-item-details/item-details/container/item-details/item-details-container.component.scss b/src/app/features/category-item-details/item-details/container/item-details/item-details-container.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/features/category-item-details/item-details/container/item-details/item-details-container.component.spec.ts b/src/app/features/category-item-details/item-details/container/item-details/item-details-container.component.spec.ts
new file mode 100644
index 0000000..31acfa9
--- /dev/null
+++ b/src/app/features/category-item-details/item-details/container/item-details/item-details-container.component.spec.ts
@@ -0,0 +1,23 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { CategoriesContainerComponent } from './categories-container.component';
+
+describe('CategoriesComponent', () => {
+ let component: CategoriesContainerComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [CategoriesContainerComponent]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CategoriesContainerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/features/category-item-details/item-details/container/item-details/item-details-container.component.ts b/src/app/features/category-item-details/item-details/container/item-details/item-details-container.component.ts
new file mode 100644
index 0000000..6ae9418
--- /dev/null
+++ b/src/app/features/category-item-details/item-details/container/item-details/item-details-container.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { categoriesList } from '@env/environment';
+import { ItemDetailsStore } from '../../item-details-store';
+
+@Component({
+ selector: 'app-categories',
+ templateUrl: './item-details-container.component.html',
+ styleUrls: ['./item-details-container.component.scss'],
+ providers: [ItemDetailsStore]
+})
+export class ItemDetailsContainerComponent implements OnInit {
+ constructor(public store: ItemDetailsStore) {}
+
+ ngOnInit() {
+ // this.store.fetchList();
+ console.log(' this.store', this.store);
+ }
+}
diff --git a/src/app/features/category-item-details/item-details/item-details-store-state.ts b/src/app/features/category-item-details/item-details/item-details-store-state.ts
new file mode 100644
index 0000000..4d15268
--- /dev/null
+++ b/src/app/features/category-item-details/item-details/item-details-store-state.ts
@@ -0,0 +1,7 @@
+import { ItemDetails } from '@app/core/interfaces/item-details';
+
+const initItemDetails: ItemDetails[] = [];
+
+export class ItemDetailsState {
+ itemDetails: ItemDetails[] = initItemDetails;
+}
diff --git a/src/app/features/category-item-details/item-details/item-details-store.ts b/src/app/features/category-item-details/item-details/item-details-store.ts
new file mode 100644
index 0000000..304cbbf
--- /dev/null
+++ b/src/app/features/category-item-details/item-details/item-details-store.ts
@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Store } from '@app/store';
+import { ItemDetailsState } from './item-details-store-state';
+import { ItemDetailsEndpoint } from './item-details.endpoint';
+import { ItemDetails } from '@app/core/interfaces/item-details';
+import { map } from 'rxjs/operators';
+import { I18nService } from '@app/core';
+import { environment } from '@env/environment.prod';
+
+@Injectable()
+export class ItemDetailsStore extends Store {
+ constructor(
+ private itemDetailsEndpoint: ItemDetailsEndpoint,
+ private i18nService: I18nService,
+ private router: Router,
+ private activatedRoute: ActivatedRoute
+ ) {
+ super(new ItemDetailsState());
+ this.fetchDetails();
+ }
+
+ fetchDetails() {
+ const currentLanguage = this.i18nService.language;
+ const sparqlLanguages = environment.sparqlLanguages;
+ const sparqlLanguageObject = sparqlLanguages.find(i => i.appLanguage === currentLanguage);
+ this.activatedRoute.paramMap.subscribe(params => {
+ console.log(params.get('qcode'));
+ const qcode = params.get('qcode');
+ this.fetchDetailsFromEndpoint(qcode, sparqlLanguageObject.sparqlLanguage);
+ });
+ }
+
+ fetchDetailsFromEndpoint(qcode: string, language: string) {
+ this.itemDetailsEndpoint
+ .fetchDetails(qcode, language)
+ .pipe(
+ map((rawItemDetailsList: ItemDetails[]) => {
+ const lst: ItemDetails[] = rawItemDetailsList.map(rawItemDetails => {
+ const itemDetails: ItemDetails = { ...rawItemDetails, language: language };
+ return itemDetails;
+ });
+ return lst;
+ })
+ )
+ .subscribe((itemDetailsFromEndpoint: ItemDetails[]) => {
+ this.state.itemDetails = itemDetailsFromEndpoint;
+ });
+ }
+
+ saveNewItemDetails(newItemDetails: ItemDetails) {
+ this.setState({ ...this.state, itemDetails: [newItemDetails] });
+ this.itemDetailsEndpoint.addItemDetails(newItemDetails);
+ }
+}
diff --git a/src/app/features/category-item-details/item-details/item-details.endpoint.ts b/src/app/features/category-item-details/item-details/item-details.endpoint.ts
new file mode 100644
index 0000000..1d8d946
--- /dev/null
+++ b/src/app/features/category-item-details/item-details/item-details.endpoint.ts
@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import * as categories from '../../../../assets/categories.json';
+import { Observable } from 'rxjs';
+import { ItemDetails } from '@app/core/interfaces/item-details.js';
+
+@Injectable()
+export class ItemDetailsEndpoint {
+ constructor() {
+ this.init();
+ }
+
+ init() {
+ if (!localStorage.getItem('itemDetails')) {
+ localStorage.setItem('itemDetails', JSON.stringify(categories));
+ }
+ }
+
+ fetchDetails(qcode: string, language: string): Observable {
+ let response: Observable = new Observable(observer => {
+ let localItemDetails = JSON.parse(localStorage.getItem('categories'));
+ observer.next(localItemDetails);
+ });
+ return response;
+ }
+
+ addItemDetails(itemDetail: ItemDetails) {
+ let itemDetails = JSON.parse(localStorage.getItem('itemDetails'));
+ categories.push(itemDetails);
+ localStorage.setItem('itemDetails', JSON.stringify(itemDetails));
+ }
+}
diff --git a/src/app/features/category-item-details/items/components/items.component.html b/src/app/features/category-item-details/items/components/items.component.html
index cc69143..20c1e63 100755
--- a/src/app/features/category-item-details/items/components/items.component.html
+++ b/src/app/features/category-item-details/items/components/items.component.html
@@ -1,7 +1,5 @@
-
-
- {{ item.label | titlecase }}
-
+
+ {{ item.label | titlecase }}
diff --git a/src/app/features/category-item-details/items/components/items.component.ts b/src/app/features/category-item-details/items/components/items.component.ts
index 5b278c7..0eed697 100755
--- a/src/app/features/category-item-details/items/components/items.component.ts
+++ b/src/app/features/category-item-details/items/components/items.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit, Input } from '@angular/core';
+import { Router } from '@angular/router';
import { Item } from '../items.store.state';
@Component({
@@ -9,7 +10,14 @@ import { Item } from '../items.store.state';
export class ItemsComponent implements OnInit {
@Input() item: Item;
- constructor() {}
+ constructor(private router: Router) {}
ngOnInit() {}
+
+ gotoItemDetails(itemUri: string) {
+ const lastSlash = itemUri.lastIndexOf('/');
+ const qCode = itemUri.substring(lastSlash + 1, itemUri.length);
+ console.log('q', itemUri);
+ this.router.navigate(['/categories/item-details/' + qCode]);
+ }
}
diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html
index 8f2d40a..0f29e99 100755
--- a/src/app/features/home/home.component.html
+++ b/src/app/features/home/home.component.html
@@ -11,21 +11,14 @@
- Hello world !
+ {{ label['title'] }}
