add error handling for infinite scroll & file uploads, fix 401 in FileService

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Awakich

projects/social_platform/src/app/core/services/file.service.ts

@@ -2,7 +2,7 @@
 
 import { Injectable } from "@angular/core";
 import { ApiService, TokenService } from "@corelib";
-import { Observable } from "rxjs";
+import { firstValueFrom, Observable } from "rxjs";
 import { HttpParams } from "@angular/common/http";
 import { environment } from "@environment";
 
@@ -32,17 +32,36 @@ export class FileService {
     const formData = new FormData();
     formData.append("file", file);
 
-    return new Observable<{ url: string }>(observer => {
+    const doFetch = (token: string) =>
       fetch(`${environment.apiUrl}${this.FILES_URL}/`, {
         method: "POST",
-        headers: {
-          Authorization: `Bearer ${this.tokenService.getTokens()?.access}`,
-        },
+        headers: { Authorization: `Bearer ${token}` },
         body: formData,
-      })
-        .then(res => res.json())
-        .then(res => {
-          observer.next(res);
+      });
+
+    return new Observable<{ url: string }>(observer => {
+      const execute = async () => {
+        const token = this.tokenService.getTokens()?.access;
+        if (!token) throw new Error("No access token");
+
+        let res = await doFetch(token);
+
+        if (res.status === 401) {
+          const refreshRes = await firstValueFrom(this.tokenService.refreshTokens());
+          this.tokenService.memTokens(refreshRes);
+          res = await doFetch(refreshRes.access);
+        }
+
+        if (!res.ok) {
+          throw new Error(`Upload failed: ${res.status}`);
+        }
+
+        return res.json();
+      };
+
+      execute()
+        .then(data => {
+          observer.next(data);
           observer.complete();
         })
         .catch(err => observer.error(err));

projects/social_platform/src/app/office/features/news-card/news-card.component.ts

@@ -25,7 +25,7 @@ import { FileService } from "@core/services/file.service";
 import { nanoid } from "nanoid";
 import { expandElement } from "@utils/expand-element";
 import { FileModel } from "@models/file.model";
-import { forkJoin, noop, Observable, tap } from "rxjs";
+import { catchError, forkJoin, noop, Observable, of, tap } from "rxjs";
 import { ButtonComponent, IconComponent } from "@ui/components";
 import { FileItemComponent } from "@ui/components/file-item/file-item.component";
 import { FileUploadItemComponent } from "@ui/components/file-upload-item/file-upload-item.component";
@@ -279,6 +279,11 @@ export class NewsCardComponent implements OnInit {
               fileObj.src = file.url;
               fileObj.loading = false;
               fileObj.tempFile = null;
+            }),
+            catchError(() => {
+              fileObj.loading = false;
+              fileObj.error = true;
+              return of(null);
             })
           )
         );
@@ -301,6 +306,11 @@ export class NewsCardComponent implements OnInit {
               fileObj.loading = false;
               fileObj.src = file.url;
               fileObj.tempFile = null;
+            }),
+            catchError(() => {
+              fileObj.loading = false;
+              fileObj.error = "Ошибка загрузки";
+              return of(null);
             })
           )
         );

projects/social_platform/src/app/office/features/news-form/news-form.component.ts

@@ -5,7 +5,7 @@ import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from "@angula
 import { ValidationService } from "projects/core";
 import { nanoid } from "nanoid";
 import { FileService } from "@core/services/file.service";
-import { forkJoin, noop, Observable, tap } from "rxjs";
+import { catchError, forkJoin, noop, Observable, of, tap } from "rxjs";
 import { FileUploadItemComponent } from "@ui/components/file-upload-item/file-upload-item.component";
 import { IconComponent, InputComponent } from "@ui/components";
 import { AutosizeModule } from "ngx-autosize";
@@ -76,13 +76,16 @@ export class NewsFormComponent implements OnInit {
       ...this.messageForm.value,
       files: [...this.imagesList.map(f => f.src), ...this.filesList.map(f => f.src)],
     });
+
+    this.onResetForm();
   }
 
   /**
    * Сброс формы и очистка списков файлов
    */
   onResetForm() {
     this.imagesList = [];
+    this.filesList = [];
     this.messageForm.reset();
   }
 
@@ -128,6 +131,11 @@ export class NewsFormComponent implements OnInit {
               fileObj.src = file.url;
               fileObj.loading = false;
               fileObj.tempFile = null;
+            }),
+            catchError(() => {
+              fileObj.loading = false;
+              fileObj.error = true;
+              return of(null);
             })
           )
         );
@@ -145,6 +153,11 @@ export class NewsFormComponent implements OnInit {
             tap(file => {
               fileObj.loading = false;
               fileObj.src = file.url;
+            }),
+            catchError(() => {
+              fileObj.loading = false;
+              fileObj.error = "Ошибка загрузки";
+              return of(null);
             })
           )
         );

projects/social_platform/src/app/office/feed/feed.component.ts

@@ -15,7 +15,18 @@ import { CommonModule } from "@angular/common";
 import { NewProjectComponent } from "@office/feed/shared/new-project/new-project.component";
 import { ActivatedRoute } from "@angular/router";
 import { FeedItem, FeedItemType } from "@office/feed/models/feed-item.model";
-import { concatMap, fromEvent, map, noop, of, skip, Subscription, tap, throttleTime } from "rxjs";
+import {
+  catchError,
+  concatMap,
+  fromEvent,
+  map,
+  noop,
+  of,
+  skip,
+  Subscription,
+  tap,
+  throttleTime,
+} from "rxjs";
 import { ApiPagination } from "@models/api-pagination.model";
 import { FeedService } from "@office/feed/services/feed.service";
 import { ProjectNewsService } from "@office/projects/detail/services/project-news.service";
@@ -99,7 +110,7 @@ export class FeedComponent implements OnInit, AfterViewInit, OnDestroy {
     if (target) {
       const scrollEvents$ = fromEvent(target, "scroll")
         .pipe(
-          concatMap(() => this.onScroll()),
+          concatMap(() => this.onScroll().pipe(catchError(() => of({})))),
           throttleTime(500)
         )
         .subscribe(noop);

projects/social_platform/src/app/office/members/members.component.ts

@@ -14,6 +14,7 @@ import {
 import { ActivatedRoute, Router, RouterLink } from "@angular/router";
 import {
   BehaviorSubject,
+  catchError,
   concatMap,
   debounceTime,
   distinctUntilChanged,
@@ -204,8 +205,8 @@ export class MembersComponent implements OnInit, OnDestroy, AfterViewInit {
     if (target) {
       const scrollEvents$ = fromEvent(target, "scroll")
         .pipe(
-          concatMap(() => this.onScroll()),
-          throttleTime(500) // Ограничиваем частоту обработки прокрутки
+          concatMap(() => this.onScroll().pipe(catchError(() => of({})))),
+          throttleTime(500)
         )
         .subscribe(noop);
 

projects/social_platform/src/app/office/mentors/mentors.component.ts

@@ -11,14 +11,23 @@ import {
   ViewChild,
 } from "@angular/core";
 import { ActivatedRoute, RouterLink } from "@angular/router";
-import { concatMap, fromEvent, map, noop, of, Subscription, tap, throttleTime } from "rxjs";
+import {
+  catchError,
+  concatMap,
+  fromEvent,
+  map,
+  noop,
+  of,
+  Subscription,
+  tap,
+  throttleTime,
+} from "rxjs";
 import { AuthService } from "@auth/services";
 import { User } from "@auth/models/user.model";
 import { NavService } from "@services/nav.service";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { containerSm } from "@utils/responsive";
 import { MemberService } from "@services/member.service";
-import { MemberCardComponent } from "../shared/member-card/member-card.component";
 import { ApiPagination } from "@models/api-pagination.model";
 
 /**
@@ -99,7 +108,7 @@ export class MentorsComponent implements OnInit, OnDestroy, AfterViewInit {
     if (target)
       fromEvent(target, "scroll")
         .pipe(
-          concatMap(() => this.onScroll()),
+          concatMap(() => this.onScroll().pipe(catchError(() => of({})))),
           throttleTime(500)
         )
         .subscribe(noop);

projects/social_platform/src/app/office/program/detail/shared/news-card/news-card.component.ts

@@ -18,7 +18,7 @@ import { expandElement } from "@utils/expand-element";
 import { FileModel } from "@office/models/file.model";
 import { nanoid } from "nanoid";
 import { FileService } from "@core/services/file.service";
-import { forkJoin, noop, Observable, tap } from "rxjs";
+import { catchError, forkJoin, noop, Observable, of, tap } from "rxjs";
 import { DayjsPipe, FormControlPipe, ParseLinksPipe, ValidationService } from "projects/core";
 import { FileItemComponent } from "@ui/components/file-item/file-item.component";
 import { ButtonComponent, IconComponent } from "@ui/components";
@@ -266,6 +266,11 @@ export class ProgramNewsCardComponent implements OnInit, AfterViewInit {
               fileObj.src = file.url;
               fileObj.loading = false;
               fileObj.tempFile = null;
+            }),
+            catchError(() => {
+              fileObj.loading = false;
+              fileObj.error = true;
+              return of(null);
             })
           )
         );
@@ -288,6 +293,11 @@ export class ProgramNewsCardComponent implements OnInit, AfterViewInit {
               fileObj.loading = false;
               fileObj.src = file.url;
               fileObj.tempFile = null;
+            }),
+            catchError(() => {
+              fileObj.loading = false;
+              fileObj.error = "Ошибка загрузки";
+              return of(null);
             })
           )
         );

projects/social_platform/src/app/office/projects/list/list.component.ts

@@ -13,6 +13,7 @@ import {
 } from "@angular/core";
 import { ActivatedRoute, NavigationEnd, Params, Router, RouterLink } from "@angular/router";
 import {
+  catchError,
   concatMap,
   distinctUntilChanged,
   fromEvent,
@@ -192,7 +193,7 @@ export class ProjectsListComponent implements OnInit, AfterViewInit, OnDestroy {
     if (target) {
       const scrollEvent$ = fromEvent(target, "scroll")
         .pipe(
-          concatMap(() => this.onScroll()),
+          concatMap(() => this.onScroll().pipe(catchError(() => of({})))),
           throttleTime(500)
         )
         .subscribe(noop);

projects/social_platform/src/app/office/vacancies/list/list.component.ts

@@ -6,6 +6,7 @@
 import { Component, inject, signal } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import {
+  catchError,
   concatMap,
   debounceTime,
   fromEvent,
@@ -124,7 +125,7 @@ export class VacanciesListComponent {
     if (target) {
       const scrollEvents$ = fromEvent(target, "scroll")
         .pipe(
-          concatMap(() => this.onScroll()),
+          concatMap(() => this.onScroll().pipe(catchError(() => of({})))),
           throttleTime(500)
         )
         .subscribe(noop);