朝活143日目　風情報を出力

GW前半戦終了。
特に予定もなく家でだらだらー
新しいゲームを買おうか葛藤しています。

最近食べ過ぎのせいか体重増加が著しい。
今日から食べ物にはマジで気をつけていこうと思います💦

さてさて、風情報出力しますかねー
あと潮位も出したいなー

コパイロットに、https://github.com/Turu0512/my-surf-point/blob/main/src/api/fetchWaveData.tsを参考に
「風情報をとってくるプログラムを書いて。APIはこちらです。https://api.open-meteo.com/v1/jma?latitude=31.4033&longitude=131.3417&hourly=wind_speed_10m,wind_direction_10m&wind_speed_unit=ms&timezone=Asia%2FTokyo」
で依頼してみた。

import { WindData } from '../types/wind'; // Assuming you have a WindData type
import { ErrorCode } from '../types/error';

export const fetchWindData = async (point: any): Promise<WindData | ErrorCode> => {
  const coords = process.env[`REACT_APP_${point.toUpperCase()}_COORDS`] ?? '000,000';

  const [latitude, longitude] = coords.split(',');

  const baseUrl = "https://api.open-meteo.com/v1/jma";

  const params = {
    latitude: latitude,
    longitude: longitude,
    hourly: ["wind_speed_10m", "wind_direction_10m"],
    wind_speed_unit: "ms",
    timezone: "Asia%2FTokyo"
  };

  const point_api_url = `${baseUrl}?latitude=${params.latitude}&longitude=${params.longitude}&hourly=${params.hourly.join(',')}&wind_speed_unit=${params.wind_speed_unit}&timezone=${params.timezone}`;

  if (longitude === '000') { return { error: true, code: 'INVALID_LONGITUDE', message: 'Invalid longitude' }; }
  try {
    const response = await fetch(`${point_api_url}`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const responseData = await response.json();
    const windData: WindData = responseData.hourly;
    return windData;
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
    throw error;
  }
};

windData.tsで型定義して、Oders.tsxのuseEffectに追加。
ちょっと名前とか色々変える必要あるけど一旦、logを確認すると。。。。。。。

  useEffect(() => {
    const getOrders = async () => {
      try {
        console.log(point);
        const ordersData = await fetchWaveData(point);
        const windsData = await fetchWindData(point);
        setWaveData(ordersData);
        setWindData(windsData);
        console.log(ordersData);
        console.log(windData);
      } catch (error) {
        console.error(error);
      }
    };

    getOrders();
  }, [point]);

undefined！！！
さてさて、どこがおかしんだぃ？

windData⇨windsData
タイポでした。

名前被らないように適当に「s」を追記したからでした。
さてー
名前どうするかなー

const waveDataList = await fetchWaveData(point);
const windsDataList = await fetchWindData(point);

setWaveData(waveDataList);
setWindData(windsDataList);

情報を削った

<TableRow key={time}>
  <TableCell>{time}</TableCell>
  <TableCell>{waveData.swell_wave_height[index]}</TableCell>
  <TableCell>{getDirectionFromAngle(waveData.swell_wave_direction[index])}°</TableCell>
  {windData && 'time' in windData && windData.time[index] === time && (
    <>
     <TableCell>{windData.wind_speed_10m[index]}</TableCell>
     <TableCell>{getDirectionFromAngle(windData.wind_direction_10m[index])}°</TableCell>
    </>
   )}
 </TableRow>

無事出力できましたー！

次は潮位を出力。

その前にまず潮位が取れるAPIを探さねば