feat/People

arturito/package.json

@@ -29,7 +29,7 @@
     ]
   },
   "dependencies": {
-    "@craco/craco": "^6.2.0",
+    "@craco/craco": "^5.9.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -42,8 +42,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "swr": "^0.5.6",
+    "react-scripts": "^5.0.1",
+    "swr": "^0.5.7",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },

arturito/src/App.tsx

@@ -1,10 +1,10 @@
 import Header from './components/Header';
 import MainContainer from './containers/Main';
 
+
 const App = () => (
   <div className="h-full w-full bg-gray-800 text-white">
     <Header />
-
     <MainContainer />
   </div>
 );

arturito/src/components/HomeSection/index.tsx

@@ -9,8 +9,9 @@ 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/api" />
   </div>
 );
 
 export default HomeSection;
+//documentation

arturito/src/components/PeopleSelection/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: 'Birth Year',
+    dataIndex: 'birth_year',
+    key: 'birth_year',
+  },
+  {
+    title: 'Height (meters)',
+    dataIndex: 'height',
+    key: 'height',
+    render: (height) => (height ? `${parseInt(height) / 100} m` : 'N/A'),
+  },
+  {
+    title: 'Films',
+    dataIndex: 'films',
+    key: 'films_count',
+    render: (films) => (films ? films.length : 0),
+  },
+];
+
+const People = () => {
+  const { data, error } = useSWR('/people', swGet);
+
+  if (error) {
+    return <div className="px-2">Error</div>;
+  }
+  if (!data) {
+    return <div className="px-2">Wait...</div>;
+  }
+
+  return (
+    <div>
+      <Table columns={columns} data={data.results} />
+    </div>
+  );
+};
+
+export default People;

arturito/src/components/PlanetsSection/index.tsx

@@ -9,7 +9,7 @@ const columns = [
     dataIndex: 'name',
     key: 'name',
   },
-  {
+  { 
     title: 'Climate',
     dataIndex: 'climate',
     key: 'climate',
@@ -43,7 +43,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/SectionSelector/index.tsx

@@ -20,7 +20,7 @@ const SectionButton = ({ path }: { path: Path }) => {
 const SectionSelector = () => (
   <div className="p-2 space-x-4">
     {Object.keys(paths).map((path) => (
-      <SectionButton path={paths[path]} />
+      <SectionButton key={path} path={paths[path]} />
     ))}
   </div>
 );

arturito/src/components/StarshipsSelection/starshipsSelection.tsx

@@ -0,0 +1,54 @@
+import useSWR from 'swr';
+import { swGet } from '../../utils/fetcher';
+import Table from '../Table';
+
+
+const columns = [
+    {
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'model',
+      },
+      {
+        title: 'Model',
+        dataIndex: 'model',
+        key: 'model',
+      },
+      {
+        title: 'Manufacturer',
+        dataIndex: 'manufacturer',
+        key: 'manufacturer',
+      },
+      {
+        title: 'Passengers',
+        dataIndex: 'passengers',
+        key: 'passengers',
+      },
+      {
+        title: 'Films',
+        dataIndex: 'films',
+        key: 'films_count',
+        render: (films) => (films ? films.length : 0),
+      },
+];
+
+
+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,8 @@ import { paths } from '../paths';
 import SectionSelector from '../../components/SectionSelector';
 import Home from '../../components/HomeSection';
 import Planets from '../../components/PlanetsSection';
+import People from '../../components/PeopleSelection';
+import Starships from '../../components/StarshipsSelection/starshipsSelection';
 
 const MainContainer = () => {
   const location = useLocation();
@@ -29,35 +31,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'; //'https://www.swapi.it/api'
 
 export const swGet = (url: string) =>
   axios.get(url, { baseURL }).then((res) => res.data);