Merge pull request #24 from alkrauss48/issue-23/feat/looping

Implements front-end looping via query param

Author: alkrauss48

Diff for: app/Http/Middleware/HandleInertiaRequests.php

@@ -32,11 +32,13 @@ public function share(Request $request): array
     {
         $index = intval(request()->input('index'));
         $progress = request()->input('progress');
+        $loop = intval(request()->input('loop'));
 
         return [
             ...parent::share($request),
             'index' => $index,
             'progress' => $progress,
+            'loop' => $loop,
             'auth' => [
                 'user' => $request->user(),
             ],

Diff for: resources/js/Components/SlideView.vue

@@ -11,14 +11,15 @@ import Keys from '@/constants/keys.ts';
 import dataStore from '@/store/dataStore.ts'
 import slideStore from '@/store/slideStore.ts'
 
-const content = computed(() => {
-    return dataStore.data[slideStore.index];
-});
-
+let loopInterval: null | ReturnType<typeof setInterval> = null;
 let fontLoadInterval: null | ReturnType<typeof setInterval> = null;
 const fontLoaded = ref(false);
 const FONT = '16px Montserrat';
 
+const content = computed(() => {
+    return dataStore.data[slideStore.index];
+});
+
 const showProgressLabel = computed<boolean>(() => {
     return slideStore.progress === ProgressType.Label;
 });
@@ -35,6 +36,14 @@ const buildQueryParams = () : QueryParams => {
     return query;
 };
 
+const checkAndClearLoopInterval = () : void => {
+    if (!loopInterval) {
+        return;
+    }
+
+    clearInterval(Number(loopInterval));
+};
+
 const incrementContent = (count: number) : void => {
     slideStore.increment(count);
 
@@ -58,6 +67,10 @@ const bindKeyDown = (event: KeyboardEvent): void => {
         }
     }
 
+    if (Keys.ALL_APP_KEYS.includes(key)) {
+        checkAndClearLoopInterval();
+    }
+
     if (Keys.INCREMENTORS.includes(key)) {
         incrementContent(1);
     } else if (Keys.DECREMENTORS.includes(key)) {
@@ -86,8 +99,25 @@ onMounted(() => {
         fontLoaded.value = true;
         clearInterval(Number(fontLoadInterval));
     }, 50);
+
+    if (!slideStore.canLoop()) {
+        return;
+    }
+
+    loopInterval = setInterval(() => {
+        if (slideStore.isEnd()) {
+            incrementContent(-1 * dataStore.data.length);
+            return;
+        }
+
+        incrementContent(1)
+    }, slideStore.loop * 1000);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('keydown',  bindKeyDown);
+    checkAndClearLoopInterval();
 });
-onUnmounted(() => window.removeEventListener('keydown',  bindKeyDown));
 </script>
 
 <template>

Diff for: resources/js/Pages/Slides.vue

@@ -12,13 +12,15 @@ import slideStore from '@/store/slideStore.ts'
 
 const props = defineProps<{
     index?: number,
+    loop?: number,
     progress?: ProgressType,
     slides?: string
     content?: string
 }>();
 
 const processQueryParams = (): void =>  {
     slideStore.index = props.index ?? 0;
+    slideStore.loop = props.loop ?? 0;
     slideStore.progress = props.progress ?? ProgressType.Bar;
 };
 

Diff for: resources/js/constants/keys.ts

@@ -34,6 +34,15 @@ export const LARGE_DECREMENTORS = [
   'B',
 ];
 
+export const ALL_APP_KEYS = [
+    ...INCREMENTORS,
+    ...DECREMENTORS,
+    ...LARGE_INCREMENTORS,
+    ...LARGE_DECREMENTORS,
+    DOLLAR_SIGN,
+    ZERO,
+];
+
 export default {
   ENTER,
   SPACE,
@@ -43,4 +52,5 @@ export default {
   DECREMENTORS,
   LARGE_INCREMENTORS,
   LARGE_DECREMENTORS,
+  ALL_APP_KEYS
 };

Diff for: resources/js/store/slideStore.ts

@@ -5,6 +5,7 @@ import dataStore from './dataStore.ts'
 
 const slideStore = reactive({
   index: 0,
+  loop: 0,
   progress: ProgressType.Bar,
 
   getNewIndex(count: number) : number {
@@ -29,6 +30,18 @@ const slideStore = reactive({
     slideStore.index = newIndex;
   },
 
+  isEnd() : boolean {
+      return this.index === dataStore.data.length - 1;
+  },
+
+  canLoop() : boolean {
+      if (this.loop < 2) {
+          return false;
+      }
+
+      return true;
+  },
+
   reset() {
     this.index = 0;
     this.progress = ProgressType.Bar;

Diff for: resources/js/test/components/SlideView.loop.test.ts

@@ -0,0 +1,53 @@
+import { mount, VueWrapper } from '@vue/test-utils'
+
+import SlideView from '@/Components/SlideView.vue'
+import Keys from '@/constants/keys.ts';
+import ProgressType from '@/enums/progressType.ts'
+import dataStore from '@/store/dataStore.ts'
+import slideStore from '@/store/slideStore.ts'
+
+// Incrementors
+
+const mountWrapper = () : VueWrapper<any> => {
+    dataStore.data = ['foo', 'bar', 'baz', 'foo', 'bar', 'baz', 'foo', 'bar'];
+    slideStore.index = 1;
+    slideStore.loop = 5;
+    slideStore.progress = ProgressType.Bar;
+
+    return mount(SlideView);
+};
+
+test('loopInterval is not null with valid loop set', async () => {
+    const wrapper = mountWrapper();
+
+    expect(wrapper.vm.loopInterval).not.toBe(null);
+});
+
+test('loopInterval is cleared with valid loop set', async () => {
+    const wrapper = mountWrapper();
+    const spy = vi.spyOn(global, 'clearInterval');
+
+    wrapper.vm.checkAndClearLoopInterval();
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy.mock.lastCall?.[0]).toBe(Number(wrapper.vm.loopInterval));
+});
+
+test('loopInterval is cleared on valid key press', async () => {
+    const wrapper = mountWrapper();
+    const spy = vi.spyOn(global, 'clearInterval');
+
+    wrapper.vm.bindKeyDown({ key: Keys.ENTER });
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy.mock.lastCall?.[0]).toBe(Number(wrapper.vm.loopInterval));
+});
+
+test('loopInterval is not cleared on invalid key press', async () => {
+    const wrapper = mountWrapper();
+    const spy = vi.spyOn(global, 'clearInterval');
+
+    wrapper.vm.bindKeyDown({ key: 'x' });
+
+    expect(spy).toHaveBeenCalledTimes(0);
+});

Diff for: resources/js/test/store/slideStore.test.ts

@@ -1,9 +1,11 @@
 import ProgressType from '@/enums/progressType.ts'
+import dataStore from '@/store/dataStore.ts'
 import slideStore from '@/store/slideStore.ts'
 
 afterEach(() => {
-  slideStore.reset()
-})
+    dataStore.reset();
+    slideStore.reset();
+});
 
 test('gets the right initial values', async () => {
   expect(slideStore.index).toBe(0);
@@ -30,3 +32,29 @@ test('will not change slide store if no new index', async () => {
 
   expect(slideStore.index).toBe(0);
 });
+
+test('returns true for isEnd if slide index is at the end', async () => {
+  dataStore.data = ['a', 'b', 'c'];
+  slideStore.index = 2;
+
+  expect(slideStore.isEnd()).toBe(true);
+});
+
+test('returns false for isEnd if slide index is not at the end', async () => {
+  dataStore.data = ['a', 'b', 'c'];
+  slideStore.index = 1;
+
+  expect(slideStore.isEnd()).toBe(false);
+});
+
+test('returns true for canLoop if loop value is valid', async () => {
+  slideStore.loop = 5;
+
+  expect(slideStore.canLoop()).toBe(true);
+});
+
+test('returns false for canLoop if loop value is invalid', async () => {
+  slideStore.loop = 1;
+
+  expect(slideStore.canLoop()).toBe(false);
+});