Modificacion desde la rama JBrother

arturito/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "craco start",
+    "start": "craco --openssl-legacy-provider start",
     "build": "craco build",
     "test": "craco test",
     "prettier": "prettier --write .",

arturito/prueba/index.js

@@ -0,0 +1 @@
+hola mundo cruel

arturito/pruebaJbrother/moyo.txt

@@ -0,0 +1 @@
+Desde la rama jbrother

arturito/src/components/HomeSection/index.tsx

@@ -9,7 +9,7 @@ const Button = ({ text, href }: { text: string; href: string }) => (
 const HomeSection = () => (
   <div className="p-3 space-y-3">
     <p className="text-lg">¡Elegí una sección!</p>
-    <Button text="Documentación" href="https://www.swapi.it/documentation" />
+    <Button text="Documentación" href="https://swapi.dev/documentation" />
   </div>
 );
 

arturito/src/components/PlanetsSection/index.tsx

@@ -40,10 +40,10 @@ const Planets = () => {
   if (!data) {
     return <div className="px-2">Loading...</div>;
   }
-
+  
   return (
     <div>
-      <Table columns={columns} data={data.results.slice(0, 3)} /* :D */ />
+      <Table columns={columns} data={data.results} /* :D */ />
     </div>
   );
 };

arturito/src/components/StarshipsSection/index.tsx

@@ -0,0 +1,53 @@
+import useSWR from 'swr';
+
+import { swGet } from '../../utils/fetcher';
+import Table from '../Table';
+
+const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: 'Model',
+      dataIndex: 'model',
+      key: 'model',
+    },
+    {
+        title: 'Manufacturer',
+        dataIndex: 'manufacturer',
+        key: 'manufacturer',
+      },
+      {
+        title: 'Passengers',
+        dataIndex: 'passengers',
+        key: 'passengers',
+        render: (passengers: string) =>
+        parseInt(passengers)
+          ? parseInt(passengers).toLocaleString('es-AR')
+          : passengers,
+      },
+    {
+      title: 'Films',
+      dataIndex: 'films',
+      key: 'films',
+      render: (films: string[]) => films.length,
+    },
+  ];
+
+
+const Starships = (props) => {
+    const { data, error } = useSWR('/starships', swGet);
+    if (error) {
+        return <div className="px-2">Oh oh!</div>;
+      }
+      if (!data) {
+        return <div className="px-2">Loading...</div>;
+      }
+    return (
+        <Table columns={columns} data={data.results} /* :D */ />
+    )
+}
+
+export default Starships;

arturito/src/containers/Main/index.tsx

@@ -4,6 +4,7 @@ import { paths } from '../paths';
 import SectionSelector from '../../components/SectionSelector';
 import Home from '../../components/HomeSection';
 import Planets from '../../components/PlanetsSection';
+import Starships from '../../components/StarshipsSection';
 
 const MainContainer = () => {
   const location = useLocation();
@@ -29,19 +30,7 @@ const MainContainer = () => {
         </Route>
 
         <Route path={paths.starships.href}>
-          <div className="p-3">
-            <p className="font-bold text-xl"># TODO</p>
-            <p>
-              Agregar tabla con las starships sacadas de la API. Mostrar para
-              cada starship: name, model, manufacturer, passengers, cantidad de
-              films. Codear en un componente aparte tal como {'<Planets>'}.
-            </p>
-            <p>
-              <a href="https://swapi.it/documentation#starships">
-                https://swapi.it/documentation#starships
-              </a>
-            </p>
-          </div>
+          <Starships />
         </Route>
 
         <Route path={paths.people.href}>

arturito/src/utils/fetcher.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 // Possible alternative: 'https://swapi.dev/api'
-const baseURL = 'https://www.swapi.it/api';
+const baseURL = 'https://swapi.dev/api';
 
 export const swGet = (url: string) =>
   axios.get(url, { baseURL }).then((res) => res.data);