If a presentation is on the first slide, then hide the previous (left) arrow.
If a presentation is on the last slide, then hide the next (right) arrow.
First Slide:
Last Slide
Tips:
Modify the resources/js/Components/SlideArrows.ts file to accept 2 new props: isFirstSlide and isLastSlide, both of which are booleans and should default to false.
Then, in the same component, conditionally show the previous button only if ! isFirstSlide, and conditionally show the next button only if ! isLastSlide
Modify the resources/js/Components/SlideView.ts to set those props when rendering the SlideArrows component.
Add a function called isStart to the resources/js/store/slideStore.ts file, which detects if the slides are at the 0 index. There is already a isEnd function, so you don't need to add that one.
You can use those functions from the slideStore in the SlideView component, in order to set the isFirstSlide and isLastSlide props when rendering the SlideArrows components.
Then (or first, if you want) add tests!
Front-end Tests (add 6 new tests)
File: resources/js/test/store/slideStore.test.ts (see the 2 tests for the isEnd function; you can probably copy/paste most of them)
Test the new isStart function in slideStore.ts returns true if it is the first slide
Test the new isStart function in slideStore.ts returns false if it is not the first slide
If a presentation is on the first slide, then hide the previous (left) arrow.
If a presentation is on the last slide, then hide the next (right) arrow.
First Slide:
Last Slide
Tips:
resources/js/Components/SlideArrows.ts
file to accept 2 new props:isFirstSlide
andisLastSlide
, both of which are booleans and should default tofalse
.previous
button only if! isFirstSlide
, and conditionally show thenext
button only if! isLastSlide
resources/js/Components/SlideView.ts
to set those props when rendering theSlideArrows
component.isStart
to theresources/js/store/slideStore.ts
file, which detects if the slides are at the 0 index. There is already aisEnd
function, so you don't need to add that one.slideStore
in theSlideView
component, in order to set theisFirstSlide
andisLastSlide
props when rendering theSlideArrows
components.Front-end Tests (add 6 new tests)
File:
resources/js/test/store/slideStore.test.ts
(see the 2 tests for the isEnd function; you can probably copy/paste most of them)isStart
function inslideStore.ts
returns true if it is the first slideisStart
function inslideStore.ts
returns false if it is not the first slideFile:
resources/js/test/components/SlideArrows.test.ts
previous
button is not visible if theisFirstSlide
prop is trueprevious
button is visible if theisFirstSlide
prop is falsenext
button is not visible if theisLastSlide
prop is truenext
button is visible if theisLastSlide
prop is false