From 56171914c5e437f02607cdd0b4b140acc76e296a Mon Sep 17 00:00:00 2001
From: Dragon-Hatcher <64214386+Dragon-Hatcher@users.noreply.github.com>
Date: Fri, 28 Jul 2023 15:48:38 -0400
Subject: [PATCH] Simplify next traffic light functions. (#177)

* Simplify next traffic light functions.

* Fix Vue 2
---
 content/2-templating/6-conditional/alpine/index.html       | 6 +-----
 .../6-conditional/angular/trafficlight.component.ts        | 6 +-----
 .../2-templating/6-conditional/aurelia1/traffic-light.ts   | 7 +------
 .../2-templating/6-conditional/aurelia2/traffic-light.ts   | 6 +-----
 content/2-templating/6-conditional/ember/traffic-light.js  | 6 +-----
 content/2-templating/6-conditional/lit/traffic-light.js    | 6 +-----
 content/2-templating/6-conditional/mithril/TrafficLight.js | 5 +----
 content/2-templating/6-conditional/qwik/TrafficLight.tsx   | 6 +-----
 content/2-templating/6-conditional/react/TrafficLight.jsx  | 6 +-----
 content/2-templating/6-conditional/solid/TrafficLight.jsx  | 6 +-----
 .../2-templating/6-conditional/svelte/TrafficLight.svelte  | 6 +-----
 content/2-templating/6-conditional/vue2/TrafficLight.vue   | 6 +-----
 content/2-templating/6-conditional/vue3/TrafficLight.vue   | 6 +-----
 13 files changed, 13 insertions(+), 65 deletions(-)

diff --git a/content/2-templating/6-conditional/alpine/index.html b/content/2-templating/6-conditional/alpine/index.html
index fa9cf97e..7a83c192 100644
--- a/content/2-templating/6-conditional/alpine/index.html
+++ b/content/2-templating/6-conditional/alpine/index.html
@@ -4,11 +4,7 @@
   lightIndex: 0,
   get light() { return this.TRAFFIC_LIGHTS[this.lightIndex] },
   nextLight() {
-    if (this.lightIndex + 1 > this.TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0
-    } else {
-      this.lightIndex++
-    }
+    this.lightIndex = (this.lightIndex + 1) % this.TRAFFIC_LIGHTS.length;
   }
 }"
 >
diff --git a/content/2-templating/6-conditional/angular/trafficlight.component.ts b/content/2-templating/6-conditional/angular/trafficlight.component.ts
index cfad9ef2..4235ad45 100644
--- a/content/2-templating/6-conditional/angular/trafficlight.component.ts
+++ b/content/2-templating/6-conditional/angular/trafficlight.component.ts
@@ -25,10 +25,6 @@ export class TrafficlightComponent {
   }
 
   nextLight() {
-    if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0;
-    } else {
-      this.lightIndex++;
-    }
+    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   }
 }
diff --git a/content/2-templating/6-conditional/aurelia1/traffic-light.ts b/content/2-templating/6-conditional/aurelia1/traffic-light.ts
index 04f73dec..7d940f6b 100644
--- a/content/2-templating/6-conditional/aurelia1/traffic-light.ts
+++ b/content/2-templating/6-conditional/aurelia1/traffic-light.ts
@@ -4,12 +4,7 @@ export class App {
   light: string = this.TRAFFIC_LIGHTS[this.lightIndex];
 
   nextLight() {
-    if (this.lightIndex + 1 > this.TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0;
-    } else {
-      this.lightIndex++;
-    }
-
+    this.lightIndex = (this.lightIndex + 1) % this.TRAFFIC_LIGHTS.length;
     this.light = this.TRAFFIC_LIGHTS[this.lightIndex];
   }
 }
diff --git a/content/2-templating/6-conditional/aurelia2/traffic-light.ts b/content/2-templating/6-conditional/aurelia2/traffic-light.ts
index f0cf8257..fca07a69 100644
--- a/content/2-templating/6-conditional/aurelia2/traffic-light.ts
+++ b/content/2-templating/6-conditional/aurelia2/traffic-light.ts
@@ -7,10 +7,6 @@ export class App {
   }
 
   nextLight() {
-    if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0;
-    } else {
-      this.lightIndex++;
-    }
+    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   }
 }
diff --git a/content/2-templating/6-conditional/ember/traffic-light.js b/content/2-templating/6-conditional/ember/traffic-light.js
index d1013eba..59c3b0d4 100644
--- a/content/2-templating/6-conditional/ember/traffic-light.js
+++ b/content/2-templating/6-conditional/ember/traffic-light.js
@@ -11,10 +11,6 @@ export default class TrafficLight extends Component {
   }
 
   nextLight = () => {
-    if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0;
-    } else {
-      this.lightIndex++;
-    }
+    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   };
 }
diff --git a/content/2-templating/6-conditional/lit/traffic-light.js b/content/2-templating/6-conditional/lit/traffic-light.js
index a22f093e..31d79aff 100644
--- a/content/2-templating/6-conditional/lit/traffic-light.js
+++ b/content/2-templating/6-conditional/lit/traffic-light.js
@@ -14,11 +14,7 @@ export class TrafficLight extends LitElement {
   }
 
   nextLight() {
-    if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      this.lightIndex = 0;
-    } else {
-      this.lightIndex = this.lightIndex + 1;
-    }
+    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   }
 
   render() {
diff --git a/content/2-templating/6-conditional/mithril/TrafficLight.js b/content/2-templating/6-conditional/mithril/TrafficLight.js
index 1e52e698..df1fc88c 100644
--- a/content/2-templating/6-conditional/mithril/TrafficLight.js
+++ b/content/2-templating/6-conditional/mithril/TrafficLight.js
@@ -5,10 +5,7 @@ export default function TrafficLight() {
   let lightIndex = 0;
   let currentLight = () => TRAFFIC_LIGHTS[lightIndex];
 
-  const nextLight = () =>
-    lightIndex + 1 > TRAFFIC_LIGHTS.length - 1
-      ? (lightIndex = 0)
-      : (lightIndex = lightIndex + 1);
+  const nextLight = () => (lightIndex + 1) % TRAFFIC_LIGHTS.length;
 
   const instructions = () => {
     switch (currentLight()) {
diff --git a/content/2-templating/6-conditional/qwik/TrafficLight.tsx b/content/2-templating/6-conditional/qwik/TrafficLight.tsx
index 4e89855f..633b5d46 100644
--- a/content/2-templating/6-conditional/qwik/TrafficLight.tsx
+++ b/content/2-templating/6-conditional/qwik/TrafficLight.tsx
@@ -10,11 +10,7 @@ export const App = component$(() => {
   const light = TRAFFIC_LIGHTS[store.lightIndex];
 
   const nextLight = $(() => {
-    if (store.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      store.lightIndex = 0;
-    } else {
-      store.lightIndex += 1;
-    }
+    store.lightIndex = (store.lightIndex + 1) % TRAFFIC_LIGHTS.length;
   });
 
   return (
diff --git a/content/2-templating/6-conditional/react/TrafficLight.jsx b/content/2-templating/6-conditional/react/TrafficLight.jsx
index 63a4fdc1..c8718c50 100644
--- a/content/2-templating/6-conditional/react/TrafficLight.jsx
+++ b/content/2-templating/6-conditional/react/TrafficLight.jsx
@@ -8,11 +8,7 @@ export default function TrafficLight() {
   const light = TRAFFIC_LIGHTS[lightIndex];
 
   function nextLight() {
-    if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      setLightIndex(0);
-    } else {
-      setLightIndex(lightIndex + 1);
-    }
+    setLightIndex((lightIndex + 1) % TRAFFIC_LIGHTS.length);
   }
 
   return (
diff --git a/content/2-templating/6-conditional/solid/TrafficLight.jsx b/content/2-templating/6-conditional/solid/TrafficLight.jsx
index 3bc3c0ba..28aa8b25 100644
--- a/content/2-templating/6-conditional/solid/TrafficLight.jsx
+++ b/content/2-templating/6-conditional/solid/TrafficLight.jsx
@@ -8,11 +8,7 @@ export default function TrafficLight() {
   const light = () => TRAFFIC_LIGHTS[lightIndex()];
 
   function nextLight() {
-    if (lightIndex() + 1 > TRAFFIC_LIGHTS.length - 1) {
-      setLightIndex(0);
-    } else {
-      setLightIndex(lightIndex() + 1);
-    }
+    setLightIndex((lightIndex() + 1) % TRAFFIC_LIGHTS.length);
   }
 
   return (
diff --git a/content/2-templating/6-conditional/svelte/TrafficLight.svelte b/content/2-templating/6-conditional/svelte/TrafficLight.svelte
index 8b447b5d..7eb982b4 100644
--- a/content/2-templating/6-conditional/svelte/TrafficLight.svelte
+++ b/content/2-templating/6-conditional/svelte/TrafficLight.svelte
@@ -5,11 +5,7 @@
   $: light = TRAFFIC_LIGHTS[lightIndex];
 
   function nextLight() {
-    if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
-      lightIndex = 0;
-    } else {
-      lightIndex++;
-    }
+    lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length;
   }
 </script>
 
diff --git a/content/2-templating/6-conditional/vue2/TrafficLight.vue b/content/2-templating/6-conditional/vue2/TrafficLight.vue
index 48d1feb6..f4d06327 100644
--- a/content/2-templating/6-conditional/vue2/TrafficLight.vue
+++ b/content/2-templating/6-conditional/vue2/TrafficLight.vue
@@ -13,11 +13,7 @@ export default {
   },
   methods: {
     nextLight() {
-      if (this.lightIndex + 1 > this.TRAFFIC_LIGHTS.length - 1) {
-        this.lightIndex = 0;
-      } else {
-        this.lightIndex++;
-      }
+      this.lightIndex = (this.lightIndex + 1) % this.TRAFFIC_LIGHTS.length;
     },
   },
 };
diff --git a/content/2-templating/6-conditional/vue3/TrafficLight.vue b/content/2-templating/6-conditional/vue3/TrafficLight.vue
index 0b1a68e8..e3f737ca 100644
--- a/content/2-templating/6-conditional/vue3/TrafficLight.vue
+++ b/content/2-templating/6-conditional/vue3/TrafficLight.vue
@@ -6,11 +6,7 @@ const lightIndex = ref(0);
 const light = computed(() => TRAFFIC_LIGHTS[lightIndex.value]);
 
 function nextLight() {
-  if (lightIndex.value + 1 > TRAFFIC_LIGHTS.length - 1) {
-    lightIndex.value = 0;
-  } else {
-    lightIndex.value++;
-  }
+  lightIndex.value = (lightIndex.value + 1) % TRAFFIC_LIGHTS.length;
 }
 </script>