refactoring + scss migration + first tests websocket

src/app/app.module.ts

@@ -15,7 +15,6 @@ import { LeftSideBarComponent } from "./components/left-side-bar/left-side-bar.c
 import { StreamsMainDisplayComponent } from "./pages/streams-main-display/streams-main-display.component";
 import { StreamComponent } from "./components/stream/stream.component";
 import { StreamsSelectionFooterComponent } from "./components/streams-selection-footer/streams-selection-footer.component";
-import { TootComponent } from "./components/toot/toot.component";
 import { RegisterNewAccountComponent } from "./pages/register-new-account/register-new-account.component";
 import { AuthService } from "./services/auth.service";
 import { AccountsService } from "./services/accounts.service";
@@ -28,6 +27,7 @@ import { FloatingColumnComponent } from './components/floating-column/floating-c
 import { ColumnsEditorComponent } from './components/floating-column/columns-editor/columns-editor.component';
 import { MessageEditorComponent } from './components/floating-column/message-editor/message-editor.component';
 import { StreamsState } from "./states/streams.state";
+import { TootComponent } from "./components/stream/toot/toot.component";
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },

src/app/components/stream/toot/toot.component.html

@@ -0,0 +1,5 @@
+<div class="toot">
+    <img class="toot__avatar" src="{{ toot.account.avatar }}" />
+    <a href class="toot__profile-link"><span class="toot__fullname" innerHTML="{{toot.account.display_name}}"></span> @<span id="toot-username" innerHTML="{{toot.account.username}}"></span></a>
+    <div class="toot__content" innerHTML="{{toot.content}}"></div>
+</div>

src/app/components/stream/toot/toot.component.scss

@@ -0,0 +1,47 @@
+.toot {
+    border: solid #06070b;
+    border-width: 0 0 1px 0;
+    margin: 0;
+    padding: 0;
+    width: calc(100%);
+    min-height: 70px;
+    overflow: hidden;
+    &__avatar {
+        margin: 10px 0 0 10px;
+        /* margin: 0; */
+        width: 50px;
+        height: 50px;
+        float: left;
+    }
+    &__fullname {
+        color: white;
+    }
+    &__profile-link {
+        color: #353e64;
+        margin: 7px 0 0 70px;
+        display: block;
+    }
+    &__content {
+        /*width: calc(100% - 50px);*/
+        margin: 10px 10px 10px 70px;
+    }
+    &__content p {
+        margin: 0;
+        font-size: 0.85em;
+    }
+}
+
+// #toot-avatar img {
+//   width: 50px;
+//   height: 50px;
+//   border-radius: 2px; 
+//   margin: 0;
+// }
+/* #toot-username {
+  color: grey;
+} */
+
+/* ::ng-deep .invisible {
+  display: inline;
+  color: red;
+} */

src/app/components/stream/toot/toot.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from "@angular/core";
-import { TootWrapper } from "../../models/stream.models";
+import { TootWrapper } from "../../../models/stream.models";
 
 @Component({
   selector: "app-toot",

src/app/components/toot/toot.component.html

@@ -1,8 +0,0 @@
-<div id="toot">
-  <div id="toot-avatar">
-    <img src="{{ toot.account.avatar }}" />
-  </div>
-  <a href id="toot-profile-link"><span id="toot-fullname" innerHTML="{{toot.account.display_name}}"></span> @<span id="toot-username" innerHTML="{{toot.account.username}}"></span></a>
-  <div id="toot-content" innerHTML="{{toot.content}}">
-  </div>
-</div>

src/app/components/toot/toot.component.scss

@@ -1,54 +0,0 @@
-#toot {
-  border: solid #06070b;
-  border-width: 0 0 1px 0;
-  margin: 0;
-  padding: 0;
-  width: calc(100%);
-  min-height: 70px;
-  overflow: hidden;
-}
-
-#toot-avatar {
-  margin: 10px 0 0 10px;
-  /* margin: 0; */
-  width: 50px;
-  height: 50px;
-  float: left;
-
-}
-
-#toot-avatar img {
-  width: 50px;
-  height: 50px;
-  border-radius: 2px; 
-  margin: 0;
-}
-
-#toot-fullname {
-  color: white;
-}
-
-/* #toot-username {
-  color: grey;
-} */
-
-#toot-profile-link {
-  color: #353e64;
-  margin: 7px 0 0 70px;
-  display: block;
-}
-
-#toot-content {
-  /*width: calc(100% - 50px);*/
-  margin: 10px 10px 10px 70px ;
-}
-
-#toot-content p {
-  margin: 0;
-  font-size: 0.85em;
-}
-
-/* ::ng-deep .invisible {
-  display: inline;
-  color: red;
-} */

src/app/models/stream.models.ts

@@ -38,10 +38,10 @@ export class Stream {
 
     private test: StreamingWrapper;
     private retrieveToots(): void {
-        // //TEST
-        // const service = new StreamingService();
-        // this.test = service.getStreaming(this.account.mastodonInstance, this.account.tokenData.access_token);
-        // //END TEST
+        //TEST
+        const service = new StreamingService();
+        this.test = service.getStreaming(this.account.instance, this.account.token.access_token);
+        //END TEST
 
         const route = `https://${this.account.instance}${this.getTimelineRoute()}`;
 

src/app/services/streaming.service.ts

@@ -6,8 +6,9 @@ export class StreamingService {
   constructor() { }
 
   //TODO restructure this to handle real domain objects
-  getStreaming(mastodonInstance: string, accessToken: string): StreamingWrapper {
-    return new StreamingWrapper(mastodonInstance.replace("https://", "wss://") + `/api/v1/streaming//?access_token=${accessToken}&stream=public`)
+  getStreaming(instance: string, accessToken: string): StreamingWrapper {
+    const route = `wss://${instance}/api/v1/streaming?access_token=${accessToken}&stream=public`
+    return new StreamingWrapper(route);
   }
 
 }