Merge branch 'dev' into improvement/26-register-redesign

BinaryStudioAcademy · Sep 29, 2023 · 672879a · 672879a
2 parents 6936c48 + cdbe31a
commit 672879a
Show file tree

Hide file tree

Showing 23 changed files with 91 additions and 102 deletions.
diff --git a/backend/LeetWars.Core/LeetWars.Core.BLL/Services/UserService.cs b/backend/LeetWars.Core/LeetWars.Core.BLL/Services/UserService.cs
@@ -20,6 +20,7 @@
 using Microsoft.EntityFrameworkCore;
 using System.Linq.Expressions;
 using LeetWars.Core.Common.DTO.UserPrefferences;
+using System.Net;
 
 namespace LeetWars.Core.BLL.Services;
 
@@ -200,7 +201,9 @@ public async Task<List<UserDto>> GetLeaderBoardAsync(LeaderBoardPageSettingsDto
 
         if(page.UserName is not null)
         {
-            query = query.Where(u => u.UserName.ToLower().Contains(page.UserName.ToLower()));
+            string userName = WebUtility.UrlDecode(page.UserName);
+
+            query = query.Where(u => u.UserName.ToLower().Contains(userName.ToLower()));
         }
 
         if (page.HasFriends)

diff --git a/backend/LeetWars.Notifier/LeetWars.Notifier.WebAPI/Services/NotificationConsumerService.cs b/backend/LeetWars.Notifier/LeetWars.Notifier.WebAPI/Services/NotificationConsumerService.cs
@@ -146,7 +146,10 @@ private async Task SendCodeFightResultsAsync(NotificationDto notificationDto)
             if (!string.IsNullOrEmpty(notificationDto.ReceiverId)
             && notificationDto.Sender is not null)
             {
+                notificationDto.Message = "You have won the code fight!";
                 await _hubContext.Clients.Groups(notificationDto.Sender.Id.ToString()).WinCodeFightAsync(notificationDto);
+
+                notificationDto.Message = "You have lost the code fight!";
                 await _hubContext.Clients.Groups(notificationDto.ReceiverId).LoseCodeFightAsync(notificationDto);
             }
         }

diff --git a/frontend/src/app/core/guards/codefight.guard.ts b/frontend/src/app/core/guards/codefight.guard.ts
@@ -48,10 +48,6 @@ export class CodefightGuard implements CanDeactivate<OnlineEditorPageComponent>
                 class: 'confirm',
                 handler: () => {
                     this.endCodeFight();
-
-                    this.modalRef.closed.subscribe(() => {
-                        this.router.navigate(['/']);
-                    });
                 },
             },
             {

diff --git a/frontend/src/app/core/hubs/notifications-hub.service.ts b/frontend/src/app/core/hubs/notifications-hub.service.ts
@@ -108,13 +108,13 @@ export class NotificationHubService {
             this.updateUsersAfterRequestEnded(codeFight.notification);
         });
 
-        this.hubConnection.on('WinCodeFightAsync', () => {
-            this.toastrService.showSuccess('You have won the code fight!');
+        this.hubConnection.on('WinCodeFightAsync', (notification: INotificationModel) => {
+            this.toastrService.showCodeFightNotification(notification, 'success');
             this.router.navigateByUrl('/leader/board', { state: { canLeave: true } });
         });
 
-        this.hubConnection.on('LoseCodeFightAsync', () => {
-            this.toastrService.showInfo('You have lost the code fight!');
+        this.hubConnection.on('LoseCodeFightAsync', (notification: INotificationModel) => {
+            this.toastrService.showCodeFightNotification(notification, 'error');
             this.router.navigateByUrl('/leader/board', { state: { canLeave: true } });
         });
 

diff --git a/frontend/src/app/core/services/toastr-notifications.service.ts b/frontend/src/app/core/services/toastr-notifications.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { INotificationModel } from '@shared/models/notifications/notifications';
+import { toastrCodeFightOptions } from '@shared/utils/toastr/toastr-code-fight-options';
 import { ToastrService } from 'ngx-toastr';
 
 @Injectable({
@@ -8,6 +9,12 @@ import { ToastrService } from 'ngx-toastr';
 export class ToastrNotificationsService extends ToastrService {
     codeFightNotification: INotificationModel;
 
+    codeFightType?: 'success' | 'error';
+
+    private codeFightTitle = 'CodeFight';
+
+    private codeFightDefaultTimeOut = 10000;
+
     showSuccess(message: string) {
         super.success(message, 'Success');
     }
@@ -24,14 +31,14 @@ export class ToastrNotificationsService extends ToastrService {
         super.error(message, 'Error');
     }
 
-    showCodeFightNotification(notification: INotificationModel) {
+    showCodeFightNotification(notification: INotificationModel, codeFightType?: 'success' | 'error') {
         this.codeFightNotification = notification;
+        this.codeFightType = codeFightType;
 
-        super.show(notification.message, 'CodeFight', {
-            toastClass: 'custom-toast',
-            positionClass: 'toast-bottom-right',
-            progressBar: true,
-            timeOut: notification.showFor,
-        });
+        super.show(notification.message, this.codeFightTitle, {
+            ...toastrCodeFightOptions,
+            toastClass: `custom-toast${codeFightType || ''}`,
+            timeOut: notification.showFor ?? this.codeFightDefaultTimeOut,
+        }, codeFightType);
     }
 }
diff --git a/frontend/src/app/modules/challenges/challenge-creation/challenge-creation.component.sass b/frontend/src/app/modules/challenges/challenge-creation/challenge-creation.component.sass
@@ -5,7 +5,7 @@
     margin: 40px 130px
     background-color: $deep-dark-grey
     border-radius: 32px
-    min-height: 100%
+    height: 100%
 
 .buttons
     justify-content: flex-end
@@ -104,3 +104,21 @@
             width: 100%
         & app-challenges-dropdown-select
             width: 80%
+
+.step-container
+    height: 85%
+
+:host ::ng-deep app-editor-question
+    height: 100%
+
+:host ::ng-deep .content-wrapper
+    height: 100%
+
+    .markdown-wrapper
+        height: 60%   
+
+    .md-editor
+        height: 100%
+
+    #markdown-editor
+        height: 100%
diff --git a/frontend/src/app/modules/challenges/challenges-test-page/challenges-test-page.component.html b/frontend/src/app/modules/challenges/challenges-test-page/challenges-test-page.component.html
@@ -11,10 +11,6 @@
                     [customClass]="getTabClass(tab)">
                 </tab>
             </tabset>
-            <div class="tab-help">
-                <fa-icon [icon]="'question-circle'" ngbTooltip="Help message" placement="top"></fa-icon>
-                <div class="tab-text">Help</div>
-            </div>
         </div>
         <button class="maximize-btn" (click)="toggleMaximize(editorContainer)">
             <fa-icon [icon]="isMaximized ? ['fas', 'compress'] : ['fas', 'maximize']"></fa-icon>

diff --git a/frontend/src/app/modules/challenges/challenges-test-page/challenges-test-page.component.sass b/frontend/src/app/modules/challenges/challenges-test-page/challenges-test-page.component.sass
@@ -61,21 +61,3 @@
     @media screen and (max-width: $small-challenge)
         align-self: flex-end
 
-.tab-help
-    width: 46px
-    font-size: 13px
-    line-height: 40px
-    padding: 0px 22.09px 0px 22.39px
-    display: flex
-    justify-content: center
-    align-items: center
-    gap: 5px
-    margin-left: 20px
-    color: $transient-grey
-    @media screen and (max-width: $small-challenge)
-        margin: 0 0 10px 0
-        width: 100%
-
-.tab-help fa-icon
-    font-size: 12px
-    color: $transient-grey
diff --git a/frontend/src/app/modules/challenges/editor-question/editor-question.component.html b/frontend/src/app/modules/challenges/editor-question/editor-question.component.html
@@ -99,21 +99,17 @@ <h2 class="header">Name and describe your question</h2>
         <div class="tab" [class.tab-active]="selectedTab === TabType.Description" (click)="editMarkDown()">
             <span>Description</span>
         </div>
-        <div class="tab d-flex" [class.tab-active]="selectedTab === TabType.Preview" (click)="previewMarkDown()">
+        <div class="tab" [class.tab-active]="selectedTab === TabType.Preview" (click)="previewMarkDown()">
             <fa-icon [icon]="'eye'"></fa-icon>
             <span>Preview</span>
         </div>
-        <div class="tab d-flex" [class.tab-active]="selectedTab === TabType.Help" (click)="submitQuestion()">
-            <fa-icon [icon]="'circle-question'"></fa-icon>
-            <span>Help</span>
-        </div>
     </div>
     <div
         class="validation-error-message"
         *ngIf="inputForm.controls.description.touched && inputForm.controls.description.invalid">
         {{ getErrorMessage('description') }}
     </div>
-    <div class="mt-12px">
+    <div class="markdown-wrapper mt-12px">
         <angular-markdown-editor
             [textareaId]="'markdown-editor'"
             [name]="'markdownText'"

diff --git a/frontend/src/app/modules/challenges/editor-question/editor-question.component.sass b/frontend/src/app/modules/challenges/editor-question/editor-question.component.sass
@@ -56,15 +56,14 @@
 
 .tabs-list
   background-color: $double-weak-white
-  max-width: 340px
+  max-width: 240px
   border-radius: 8px
   overflow: hidden
 
 .tab
   font-size: 14px
   padding: 12px 24px
   cursor: pointer
-  gap: 0.25em
   &:hover, &-active
     background-color: $delicate-lavender
 
@@ -97,7 +96,7 @@
   color: $white
   padding: 12px
   width: 100%
-  max-height: 260px
+
 
 @media (max-width: $large)
   .input-wrapper

diff --git a/frontend/src/app/modules/challenges/editor-question/editor-question.component.ts b/frontend/src/app/modules/challenges/editor-question/editor-question.component.ts
@@ -100,10 +100,6 @@ export class EditorQuestionComponent implements OnInit, OnChanges {
         this.bsEditorInstance.showPreview();
     }
 
-    submitQuestion() {
-        this.selectedTab = TabType.Help;
-    }
-
     onNameChange(value: string) {
         this.challenge.title = value;
 

diff --git a/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.html b/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.html
@@ -16,15 +16,6 @@
                                 <markdown [data]="challenge.instructions"></markdown>
                             </ng-template>
                         </li>
-                        <li [ngbNavItem]="'Submissions'" [class.selectedTab]="isSelected('Submissions')">
-                            <button ngbNavLink (click)="selectTab('Submissions')">Submissions</button>
-                            <ng-template ngbNavContent>Submissions here</ng-template>
-                        </li>
-
-                        <li [ngbNavItem]="'Output'" [class.selectedTab]="isSelected('Output')">
-                            <button ngbNavLink (click)="selectTab('Output')">Output</button>
-                            <ng-template ngbNavContent>Output here</ng-template>
-                        </li>
                     </ul>
                     <div class="content" [ngbNavOutlet]="nav"></div>
                 </div>

diff --git a/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.ts b/frontend/src/app/modules/challenges/online-editor-page/online-editor-page.component.ts
@@ -18,7 +18,7 @@ import { ICodeSubmitResult } from '@shared/models/code-run/code-submit-result';
 import { ICodeFightEnd } from '@shared/models/codefight/code-fight-end';
 import { ITestsOutput } from '@shared/models/tests-output/tests-output';
 import { IUser } from '@shared/models/user/user';
-import { take, takeUntil } from 'rxjs';
+import { switchMap, take, takeUntil } from 'rxjs';
 
 import { editorOptions, mapLanguageName } from '../challenge-creation/challenge-creation.utils';
 
@@ -153,13 +153,17 @@ export class OnlineEditorPageComponent extends BaseComponent implements OnDestro
     }
 
     giveUpCodeFight() {
-        this.codeFightGuard.openModal().closed.subscribe(() => {
-            const codeFightEnd: ICodeFightEnd = {
-                isWinner: false,
-                senderId: this.user.id,
-            };
-
-            this.codeFightService.sendCodeFightEnd(codeFightEnd).subscribe();
+        this.codeFightGuard.openModal().closed.pipe(
+            switchMap(() => {
+                const codeFightEnd: ICodeFightEnd = {
+                    isWinner: false,
+                    senderId: this.user.id,
+                };
+
+                return this.codeFightService.sendCodeFightEnd(codeFightEnd);
+            }),
+        ).subscribe(() => {
+            this.router.navigate(['/']);
         });
     }
 

diff --git a/frontend/src/app/modules/challenges/solution-page/solution-page.component.html b/frontend/src/app/modules/challenges/solution-page/solution-page.component.html
@@ -10,10 +10,6 @@
                 [customClass]="getTabClass(tab)">
             </tab>
         </tabset>
-        <div class="tab-help">
-            <fa-icon [icon]="'question-circle'" ngbTooltip="Help message" placement="top"></fa-icon>
-            <div class="tab-text">Help</div>
-        </div>
     </div>
     <div class="editor">
         <app-code-editor

diff --git a/frontend/src/app/modules/challenges/solution-page/solution-page.component.sass b/frontend/src/app/modules/challenges/solution-page/solution-page.component.sass
@@ -37,26 +37,6 @@
 .editor
     margin-top: 10px
 
-.tab-help
-  width: 46px
-  font-size: 13px
-  line-height: 40px
-  padding: 0px 22.09px 0px 22.39px
-  display: flex
-  justify-content: center
-  align-items: center
-  gap: 5px
-  margin-left: 20px
-  color: $transient-grey
-  @media screen and (max-width: $small-challenge)
-    margin: 0 0 10px 0
-    width: 100%
-
-.tab-help fa-icon
-  font-size: 12px
-  color: $transient-grey
-
-
 @media (max-width: $small-challenge)
   .tabs-container
     flex-direction: column

diff --git a/frontend/src/app/modules/login/log-in-page/log-in-page.component.ts b/frontend/src/app/modules/login/log-in-page/log-in-page.component.ts
@@ -5,7 +5,7 @@ import { UserService } from '@core/services/user.service';
 import { IUser } from '@shared/models/user/user';
 import { AuthHelper } from '@shared/utils/auth.helper';
 import { getErrorMessage } from '@shared/utils/validation/validation-helper';
-import { switchMap } from 'rxjs';
+import { of, switchMap } from 'rxjs';
 
 @Component({
     selector: 'app-log-in-page',
@@ -35,7 +35,7 @@ export class LogInPageComponent {
                         this.logInForm.markAsUntouched();
                         this.isSignInError = true;
 
-                        this.authHelper.handleAuthError(this.logInForm);
+                        return of();
                     }
 
                     return this.authService.login({

diff --git a/frontend/src/app/modules/main/main-page/main-page.component.html b/frontend/src/app/modules/main/main-page/main-page.component.html
@@ -1,6 +1,6 @@
 <div class="main-content-wrp">
     <div class="container-fluid">
-        <div class="new-challenge">
+        <div class="new-challenge d-flex flex-row-reverse gap-2">
             <button [routerLink]="'/challenges/create'">Create new challenge</button>
             <button class="generate-challenge" (click)="onBtnGenerateClick()">Generate Challenge by AI</button>
         </div>

diff --git a/frontend/src/app/modules/main/main-page/main-page.component.sass b/frontend/src/app/modules/main/main-page/main-page.component.sass
@@ -1,4 +1,5 @@
 @import "color-variables"
+@import "screen-sizes-variables"
 
 .main-content-wrp
     padding: 20px 20px 30px
@@ -21,5 +22,11 @@
         background-color: $green
         &:hover
             background-color: $dark-green
+    @media (max-width: $mobile)
+        flex-direction: column !important
+        gap: 24px
+        & button
+            margin-right: 0
+
 .generate-challenge
-    margin-right: 10px
+    margin-right: 10px
diff --git a/...pp/shared/components/custom-toastr-notification/custom-toastr-notification.component.html b/...pp/shared/components/custom-toastr-notification/custom-toastr-notification.component.html
@@ -32,7 +32,7 @@
         <img src="assets/images/logo/logo.png" alt="logo" class="logo-img" />
         <p>{{ message }}</p>
     </div>
-    <div class="d-flex justify-content-end mt-2">
+    <div class="d-flex justify-content-end mt-2" *ngIf="!toastrService.codeFightType">
         <button class="custom-btn btn-yes" (click)="onCodeFightStart()">Yes</button>
         <button class="custom-btn btn-no" (click)="onCodeFightRefuse()">No</button>
     </div>

diff --git a/frontend/src/app/shared/components/pie-chart/pie-chart.component.html b/frontend/src/app/shared/components/pie-chart/pie-chart.component.html
@@ -9,6 +9,6 @@
     </ngx-charts-pie-chart>
     <div class="center-text">
         <div>{{ currentNumber }}</div>
-        <p>{{ centerText }}</p>
+        <p *ngIf="centerText">{{ centerText }}</p>
     </div>
 </div>
diff --git a/frontend/src/app/shared/enums/tab-type.ts b/frontend/src/app/shared/enums/tab-type.ts
@@ -1,5 +1,4 @@
 export enum TabType {
     Description = 'Description',
     Preview = 'Preview',
-    Help = 'Help',
 }
diff --git a/frontend/src/app/shared/utils/toastr/toastr-code-fight-options.ts b/frontend/src/app/shared/utils/toastr/toastr-code-fight-options.ts
@@ -0,0 +1,6 @@
+import { IndividualConfig } from 'ngx-toastr';
+
+export const toastrCodeFightOptions: Partial<IndividualConfig> = {
+    positionClass: 'toast-bottom-right',
+    progressBar: true,
+};