最新技術を調べる

// src/cloudstate/history.ts

import { cloudstate } from 'freestyle-sh';

@cloudstate
class History {
  static id = "history";
  entries: Array<{ number: string, fact: string }> = [];

  addEntry(entry: { number: string, fact: string }) {
    this.entries.push(entry);
console.log(entry);
  }

  getEntries() {
    return this.entries;
  }
}

export const HistoryCS = History;

import React, { useState } from 'react';
import {
  StyleSheet,
  TextInput,
  View,
  Text,
  Button,
} from "react-native";
import axios from 'axios';
import { useCloud } from "freestyle-sh";
import { HistoryCS } from "@/cloudstate/history";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";

export default function HomeScreen() {
  const history = useCloud<typeof HistoryCS>("history");
  const client = useQueryClient();
  const [date, setDate] = useState('');
  const [response, setResponse] = useState('');

  const fetchFortune = async () => {
    try {
      const apiRequest = {
        api_key: "MIIBO_API_KEY",
        agent_id: "MIIBO_AGENT_ID",
        utterance: date,
        uid: "MIIBO_UID"
      };
      const response = await axios.post('https://api-mebo.dev/api', apiRequest, {
        headers: { 'Content-Type': 'application/json' }
      });
      const fortune = response.data.bestResponse.utterance;
      setResponse(fortune);
      await history.addEntry({ date, response: fortune });
      client.invalidateQueries({
        queryKey: [history.getEntries],
        exact: true,
      });
    } catch (error) {
      console.error('Error fetching data from miibo API:', error);
      setResponse('Error fetching data.');
    }
  };

  const { data: historyEntries } = useQuery({
    queryKey: [history.getEntries],
    queryFn: () => history.getEntries(),
  });

  return (
    <View style={styles.container}>
      <Text style={styles.title}>誕生日占い</Text>

      <TextInput
        style={styles.input}
        placeholder="Enter a date (e.g., 3月3日)"
        value={date}
        onChangeText={setDate}
      />
      <Button
        onPress={fetchFortune}
        title="Get Fortune"
      />
      {response ? <Text style={styles.response}>{response}</Text> : null}

      <View style={styles.historyContainer}>
        <Text style={styles.historyTitle}>History</Text>
        {historyEntries && historyEntries.map((item, index) => (
          <View key={index} style={styles.historyItem}>
            <Text>{item.date}</Text>
            <Text>{item.response}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  title: {
    fontSize: 32,  // H1のサイズに相当
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 12,
    paddingHorizontal: 8,
  },
  response: {
    marginTop: 12,
    fontSize: 16,
  },
  historyContainer: {
    marginTop: 16,
  },
  historyTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  historyItem: {
    marginBottom: 8,
  },
});