proj_emb_1.js

import {
  navbarTemplate,
  earthPageTemplate,
  marsPageTemplate,
  beyondPageTemplate,
  aboutPageTemplate,
  footerTemplate,
} from "./templates.js";

import {
  apodDateToString,
  getApodImage,
  getEpicInfo,
  getRoverInfo,
} from "./utils.js";

/**
 * @description Returns the NavBar component
 * @return {string} html - The HTML for the NavBar
 */
const NavBar = (state) => {
  return navbarTemplate(state.menu.active);
};

/**
 * @description Returns the PageContent component
 * @param {object} state - The application's state
 * @return {string} html - The HTML for the PageContent
 */
const PageContent = async (state) => {
  const active = state.menu.active;
  return `
    ${active === "earth" ? await EarthPage(state) : ""}
    ${active === "mars" ? await MarsPage(state) : ""}
    ${active === "beyond" ? await BeyondPage(state) : ""}
    ${active === "about" ? AboutPage() : ""}
  `;
};

/**
 * @description Returns the EarthPage component
 * @param {object} state - The application's state
 * @return {string} html - The HTML for the EarthPage
 */
const EarthPage = (state) => {
  return getEpicInfo(state).then((epic) => {
    const date = epic.date;
    const slides = epic.images
      .map((image) => {
        return '<div><img src="' + image.url + '" width="90%" alt=""/></div>';
      })
      .reduce((acc, slide) => acc + slide, "");
    return earthPageTemplate(date, slides);
  });
};

/**
 * @description Returns the MarsPage component
 * @param {object} state - The application's state
 * @return {string} html - The HTML for the MarsPage
 */
const MarsPage = (state) => {
  return getRoverInfo(state).then((roverInfo) => {
    const name = roverInfo.selectedRoverInfo.name;
    const launchDate = roverInfo.selectedRoverInfo.launchDate;
    const landingDate = roverInfo.selectedRoverInfo.landingDate;
    const completedDate = roverInfo.selectedRoverInfo.completedDate;
    const status = roverInfo.selectedRoverInfo.status;
    const totalPhotos = roverInfo.selectedRoverInfo.totalPhotos;
    const date = roverInfo.photos.date;
    const slides = roverInfo.photos.images
      .map((image) => {
        return '<div><img src="' + image + '" width="90%" alt="" /></div>';
      })
      .reduce((acc, slide) => acc + slide, "");
    return marsPageTemplate(
      name,
      date,
      launchDate,
      landingDate,
      completedDate,
      status,
      totalPhotos,
      slides
    );
  });
};

/**
 * @description Returns the BeyondPage component
 * @param {object} state - The application's state
 * @return {string} html - The HTML for the BeyondPage
 */
const BeyondPage = (state) => {
  const date = state.apod.reqDate || apodDateToString(new Date());
  return getApodImage(date, state).then((image) => {
    return beyondPageTemplate(image);
  });
};

/**
 * @description Returns the AboutPage component
 * @return {string} html - The HTML for the AboutPage
 */
const AboutPage = () => {
  return aboutPageTemplate();
};

/**
 * @description Returns the Footer component
 * @return {string} html - The HTML for the Footer
 */
const Footer = () => {
  return footerTemplate();
};

export { NavBar, PageContent, Footer };