TroncName function and improve code structure

front/style/home.css

@@ -115,7 +115,7 @@ ul {
     border : pink solid 1px;
 }
 
-#SetButtonTactic {
+.SetButton {
     border: 0px solid brown;
     width: 80%;
     margin-left : 5%;
@@ -123,7 +123,7 @@ ul {
 }
 
 
-.ButtonLastTactic {
+.ButtonSideMenu {
     border : black solid 1px;
     border-radius :0.5cap;
     width :fit-content;
@@ -132,7 +132,7 @@ ul {
     overflow: hidden;
 }
 
-.ButtonLastTactic:hover {
+.ButtonSideMenu:hover {
     background-color: red;
     cursor : pointer;
 }

front/views/Home.tsx

@@ -99,7 +99,7 @@ function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) {
     i = 0;
     while (i < nbRow) {
         listTactic[i] = listTactic[i].map((tactic : Tactic) => 
-            <td key={tactic.id} className="dataTactic" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{tactic.name}</td>
+            <td key={tactic.id} className="dataTactic" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{troncName(tactic.name, 25)}</td>
         );
         i++;
     }
@@ -145,9 +145,7 @@ export function Team({teams} : {teams : Team[]}) {
                 <h2 className="title">Mes équipes</h2>
                 <button className="new" onClick={() => location.pathname="/team/new"}>+</button>
             </div>
-            <ul>
+            <SetButtonTeam teams={teams}/>
-                {listTeam}
-            </ul>
         </div>
     )
 }
@@ -170,19 +168,56 @@ function SetButtonTactic ({tactics} : {tactics : Tactic[]}) {
         <ButtonLastTactic tactic={tactic} />
     );
     return (
-        <div id="SetButtonTactic">
+        <div className="SetButton">
             {lastTactics}
         </div>
     );
 }
+
+function SetButtonTeam({teams} : {teams : Team[]}) {
+    const listTeam = teams.map(teams => 
+        <ButtonTeam team={teams} />
+    );
+    return (
+        <div className="SetButton">
+            {listTeam}
+        </div>
+    );
+}
+
+function ButtonTeam ({team} : {team : Team}) {
+    const name = troncName(team.name, 20);
+    return (
+        <div>
+            <div 
+                id={"ButtonTeam"+team.id} 
+                className="ButtonSideMenu"
+                onClick={() => {location.pathname="/team/"+team.id}}
+            >
+                {name}
+            </div>
+        </div>
+    )
+}
+
 function ButtonLastTactic ({tactic} : {tactic : Tactic}) {
+    const name = troncName(tactic.name, 20);
     return (
         <div 
             id={"Button"+tactic.id} 
-            className="ButtonLastTactic"
+            className="ButtonSideMenu"
             onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}
         >
-            {tactic.name}
+            {name}
         </div>
     );
 }
+
+function troncName(name: string, limit: number) : string {
+    if (name.length > limit) {
+        name = name.substring(0, limit) + "...";
+    } else {
+        name = name;
+    }
+    return name;
+}