Merge pull request #572 from talkjs/chore/update-getting-started-data-api

Update Vue, Angular, Svelte getting started examples to use the JS Data API

Author: keerlu

angular/angular-getting-started/package-lock.json

@@ -18,7 +18,7 @@
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
     "rxjs": "~7.8.0",
-    "talkjs": "^0.20.0",
+    "talkjs": "^0.36.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
   },

angular/angular-getting-started/package.json

@@ -1,11 +1,11 @@
 import { Component } from "@angular/core";
-import { TalkjsChatComponent } from "./talkjs-chat/talkjs-chat.component";
+import { ChatComponent } from "./chat/chat.component";
 
 @Component({
   selector: "app-root",
   standalone: true,
-  imports: [TalkjsChatComponent],
-  template: ` <app-talkjs-chat></app-talkjs-chat> `,
+  imports: [ChatComponent],
+  template: ` <app-chat></app-chat> `,
   styles: [],
 })
 export class AppComponent {

angular/angular-getting-started/src/app/app.component.ts

@@ -3,42 +3,42 @@ import { Component } from "@angular/core";
 import Talk from "talkjs";
 
 @Component({
-  selector: "app-talkjs-chat",
+  selector: "app-chat",
   standalone: true,
   imports: [],
   template: `
     <div id="talkjs-container" style="height: 600px">Loading chats..</div>
   `,
   styles: ``,
 })
-export class TalkjsChatComponent {
+export class ChatComponent {
   constructor() {
     Talk.ready.then(function () {
-      const me = new Talk.User({
-        id: "nina",
+      const session = new Talk.Session({
+        appId: "<APP_ID>",
+        userId: "nina",
+      });
+      session.currentUser.createIfNotExists({
         name: "Nina",
         email: "[email protected]",
         photoUrl: "https://talkjs.com/new-web/avatar-7.jpg",
         welcomeMessage: "Hi!",
       });
-      const session = new Talk.Session({
-        appId: "<APP_ID>",
-        me: me,
-      });
-      const other = new Talk.User({
-        id: "frank",
+
+      const otherRef = session.user("frank");
+      otherRef.createIfNotExists({
         name: "Frank",
         email: "[email protected]",
         photoUrl: "https://talkjs.com/new-web/avatar-8.jpg",
         welcomeMessage: "Hey, how can I help?",
       });
 
-      const conversation = session.getOrCreateConversation("new_conversation");
-      conversation.setParticipant(me);
-      conversation.setParticipant(other);
+      const conversationRef = session.conversation("new_conversation");
+      conversationRef.createIfNotExists();
+      conversationRef.participant(otherRef).createIfNotExists();
 
       const chatbox = session.createChatbox();
-      chatbox.select(conversation);
+      chatbox.select(conversationRef);
       chatbox.mount(document.getElementById("talkjs-container"));
     });
   }

angular/angular-getting-started/src/app/talkjs-chat/talkjs-chat.component.ts renamed to angular/angular-getting-started/src/app/chat/chat.component.ts

@@ -7,18 +7,21 @@
 
   onMount(async () => {
     Talk.ready.then(() => {
-      const me = new Talk.User(oliver);
-      const other = new Talk.User(abby);
+      const session = new Talk.Session({
+        appId: appId,
+        userId: oliver.id,
+      });
+      session.currentUser.createIfNotExists(oliver);
 
-      const session = new Talk.Session({ appId, me });
+      const otherRef = session.user(abby.id);
+      otherRef.createIfNotExists(abby);
 
-      const conversationId = Talk.oneOnOneId(me, other);
-      const conversation = session.getOrCreateConversation(conversationId);
-      conversation.setParticipant(me);
-      conversation.setParticipant(other);
+      const conversationRef = session.conversation('svelte_example_conversation');
+      conversationRef.createIfNotExists();
+      conversationRef.participant(otherRef).createIfNotExists();
 
       const chatbox = session.createChatbox();
-      chatbox.select(conversation);
+      chatbox.select(conversationRef);
       chatbox.mount(element);
     });
   });