setup api and mapper

src/app/app.config.ts

@@ -5,6 +5,7 @@ import { provideStore } from '@ngxs/store';
 import { withNgxsReduxDevtoolsPlugin } from '@ngxs/devtools-plugin';
 import { providePrimeNG } from 'primeng/config';
 import Aura from '@primeng/themes/aura';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -16,5 +17,6 @@ export const appConfig: ApplicationConfig = {
         preset: Aura,
       },
     }),
+    provideHttpClient(),
   ],
 };

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

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

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

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { map, Observable } from 'rxjs';
+import {
+  ApiData,
+  JsonApiResponse,
+} from '@core/services/json-api/json-api.entity';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class JsonApiService {
+  constructor(private http: HttpClient) {}
+
+  get<T>(url: string): Observable<T> {
+    return this.http
+      .get<JsonApiResponse<T>>(url)
+      .pipe(map((response) => (response.data as ApiData<T>).attributes));
+  }
+
+  getArray<T>(url: string): Observable<T[]> {
+    return this.http
+      .get<JsonApiResponse<T>>(url)
+      .pipe(
+        map((response) =>
+          (response.data as ApiData<T>[]).map((item) => item.attributes),
+        ),
+      );
+  }
+}

src/app/core/services/json-api/underscore-entites/user/user-us.entity.ts

@@ -0,0 +1,4 @@
+export interface UserUS {
+  full_name: string;
+  given_name: string;
+}

src/app/core/services/mappers/users/users.mapper.ts

@@ -0,0 +1,9 @@
+import { User } from '@core/services/user/user.entity';
+import { UserUS } from '@core/services/json-api/underscore-entites/user/user-us.entity';
+
+export function mapUserUStoUser(user: UserUS): User {
+  return {
+    fullName: user.full_name,
+    givenName: user.given_name,
+  };
+}

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

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

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

@@ -0,0 +1,19 @@
+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)));
+  }
+}