enabled arrow icons to jump to previous and next lessons#1041
enabled arrow icons to jump to previous and next lessons#1041
Conversation
| <slide-deck slideShortcuts slidesRouting slides-tracking> | ||
| <codelab-progress-bar></codelab-progress-bar> | ||
| <slide-arrows></slide-arrows> | ||
| <slide-arrows previousLink="" nextLink="/angular/templates"></slide-arrows> |
There was a problem hiding this comment.
We definitely want to avoid providing links manually
|
Discussed offline, let's move to the deck component and populate using slides rather than inputs |
1 similar comment
|
Discussed offline, let's move to the deck component and populate using slides rather than inputs |
… the first and last slides
…into lesson_1024
|
|
||
| constructor() {} | ||
| constructor( | ||
| @Optional() private readonly presentation: SlidesDeckComponent, |
There was a problem hiding this comment.
Add a comment on why it's optional?
I'm actually curious what the use case would be, since it's always supposed to be inside of the slide deck
There was a problem hiding this comment.
ng test was failing so made it optional.
| this.goToSlide(this.activeSlideIndex + 1); | ||
| if (this.activeSlideIndex + 1 < this.slides.length) { | ||
| this.goToSlide(this.activeSlideIndex + 1); | ||
| } else if (this.nextLink != null && this.nextLink !== '') { |
There was a problem hiding this comment.
if(this.nextLink)
There was a problem hiding this comment.
noted will change
| return this.activeSlideIndex > 0 || (this.previousLink != null && this.previousLink !== ''); | ||
| } | ||
|
|
||
| public setupPreviousNext(allRoutes: string[]) { |
There was a problem hiding this comment.
Let's keep the presentation simple:
setNextLink()
and
setNextLink()
All the router manipulations should be done outside of this component, as it is not supposed to know about the codelab routing structure
| if (currentUrl.startsWith('/')) { | ||
| currentUrl = currentUrl.substr(1); | ||
| } | ||
| const urlPaths = currentUrl.split('/'); | ||
| if (urlPaths.length > 1) { | ||
| const idx = allRoutes.indexOf(urlPaths[1]); | ||
| if (idx > 0) { | ||
| previousLink = `/${urlPaths[0]}/${allRoutes[idx - 1]}`; | ||
| } | ||
| if (idx < allRoutes.length - 1) { | ||
| nextLink = `/${urlPaths[0]}/${allRoutes[idx + 1]}`; | ||
| } |
There was a problem hiding this comment.
This looks very complicated, is there some activeRoute property we could use to avoid all the string manipulations?
There was a problem hiding this comment.
It is complicated for sure, if I can get or compute the full path from menu routes that will work too.
apps/codelab/src/app/components/slides/title-slide/title-slide.component.ts
Outdated
Show resolved
Hide resolved
apps/codelab/src/app/components/slides/closing-slide/codelab-closing-slide.component.ts
Outdated
Show resolved
Hide resolved
apps/codelab/src/app/components/slides/title-slide/title-slide.component.ts
Show resolved
Hide resolved
apps/codelab/src/app/components/slides/closing-slide/codelab-closing-slide.component.spec.ts
Outdated
Show resolved
Hide resolved
…from title slide. change tests to use spies instead of checking value
| private readonly presentation: SlidesDeckComponent, | ||
| @Optional() @Inject(MENU_ROUTES) readonly menuRoutes | ||
| ) { | ||
| if (this.menuRoutes != null) { |
There was a problem hiding this comment.
At which point would menuRoutes be null?
| } | ||
| } | ||
|
|
||
| private setupPreviousNext() { |
There was a problem hiding this comment.
This name seems outdated
| let currentUrl = this.router.url; | ||
| if (currentUrl.startsWith('/')) { | ||
| currentUrl = currentUrl.substr(1); | ||
| } |
There was a problem hiding this comment.
This code looks very complicated, what exactly is happening here?
| nextLink: '', | ||
|
|
||
| setPrevious(link) { | ||
| this.previousLink = link; |
There was a problem hiding this comment.
What happened to the spies?
| previousLink: '', | ||
| nextLink: '', | ||
|
|
||
| setPrevious(link) { |
There was a problem hiding this comment.
just do setPrevious: createSpy(...)
| }); | ||
|
|
||
| it('should call setNextLink', () => { | ||
| expect(slidesDeckComponentStub.setNext).toHaveBeenCalled(); |
There was a problem hiding this comment.
Can we verify that it has been called with the proper argument?
| private readonly presentation: SlidesDeckComponent, | ||
| @Optional() @Inject(MENU_ROUTES) readonly menuRoutes | ||
| ) { | ||
| if (this.menuRoutes != null) { |
| .find(r => r && (r as MenuRoute).prod); | ||
| const index = this.menuRoutes.findIndex(c => c.path === config.path); | ||
| let nextLink = ''; | ||
| if (index < this.menuRoutes.length - 1) { |
There was a problem hiding this comment.
I'm curious what's the value of this check?
| } | ||
|
|
||
| private setupPrevious() { | ||
| const config = this.activeRoute.snapshot.pathFromRoot |
There was a problem hiding this comment.
We're we planning to move this logic to a shared service since we're actually just copy-pasting it accross 2 components?
…xt and previous links
…into lesson_1024
| } | ||
|
|
||
| private getCurrentIndex(activeRoute: ActivatedRoute) { | ||
| // TODO: inject ActivatedRoute but figure out a way to fix snapshot update issue |
There was a problem hiding this comment.
Would be awesome for this comment to be more detailed so that next person who sees this knows what the issue is and how to reproduce
| if (this.presentation != null) { | ||
| let nextLink = this.menuRouteService.getNextLink(this.activeRoute); | ||
| if (nextLink) { | ||
| nextLink = '../../' + nextLink; |
There was a problem hiding this comment.
There should also prob be a TODO here to make it more generic
| this.activeRoute | ||
| ); | ||
| if (previousLink) { | ||
| previousLink = '../../' + previousLink; |
There was a problem hiding this comment.
We always do this for both next and previous link, I think this should move in
| constructor( | ||
| private readonly cdr: ChangeDetectorRef, | ||
| private readonly router: Router, | ||
| @Optional() private readonly route: ActivatedRoute |
There was a problem hiding this comment.
nit: let's call (active|activated)Route to be consistent
apps/codelab/src/app/components/slides/title-slide/title-slide.component.ts
Show resolved
Hide resolved
| if (config == null) { | ||
| return -1; | ||
| } | ||
| const index = this.menuRoutes.findIndex(c => c.path === config.path); |
There was a problem hiding this comment.
No need for an intermediate var, just return?
| if (this.presentation != null) { | ||
| let nextLink = this.menuRouteService.getNextLink(this.activeRoute); | ||
| if (nextLink) { | ||
| nextLink = '../../' + nextLink; |
There was a problem hiding this comment.
There should also prob be a TODO here to make it more generic
| } | ||
|
|
||
| private getMenuRouteByIndex(index: number) { | ||
| if (index >= 0 && index < this.menuRoutes.length) { |
There was a problem hiding this comment.
Do we need these checks? Can it be just
return this.menuRoutes[index]; ?
| ) { | ||
| if (this.presentation != null) { | ||
| const nextLink = this.menuRouteService.getNextLink(this.activeRoute); | ||
| this.presentation.setNext(nextLink); |
There was a problem hiding this comment.
Drop empty ngOnInit while you're here?
No description provided.