feat: link to an active kit on the home page, update home page text

src/pages/Home.module.css

@@ -0,0 +1,21 @@
+.activeKit {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+
+ padding-top: 1.75rem;
+ padding-bottom: 1.75rem;
+ border-top: 1px solid var(--border-color);
+ border-bottom: 1px solid var(--border-color);
+ margin-bottom: 1em;
+}
+
+.activeKitHeader {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+
+ h3 {
+ margin: 0;
+ }
+}

src/pages/Home.tsx

@@ -1,19 +1,75 @@
-import React from "react";
+import { useMemo } from "react";
 import { Container } from "semantic-ui-react";
+import { DateTime, Duration } from "luxon";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 import HeadTitle from "../Components/HeadTitle";
-import { useTranslation } from "react-i18next";
+import { rtkApi } from "~/services/astroplant";
+import { KitAvatar } from "~/Components/KitAvatar";
+import { Badge } from "~/Components/Badge";
+
+import style from "./Home.module.css";
 
 export default function Home() {
  const { t } = useTranslation();
 
+ // Find kits that were active in the past hour ...
+ const lastSeenSince = useMemo(() => {
+ const dateTime = DateTime.now().minus(
+ Duration.fromMillis(1000 * 60 * 60 * 1),
+ );
+ return dateTime.toISO();
+ }, []);
+ const { data } = rtkApi.useListKitsQuery({ lastSeenSince });
+
+ // ... and pick one.
+ const activeKit = useMemo(() => {
+ if (data === undefined || data.length === 0) {
+ return undefined;
+ }
+
+ const favoredKitSerials = ["k-hvcx-p3qg-7dfq", "k-mqym-kdc8-b3t9"];
+ const specificKit = data.find((kit) => kit.serial in favoredKitSerials);
+ if (specificKit) {
+ return specificKit;
+ }
+
+ const filtered = data.filter(
+ (kit) => kit.name && kit.description && kit.latitude && kit.longitude,
+ );
+
+ return filtered[Math.floor(Math.random() * filtered.length)];
+ }, [data]);
+
  return (
  <>
- <HeadTitle main={t("home.header")} secondary={t("home.subheader")} />
+ <HeadTitle main={t("home.header")} />
  <Container text style={{ marginTop: "1em" }}>
  <h2>{t("home.content.title")}</h2>
 
  <p>{t("home.content.body1")}</p>
+
+ {activeKit !== undefined && (
+ <>
+ <p>For an example, see this kit:</p>
+ <section className={style.activeKit}>
+ <KitAvatar serial={activeKit.serial} fontSize="1.25rem" />
+ <div>
+ <header className={style.activeKitHeader}>
+ <Link to={`/kit/${activeKit.serial}`}>
+ <h3>{activeKit.name}</h3>
+ </Link>
+ {activeKit.privacyPublicDashboard && (
+ <Badge variant="muted" size="small" text="Public" />
+ )}
+ </header>
+ <p>{activeKit.serial}</p>
+ </div>
+ </section>
+ </>
+ )}
+
  <p>{t("home.content.body2")}</p>
  <p>{t("home.content.body3")}</p>
  </Container>

src/services/astroplant.ts

@@ -83,8 +83,14 @@ export const rtkApi = createApi({
  "KitConfigurations",
  ],
  endpoints: (build) => ({
- listKits: build.query<schemas["Kit"][], void>({
- query: () => ({ path: "/kits", method: "GET" }),
+ listKits: build.query<
+ schemas["Kit"][],
+ {
+ lastSeenSince?: string;
+ after?: number;
+ }
+ >({
+ query: (query) => ({ path: "/kits", method: "GET", query }),
  providesTags: (result) => [
  ...(result || []).map(
  (kit) => ({ type: "Kits", id: kit.serial }) as const,

src/translations/en.json

@@ -22,13 +22,12 @@
  "confirm": "Confirm"
  },
  "home": {
- "header": "AstroPlant Prototype",
- "subheader": "Be a space farmer",
+ "header": "AstroPlant sensing and control",
  "content": {
  "title": "Grow plants in space",
- "body1": "Welcome, space farmer!",
- "body2": "AstroPlant is an educational citizen science project with the European Space Agency to engage a new generation of space farmers, collect data and ideas for agriculture on Mars, develop open source research equipment, and create awareness of regenerative and closed-loop life support systems.",
- "body3": "We have built a prototype plant lab that collects and shares open data about plant growth in different grow environments and are working on an open lab-infrastructure that makes it possible for everyone to contribute to science and space exploration—and to get to know more about topics such as plant science and biology, space science, engineering, electronics, open innovation and the circular economy."
+ "body1": "You have found the sensing and control platform powering AstroPlant. This is an open source platform that you can use to configure and run hardware-based industrial control systems and conduct experiments. The control system can run on low-power devices such as the Raspberry Pi and communicates with various types of sensors and actuators, either wired or wirelessly.",
+ "body2": "AstroPlant is an educational citizen science project in cooporation with the European Space Agency to engage a new generation of space farmers, collect data and ideas for agriculture on Mars, develop open source research equipment, and create awareness of regenerative and closed-loop agricultural systems.",
+ "body3": "We have built a prototype plant lab that collects and shares open data about plant growth in different growth environments and are working on an open lab-infrastructure that makes it possible for everyone to contribute to science and space exploration—and to get to know more about topics such as plant science and biology, space science, engineering, electronics, open innovation and the circular economy."
  },
  "buttons": {
  "see": {