Chore/112 dashboard api

angular.json

@@ -58,7 +58,13 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"

src/app/app.config.ts

@@ -8,12 +8,17 @@ import Aura from '@primeng/themes/aura';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient } from '@angular/common/http';
 import { ConfirmationService } from 'primeng/api';
+import { AuthState } from '@core/store/auth';
+import { HomeState } from '@core/store/home';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
-    provideStore([], withNgxsReduxDevtoolsPlugin({ disabled: false })),
+    provideStore(
+      [AuthState, HomeState],
+      withNgxsReduxDevtoolsPlugin({ disabled: false }),
+    ),
     providePrimeNG({
       theme: {
         preset: Aura,

src/app/app.module.ts

@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core';
 import { NgxsModule } from '@ngxs/store';
 import { AuthState } from '@core/store/auth';
+import { HomeState } from '@core/store/home';
 
 @NgModule({
-  imports: [NgxsModule.forRoot([AuthState])],
+  imports: [NgxsModule.forRoot([AuthState, HomeState])],
 })
 export class AppModule {}

src/app/core/services/json-api/json-api.entity.ts

@@ -1,8 +1,13 @@
 export interface JsonApiResponse<T> {
-  data: ApiData<T> | ApiData<T>[];
+  data: T;
 }
 
-export interface ApiData<T> {
-  id: string | number;
-  attributes: T;
+export interface JsonApiArrayResponse<T> {
+  data: T[];
+}
+
+export interface ApiData<Attributes, Embeds> {
+  id: string;
+  attributes: Attributes;
+  embeds: Embeds;
 }

src/app/core/services/json-api/json-api.service.ts

@@ -1,8 +1,8 @@
 import { inject, Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { map, Observable } from 'rxjs';
 import {
-  ApiData,
+  JsonApiArrayResponse,
   JsonApiResponse,
 } from '@core/services/json-api/json-api.entity';
 
@@ -12,19 +12,53 @@ import {
 export class JsonApiService {
   http: HttpClient = inject(HttpClient);
 
-  get<T>(url: string): Observable<T> {
+  get<T>(url: string, params?: Record<string, unknown>): Observable<T> {
+    let httpParams = new HttpParams();
+
+    if (params) {
+      for (const key in params) {
+        const value = params[key];
+
+        if (Array.isArray(value)) {
+          value.forEach((item) => {
+            httpParams = httpParams.append(`${key}[]`, item); // Handles arrays
+          });
+        } else {
+          httpParams = httpParams.set(key, value as string);
+        }
+      }
+    }
+
     return this.http
       .get<JsonApiResponse<T>>(url)
-      .pipe(map((response) => (response.data as ApiData<T>).attributes));
+      .pipe(map((response) => response.data));
   }
 
-  getArray<T>(url: string): Observable<T[]> {
+  getArray<T>(url: string, params?: Record<string, unknown>): Observable<T[]> {
+    let httpParams = new HttpParams();
+
+    if (params) {
+      for (const key in params) {
+        const value = params[key];
+
+        if (Array.isArray(value)) {
+          value.forEach((item) => {
+            httpParams = httpParams.append(`${key}[]`, item); // Handles arrays
+          });
+        } else {
+          httpParams = httpParams.set(key, value as string);
+        }
+      }
+    }
+
+    const headers = new HttpHeaders({
+      Authorization: `Bearer UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm`,
+    });
+
     return this.http
-      .get<JsonApiResponse<T>>(url)
-      .pipe(
-        map((response) =>
-          (response.data as ApiData<T>[]).map((item) => item.attributes),
-        ),
-      );
+      .get<
+        JsonApiArrayResponse<T>
+      >(url, { params: httpParams, headers: headers })
+      .pipe(map((response) => response.data));
   }
 }

src/app/core/services/user/user.entity.ts

@@ -1,4 +1,5 @@
 export interface User {
   fullName: string;
   givenName: string;
+  familyName: string;
 }

src/app/core/services/user/user.service.ts

@@ -1,19 +1,15 @@
 import { inject, Injectable } from '@angular/core';
-import { map, Observable } from 'rxjs';
 import { JsonApiService } from '@core/services/json-api/json-api.service';
-import { User } from '@core/services/user/user.entity';
-import { UserUS } from '@core/services/json-api/underscore-entites/user/user-us.entity';
-import { mapUserUStoUser } from '@core/services/mappers/users/users.mapper';
 
 @Injectable({
   providedIn: 'root',
 })
 export class UserService {
   jsonApiService = inject(JsonApiService);
 
-  getMe(): Observable<User> {
-    return this.jsonApiService
-      .get<UserUS>('https://api.test.osf.io/v2/users/me')
-      .pipe(map((user) => mapUserUStoUser(user)));
-  }
+  // getMe(): Observable<User> {
+  //   return this.jsonApiService
+  //     .get<UserUS>('https://api.test.osf.io/v2/users/me')
+  //     .pipe(map((user) => mapUserUStoUser(user)));
+  // }
 }

src/app/core/store/home/home.actions.ts

@@ -0,0 +1,11 @@
+export class GetProjects {
+  static readonly type = '[Home] Get Projects';
+}
+
+export class GetNoteworthy {
+  static readonly type = '[Home] Get Noteworthy';
+}
+
+export class GetMostPopular {
+  static readonly type = '[Home] Get Most Popular';
+}

src/app/core/store/home/home.model.ts

@@ -0,0 +1,7 @@
+import { Project } from '@osf/features/home/models/project.entity';
+
+export interface HomeStateModel {
+  projects: Project[];
+  noteworthy: Project[];
+  mostPopular: Project[];
+}

src/app/core/store/home/home.selectors.ts

@@ -0,0 +1,21 @@
+import { Selector } from '@ngxs/store';
+import { HomeStateModel } from '@core/store/home/home.model';
+import { HomeState } from '@core/store/home/home.state';
+import { Project } from '@osf/features/home/models/project.entity';
+
+export class HomeSelectors {
+  @Selector([HomeState])
+  static getProjects(state: HomeStateModel): Project[] {
+    return state.projects;
+  }
+
+  @Selector([HomeState])
+  static getNoteworthy(state: HomeStateModel): Project[] {
+    return state.noteworthy;
+  }
+
+  @Selector([HomeState])
+  static getMostPopular(state: HomeStateModel): Project[] {
+    return state.mostPopular;
+  }
+}

src/app/core/store/home/home.state.ts

@@ -0,0 +1,50 @@
+import { HomeStateModel } from '@core/store/home/home.model';
+import { Action, State, StateContext } from '@ngxs/store';
+import { inject, Injectable } from '@angular/core';
+import { DashboardService } from '@osf/features/home/dashboard.service';
+import {
+  GetMostPopular,
+  GetNoteworthy,
+  GetProjects,
+} from '@core/store/home/home.actions';
+import { tap } from 'rxjs';
+
+@State<HomeStateModel>({
+  name: 'home',
+  defaults: {
+    projects: [],
+    noteworthy: [],
+    mostPopular: [],
+  },
+})
+@Injectable()
+export class HomeState {
+  homeService = inject(DashboardService);
+
+  @Action(GetProjects)
+  getProjects(ctx: StateContext<HomeStateModel>) {
+    return this.homeService.getProjects().pipe(
+      tap((projects) => {
+        ctx.patchState({ projects: projects });
+      }),
+    );
+  }
+
+  @Action(GetMostPopular)
+  getMostPopular(ctx: StateContext<HomeStateModel>) {
+    return this.homeService.getMostPopular().pipe(
+      tap((mostPopular) => {
+        ctx.patchState({ mostPopular: mostPopular });
+      }),
+    );
+  }
+
+  @Action(GetNoteworthy)
+  GetNoteworthy(ctx: StateContext<HomeStateModel>) {
+    return this.homeService.getNoteworthy().pipe(
+      tap((noteworthy) => {
+        ctx.patchState({ noteworthy: noteworthy });
+      }),
+    );
+  }
+}

src/app/core/store/home/index.ts

@@ -0,0 +1,4 @@
+export * from './home.actions';
+export * from './home.model';
+export * from './home.selectors';
+export * from './home.state';

src/app/features/home/dashboard.service.ts

@@ -0,0 +1,60 @@
+import { inject, Injectable } from '@angular/core';
+import { JsonApiService } from '@core/services/json-api/json-api.service';
+import { map, Observable } from 'rxjs';
+import { Project } from '@osf/features/home/models/project.entity';
+import { mapProjectUStoProject } from '@osf/features/home/mappers/dashboard.mapper';
+import { ProjectItem } from '@osf/features/home/models/raw-models/ProjectItem.entity';
+import { environment } from '../../../environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DashboardService {
+  jsonApiService = inject(JsonApiService);
+
+  getProjects(): Observable<Project[]> {
+    const userId = 'k9p2t';
+    const params = {
+      embed: ['bibliographic_contributors', 'parent', 'root'],
+      page: 1,
+      sort: '-last_logged',
+    };
+
+    return this.jsonApiService
+      .getArray<ProjectItem>(
+        `${environment.apiUrl}/sparse/users/${userId}/nodes/`,
+        params,
+      )
+      .pipe(map((projects) => projects.map(mapProjectUStoProject)));
+  }
+
+  getNoteworthy(): Observable<Project[]> {
+    const projectId = 'pf5z9';
+    const params = {
+      embed: 'bibliographic_contributors',
+      'page[size]': 5,
+    };
+
+    return this.jsonApiService
+      .getArray<ProjectItem>(
+        `${environment.apiUrl}/nodes/${projectId}/linked_nodes`,
+        params,
+      )
+      .pipe(map((projects) => projects.map(mapProjectUStoProject)));
+  }
+
+  getMostPopular(): Observable<Project[]> {
+    const projectId = 'kvw3y';
+    const params = {
+      embed: 'bibliographic_contributors',
+      'page[size]': 5,
+    };
+
+    return this.jsonApiService
+      .getArray<ProjectItem>(
+        `${environment.apiUrl}/nodes/${projectId}/linked_nodes`,
+        params,
+      )
+      .pipe(map((projects) => projects.map(mapProjectUStoProject)));
+  }
+}