Fix(components/vehicles section index.tsx) add component and index

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/src/components/PeopleSection/index.tsx

@@ -0,0 +1,47 @@
+import useSWR from 'swr';
+
+import { swGet } from '../../utils/fetcher';
+import Table from '../Table';
+
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: 'Height',
+    dataIndex: 'height',
+    key: 'height',
+  },
+  {
+    title: 'Gender',
+    dataIndex: 'gender',
+    key: 'gender',
+  },
+  {
+    title: 'Films count',
+    dataIndex: 'films',
+    key: 'films',
+    render: (films: string[]) => films.length,
+  },
+];
+
+const People = () => {
+  const { data, error } = useSWR('/people', 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 People;

arturito/src/components/PlanetsSection/index.tsx

@@ -43,7 +43,7 @@ const Planets = () => {
 
   return (
     <div>
-      <Table columns={columns} data={data.results.slice(0, 3)} /* :D */ />
+      <Table columns={columns} data={data.results} />
     </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',
+  },
+  {
+    title: 'Film Count',
+    dataIndex: 'films',
+    key: 'film_count',
+    render: (films: string[]) => films.length,
+  },
+];
+
+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} />
+    </div>
+  );
+};
+
+export default Starships;

arturito/src/components/VehiclesSection/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',
+  },
+  {
+    title: 'Film Count',
+    dataIndex: 'films',
+    key: 'film_count',
+    render: (films: string[]) => films.length,
+  },
+];
+
+const Vehicles = () => {
+  const { data, error } = useSWR('/vehicles', 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} />
+    </div>
+  );
+};
+
+export default Vehicles;

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 Starships from '../../components/StarshipsSection';
+import People from '../../components/PeopleSection';
+import Vehicles from '../../components/VehiclesSection';
 
 const MainContainer = () => {
   const location = useLocation();
@@ -29,35 +32,15 @@ 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.vehicles.href}>
+          <Vehicles />
         </Route>
 
         <Route path={paths.home.href}>

arturito/src/containers/paths.ts

@@ -8,4 +8,5 @@ export const paths: Record<string, Path> = {
   planets: { name: 'Planets', href: '/planets' },
   starships: { name: 'Starships', href: '/starships' },
   people: { name: 'People', href: '/people' },
+  vehicles: { name: 'Vehicles', href: '/vehicles' },
 };

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);