text: import React, { useState, useEffect } from "react";
  import ListGroup from "react-bootstrap/ListGroup";
  import { useAppContext } from "../../libs/contextLib";
  import { onError } from "../../libs/errorLib";
  import { API } from "aws-amplify";
  import { BsPencilSquare } from "react-icons/bs";
  import { LinkContainer } from "react-router-bootstrap";
  import "./Home.css";
  
  export default function Home() {
    const [services, setServices] = useState([]);
    const { isAuthenticated } = useAppContext();
    const [isLoading, setIsLoading] = useState(true);
  
    useEffect(() => {
      async function onLoad() {
        if (!isAuthenticated) {
          return;
        }
    
        try {
          const services = await loadServices();
          setServices(services);
        } catch (e) {
          onError(e);
        }
    
        setIsLoading(false);
      }
    
      onLoad();
    }, [isAuthenticated]);
  
    function loadServices() {
      return API.get("service", "/service");
    }
  
    function renderServicesList(services) {
      return (
        <>
          <LinkContainer to="/services/new">
            <ListGroup.Item action className="py-3 text-nowrap text-truncate">
              <BsPencilSquare size={17} />
              <span className="ml-2 font-weight-bold">Create a new service</span>
            </ListGroup.Item>
          </LinkContainer>
          {services.map(({ service_id, content, createdAt }) => (
            <LinkContainer key={service_id} to={`/services/${service_id}`}>
              <ListGroup.Item action>
                <span className="font-weight-bold">
                  {content.trim().split("\n")[0]}
                </span>
                <br />
                <span className="text-muted">
                  Created: {new Date(createdAt).toLocaleString()}
                </span>
              </ListGroup.Item>
            </LinkContainer>
          ))}
        </>
      );
    }
  
    function renderLander() {
      return (
        <div className="lander">
          <h1>Scratch</h1>
          <p className="text-muted">A simple note taking app</p>
        </div>
      );
    }
  
    function renderServices() {
      return (
        <div className="services">
          <h2 className="pb-3 mt-4 mb-3 border-bottom">Your Services</h2>
          <ListGroup>{!isLoading && renderServicesList(services)}</ListGroup>
        </div>
      );
    }
  
    return (
      <div className="Home">
        {isAuthenticated ? renderServices() : renderLander()}
      </div>
    );
  }