Agrego People

arturito/.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+package-lock.json
+yarn.lock

arturito/src/components/PeopleSection/People.tsx

@@ -0,0 +1,49 @@
+import useSWR from 'swr';
+
+import { swGet } from '../../utils/fetcher';
+import Table from '../Table';
+
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: 'Gender',
+    dataIndex: 'gender',
+    key: 'gender',
+  },
+  {
+    title: 'Species',
+    dataIndex: 'species',
+    key: 'species',
+    render: (species: [string]) =>
+      [...species],
+  },
+  {
+    title: 'Home World',
+    dataIndex: 'homeworld',
+    key: 'homeworld',
+  },
+];
+
+const People = () => {
+  const { data, error } = useSWR('/people', swGet);
+
+  console.log(error)
+  if (error) {
+    return <div className="px-2">Oh oh!</div>;
+  }
+  if (!data) {
+    return <div className="px-2">Loading...</div>;
+  }
+
+  return (
+    <div>
+      <Table columns={columns} data={data.results} /* :D */ />
+    </div>
+  );
+};
+
+export default People;

arturito/src/components/PlanetsSection/index.tsx

@@ -34,6 +34,7 @@ const columns = [
 const Planets = () => {
   const { data, error } = useSWR('/planets', swGet);
 
+  console.log(error)
   if (error) {
     return <div className="px-2">Oh oh!</div>;
   }
@@ -43,7 +44,7 @@ const Planets = () => {
 
   return (
     <div>
-      <Table columns={columns} data={data.results.slice(0, 3)} /* :D */ />
+      <Table columns={columns} data={data.results} /* :D */ />
     </div>
   );
 };

arturito/src/components/Starships/index.tsx

@@ -0,0 +1,55 @@
+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: 'films',
+    dataIndex: 'films',
+    key: 'films',
+},
+{
+    title: 'Passengers',
+    dataIndex: 'passengers',
+    key: 'passengers',
+    render: (passengers: string) =>
+    parseInt(passengers)
+        ? parseInt(passengers).toLocaleString('es-AR')
+        : passengers,
+},
+];
+
+const Starships = () => {
+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 (
+    <div>
+      <Table columns={columns} data={data.results} /* :D */ />
+    </div>
+);
+};
+
+export default Starships;

arturito/src/containers/Main/index.tsx

@@ -4,6 +4,9 @@ import { paths } from '../paths';
 import SectionSelector from '../../components/SectionSelector';
 import Home from '../../components/HomeSection';
 import Planets from '../../components/PlanetsSection';
+import People from '../../components/PeopleSection/People'
+import Starships from '../../components/Starships';
+//Comentario de prueba 1
 
 const MainContainer = () => {
   const location = useLocation();
@@ -29,35 +32,11 @@ 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}>
-          <div className="p-3">
-            <p className="font-bold text-xl"># TODO</p>
-            <p>
-              Agregar tabla con los personajes sacados de la API. Mostrar para
-              cada persona: name, birth_year, height (en metros), cantidad de
-              films. Codear en un componente aparte tal como {'<Planets>'}.
-            </p>
-            <p>
-              <a href="https://swapi.it/documentation#people">
-                https://swapi.it/documentation#people
-              </a>
-            </p>
-          </div>
+          <People />
         </Route>
 
         <Route path={paths.home.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);
+  axios.get( url, {baseURL}).then((res) => res.data);