poem-of-the-day.tsx

// at apps/poetry-app/src/components/poem-of-the-day/poem-of-the-day.tsx
import { PoemResponse, poetryService } from '@nx-expo-poetry/services';
import React, { useEffect, useState } from 'react';
import {
  Card,
  Title,
  Paragraph,
  Subheading,
  ActivityIndicator,
} from 'react-native-paper';

/* eslint-disable-next-line */
export interface PoemOfTheDayProps {}

export function PoemOfTheDay(props: PoemOfTheDayProps) {
  const [poem, setPoem] = useState<PoemResponse>();

  const fetchPoem = () => {
    poetryService.getPoemOfTheDay().then((poemResponses: PoemResponse[]) => {
      setPoem(poemResponses[0]);
    });
  };

  useEffect(() => {
    fetchPoem();
  }, []);

  return poem ? (
      <Card>
        <Card.Cover source={{ uri: `https://picsum.photos/300/200` }} />
        <Card.Content>
          <Title>{poem?.title}</Title>
          <Subheading>By: {poem?.author}</Subheading>
          <Paragraph>{poem?.lines?.map((line) => line + '\n')}</Paragraph>
        </Card.Content>
      </Card>
    ) : (
      <ActivityIndicator animating={true} children={undefined} />
    );
}

export default PoemOfTheDay;