Merge pull request #1199 from snypy/data-access-module

Implement data access module, replace file resource

package.json

@@ -35,6 +35,7 @@
  "@ngxs-labs/select-snapshot": "^4.0.0",
  "@ngxs/store": "^3.7.3",
  "@popperjs/core": "^2.11.5",
+ "@snypy/rest-client": "^1.0.2",
  "bootstrap": "^5.1.3",
  "core-js": "^3.22.4",
  "karma-coverage": "^2.2.0",

src/app/app.module.ts

@@ -68,6 +68,8 @@ import { LanguageState } from './state/language/language.state';
 import { ScopeState } from './state/scope/scope.state';
 import { SnippetState } from './state/snippet/snippet.state';
 import { FullscreenComponent } from './layout/fullscreen/fullscreen.component';
+import { ApiModule, Configuration, ConfigurationParameters } from '@snypy/rest-client';
+import { environment } from '../environments/environment';
 
 const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true,
@@ -102,6 +104,13 @@ const appRoutes: Routes = [
  },
 ];
 
+export function apiConfigFactory(): Configuration {
+ const params: ConfigurationParameters = {
+ basePath: environment.basePath,
+ };
+ return new Configuration(params);
+}
+
 @NgModule({
  declarations: [
  AppComponent,
@@ -143,6 +152,7 @@ const appRoutes: Routes = [
  FullscreenComponent,
  ],
  imports: [
+ ApiModule.forRoot(apiConfigFactory),
  BrowserModule,
  HttpClientModule,
  NgxResourceFactoryModule.forRoot(),

src/app/components/snippet/snippet.component.html

@@ -1,8 +1,8 @@
 <div *ngIf="activeSnippet">
- <div class="label-list" *ngIf="labels.length">
+ <div class="label-list">
  <span *ngFor="let label of activeSnippet.labels">
- <span class="badge bg-info" *ngIf="(labels | filterBy: ['pk']:label:[true])[0]">
- {{ (labels | filterBy: ['pk']:label:[true])[0].name }}
+ <span class="badge bg-info" *ngIf="(labels$ | async | filterBy: ['pk']:label:[true])[0]">
+ {{ (labels$ | async | filterBy: ['pk']:label:[true])[0].name }}
  </span>
  </span>
  </div>
@@ -11,7 +11,7 @@
  <markdown ngPreserveWhitespaces [data]="activeSnippet.description"></markdown>
  </div>
 
- <div *ngFor="let file of files" style="margin: 20px" #container>
+ <div *ngFor="let file of files$ | async" style="margin: 20px" #container>
  <button
  *ngIf="copiedFile !== file"
  ngxClipboard

src/app/components/snippet/snippet.component.spec.ts

@@ -1,8 +1,8 @@
 import { HttpClientModule } from '@angular/common/http';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NgxsModule } from '@ngxs/store';
+import { ApiModule } from '@snypy/rest-client';
 import { NgxResourceFactoryModule } from 'ngx-resource-factory';
-import { FileResource } from '../../services/resources/file.resource';
 import { SnippetComponent } from './snippet.component';
 
 describe('SnippetComponent', () => {
@@ -12,8 +12,8 @@ describe('SnippetComponent', () => {
  beforeEach(waitForAsync(() => {
  TestBed.configureTestingModule({
  declarations: [SnippetComponent],
- imports: [NgxResourceFactoryModule.forRoot(), HttpClientModule, NgxsModule.forRoot()],
- providers: [FileResource],
+ imports: [NgxResourceFactoryModule.forRoot(), HttpClientModule, NgxsModule.forRoot(), ApiModule],
+ providers: [],
  }).compileComponents();
  }));
 

src/app/components/snippet/snippet.component.ts

@@ -1,9 +1,8 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { SelectSnapshot } from '@ngxs-labs/select-snapshot';
 import { Select } from '@ngxs/store';
-import { ResourceModel } from 'ngx-resource-factory/resource/resource-model';
+import { FileService } from '@snypy/rest-client';
 import { Observable, Subscription } from 'rxjs';
-import { FileResource } from '../../services/resources/file.resource';
 import { Label } from '../../services/resources/label.resource';
 import { Language } from '../../services/resources/language.resource';
 import { Snippet } from '../../services/resources/snippet.resource';
@@ -17,46 +16,31 @@ import { LanguageState } from '../../state/language/language.state';
 })
 export class SnippetComponent implements OnInit, OnDestroy {
  activeSnippet: Snippet = null;
- files: ResourceModel<File>[] = [];
- labels: Label[] = [];
  copiedFile: File | null = null;
  timer = null;
 
- availableLabelsSubscription: Subscription;
- snippetLoaderSubscription: Subscription;
+ files$: Observable<File[]> = null;
+ activeSnippetSubscription: Subscription;
 
  @Select(LabelState) labels$: Observable<Label[]>;
  @Select(state => state.snippet.activeSnippet) activeSnippet$: Observable<Snippet>;
 
  @SelectSnapshot(LanguageState)
  public languages: Language[];
 
- constructor(private fileResource: FileResource) {}
+ constructor(private fileService: FileService) {}
 
  ngOnInit(): void {
- this.availableLabelsSubscription = this.activeSnippet$.subscribe(snippet => {
- if (snippet) {
- this.activeSnippet = snippet;
-
- this.fileResource
- .query({ snippet: snippet.pk })
- .$promise.then(data => {
- this.files = data;
- })
- .catch(error => {
- console.log(error);
- });
+ this.activeSnippetSubscription = this.activeSnippet$.subscribe(activeSnippet => {
+ if (activeSnippet) {
+ this.activeSnippet = activeSnippet;
+ this.files$ = this.fileService.fileList({ snippet: activeSnippet.pk });
  }
  });
-
- this.snippetLoaderSubscription = this.labels$.subscribe(data => {
- this.labels = data;
- });
  }
 
  ngOnDestroy(): void {
- this.availableLabelsSubscription.unsubscribe();
- this.snippetLoaderSubscription.unsubscribe();
+ this.activeSnippetSubscription.unsubscribe();
  }
 
  getLanguageName(langugaeId: number): string {

src/app/services/services.module.ts

@@ -4,7 +4,6 @@ import { UserResource } from './resources/user.resource';
 import { LabelResource } from './resources/label.resource';
 import { LanguageResource } from './resources/language.resource';
 import { SnippetResource } from './resources/snippet.resource';
-import { FileResource } from './resources/file.resource';
 import { TeamResource } from './resources/team.resource';
 
 import { ActiveFilterService } from './navigation/activeFilter.service';
@@ -31,7 +30,6 @@ export class ServicesModule {
  LabelResource,
  LanguageResource,
  SnippetResource,
- FileResource,
  TeamResource,
  UserTeamResource,
  SnippetLabelResource,

src/environments/environment.prod.ts

@@ -1,4 +1,5 @@
 export const environment = {
  production: true,
- apiUrl: 'REST_API_URL',
+ basePath: 'REST_API_URL',
+ apiUrl: 'REST_API_URL/api/v1/',
 };

src/environments/environment.ts

@@ -5,5 +5,6 @@
 
 export const environment = {
  production: false,
+ basePath: 'https://api.snypy.com',
  apiUrl: 'https://api.snypy.com/api/v1/',
 };