Develop

src/app/classes/QueryListParams.ts

@@ -27,7 +27,7 @@ export class QueryListParams implements IQueryListParams {
             order: this.order,
             searchQuery: this.searchQuery
         }
-        // remove falsy values
+        // remove falsy values preserving 0
         Object.keys(query).forEach((key) => (!query[key as keyof IQueryListParams] && typeof query[key as keyof IQueryListParams] !== 'number') && delete query[key as keyof IQueryListParams])
         return query;
     }

src/app/modules/snippet/create-snippet/create-snippet.component.html

@@ -1,6 +1,6 @@
 <div class="rounded-2xl p-2 flex flex-col" [formGroup]="snippetForm"
-    [ngClass]="{'bg-base-200': isPopup, 'pt-16': (!isPopup && config.isPublicRoute(router.url))}"
-    [ngStyle]="{'height': isPopup ? '80vh' : 'calc(100dvh - var(--navbar-height))'}">
+    [ngClass]="{'bg-base-200': isPopup}"
+    [ngStyle]="{'height': isPopup ? '80vh' : '100%'}">
     <div class="px-0 pb-0 pt-2">
         <div class="text-xl px-1 pb-2 flex justify-between items-center">
             <div class="flex flex-col">

src/app/pages/code/code.component.html

@@ -1,13 +1,22 @@
-<app-navbar></app-navbar>
-<div class="drawer lg:drawer-open">
-    <input id="sidemenu-drawer" type="checkbox" class="drawer-toggle" />
-    <div class="drawer-content z-0 flex flex-col mt-[4.1rem] overflow-auto">
-        <router-outlet class="router-outlet-full-height"></router-outlet>
+@if (userService.isLoggedIn) {
+    <app-navbar></app-navbar>
+    <div class="drawer lg:drawer-open">
+        <input id="sidemenu-drawer" type="checkbox" class="drawer-toggle" />
+        <div class="drawer-content z-0 flex flex-col overflow-auto" style="margin-top: var(--navbar-height);">
+            <router-outlet class="router-outlet-full-height"></router-outlet>
+        </div>
+        <div class="drawer-side">
+            <label for="sidemenu-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+            <ul class="menu p-4 min-h-full overflow-y-auto w-60 bg-base-200 text-base-content pt-[4.5rem]">
+                <app-sidemenu></app-sidemenu>
+            </ul>
+        </div>
     </div>
-    <div class="drawer-side">
-        <label for="sidemenu-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
-        <ul class="menu p-4 min-h-full overflow-y-auto w-60 bg-base-200 text-base-content pt-[4.5rem]">
-            <app-sidemenu></app-sidemenu>
-        </ul>
+} @else {
+    <div class="h-screen">
+        <app-public-navbar></app-public-navbar>
+        <div style="padding-top: var(--navbar-height);" class="h-full">
+            <router-outlet></router-outlet>
+        </div>
     </div>
-</div>
+}

src/app/pages/code/code.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { UserService } from '@app/services/user.service';
 
 @Component({
   selector: 'app-code',
@@ -7,6 +8,8 @@ import { Component } from '@angular/core';
 })
 export class CodeComponent {
 
-  constructor() { }
+  constructor(
+    protected userService: UserService
+  ) { }
 
 }

src/app/pages/code/view-snippet/view-snippet.component.ts

@@ -36,22 +36,49 @@ export class ViewSnippetComponent implements OnInit, OnDestroy {
         }
       });
       this.sub.add(
-        this.snippetService.onSnippetMessages(this.codeId).subscribe({
-          next: (res) => {
-            this.processMessage(res);
+        this.snippetService.startConnection(this.codeId).subscribe({
+          next: () => {
+            let count = 0
+            this.sub.add(
+              this.snippetService.onSnippetMessages().subscribe({
+                next: (res) => {
+                  this.processMessage(res);
+                  if (count === 0) {
+                    count++;
+                    this.snippetService.connection?.send('Execute', {
+                      "EventType": "start_typing",
+                      "Event": JSON.stringify({
+                        "SnippetId": this.codeId,
+                        "LineNumber": 1,
+                        "Action": true
+                      })
+                    }).then((res) => {
+                      console.log(res);
+                    }).catch((err) => {
+                      console.error(err);
+                    })
+                  }
+                },
+                error: (err) => {
+                  console.error(err);
+                }
+              })
+            );
           },
           error: (err) => {
             console.error(err);
           }
-        }))
+        })
+      );
     }
   }
-
   private processMessage(message: any) {
     switch (message.type) {
       case 'code':
         break;
     }
+    console.log(message)
+
   }
 
   ngOnDestroy(): void {

src/app/pages/dashboard/dashboard.component.scss

@@ -1,3 +1,3 @@
 .drawer-content{
-    height: calc(100vh - 4.1rem);
+    height: calc(100vh - var(--navbar-height));
 }

src/app/pages/public/landing/landing.component.html

@@ -13,7 +13,7 @@ <h1 class="text-5xl font-bold">&lt;ShareCode/&gt;</h1>
                 <span class="material-symbols-outlined default-icon-size">
                     arrow_forward
                 </span></button>
-            <button class="btn btn-secondary ml-3" routerLink="create">
+            <button class="btn btn-secondary ml-3" routerLink="/code/create">
                 Create Snippet
                 <span class="material-symbols-outlined default-icon-size">
                     data_object

src/app/pages/public/public-routing.module.ts

@@ -11,7 +11,6 @@ const routes: Routes = [
       { path: '', component: LandingComponent },
       { path: 'login', component: LoginComponent },
       { path: 'signup', component: SignupComponent },
-      { path: 'create', loadChildren: () => import('@app/modules/snippet/snippet.module').then(m => m.SnippetModule)}
     ]
   },
 ];

src/app/services/signalr.service.ts

@@ -1,6 +1,9 @@
 import { Injectable } from '@angular/core';
 // import { environment } from '@environment';
 import * as signalR from '@microsoft/signalr';
+import { Observable } from 'rxjs';
+import { environment } from '@environment';
+import { ELocalStorage } from 'src/app/models/common.enum';
 
 @Injectable({
   providedIn: 'root'
@@ -11,4 +14,25 @@ export class SignalRService {
 
   constructor() { }
 
+// public startConnection(snippetId: string) {
+//     return new Observable<void>(observer => {
+//       const signalROptions: signalR.IHttpConnectionOptions = {
+//         withCredentials: true
+//       }
+//       if (this.userService.isLoggedIn) {
+//         signalROptions.accessTokenFactory = () => `Bearer ${localStorage.getItem(ELocalStorage.token)}`;
+//       }
+//       this.connection = new signalR.HubConnectionBuilder()
+//         .withUrl(`${environment.apiLiveUrl}/snippet?snippetId=${snippetId}`, signalROptions)
+//         .build();
+//       this.connection.start().then(() => {
+//         observer.next();
+//       }).catch(err => {
+//         observer.error(err);
+//       })
+//       return () => {
+//         this.connection?.stop();
+//       }
+//     })
+//   }
 }

src/app/services/snippet.service.ts

@@ -15,8 +15,7 @@ import { UserService } from './user.service';
 export class SnippetService {
   private snippetEndpoint = 'snippet';
   public refreshSnippets$ = new Subject<void>();
-  private connection?: signalR.HubConnection;
-  private snippetSubscription?: Subscription;
+  public connection?: signalR.HubConnection;
 
   constructor(
     private http: HttpService,
@@ -25,7 +24,7 @@ export class SnippetService {
   }
 
 
-  private startConnection(snippetId: string) {
+  public startConnection(snippetId: string) {
     return new Observable<void>(observer => {
       const signalROptions: signalR.IHttpConnectionOptions = {
         withCredentials: true
@@ -38,32 +37,22 @@ export class SnippetService {
         .build();
       this.connection.start().then(() => {
         observer.next();
-        observer.complete();
       }).catch(err => {
         observer.error(err);
       })
+      return () => {
+        this.connection?.stop();
+      }
     })
   }
 
-  public onSnippetMessages(snippetId: string) {
+  public onSnippetMessages() {
     return new Observable<any>((observer) => {
-      if (this.connection) {
-        this.connection.off(ESnippetSignalREvents.message);
-      }
-      this.snippetSubscription?.unsubscribe();
-      this.snippetSubscription = this.startConnection(snippetId).subscribe({
-        next: () => {
-          this.connection?.on(ESnippetSignalREvents.message, (res) => {
-            observer.next(res);
-          })
-        },
-        error: (err) => {
-          observer.error(err);
-        }
+      this.connection?.on(ESnippetSignalREvents.message, (res) => {
+        observer.next(res);
       })
       return () => {
         // cleanup logic to stop listening for messages here
-        this.snippetSubscription?.unsubscribe();
         this.connection?.off(ESnippetSignalREvents.message);
       };
     })

src/styles/_commons.scss

@@ -69,6 +69,7 @@ body {
 .router-outlet-full-height {
     &+* {
         height: 100%;
+        // display: block;
     }
 }