From 878f0fd50a22b18267ef7d68b5986a8a67e6696c Mon Sep 17 00:00:00 2001
From: Adrien Vannson <adrien.vannson@protonmail.com>
Date: Mon, 6 Mar 2023 11:23:24 +0100
Subject: [PATCH] Factorise code

---
 src/Map.js | 72 ++++++++++++++++++++++++++----------------------------
 1 file changed, 35 insertions(+), 37 deletions(-)

diff --git a/src/Map.js b/src/Map.js
index b9a36be..c4695fa 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -184,45 +184,43 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
   // as well as a callback to display the room informations when the user clicks on the room
   // and for S or L, we add a Popup with the list of connected floors and possibility to load the
   // map of a connected floor
-  const color = selectedRoom === element["id"] ? 'red' : 'grey';
-  if (element["type"] === "S") {
-    // In this case, the room is a staircase so we add a Stairs component
-    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{ click: () => callbackRoomSelected(element["id"]) }}>
-      <Tooltip>{roomNameList(element["names"])}</Tooltip>
-      <Stairs position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
-        {floorList(element["connectedFloors"], callbackChangeFloor)}
-      </Popup>
-      }
-      />
-    </Polygon>
+  const color = selectedRoom === element['id'] ? 'red' : 'grey';
+
+  if (element['type'] === 'C') { // Corridor
+    return <Polygon positions={positions} key={element['id'] + color} color={'peru'} />
   }
-  else if (element["type"] === "L") {
-    // In this case the room is a lift so we add a Lift component
-    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{ click: () => callbackRoomSelected(element["id"]) }}>
-      <Tooltip>{roomNameList(element["names"])}</Tooltip>
-      <Lift position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
-        {floorList(element["connectedFloors"], callbackChangeFloor)}
-      </Popup>
-      }
-      />
-    </Polygon>
-  }
-  else if (element["type"] === "T") {
-    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{ click: () => callbackRoomSelected(element["id"]) }}>
-      <Tooltip>{roomNameList(element["names"])}</Tooltip>
-      <Toilet position={polygonCenter(positions)} size={logoSize(positions)} />
-    </Polygon>
-  }
-  else if (element["type"] === "R") {
-    // In this case it is a regular room
-    return <Polygon positions={positions} key={element["id"] + color} color={color} eventHandlers={{ click: () => callbackRoomSelected(element["id"]) }}>
-      <Tooltip>{roomNameList(element["names"])}</Tooltip>
-    </Polygon>
-  }
-  else if (element["type"] === "C") {
-    // In this case it is a corridor
-    return <Polygon positions={positions} key={element["id"] + color} color={"peru"} />
+
+  var content = <></>
+  if (element['type'] === 'S') { // Stair
+    content = <Stairs
+      position={polygonCenter(positions)}
+      size={logoSize(positions)}
+      body={<Popup>
+        {floorList(element['connectedFloors'], callbackChangeFloor)}
+      </Popup>}
+    />
+  } else if (element['type'] === 'L') { // Lift
+    content = <Lift
+      position={polygonCenter(positions)}
+      size={logoSize(positions)}
+      body={<Popup>
+        {floorList(element['connectedFloors'], callbackChangeFloor)}
+      </Popup>}
+    />
+  } else if (element['type'] === 'T') { // Toilets
+    content = <Toilet position={polygonCenter(positions)} size={logoSize(positions)} />
   }
+
+  
+  return <Polygon
+  positions={positions}
+    key={element["id"] + color} 
+    color={color}
+    eventHandlers={{ click: () => callbackRoomSelected(element["id"]) }}
+    >
+    <Tooltip>{roomNameList(element["names"])}</Tooltip>
+    {content}
+  </Polygon>
 }
 
 function list_polygons(request, center, callbackRoomSelected, selectedRoom, callbackChangeFloor) {