Inicializacion de input fincas

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

@@ -1,4 +1,11 @@
-import React, { useContext, useState, useEffect, ChangeEvent, FC } from "react";
+import React, {
+  useContext,
+  useState,
+  useEffect,
+  ChangeEvent,
+  FC,
+  useMemo,
+} from "react";
 import Select from "../../forms/select";
 import CalendarInput from "../../forms/calendarInput";
 import {
@@ -8,8 +15,8 @@ import {
 import * as actions from "../../../../context/dashboard/actions";
 import { sectors } from "../../../../api";
 import { UserStateContext } from "../../../../context/auth/AuthProvider";
+import { Station } from "../../../../types";
 
-const fincaList: string[] | number[] = ["a", "b", "c", "d"];
 const campaignList: any[] = ["2018", "2019", "2020", "2021"].map((c) => ({
   value: c,
   title: c,
@@ -19,33 +26,34 @@ const Cockpit: FC = () => {
   const dashboardState = useContext(StateContext);
   const dashboardDispatch = useContext(DispatchContext);
   const userState = useContext(UserStateContext);
-  const [sectorList, setSectorList] = useState<any[]>([]);
+  const [sectorList, setSectorList] = useState<Station[]>([]);
 
   // 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,
-  //       }));
+  useEffect(() => {
+    const token = userState.userToken;
+    if (!token) return;
+    sectors(token).then((list) => {
+      setSectorList(list);
+      if (list.length > 0) {
+        dashboardDispatch(actions.setSector(list[0].station_code));
+      }
+    });
+  }, []);
 
-  //       if (options.length) {
-  //         dashboardDispatch(actions.setSector(options[0].value));
-  //       }
-  //       setSectorList(options);
-  //     });
-  // }, []);
+  const sectorChoices = useMemo(
+    () =>
+      sectorList.map(({ title, station_code }) => ({
+        title,
+        value: station_code,
+      })),
+    [sectorList]
+  );
 
   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={sectorList}
+          list={sectorChoices}
           onChange={(e: ChangeEvent<HTMLInputElement>) =>
             dashboardDispatch(actions.setSector(e.target.value))
           }
@@ -86,12 +94,6 @@ const Cockpit: FC = () => {
           placeholder="Año historicos"
         />
       </div>
-
-      {/* <div className="col-auto"> */}
-      {/*   <button type="button" className="btn btn-primary"> */}
-      {/*     Aplicar */}
-      {/*   </button> */}
-      {/* </div> */}
     </section>
   );
 };