Merge branch 'refs/heads/main' into chore/101-setup-primeng-design-system

# Conflicts: #	src/app/app.component.ts #	src/app/app.config.ts #	src/app/core/components/footer/footer.component.html #	src/app/core/components/footer/footer.component.scss #	src/app/core/components/footer/footer.component.ts #	src/app/core/components/header/header.component.html #	src/app/core/components/header/header.component.scss #	src/app/core/components/header/header.component.ts #	src/app/core/components/main-content/main-content.component.html #	src/app/core/components/main-content/main-content.component.scss #	src/app/core/components/sidenav/sidenav.component.html #	src/app/core/components/sidenav/sidenav.component.scss #	src/app/core/components/sidenav/sidenav.component.ts #	src/app/features/auth/sign-up/sign-up.component.html #	src/app/features/auth/sign-up/sign-up.component.ts

Author: rnastyuk

src/app/app.config.ts

@@ -6,6 +6,7 @@ import { withNgxsReduxDevtoolsPlugin } from '@ngxs/devtools-plugin';
 import { providePrimeNG } from 'primeng/config';
 import Aura from '@primeng/themes/aura';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
  providers: [
@@ -18,11 +19,12 @@ export const appConfig: ApplicationConfig = {
  options: {
  cssLayer: {
  name: 'primeng',
- // order: 'base, primeng, reset',
+ order: 'base, primeng, reset',
  },
  },
  },
  }),
  provideNoopAnimations(),
+ 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)));
+ }
+}

src/app/features/auth/sign-in/sign-in.component.html

@@ -0,0 +1 @@
+<p>sign-in works!</p>

src/app/features/auth/sign-in/sign-in.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'osf-sign-in',
+ imports: [],
+ templateUrl: './sign-in.component.html',
+ styleUrl: './sign-in.component.scss',
+})
+export class SignInComponent {}