FlightsTable component props <=> parameter

src/App.tsx

@@ -6,6 +6,7 @@ import {groupByMap} from './global/tools';
 import flights from './data/HoPe_all_flights.json';
 import {CFlight} from './classes/CFlight';
 import {CSeason} from './classes/CSeason';
+import {CheckArray} from './tools/tools';
 
 const data_raw = flights.data;
 const data: CFlight[] = [];
@@ -15,6 +16,7 @@ for (let fl of data_raw)
 {
   data.push(new CFlight(fl));
 }
+CheckArray(data);
 
 const seasondata_raw = groupByMap(data, i => i.FKSeason);
 

src/classes/CFlight.ts

@@ -11,6 +11,7 @@ export class CFlight implements IKey
     public readonly BestTaskType: string;
     public readonly BestTaskPoints: string;
     public readonly FlightDuration: CHour;
+    public readonly FlightDurationDispl: string; // need for sorting 
     public readonly FKSeason: string;
     
     constructor(inData: any) 
@@ -24,6 +25,7 @@ export class CFlight implements IKey
         this.BestTaskPoints = inData.BestTaskPoints;
         this.FKSeason = inData.FKSeason;
         this.FlightDuration = new CHour(+inData.FlightDuration);
+        this.FlightDurationDispl = this.FlightDuration.Print();       
     }
 
     public get key()

src/components/FlightsTable.tsx

@@ -21,8 +21,7 @@ function Meter2Km(key: string, row: any, data: string | null)
   return val;
 }
 
-//export default function FlightsTable(flightdata: IFlight[]) 
+export default function FlightsTable({flightdata}: {flightdata: CFlight[]}) 
-export default function FlightsTable(flightdata: any) 
 {
   const headers: THeader[] = [
     { key: "IDFlight", label: "ID", visible: false },
@@ -31,7 +30,8 @@ export default function FlightsTable(flightdata: any)
     { key: "Glider", label: "Gleitschirm" },
     { key: "BestTaskDistance", label: "Strecke", callback: Meter2Km },
     { key: "BestTaskType", label: "Streckentyp" },
-    { key: "BestTaskPoints", label: "Punkte" }
+    { key: "BestTaskPoints", label: "Punkte" },
+    { key: "FlightDurationDispl", label: "Dauer" }
   ];
 
   return(

src/components/SortableTable.tsx

@@ -35,30 +35,33 @@ function SortButton({
 }
 
 export default function SortableTable<T extends IKey>({ headers, dataTbl }: 
-  { headers: THeader[], dataTbl: any }) 
+  { headers: THeader[], dataTbl: T[] }) 
 {
   const [sortKey, setSortKey] = useState<string>(headers[0].key);
   const [sortOrder, setSortOrder] = useState<TSortOrder>("ascn");
 
-  var sortedData: any = sortData(
+  var sortedData: T[] = sortData(
       { 
         tableData: dataTbl, 
         sortKey: sortKey,
         reverse: sortOrder === "desc"
       });
 
-  function changeSort(key: string) {
+  function changeSort(key: string) 
+  {
     setSortOrder(sortOrder === "ascn" ? "desc" : "ascn");
 
     setSortKey(key);
   }
 
-  function sortData({
+  function sortData(
+  {
     tableData,
     sortKey,
     reverse,
-  }: {
+  }: 
-    tableData: any;
+  {
+    tableData: T[];
     sortKey: string;
     reverse: boolean;
   }) 
@@ -66,13 +69,12 @@ export default function SortableTable<T extends IKey>({ headers, dataTbl }:
     if (!sortKey) return tableData;
   
     const order = reverse ? 'asc': 'desc';
-    // var helpArr: any = tableData;
+    const reval: T[] = orderBy(tableData, [sortKey], [order]);
-    // const reval: any = orderBy(helpArr, [sortKey], [order]);
-    const reval = tableData;
     return reval;
   }
 
-  function TableTd({ item, key, row_item, data } : {item: THeader, key: number, row_item: any, data: string | null})
+  function TableTd({ item, key, row_item, data } 
+    : {item: THeader, key: number, row_item: T, data: string | null})
   {
     var val_complete: JSX.Element = <></>;
     if(item.visible === undefined || item.visible === true)
@@ -98,62 +100,27 @@ export default function SortableTable<T extends IKey>({ headers, dataTbl }:
   {
     return(
       <tr key={row_item.key}>
-        {
+      {
         headers.map((h_item, key) => 
         {
           var c: any = row_item; // workaround TS2322 TS7053
           return ( <TableTd item={h_item} key={key} row_item={row_item} data={c[h_item.key]}></TableTd> );
-        })}
+        })
+      }
       </tr>
     );
   }
 
-  function dummy() 
-  {
-    var val_complete: JSX.Element = <></>;
-    var a = 2+2;
-    return val_complete;
-  }
-
   function tableBody(headers: THeader[], tableDataSorted : any)
   {
     var body: JSX.Element[] = [];
 
-    // body.push(
-    //   <tr key='1'> 
-    //     <td key='1_1'>1_</td>
-    //     <td key='1_2'>1_</td>
-    //     <td key='1_3'>1_</td>
-    //     <td key='1_4'>1_</td>
-    //     <td key='1_5'>1_</td>
-    //     <td key='1_6'>1_</td>
-    //   </tr>);
-    // body.push(
-    //   <tr key='2'> 
-    //     <td key='2_1'>2_</td>
-    //     <td key='2_2'>2_</td>
-    //     <td key='2_3'>2_</td>
-    //     <td key='2_4'>2_</td>
-    //     <td key='2_5'>2_</td>
-    //     <td key='2_6'>2_</td>
-    //   </tr>);
-    // body.push(
-    //   <tr key='3'> 
-    //     <td key='3_1'>3_</td>
-    //     <td key='3_2'>3_</td>
-    //     <td key='3_3'>3_</td>
-    //     <td key='3_4'>3_</td>
-    //     <td key='3_5'>3_</td>
-    //     <td key='3_6'>3_</td>
-    //   </tr>);
-
     for(var flight of tableDataSorted)
     {
       var index: number = flight.key;
       body.push(
         <TableTr headers={headers} key={index} row_item = {flight} />
         );
-   
     }
 
     return(
@@ -167,9 +134,8 @@ export default function SortableTable<T extends IKey>({ headers, dataTbl }:
   {
     return(
       headers.map(
-      (row, key) => 
+      (row) => 
       {
-        var a = key;
         if(row.visible === undefined || row.visible === true)
         {
           return (
@@ -195,9 +161,9 @@ export default function SortableTable<T extends IKey>({ headers, dataTbl }:
   }
 
   return (
-    <table className='sortable'>
+    <table key='SortTable' className='sortable'>
-      <thead>
+      <thead key='SortTableHead'>
-        <tr>
+        <tr key='SortTableHeadRow'>
           {tableHeader(headers)}
         </tr>
       </thead>

src/tools/tools.ts

@@ -0,0 +1,4 @@
+export function CheckArray(collection: any)
+{
+    console.log("data is array: " + Array.isArray(collection));
+}

tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "downlevelIteration": true
   },
   "include": [