ListNotes.tsx

import React, { useState, useEffect } from "react";
import { Link, RouteComponentProps } from "@reach/router";
import { GATEWAY_URL } from "../config.json";
import { Card, Alert, CardGroup, Button } from "react-bootstrap";
import { Loading, PageContainer } from "../components";

interface Note {
  noteId: string;
  createdAt: string;
  content: string;
  attachment: boolean;
}

const ListNotes = (props: RouteComponentProps) => {
  const [isLoading, setIsLoading] = useState(true);
  const [errorMsg, setErrorMsg] = useState("");
  const [notes, setNotes] = useState([]);

  useEffect(() => {
    const fetchNotes = async () => {
      setIsLoading(true);
      const fetchURL = `${GATEWAY_URL}notes`;

      try {
        const response = await fetch(fetchURL);
        const data = await response.json();
        setNotes(data);
      } catch (error) {
        setErrorMsg(`${error.toString()} - ${fetchURL}`);
      } finally {
        setIsLoading(false);
      }
    };
    fetchNotes();
  }, []);

  const renderNotes = (notes: Note[]) =>
    notes.map((note) => (
      <Card>
        <Card.Body>
          <Card.Title>
            {note.attachment && (
              <span role="img" aria-label="attachment" className="mr-1">
                📎
              </span>
            )}
            {note.content}
          </Card.Title>
          <Card.Subtitle className="text-muted">
            Created: {new Date(parseInt(note.createdAt)).toLocaleString()}
          </Card.Subtitle>
          <Card.Link key={note.noteId} href={`/notes/${note.noteId}`}>
            edit
          </Card.Link>
        </Card.Body>
      </Card>
    ));

  const createNewNote = () => (
    <Link key="new" to="note/new">
      <div className="d-grid">
        <Button variant="primary">Create New Note</Button>
      </div>
    </Link>
  );

  return (
    <PageContainer header={<div>Your Notes</div>}>
      {errorMsg && <Alert variant="danger">{errorMsg}</Alert>}
      {isLoading ? (
        <Loading />
      ) : (
        <div>
          <CardGroup>{renderNotes(notes)}</CardGroup>
          {createNewNote()}
        </div>
      )}
    </PageContainer>
  );
};

export default ListNotes;