Simplify next traffic light functions. (#177)

* Simplify next traffic light functions. * Fix Vue 2
matschik · Jul 28, 2023 · 5617191 · 5617191
1 parent 19918ec
commit 5617191
Show file tree

Hide file tree

Showing 13 changed files with 13 additions and 65 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>