From 25a010e7c6f9854ca415c53da304a207ebe6fe7d Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Mon, 8 May 2023 23:14:03 +1000
Subject: [PATCH] Refactor colorTypeGradients method to make it shorter

---
 src/components/PokemonCard/utils.ts | 192 ++++++++++------------------
 1 file changed, 69 insertions(+), 123 deletions(-)

diff --git a/src/components/PokemonCard/utils.ts b/src/components/PokemonCard/utils.ts
index 92110b4..a3753a8 100644
--- a/src/components/PokemonCard/utils.ts
+++ b/src/components/PokemonCard/utils.ts
@@ -1,136 +1,82 @@
+const getColor = (type: string) => {
+  let returnColor: string;
+  switch (type) {
+    case 'grass':
+      returnColor = '#a8ff98';
+      break;
+    case 'poison':
+      returnColor = '#d6a2e4';
+      break;
+    case 'normal':
+      returnColor = '#dcdcdc';
+      break;
+    case 'fire':
+      returnColor = '#ffb971';
+      break;
+    case 'water':
+      returnColor = '#8cc4e2';
+      break;
+    case 'electric':
+      returnColor = '#ffe662';
+      break;
+    case 'ice':
+      returnColor = '#8cf5e4';
+      break;
+    case 'fighting':
+      returnColor = '#da7589';
+      break;
+    case 'ground':
+      returnColor = '#e69a74';
+      break;
+    case 'flying':
+      returnColor = '#bbc9e4';
+      break;
+    case 'psychic':
+      returnColor = '#ffa5da';
+      break;
+    case 'bug':
+      returnColor = '#bae05f';
+      break;
+    case 'rock':
+      returnColor = '#C9BB8A';
+      break;
+    case 'ghost':
+      returnColor = '#8291e0';
+      break;
+    case 'dark':
+      returnColor = '#8e8c94';
+      break;
+    case 'dragon':
+      returnColor = '#88a2e8';
+      break;
+    case 'steel':
+      returnColor = '#9fb8b9';
+      break;
+    case 'fairy':
+      returnColor = '#fdb9e9';
+      break;
+    default:
+      returnColor = 'gainsboro';
+      break;
+  }
+
+  return returnColor;
+};
+
 export const colorTypeGradients = (
   type1: string,
   type2: string,
   length: number,
 ) => {
-  // debugger
-  let color1, color2;
+  let color2;
 
-  switch (type1) {
-    case 'grass':
-      color1 = '#a8ff98';
-      break;
-    case 'poison':
-      color1 = '#d6a2e4';
-      break;
-    case 'normal':
-      color1 = '#dcdcdc';
-      break;
-    case 'fire':
-      color1 = '#ffb971';
-      break;
-    case 'water':
-      color1 = '#8cc4e2';
-      break;
-    case 'electric':
-      color1 = '#ffe662';
-      break;
-    case 'ice':
-      color1 = '#8cf5e4';
-      break;
-    case 'fighting':
-      color1 = '#da7589';
-      break;
-    case 'ground':
-      color1 = '#e69a74';
-      break;
-    case 'flying':
-      color1 = '#bbc9e4';
-      break;
-    case 'psychic':
-      color1 = '#ffa5da';
-      break;
-    case 'bug':
-      color1 = '#bae05f';
-      break;
-    case 'rock':
-      color1 = '#C9BB8A';
-      break;
-    case 'ghost':
-      color1 = '#8291e0';
-      break;
-    case 'dark':
-      color1 = '#8e8c94';
-      break;
-    case 'dragon':
-      color1 = '#88a2e8';
-      break;
-    case 'steel':
-      color1 = '#9fb8b9';
-      break;
-    case 'fairy':
-      color1 = '#fdb9e9';
-      break;
-    default:
-      color1 = 'gainsboro';
-      break;
-  }
+  const color1 = getColor(type1);
 
   if (length === 2) {
-    switch (type2) {
-      case 'grass':
-        color2 = '#a8ff98';
-        break;
-      case 'poison':
-        color2 = '#d6a2e4';
-        break;
-      case 'normal':
-        color2 = '#dcdcdc';
-        break;
-      case 'fire':
-        color2 = '#ffb971';
-        break;
-      case 'water':
-        color2 = '#8cc4e2';
-        break;
-      case 'electric':
-        color2 = '#ffe662';
-        break;
-      case 'ice':
-        color2 = '#8cf5e4';
-        break;
-      case 'fighting':
-        color2 = '#da7589';
-        break;
-      case 'ground':
-        color2 = '#e69a74';
-        break;
-      case 'flying':
-        color2 = '#bbc9e4';
-        break;
-      case 'psychic':
-        color2 = '#ffa5da';
-        break;
-      case 'bug':
-        color2 = '#bae05f';
-        break;
-      case 'rock':
-        color2 = '#C9BB8A';
-        break;
-      case 'ghost':
-        color2 = '#8291e0';
-        break;
-      case 'dark':
-        color2 = '#8e8c94';
-        break;
-      case 'dragon':
-        color2 = '#88a2e8';
-        break;
-      case 'steel':
-        color2 = '#9fb8b9';
-        break;
-      case 'fairy':
-        color2 = '#fdb9e9';
-        break;
-      default:
-        color2 = 'gainsboro';
-        break;
-    }
+    color2 = getColor(type2);
   } else if (length === 1) {
     color2 = color1;
   }
 
-  const finalColor = [color1, color2];
-
-  return finalColor;
+  return [color1, color2];
 };