fix: BrowseDirectors - birthdate sorting, indentation

frontend/src/components/BrowseDirectors.tsx

-import { Space, Card, Table } from "antd";
-import React from "react"
+import { Space, Table } from "antd";
 import { Link } from "react-router-dom";
 import { DirectorIO } from "./Preview"
 
@@ -30,71 +29,59 @@ const exampleDirectors: DirectorIO[] = [{
   },
 ]
 
-
-
-
-
-
 export const BrowseDirectors = () => {
-
-    const columns = [
-        {
-          title: "Name",
-          dataIndex: "name",
-          sorter: (a:DirectorIO, b:DirectorIO) => {
-            //surname has higher priority
-            if(a.surname < b.surname){return -1;}
-            if(a.surname > b.surname){return 1;}
-            
-            if(a.name < b.name){return -1;}
-            if(a.name > b.name){return 1;}
-            return 0;
-    
-            
-          },
-          
-          render: (text: string, record: DirectorIO) => (
-            <Link to={`/director/${record.id}`}>
-              <a>{record.name} {record.surname}</a>
-            </Link>
-          ),
-        },
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      sorter: (a: DirectorIO, b: DirectorIO) => {
+        //surname has higher priority
+        if (a.surname < b.surname) {return -1;}
+        if (a.surname > b.surname) {return 1;}
         
-        {
-           title: "Birthdate",
-           className: "birthdate",
-           dataIndex: "birthdate",
-           sorter: (a:DirectorIO, b:DirectorIO) => {
-            const first = a.birthdate.split('.').reverse();
-            const second = b.birthdate.split('.').reverse();
-            if(first[0] > second[0]){return 1 ;}
-            if(first[0] < second[0]){return -1 ;}
-    
-            if(first[1] > second[1]){return 1 ;}
-            if(first[1] < second[1]){return -1 ;}
-    
-            if(first[2] > second[2]){return 1 ;}
-            if(first[2] < second[2]){return -1 ;}
-            return 0;},
-        }
-        
-      ];
-
-
+        if (a.name < b.name) {return -1;}
+        if (a.name > b.name) {return 1;}
+        return 0;
+      },
+      render: (text: string, record: DirectorIO) => (
+        <Link to={`/director/${record.id}`}>
+          <a>{record.name} {record.surname}</a>
+        </Link>
+      ),
+    },
+    {
+      title: "Birthdate",
+      className: "birthdate",
+      dataIndex: "birthdate",
+      sorter: (a: DirectorIO, b: DirectorIO) => {
+        const first = a?.birthdate?.split('.').reverse();
+        const second = b?.birthdate?.split('.').reverse();
 
+        if (first === undefined && second === undefined) { return 0; }
+        if (first === undefined) { return 1;}
+        if (second === undefined) { return -1;}
 
+        if (first[0] > second[0]) {return 1;}
+        if (first[0] < second[0]) {return -1;}
+        
+        if (first[1] > second[1]) {return 1;}
+        if (first[1] < second[1]) {return -1;}
+        
+        if (first[2] > second[2]) {return 1;}
+        if (first[2] < second[2]) {return -1;}
+        return 0;
+      },
+    }
+  ];
 
-    return (
-        <div className="browse-container">
-          <Space direction="vertical" size="middle" style={{ padding: "4%" }}>
-            <Table
-            columns={columns}
-            dataSource={exampleDirectors}
-            >
-
-            </Table>
-            
-          </Space>
-        </div>
-      );
-}
\ No newline at end of file
+  return (
+    <div className="browse-container">
+      <Space direction="vertical" size="middle" style={{ padding: "4%" }}>
+        <Table
+          columns={columns}
+          dataSource={exampleDirectors}
+        />
+      </Space>
+    </div>
+  );
+}