From 1e8fbd1c916bf23a14588b215f0b84fe5056269a Mon Sep 17 00:00:00 2001
From: annatkachenko <tkachenko.anna835@gmail.com>
Date: Tue, 31 Jan 2023 17:48:36 +0200
Subject: [PATCH 1/4] Add people table component

---
 src/App.tsx                                |  45 ++++----
 src/components/Button/Button.tsx           |  17 +++
 src/components/Button/index.tsx            |   1 +
 src/components/PeopleTable/PeopleTable.tsx | 115 +++++++++++++++++++++
 src/components/PeopleTable/index.tsx       |   1 +
 5 files changed, 157 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Button/Button.tsx
 create mode 100644 src/components/Button/index.tsx
 create mode 100644 src/components/PeopleTable/PeopleTable.tsx
 create mode 100644 src/components/PeopleTable/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f6361547..a3cb0745 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,35 +4,36 @@ import '@fortawesome/fontawesome-free/css/all.css';
 import 'bulma/css/bulma.css';
 import './App.scss';
 
-import peopleFromServer from './people.json';
+import { Loader } from './components/Loader';
+import { PeopleTable } from './components/PeopleTable';
 
-export class App extends React.Component {
-  state = {};
+type State = {
+  isLoaded: boolean;
+};
+
+export class App extends React.Component<{}, State> {
+  state: Readonly<State> = {
+    isLoaded: false,
+  };
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({
+        isLoaded: true,
+      });
+    }, 1000);
+  }
 
   render() {
+    const { isLoaded } = this.state;
+
     return (
       <div className="box">
         <h1 className="title">People table</h1>
 
-        <table className="table is-striped is-narrow">
-          <thead>
-            <tr>
-              <th>name</th>
-              <th>sex</th>
-              <th>born</th>
-            </tr>
-          </thead>
-
-          <tbody>
-            {peopleFromServer.map(person => (
-              <tr key={person.slug}>
-                <td>{person.name}</td>
-                <td>{person.sex}</td>
-                <td>{person.born}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        {isLoaded
+          ? <PeopleTable />
+          : <Loader />}
       </div>
     );
   }
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
new file mode 100644
index 00000000..c3631fe3
--- /dev/null
+++ b/src/components/Button/Button.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+type Props = React.HtmlHTMLAttributes<HTMLButtonElement> & {
+  children: React.ReactNode,
+};
+
+export const Button: React.FC<Props> = ({ children, className, ...props }) => {
+  return (
+    <button
+      type="button"
+      className={`button ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
new file mode 100644
index 00000000..8b166a86
--- /dev/null
+++ b/src/components/Button/index.tsx
@@ -0,0 +1 @@
+export * from './Button';
diff --git a/src/components/PeopleTable/PeopleTable.tsx b/src/components/PeopleTable/PeopleTable.tsx
new file mode 100644
index 00000000..bee95a56
--- /dev/null
+++ b/src/components/PeopleTable/PeopleTable.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+
+import '@fortawesome/fontawesome-free/css/all.css';
+import 'bulma/css/bulma.css';
+
+import cn from 'classnames';
+
+import peopleFromServer from '../../people.json';
+import { Person } from '../../types/Person';
+import { Button } from '../Button';
+
+type State = {
+  people: Person[],
+  selectedPerson: Person | null,
+};
+
+export class PeopleTable extends React.Component<{}, State> {
+  state: Readonly<State> = {
+    people: [],
+    selectedPerson: null,
+  };
+
+  componentDidMount() {
+    this.setState({
+      people: peopleFromServer,
+    });
+  }
+
+  selectPerson = (person: Person | null) => {
+    this.setState({
+      selectedPerson: person,
+    });
+  }
+
+  render() {
+    const { people, selectedPerson } = this.state;
+
+    if (people.length === 0) {
+      return (
+        <p>
+          No people on server
+        </p>
+      );
+    }
+
+    return (
+      <table className="table is-striped is-narrow">
+        <caption className="title is-5">
+          {selectedPerson
+            ? `${selectedPerson.name}`
+            : 'No selected person'}
+        </caption>
+
+        <thead>
+          <tr>
+            <th>-</th>
+            <th>name</th>
+            <th>sex</th>
+            <th>born</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {people.map(person => {
+            const isPersonSelected = person.slug === selectedPerson?.slug;
+
+            return (
+              <tr
+                key={person.slug}
+                className={cn({
+                  'has-background-warning': (
+                    isPersonSelected
+                  ),
+                })}
+              >
+                <td>
+                  {isPersonSelected
+                    ? (
+                      <Button
+                        onClick={() => {
+                          this.selectPerson(null);
+                        }}
+                        className="is-small"
+                      >
+                        -
+                      </Button>
+                    )
+                    : (
+                      <Button
+                        onClick={() => {
+                          this.selectPerson(person);
+                        }}
+                      >
+                        +
+                      </Button>
+                    )}
+                </td>
+                <td
+                  className={cn({
+                    'has-text-link': person.sex === 'm',
+                    'has-text-danger': person.sex === 'f',
+                  })}
+                >
+                  {person.name}
+                </td>
+                <td>{person.sex}</td>
+                <td>{person.born}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    );
+  }
+}
diff --git a/src/components/PeopleTable/index.tsx b/src/components/PeopleTable/index.tsx
new file mode 100644
index 00000000..45984e7c
--- /dev/null
+++ b/src/components/PeopleTable/index.tsx
@@ -0,0 +1 @@
+export * from './PeopleTable';

From 42812be659e04af0d5f295e1f4a16bc8d7a25600 Mon Sep 17 00:00:00 2001
From: annatkachenko <tkachenko.anna835@gmail.com>
Date: Thu, 2 Feb 2023 12:56:28 +0200
Subject: [PATCH 2/4] Add ability to select several people and sort the array

---
 src/components/PeopleTable/PeopleTable.tsx | 115 ++++++++++++++++++---
 src/types/SortField.ts                     |   5 +
 2 files changed, 103 insertions(+), 17 deletions(-)
 create mode 100644 src/types/SortField.ts

diff --git a/src/components/PeopleTable/PeopleTable.tsx b/src/components/PeopleTable/PeopleTable.tsx
index bee95a56..ef186294 100644
--- a/src/components/PeopleTable/PeopleTable.tsx
+++ b/src/components/PeopleTable/PeopleTable.tsx
@@ -8,16 +8,39 @@ import cn from 'classnames';
 import peopleFromServer from '../../people.json';
 import { Person } from '../../types/Person';
 import { Button } from '../Button';
+import { SortField } from '../../types/SortField';
 
 type State = {
   people: Person[],
-  selectedPerson: Person | null,
+  selectedPeople: Person[],
+  sortBy: SortField;
 };
 
+function getReorderedPeople(people: Person[], sortBy: SortField) {
+  const peopleCopy = [...people];
+
+  peopleCopy.sort((personA, personB) => {
+    switch (sortBy) {
+      case SortField.Name:
+        return personA.name.localeCompare(personB.name);
+
+      case SortField.Born:
+        return personA.born - personB.born;
+
+      case SortField.None:
+      default:
+        return 0;
+    }
+  });
+
+  return peopleCopy;
+}
+
 export class PeopleTable extends React.Component<{}, State> {
   state: Readonly<State> = {
     people: [],
-    selectedPerson: null,
+    selectedPeople: [],
+    sortBy: SortField.None,
   };
 
   componentDidMount() {
@@ -26,16 +49,48 @@ export class PeopleTable extends React.Component<{}, State> {
     });
   }
 
-  selectPerson = (person: Person | null) => {
+  selectPerson = (person: Person) => {
+    this.setState((state) => ({
+      selectedPeople: [...state.selectedPeople, person],
+    }));
+  };
+
+  unselectPerson = (person: Person) => {
+    this.setState((state) => ({
+      selectedPeople: state.selectedPeople.filter(
+        (selectedPerson) => selectedPerson.slug !== person.slug,
+      ),
+    }));
+  }
+
+  isPersonSelected = (person: Person) => {
+    const {
+      selectedPeople,
+    } = this.state;
+
+    return selectedPeople.some(
+      selectedPerson => selectedPerson.slug === person.slug,
+    );
+  }
+
+  clearSelectedPeople = () => {
     this.setState({
-      selectedPerson: person,
+      selectedPeople: [],
+    });
+  }
+
+  changeSortBy = (sortField: SortField) => {
+    this.setState({
+      sortBy: sortField,
     });
   }
 
   render() {
-    const { people, selectedPerson } = this.state;
+    const { people, selectedPeople, sortBy } = this.state;
+
+    const visiblePeople = getReorderedPeople(people, sortBy);
 
-    if (people.length === 0) {
+    if (visiblePeople.length === 0) {
       return (
         <p>
           No people on server
@@ -46,23 +101,44 @@ export class PeopleTable extends React.Component<{}, State> {
     return (
       <table className="table is-striped is-narrow">
         <caption className="title is-5">
-          {selectedPerson
-            ? `${selectedPerson.name}`
-            : 'No selected person'}
+          {selectedPeople.length > 0 && (
+            <button
+              aria-label="delete"
+              type="button"
+              className="delete"
+              onClick={this.clearSelectedPeople}
+            />
+          )}
+
+          {selectedPeople.map(person => person.name).join(', ') || '-'}
         </caption>
 
         <thead>
           <tr>
             <th>-</th>
-            <th>name</th>
+            <th
+              onClick={() => {
+                this.changeSortBy(SortField.Name);
+              }}
+            >
+              name
+            </th>
+
             <th>sex</th>
-            <th>born</th>
+
+            <th
+              onClick={() => {
+                this.changeSortBy(SortField.Born);
+              }}
+            >
+              born
+            </th>
           </tr>
         </thead>
 
         <tbody>
-          {people.map(person => {
-            const isPersonSelected = person.slug === selectedPerson?.slug;
+          {visiblePeople.map(person => {
+            const isPersonSelected = this.isPersonSelected(person);
 
             return (
               <tr
@@ -78,11 +154,13 @@ export class PeopleTable extends React.Component<{}, State> {
                     ? (
                       <Button
                         onClick={() => {
-                          this.selectPerson(null);
+                          this.unselectPerson(person);
                         }}
-                        className="is-small"
+                        className="is-small is-rounded is-danger"
                       >
-                        -
+                        <span className="icon is-small">
+                          <i className="fas fa-minus" />
+                        </span>
                       </Button>
                     )
                     : (
@@ -90,8 +168,11 @@ export class PeopleTable extends React.Component<{}, State> {
                         onClick={() => {
                           this.selectPerson(person);
                         }}
+                        className="is-small is-rounded is-success"
                       >
-                        +
+                        <span className="icon is-small">
+                          <i className="fas fa-plus" />
+                        </span>
                       </Button>
                     )}
                 </td>
diff --git a/src/types/SortField.ts b/src/types/SortField.ts
new file mode 100644
index 00000000..d10c18b2
--- /dev/null
+++ b/src/types/SortField.ts
@@ -0,0 +1,5 @@
+export enum SortField {
+  None = 'none',
+  Name = 'name',
+  Born = 'born',
+}

From 8356e6085477e23f9c0b8c06a0eb9f0ff05216a5 Mon Sep 17 00:00:00 2001
From: annatkachenko <tkachenko.anna835@gmail.com>
Date: Fri, 3 Feb 2023 12:51:36 +0200
Subject: [PATCH 3/4] Replace Class components with Functional ones

---
 src/App.tsx                                |  42 ++--
 src/components/PeopleTable/PeopleTable.tsx | 268 +++++++++------------
 2 files changed, 134 insertions(+), 176 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a3cb0745..b6630aaf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 import '@fortawesome/fontawesome-free/css/all.css';
 import 'bulma/css/bulma.css';
@@ -7,34 +7,22 @@ import './App.scss';
 import { Loader } from './components/Loader';
 import { PeopleTable } from './components/PeopleTable';
 
-type State = {
-  isLoaded: boolean;
-};
-
-export class App extends React.Component<{}, State> {
-  state: Readonly<State> = {
-    isLoaded: false,
-  };
+export const App: React.FC = () => {
+  const [isLoaded, setIsLoaded] = useState<boolean>(false);
 
-  componentDidMount() {
+  useEffect(() => {
     setTimeout(() => {
-      this.setState({
-        isLoaded: true,
-      });
+      setIsLoaded(true);
     }, 1000);
-  }
+  }, []);
 
-  render() {
-    const { isLoaded } = this.state;
+  return (
+    <div className="box">
+      <h1 className="title">People table</h1>
 
-    return (
-      <div className="box">
-        <h1 className="title">People table</h1>
-
-        {isLoaded
-          ? <PeopleTable />
-          : <Loader />}
-      </div>
-    );
-  }
-}
+      {isLoaded
+        ? <PeopleTable />
+        : <Loader />}
+    </div>
+  );
+};
diff --git a/src/components/PeopleTable/PeopleTable.tsx b/src/components/PeopleTable/PeopleTable.tsx
index ef186294..1c6a6d44 100644
--- a/src/components/PeopleTable/PeopleTable.tsx
+++ b/src/components/PeopleTable/PeopleTable.tsx
@@ -1,21 +1,14 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import '@fortawesome/fontawesome-free/css/all.css';
 import 'bulma/css/bulma.css';
 
 import cn from 'classnames';
-
 import peopleFromServer from '../../people.json';
 import { Person } from '../../types/Person';
 import { Button } from '../Button';
 import { SortField } from '../../types/SortField';
 
-type State = {
-  people: Person[],
-  selectedPeople: Person[],
-  sortBy: SortField;
-};
-
 function getReorderedPeople(people: Person[], sortBy: SortField) {
   const peopleCopy = [...people];
 
@@ -36,161 +29,138 @@ function getReorderedPeople(people: Person[], sortBy: SortField) {
   return peopleCopy;
 }
 
-export class PeopleTable extends React.Component<{}, State> {
-  state: Readonly<State> = {
-    people: [],
-    selectedPeople: [],
-    sortBy: SortField.None,
-  };
+export const PeopleTable: React.FC = () => {
+  const [people, setPeople] = useState<Person[]>([]);
+  const [selectedPeople, setSelectedPeople] = useState<Person[]>([]);
+  const [sortBy, setSortBy] = useState(SortField.None);
 
-  componentDidMount() {
-    this.setState({
-      people: peopleFromServer,
-    });
-  }
+  useEffect(() => {
+    setPeople(peopleFromServer);
+  }, []);
 
-  selectPerson = (person: Person) => {
-    this.setState((state) => ({
-      selectedPeople: [...state.selectedPeople, person],
-    }));
+  const selectPerson = (person: Person) => {
+    setSelectedPeople((currentSelectedPeople) => (
+      [...currentSelectedPeople, person]
+    ));
   };
 
-  unselectPerson = (person: Person) => {
-    this.setState((state) => ({
-      selectedPeople: state.selectedPeople.filter(
+  const unselectPerson = (person: Person) => {
+    setSelectedPeople((currentSelectedPeople) => (
+      currentSelectedPeople.filter(
         (selectedPerson) => selectedPerson.slug !== person.slug,
-      ),
-    }));
-  }
-
-  isPersonSelected = (person: Person) => {
-    const {
-      selectedPeople,
-    } = this.state;
+      )));
+  };
 
+  const isSelected = (person: Person) => {
     return selectedPeople.some(
       selectedPerson => selectedPerson.slug === person.slug,
     );
-  }
-
-  clearSelectedPeople = () => {
-    this.setState({
-      selectedPeople: [],
-    });
-  }
-
-  changeSortBy = (sortField: SortField) => {
-    this.setState({
-      sortBy: sortField,
-    });
-  }
-
-  render() {
-    const { people, selectedPeople, sortBy } = this.state;
-
-    const visiblePeople = getReorderedPeople(people, sortBy);
+  };
 
-    if (visiblePeople.length === 0) {
-      return (
-        <p>
-          No people on server
-        </p>
-      );
-    }
+  const visiblePeople = getReorderedPeople(people, sortBy);
 
+  if (visiblePeople.length === 0) {
     return (
-      <table className="table is-striped is-narrow">
-        <caption className="title is-5">
-          {selectedPeople.length > 0 && (
-            <button
-              aria-label="delete"
-              type="button"
-              className="delete"
-              onClick={this.clearSelectedPeople}
-            />
-          )}
-
-          {selectedPeople.map(person => person.name).join(', ') || '-'}
-        </caption>
-
-        <thead>
-          <tr>
-            <th>-</th>
-            <th
-              onClick={() => {
-                this.changeSortBy(SortField.Name);
-              }}
-            >
-              name
-            </th>
-
-            <th>sex</th>
+      <p>
+        No people on server
+      </p>
+    );
+  }
 
-            <th
-              onClick={() => {
-                this.changeSortBy(SortField.Born);
-              }}
+  return (
+    <table className="table is-striped is-narrow">
+      <caption className="title is-5">
+        {selectedPeople.length > 0 && (
+          <button
+            aria-label="delete"
+            type="button"
+            className="delete"
+            onClick={() => {
+              setSelectedPeople([]);
+            }}
+          />
+        )}
+
+        {selectedPeople.map(person => person.name).join(', ') || '-'}
+      </caption>
+
+      <thead>
+        <tr>
+          <th>-</th>
+          <th
+            onClick={() => {
+              setSortBy(SortField.Name);
+            }}
+          >
+            name
+          </th>
+
+          <th>sex</th>
+
+          <th
+            onClick={() => {
+              setSortBy(SortField.Born);
+            }}
+          >
+            born
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {visiblePeople.map(person => {
+          const isPersonSelected = isSelected(person);
+
+          return (
+            <tr
+              key={person.slug}
+              className={cn({
+                'has-background-warning': (
+                  isPersonSelected
+                ),
+              })}
             >
-              born
-            </th>
-          </tr>
-        </thead>
-
-        <tbody>
-          {visiblePeople.map(person => {
-            const isPersonSelected = this.isPersonSelected(person);
-
-            return (
-              <tr
-                key={person.slug}
+              <td>
+                {isPersonSelected
+                  ? (
+                    <Button
+                      onClick={() => {
+                        unselectPerson(person);
+                      }}
+                      className="is-small is-rounded is-danger"
+                    >
+                      <span className="icon is-small">
+                        <i className="fas fa-minus" />
+                      </span>
+                    </Button>
+                  )
+                  : (
+                    <Button
+                      onClick={() => {
+                        selectPerson(person);
+                      }}
+                      className="is-small is-rounded is-success"
+                    >
+                      <span className="icon is-small">
+                        <i className="fas fa-plus" />
+                      </span>
+                    </Button>
+                  )}
+              </td>
+              <td
                 className={cn({
-                  'has-background-warning': (
-                    isPersonSelected
-                  ),
+                  'has-text-link': person.sex === 'm',
+                  'has-text-danger': person.sex === 'f',
                 })}
               >
-                <td>
-                  {isPersonSelected
-                    ? (
-                      <Button
-                        onClick={() => {
-                          this.unselectPerson(person);
-                        }}
-                        className="is-small is-rounded is-danger"
-                      >
-                        <span className="icon is-small">
-                          <i className="fas fa-minus" />
-                        </span>
-                      </Button>
-                    )
-                    : (
-                      <Button
-                        onClick={() => {
-                          this.selectPerson(person);
-                        }}
-                        className="is-small is-rounded is-success"
-                      >
-                        <span className="icon is-small">
-                          <i className="fas fa-plus" />
-                        </span>
-                      </Button>
-                    )}
-                </td>
-                <td
-                  className={cn({
-                    'has-text-link': person.sex === 'm',
-                    'has-text-danger': person.sex === 'f',
-                  })}
-                >
-                  {person.name}
-                </td>
-                <td>{person.sex}</td>
-                <td>{person.born}</td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    );
-  }
-}
+                {person.name}
+              </td>
+              <td>{person.sex}</td>
+              <td>{person.born}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};

From bbe214dcf26b48cb97c8bb72361b8cddbbf0d1f7 Mon Sep 17 00:00:00 2001
From: annatkachenko <tkachenko.anna835@gmail.com>
Date: Fri, 3 Feb 2023 14:53:13 +0200
Subject: [PATCH 4/4] Process isReversed field for the people array

---
 src/components/PeopleTable/PeopleTable.tsx | 70 +++++++++++++++++-----
 1 file changed, 56 insertions(+), 14 deletions(-)

diff --git a/src/components/PeopleTable/PeopleTable.tsx b/src/components/PeopleTable/PeopleTable.tsx
index 1c6a6d44..2e51ce3a 100644
--- a/src/components/PeopleTable/PeopleTable.tsx
+++ b/src/components/PeopleTable/PeopleTable.tsx
@@ -9,7 +9,11 @@ import { Person } from '../../types/Person';
 import { Button } from '../Button';
 import { SortField } from '../../types/SortField';
 
-function getReorderedPeople(people: Person[], sortBy: SortField) {
+function getReorderedPeople(
+  people: Person[],
+  sortBy: SortField,
+  isReversed: boolean,
+) {
   const peopleCopy = [...people];
 
   peopleCopy.sort((personA, personB) => {
@@ -26,6 +30,10 @@ function getReorderedPeople(people: Person[], sortBy: SortField) {
     }
   });
 
+  if (isReversed) {
+    peopleCopy.reverse();
+  }
+
   return peopleCopy;
 }
 
@@ -33,6 +41,7 @@ export const PeopleTable: React.FC = () => {
   const [people, setPeople] = useState<Person[]>([]);
   const [selectedPeople, setSelectedPeople] = useState<Person[]>([]);
   const [sortBy, setSortBy] = useState(SortField.None);
+  const [isReversed, setIsReversed] = useState(false);
 
   useEffect(() => {
     setPeople(peopleFromServer);
@@ -57,7 +66,18 @@ export const PeopleTable: React.FC = () => {
     );
   };
 
-  const visiblePeople = getReorderedPeople(people, sortBy);
+  const changeSortType = (newSortBy: SortField) => {
+    const isAlreadySorted = sortBy === newSortBy;
+
+    if (isAlreadySorted) {
+      setIsReversed((currentIsReversed) => !currentIsReversed);
+    } else {
+      setIsReversed(false);
+      setSortBy(newSortBy);
+    }
+  };
+
+  const visiblePeople = getReorderedPeople(people, sortBy, isReversed);
 
   if (visiblePeople.length === 0) {
     return (
@@ -87,22 +107,44 @@ export const PeopleTable: React.FC = () => {
       <thead>
         <tr>
           <th>-</th>
-          <th
-            onClick={() => {
-              setSortBy(SortField.Name);
-            }}
-          >
-            name
+          <th>
+            <span>name</span>
+            <a
+              href="#sort"
+              className="icon"
+              onClick={() => {
+                changeSortType(SortField.Name);
+              }}
+            >
+              <i
+                className={cn('fas', {
+                  'fa-sort': sortBy !== SortField.Name,
+                  'fa-sort-up': sortBy === SortField.Name && !isReversed,
+                  'fa-sort-down': sortBy === SortField.Name && isReversed,
+                })}
+              />
+            </a>
           </th>
 
           <th>sex</th>
 
-          <th
-            onClick={() => {
-              setSortBy(SortField.Born);
-            }}
-          >
-            born
+          <th>
+            <span>born</span>
+            <a
+              href="#sort"
+              className="icon"
+              onClick={() => {
+                changeSortType(SortField.Born);
+              }}
+            >
+              <i
+                className={cn('fas', {
+                  'fa-sort': sortBy !== SortField.Born,
+                  'fa-sort-up': sortBy === SortField.Born && !isReversed,
+                  'fa-sort-down': sortBy === SortField.Born && isReversed,
+                })}
+              />
+            </a>
           </th>
         </tr>
       </thead>