feat: add nasa apod background

.github/workflows/push.yml

@@ -33,6 +33,7 @@ jobs:
         env:
           GIPHY_API_KEY: ${{ secrets.GIPHY_API_KEY }}
           UNSPLASH_API_KEY: ${{ secrets.UNSPLASH_API_KEY }}
+          NASA_API_KEY: ${{ secrets.NASA_API_KEY }}
       - uses: actions/upload-artifact@v3
         with:
           name: tabliss-${{ matrix.build_target }}

src/global.d.ts

@@ -5,6 +5,7 @@ declare global {
   const DEV: boolean;
   const GIPHY_API_KEY: string;
   const UNSPLASH_API_KEY: string;
+  const NASA_API_KEY: string;
   const VERSION: string;
 
   const browser: Browser;

src/plugins/backgrounds/apod/Apod.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import Backdrop from "../../../views/shared/Backdrop";
+
+import { defaultData, Props } from "./types";
+import { getPicture } from "./api";
+import ApodTitle from "./ApodTitle";
+
+const Unsplash: React.FC<Props> = ({
+  cache,
+  data = defaultData,
+  loader,
+  setCache,
+}) => {
+  const [picture, setPicture] = React.useState(cache);
+  const mounted = React.useRef(false);
+  React.useEffect(() => {
+    getPicture(data, loader).then(setCache);
+    if (mounted.current || !picture) getPicture(data, loader).then(setPicture);
+    mounted.current = true;
+  }, [data.customDate, data.date]);
+
+  return (
+    <div className="Unsplash fullscreen">
+      <Backdrop
+        className="image fullscreen"
+        ready={true}
+        style={{
+          backgroundImage: `url(${
+            picture?.media_type === "image"
+              ? picture?.hdurl
+              : picture?.thumbnail_url
+          })`,
+        }}
+      />
+
+      {picture && data.showTitle && <ApodTitle title={picture.title} />}
+    </div>
+  );
+};
+
+export default Unsplash;

src/plugins/backgrounds/apod/ApodSettings.sass

@@ -0,0 +1,3 @@
+.ApodSettings
+    .date
+        margin-left: 4px;

src/plugins/backgrounds/apod/ApodSettings.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import "./ApodSettings.sass";
+import { DebounceInput } from "../../shared";
+import { ApodDate, defaultData, Props } from "./types";
+import { format } from "date-fns";
+
+const maxDate = format(new Date(), "yyyy-MM-dd");
+
+const UnsplashSettings: React.FC<Props> = ({ data = defaultData, setData }) => (
+  <div className="ApodSettings">
+    <label>
+      Date of the picture
+      <select
+        value={data.date}
+        onChange={(event) =>
+          setData({ ...data, date: event.target.value as ApodDate })
+        }
+      >
+        <option value="today">Today</option>
+        <option value="custom">Custom date</option>
+      </select>
+    </label>
+
+    {data.date === "custom" && (
+      <label>
+        Date
+        <DebounceInput
+          type="date"
+          value={data.customDate}
+          min="1995-06-16"
+          max={maxDate}
+          className="date"
+          onChange={(value) => setData({ ...data, customDate: value })}
+          wait={500}
+        />
+      </label>
+    )}
+
+    <label>
+      <input
+        type="checkbox"
+        checked={data.showTitle}
+        onChange={(event) => setData({ ...data, showTitle: !data.showTitle })}
+      />{" "}
+      Show title
+    </label>
+  </div>
+);
+
+export default UnsplashSettings;

src/plugins/backgrounds/apod/ApodTitle.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import giphyLogo from "./giphy-logo.png";
+
+type Props = {
+  title?: string;
+};
+
+const Credit: React.FC<Props> = ({ title }) => (
+  <div className="credit">
+    <span>{title}</span>
+  </div>
+);
+
+export default Credit;

src/plugins/backgrounds/apod/api.ts

@@ -0,0 +1,34 @@
+import { API } from "../../types";
+import { Image, Data } from "./types";
+import { format } from "date-fns";
+
+type Config = Data;
+
+const formatDateForApi = (date: string): string => {
+  return format(new Date(date), "yyyy-MM-dd");
+};
+
+export async function getPicture(
+  data: Config,
+  loader: API["loader"],
+): Promise<Image> {
+  console.log("in getPicture");
+
+  const url = "https://api.nasa.gov/planetary/apod";
+  const params = new URLSearchParams();
+
+  params.set("api_key", NASA_API_KEY);
+  params.set("thumbs", "true");
+
+  if (data.date === "custom" && data.customDate) {
+    params.set("date", formatDateForApi(data.customDate));
+  }
+
+  loader.push();
+  const res = await fetch(`${url}?${params}`);
+  const json = await res.json();
+
+  loader.pop();
+
+  return json;
+}

src/plugins/backgrounds/apod/index.ts

@@ -0,0 +1,14 @@
+import { Config } from "../../types";
+import Apod from "./Apod";
+import ApodSettings from "./ApodSettings";
+
+const config: Config = {
+  key: "background/apod",
+  name: "Astronomy Picture of the Day",
+  description: "NASA's sky pictures",
+  dashboardComponent: Apod,
+  settingsComponent: ApodSettings,
+  supportsBackdrop: true,
+};
+
+export default config;

src/plugins/backgrounds/apod/types.ts

@@ -0,0 +1,29 @@
+import { API } from "../../types";
+
+export type ApodDate = "today" | "custom";
+
+export interface Data {
+  date: ApodDate;
+  customDate?: string;
+  showTitle: boolean;
+}
+
+export interface Image {
+  url: string;
+  hdurl: string;
+
+  title: string;
+  date: Date;
+  media_type: string;
+  explanation: string;
+  thumbnail_url: string;
+}
+
+type Cache = Image;
+
+export type Props = API<Data, Cache>;
+
+export const defaultData: Data = {
+  date: "today",
+  showTitle: true,
+};

src/plugins/backgrounds/index.ts

@@ -3,7 +3,15 @@ import giphy from "./giphy";
 import gradient from "./gradient";
 import image from "./image";
 import unsplash from "./unsplash";
+import apod from "./apod";
 
-export const backgroundConfigs = [colour, giphy, gradient, image, unsplash];
+export const backgroundConfigs = [
+  colour,
+  giphy,
+  gradient,
+  image,
+  unsplash,
+  apod,
+];
 
 backgroundConfigs.sort((a, b) => a.name.localeCompare(b.name));

webpack.config.js

@@ -79,6 +79,7 @@ const config = {
       GIPHY_API_KEY: JSON.stringify(process.env.GIPHY_API_KEY),
       VERSION: JSON.stringify(version),
       UNSPLASH_API_KEY: JSON.stringify(process.env.UNSPLASH_API_KEY),
+      NASA_API_KEY: JSON.stringify(process.env.NASA_API_KEY),
     }),
   ],
   devtool: isWeb || !isProduction ? "source-map" : false,