feat: new slides API path

Author: peterpeterparker

studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx

@@ -149,7 +149,6 @@ export class DeckEventsHandler {
 
                 if (slide.getAttribute('slide_id')) {
                     // !isNew
-
                     this.busyService.slideEditable(slide);
 
                     resolve();
@@ -158,40 +157,77 @@ export class DeckEventsHandler {
 
                 this.busyService.deckBusy(true);
 
-                const slidePost: Slide = {
-                    template: this.getSlideTemplate(slide)
-                };
+                this.deckEditorService.watch().pipe(take(1)).subscribe(async (deck: Deck) => {
+                    if (!deck) {
+                        deck = await this.createDeck();
+                    }
 
-                const content: string = await this.cleanSlideContent(slide.innerHTML);
-                if (content && content.length > 0) {
-                    slidePost.content = content
-                }
+                    const persistedSlide: Slide = await this.postSlide(deck, slide);
+
+                    await this.updateDeckSlideList(persistedSlide);
 
-                const persistedSlide: Slide = await this.slideService.post(slidePost);
+                    this.busyService.deckBusy(false);
+
+                    resolve();
+                });
+            } catch (err) {
+                this.errorService.error(err);
+                this.busyService.deckBusy(false);
+                resolve();
+            }
+        });
+    }
+
+    private postSlide(deck: Deck, slide: HTMLElement): Promise<Slide> {
+        return new Promise<Slide>(async (resolve) => {
+            const slidePost: Slide = {
+                template: this.getSlideTemplate(slide)
+            };
+
+            const content: string = await this.cleanSlideContent(slide.innerHTML);
+            if (content && content.length > 0) {
+                slidePost.content = content
+            }
+
+            const persistedSlide: Slide = await this.slideService.post(deck.id, slidePost);
+
+            if (persistedSlide && persistedSlide.id) {
+                slide.setAttribute('slide_id', persistedSlide.id);
 
                 this.busyService.slideEditable(slide);
+            }
+
+            resolve(persistedSlide);
+        });
+    }
 
-                if (persistedSlide && persistedSlide.id) {
-                    slide.setAttribute('slide_id', persistedSlide.id);
+    private createDeck(): Promise<Deck> {
+        return new Promise<Deck>(async (resolve, reject) => {
+            try {
+                this.userService.watch().pipe(filter((user: User) => user !== null && user !== undefined), take(1)).subscribe(async (user: User) => {
+                    const deck: Deck = {
+                        slides: [],
+                        name: `Presentation ${await Utils.getNow()}`,
+                        owner_id: user.id
+                    };
 
-                    await this.createOrUpdateDeckSlideList(persistedSlide);
-                }
+                    const persistedDeck: Deck = await this.deckService.post(deck);
+                    this.deckEditorService.next(persistedDeck);
 
-                this.busyService.deckBusy(false);
+                    await this.updateNavigation(persistedDeck);
 
-                resolve();
+                    resolve(persistedDeck);
+                });
             } catch (err) {
-                this.errorService.error(err);
-                this.busyService.deckBusy(false);
-                resolve();
+                reject(err);
             }
         });
     }
 
-    private createOrUpdateDeckSlideList(slide: Slide): Promise<void> {
+    private updateDeckSlideList(slide: Slide): Promise<void> {
         return new Promise<void>(async (resolve, reject) => {
             try {
-                if (!slide) {
+                if (!slide || !slide.id) {
                     reject('Missing slide to create or update the deck');
                     return;
                 }
@@ -206,19 +242,6 @@ export class DeckEventsHandler {
 
                         const updatedDeck: Deck = await this.deckService.put(deck);
                         this.deckEditorService.next(updatedDeck);
-                    } else {
-                        this.userService.watch().pipe(filter((user: User) => user !== null && user !== undefined), take(1)).subscribe(async (user: User) => {
-                            deck = {
-                                slides: [slide.id],
-                                name: `Presentation ${await Utils.getNow()}`,
-                                owner_id: user.id
-                            };
-
-                            const persistedDeck: Deck = await this.deckService.post(deck);
-                            this.deckEditorService.next(persistedDeck);
-
-                            await this.updateNavigation(persistedDeck);
-                        });
                     }
 
                     resolve();
@@ -350,11 +373,15 @@ export class DeckEventsHandler {
                     slideUpdate.attributes = attributes;
                 }
 
-                await this.slideService.put(slideUpdate);
+                this.deckEditorService.watch().pipe(take(1)).subscribe(async (deck: Deck) => {
+                    if (deck) {
+                        await this.slideService.put(deck.id, slideUpdate);
+                    }
 
-                this.busyService.deckBusy(false);
+                    this.busyService.deckBusy(false);
 
-                resolve();
+                    resolve();
+                });
             } catch (err) {
                 this.errorService.error(err);
                 this.busyService.deckBusy(false);
@@ -379,15 +406,17 @@ export class DeckEventsHandler {
 
                 const slideId: string = slide.getAttribute('slide_id');
 
-                await this.slideService.delete(slideId);
-
                 this.deckEditorService.watch().pipe(take(1)).subscribe(async (deck: Deck) => {
-                    // Update list of slide in the deck
-                    if (deck && deck.slides && deck.slides.indexOf(slideId) > -1) {
-                        deck.slides.splice(deck.slides.indexOf(slideId), 1);
+                    if (deck) {
+                        await this.slideService.delete(deck.id, slideId);
 
-                        const updatedDeck: Deck = await this.deckService.put(deck);
-                        this.deckEditorService.next(updatedDeck);
+                        // Update list of slide in the deck
+                        if (deck.slides && deck.slides.indexOf(slideId) > -1) {
+                            deck.slides.splice(deck.slides.indexOf(slideId), 1);
+
+                            const updatedDeck: Deck = await this.deckService.put(deck);
+                            this.deckEditorService.next(updatedDeck);
+                        }
                     }
 
                     await this.deleteSlideElement();

studio/src/app/helpers/editor/editor.helper.tsx

@@ -58,7 +58,7 @@ export class EditorHelper {
 
                 const promises: Promise<Slide>[] = [];
                 deck.slides.forEach((slideId: string) => {
-                    promises.push(this.fetchSlide(slideId));
+                    promises.push(this.fetchSlide(deck.id, slideId));
                 });
 
                 let slides: Slide[] = [];
@@ -82,10 +82,10 @@ export class EditorHelper {
         });
     }
 
-    private fetchSlide(slideId: string): Promise<any> {
+    private fetchSlide(deckId: string, slideId: string): Promise<any> {
         return new Promise<any>(async (resolve) => {
             try {
-                const slide: Slide = await this.slideService.get(slideId);
+                const slide: Slide = await this.slideService.get(deckId, slideId);
                 const element: any = await ParseSlidesUtils.parseSlide(slide);
 
                 resolve(element);

studio/src/app/services/api/slide/slide.service.tsx

@@ -23,22 +23,20 @@ export class SlideService {
     }
 
 
-    // TODO: get /slides/:slide_id
-
-    post(slide: Slide): Promise<Slide> {
-        return this.query(slide, '/slides', 'POST');
+    post(deckId: string, slide: Slide): Promise<Slide> {
+        return this.query(slide, `/decks/${deckId}/slides`, 'POST');
     }
 
-    put(slide: Slide): Promise<Slide> {
-        return this.query(slide, '/slides/' + slide.id,'PUT');
+    put(deckId: string, slide: Slide): Promise<Slide> {
+        return this.query(slide, `/decks/${deckId}/slides/${slide.id}`,'PUT');
     }
 
-    delete(slide_id: string): Promise<void> {
+    delete(deckId: string, slide_id: string): Promise<void> {
         return new Promise<void>(async (resolve, reject) => {
             try {
                 const apiUrl: string = EnvironmentConfigService.getInstance().get('apiUrl');
 
-                const rawResponse: Response = await fetch(apiUrl + '/slides/' + slide_id, {
+                const rawResponse: Response = await fetch(apiUrl + `/decks/${deckId}/slides/` + slide_id, {
                     method: 'DELETE',
                     headers: {
                         'Accept': 'application/json',
@@ -88,12 +86,12 @@ export class SlideService {
         });
     }
 
-    get(slideId: string): Promise<Slide> {
+    get(deckId: string, slideId: string): Promise<Slide> {
         return new Promise<Slide>(async (resolve, reject) => {
             try {
                 const apiUrl: string = EnvironmentConfigService.getInstance().get('apiUrl');
 
-                const rawResponse: Response = await fetch(apiUrl + `/slides/${slideId}`, {
+                const rawResponse: Response = await fetch(apiUrl + `/decks/${deckId}/slides/${slideId}`, {
                     method: 'GET',
                     headers: {
                         'Accept': 'application/json',