feat: add missing fleet and ship data, make fleet table scalable (#9)

- Add missing fleet and ship data - Make fleet table scalable
OdysseusLarp · Feb 25, 2024 · bb5adb4 · bb5adb4
1 parent 7f2a2d2
commit bb5adb4
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 17 deletions.
diff --git a/src/components/Fleet.js b/src/components/Fleet.js
@@ -17,7 +17,7 @@ const getFleet = async () => {
 export default function Fleet() {
   const [fleet, setFleet] = React.useState([]);
   const [page, setPage] = React.useState(1);
-  const [sizePerPage, setSizePerPage] = React.useState(10);
+  const [sizePerPage, setSizePerPage] = React.useState(15);
 
   React.useEffect(() => {
     getFleet().then(data => setFleet(data));
@@ -32,21 +32,27 @@ export default function Fleet() {
       text: 'Row',
       formatter: getRowIndex,
       headerStyle: () => {
-        return { width: '50px', textAlign: 'center' };
+        return { width: '2%', textAlign: 'center' };
       },
       align: 'center'
     }, {
       dataField: 'name',
       text: 'Name',
       sort: true,
       filter: textFilter(),
+      headerStyle: () => {
+        return { width: '10%', textAlign: 'left' };
+      },
       formatter: (cell, row) => {
         return <Link to={`/fleet/${row.id}`}>{cell}</Link>
       }
     }, {
       dataField: 'id',
       text: 'ID',
       sort: true,
+      headerStyle: () => {
+        return { width: '10%', textAlign: 'left' };
+      },
       filter: textFilter()
     }, {
       dataField: 'description',
@@ -67,42 +73,40 @@ export default function Fleet() {
       dataField: 'type',
       text: 'Type',
       sort: true,
+      headerStyle: () => {
+        return { width: '10%', textAlign: 'left' };
+      },
       filter: textFilter()
     }, {
       dataField: 'position.name',
       text: 'Position',
       sort: true,
+      headerStyle: () => {
+        return { width: '10%', textAlign: 'left' };
+      },
       filter: textFilter()
     }, {
       dataField: 'fighter_count',
       text: 'Fighter Count',
       sort: true,
       headerStyle: () => {
-        return { width: '100px', textAlign: 'center' };
+        return { width: '5%', textAlign: 'center' };
       },
       align: 'center'
     }, {
       dataField: 'transporter_count',
       text: 'Transporter Count',
       sort: true,
       headerStyle: () => {
-        return { width: '100px', textAlign: 'center' };
+        return { width: '5%', textAlign: 'center' };
       },
       align: 'center'
     }, {
       dataField: 'person_count',
       text: 'Person Count',
       sort: true,
       headerStyle: () => {
-        return { width: '100px', textAlign: 'center' };
-      },
-      align: 'center'
-    }, {
-      dataField: 'is_visible',
-      text: 'Is Visible',
-      sort: true,
-      headerStyle: () => {
-        return { width: '100px', textAlign: 'center' };
+        return { width: '5%', textAlign: 'center' };
       },
       align: 'center'
   }];

diff --git a/src/components/Ship.css b/src/components/Ship.css
@@ -24,3 +24,7 @@ h1.ship {
 .ship .data-found {
     color: #f26bf7;
 }
+
+.ship span {
+    white-space: pre-line;
+  }
diff --git a/src/components/Ship.js b/src/components/Ship.js
@@ -19,7 +19,11 @@ const getArtifacts = async (id) => {
 }
 
 const getCaptain = async (id) => {
-  const response = await fetch(apiUrl(`/person?show_hidden=true&ship_id=${id}&title=Star%20Captain`));
+  let title = encodeURI('Star Captain')
+  if (id === 'aurora') {
+    title = encodeURI('Grand Admiral of the EOC starfleet')
+  }
+  const response = await fetch(apiUrl(`/person?show_hidden=true&ship_id=${id}&title=${title}`));
   let captain = await response.json();
   captain = captain.persons;
   // On Odysseus there are two Star Captains. We want Zeya Cook id 20112.
@@ -29,10 +33,17 @@ const getCaptain = async (id) => {
   return captain[0];
 }
 
+const getPassangers = async (id) => {
+  const response = await fetch(apiUrl(`/person?show_hidden=true&is_character=false&ship_id=${id}`));
+  const passangers = await response.json();
+  return passangers;
+}
+
 export default function Ship(props) {
   const [ship, setShip] = React.useState(null);
   const [captain, setCaptain] = React.useState(null);
   const [artifacts, setArtifacts] = React.useState(null);
+  const [passangers, setPassangers] = React.useState(null);
   const params = useParams();
 
   React.useEffect(() => {
@@ -50,6 +61,11 @@ export default function Ship(props) {
     getCaptain(params.id).then((s) => setCaptain(s));
   }, [params.id, setCaptain]);
 
+  React.useEffect(() => {
+    if (!params.id) return;
+    getPassangers(params.id).then((s) => setPassangers(s));
+  }, [params.id, setPassangers]);
+
   React.useEffect(() => {
     props.changeTab('Fleet');
   }, [props]);
@@ -58,6 +74,7 @@ export default function Ship(props) {
     if (!ship) return null;
     if (!artifacts) return null;
     if (!captain) return null;
+    if (!passangers) return null;
     return (
       <div className='ship'>
         <Container fluid className='ship'>
@@ -88,7 +105,7 @@ export default function Ship(props) {
             <Col sm><span className='mini-header'>Description</span></Col>
           </Row>
           <Row>
-            <Col sm><span>{artifacts.filter(artifact => artifact.name === ship.class)[0].text}</span></Col>
+            <Col sm><span>{artifacts.filter(artifact => artifact.name === ship.class)[0].text.split('![]')[0].trim()}</span></Col>
           </Row>
           <Row>
             <Col sm>&nbsp;</Col>
@@ -142,9 +159,9 @@ export default function Ship(props) {
             <Col sm>&nbsp;</Col>
           </Row>
           <Row>
-            <Col sm><span className='mini-header new'>Persons on Ship (Characters / NPCs)</span></Col>
+            <Col sm><span className='mini-header'>NPCs on Ship ({passangers.persons.length})</span></Col>
           </Row>
-          {<ul><li><span className='data-found'>Link to Character name</span></li><li><span className='data-found'>Link to NPC 1 </span><span className='new'>(Knows: Character Name 1, Character Name 2)</span></li><li><span className='data-found'>Link to NPC 2 </span><span className='new'>(Knows: Character Name 1, Character Name 2)</span></li></ul>}
+          {<ul>{passangers.persons?.map(person => <li key={person.id}><Row><Col sm><span className='characters'><Link onClick={() => props.changeTab('Characters')} to={`/characters/${person.id}`}>{person.full_name}</Link></span></Col></Row></li>)}</ul>}
         </Container>
       </div>
     )