Seleccion de finca. TODO: inicializacion del select con request a la api

app/src/api/index.ts

@@ -1 +1,2 @@
 export * from "./auth";
+export * from "./tables";

app/src/api/shared.ts

@@ -0,0 +1 @@
+export default {};

app/src/api/tables.ts

@@ -1,3 +1,4 @@
+import { apiURL } from "../config";
 import { mockPayloads, mockRequest } from "./mocks";
 // Quizas llamarlos table no hacia falta,
 // pero es preferible antes de que a alguien se le olvide usar un alias cuando importe estas funciones.
@@ -13,3 +14,16 @@ export const seasonsSummariesTable = (
 ) => {
   return mockRequest(true, mockPayloads.seasonsSummariesTable, null);
 };
+
+export const sectors = (token: string) => {
+  const headers = new Headers();
+  headers.append("Access-Control-Allow-Origin", "*");
+  headers.append("Authorization", `Bearer ${token}`);
+
+  const config: RequestInit = {
+    method: "GET",
+    mode: "cors",
+    headers,
+  };
+  return fetch(`${apiURL}fincas`, config);
+};

app/src/components/UI/dashboard/cockpit/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, ChangeEvent, FC } from "react";
+import React, { useContext, useState, useEffect, ChangeEvent, FC } from "react";
 import Select from "../../forms/select";
 import CalendarInput from "../../forms/calendarInput";
 import {
@@ -6,19 +6,46 @@ import {
   StateContext,
 } from "../../../../context/dashboard/Provider";
 import * as actions from "../../../../context/dashboard/actions";
+import { sectors } from "../../../../api";
+import { UserStateContext } from "../../../../context/auth/AuthProvider";
 
 const fincaList: string[] | number[] = ["a", "b", "c", "d"];
-const campaignList: string[] | number[] = ["2018", "2019", "2020", "2021"];
+const campaignList: any[] = ["2018", "2019", "2020", "2021"].map((c) => ({
+  value: c,
+  title: c,
+}));
 
 const Cockpit: FC = () => {
   const dashboardState = useContext(StateContext);
   const dashboardDispatch = useContext(DispatchContext);
+  const userState = useContext(UserStateContext);
+  const [sectorList, setSectorList] = useState<any[]>([]);
+
+  // Inicializacion del selector de fincas
+  // useEffect(() => {
+  //   const token = userState.userToken;
+  //   if (!token) return;
+  //   sectors(token)
+  //     .then((res: Response) => res.json())
+  //     .then((body: any[]) => {
+  //       debugger;
+  //       const options = body.map((s: any) => ({
+  //         title: s.title,
+  //         value: s.station_code,
+  //       }));
+
+  //       if (options.length) {
+  //         dashboardDispatch(actions.setSector(options[0].value));
+  //       }
+  //       setSectorList(options);
+  //     });
+  // }, []);
 
   return (
     <section className="row p-lg-4 p-md-3 p-2">
       <div className="col-12 col-lg-4 mb-2 col-xl-3 mb-xl-0">
         <Select
-          list={fincaList}
+          list={sectorList}
           onChange={(e: ChangeEvent<HTMLInputElement>) =>
             dashboardDispatch(actions.setSector(e.target.value))
           }
@@ -56,11 +83,11 @@ const Cockpit: FC = () => {
         />
       </div>
 
-      <div className="col-auto">
-        <button type="button" className="btn btn-primary">
-          Aplicar
-        </button>
-      </div>
+      {/* <div className="col-auto"> */}
+      {/*   <button type="button" className="btn btn-primary"> */}
+      {/*     Aplicar */}
+      {/*   </button> */}
+      {/* </div> */}
     </section>
   );
 };

app/src/components/UI/forms/select.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 
 interface selectProps {
-  list?: string[] | number[];
+  list: any;
   onChange: Function;
   placeholder: string;
   name: string;
@@ -11,12 +11,16 @@ interface selectProps {
 // En las props hago un "rest", que me da el resto del objeto que estoy desestructurando
 const Select: FC<selectProps> = ({ list, className, ...props }) => {
   return (
-    <select {...(props as any)}  className={`form-select ${className}`}>
-      {props.placeholder ? <option value="">{props.placeholder}</option> : null}
+    <select {...(props as any)} className={`form-select ${className}`}>
+      {props.placeholder && !list.length ? (
+        <option key="placeholder" value="">
+          {props.placeholder}
+        </option>
+      ) : null}
 
-      {list?.map((item) => (
-        <option value={item} key={item}>
-          {item}
+      {list?.map((item: any) => (
+        <option value={item.value} key={item.value}>
+          {item.title}
         </option>
       ))}
     </select>