Merge pull request #675 from raspiblitz/small-improvements

Small improvements

src/App.tsx

@@ -2,17 +2,17 @@ import { FC, lazy, Suspense, useContext, useEffect, useState } from "react";
 import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import "react-toastify/dist/ReactToastify.css";
 import "./App.css";
-import Layout from "./layouts/Layout";
-import LoadingScreen from "./components/LoadingScreen";
 import RequireAuth from "./components/RequireAuth";
 import RequireSetup from "./components/RequireSetup";
-import SkeletonLoadingScreen from "./layouts/SkeletonLoadingScreen";
+import { AppContext } from "./context/app-context";
 import "./i18n/config";
+import Layout from "./layouts/Layout";
+import LoadingScreen from "./layouts/LoadingScreen";
+import SkeletonLoadingScreen from "./layouts/SkeletonLoadingScreen";
 import { SetupPhase } from "./models/setup.model";
 import Login from "./pages/Login";
-import { AppContext } from "./context/app-context";
-import { instance } from "./utils/interceptor";
 import { ACCESS_TOKEN, parseJwt, REFRESH_TIME } from "./utils";
+import { instance } from "./utils/interceptor";
 
 const LazySetup = lazy(() => import("./pages/Setup"));
 const LazyHome = lazy(() => import("./pages/Home"));

src/ErrorBoundary.tsx

@@ -1,8 +1,9 @@
+import { TFunction } from "i18next";
 import { Component, ErrorInfo, ReactNode } from "react";
 import { withTranslation } from "react-i18next";
 
 interface Props {
-  t: any;
+  t: TFunction<[string, string], undefined>;
   children: ReactNode;
 }
 

src/pages/Home/AppStatusCard.tsx → src/components/AppStatusItem.tsx

@@ -8,7 +8,7 @@ type Props = {
   app: AppStatus;
 };
 
-export const AppStatusCard: FC<Props> = ({ app }) => {
+export const AppStatusItem: FC<Props> = ({ app }) => {
   const { id } = app;
   const appName = availableApps.get(id)?.name;
 
@@ -27,4 +27,4 @@ export const AppStatusCard: FC<Props> = ({ app }) => {
   );
 };
 
-export default AppStatusCard;
+export default AppStatusItem;

src/pages/Home/__tests__/AppStatusCard.test.tsx → src/components/__tests__/AppStatusItem.test.tsx

@@ -1,5 +1,5 @@
 import { AppStatus } from "@/models/app-status";
-import AppStatusCard from "@/pages/Home/AppStatusCard";
+import AppStatusItem from "../AppStatusItem";
 import { render, screen } from "test-utils";
 
 const testApp: AppStatus = {
@@ -11,9 +11,9 @@ const testApp: AppStatus = {
   error: "",
 };
 
-describe("AppStatusCard", () => {
+describe("AppStatusItem", () => {
   it("should link to 'address'", () => {
-    render(<AppStatusCard app={testApp} />);
+    render(<AppStatusItem app={testApp} />);
 
     const appCard = screen.getAllByRole("link");
     expect(appCard[0].getAttribute("href")).toEqual("http://127.0.0.1");
@@ -28,7 +28,7 @@ describe("AppStatusCard", () => {
       },
       writable: true,
     });
-    render(<AppStatusCard app={testApp} />);
+    render(<AppStatusItem app={testApp} />);
 
     const appCard = screen.getAllByRole("link");
     expect(appCard[0].getAttribute("href")).toEqual(

src/hooks/use-sse.tsx

@@ -18,6 +18,7 @@ import { availableApps } from "@/utils/availableApps";
 /**
  * Establishes a SSE connection if not available yet & attaches / removes event listeners
  * to the single events to update the SSEContext
+ * Use useContext(SSEContext) to get the data, is only used in Layout.tsx
  * @returns the infos from the SSEContext
  */
 function useSSE() {

src/layouts/Layout.tsx

@@ -1,3 +1,4 @@
+import useSSE from "@/hooks/use-sse";
 import type { FC } from "react";
 import BottomNav from "./BottomNav";
 import Header from "./Header";
@@ -8,6 +9,8 @@ type Props = {
 };
 
 const Layout: FC<Props> = ({ children }) => {
+  // use SSE for all components after login
+  useSSE();
   return (
     <>
       <Header />

src/components/LoadingScreen.tsx → src/layouts/LoadingScreen.tsx

@@ -1,18 +1,19 @@
 import { FC, useContext } from "react";
-import LoadingSpinner from "./LoadingSpinner/LoadingSpinner";
+import LoadingSpinner from "../components/LoadingSpinner/LoadingSpinner";
 import { AppContext } from "@/context/app-context";
 import RaspiBlitzLogo from "@/assets/RaspiBlitz_Logo_Main.svg?react";
 import RaspiBlitzLogoDark from "@/assets/RaspiBlitz_Logo_Main_Negative.svg?react";
 
+// Loading Screen for the initial loading of the app
 const LoadingScreen: FC = () => {
   const appCtx = useContext(AppContext);
 
   return (
-    <div className="flex h-screen w-screen flex-col items-center justify-center bg-gray-100 dark:bg-gray-700">
+    <main className="flex h-screen w-screen flex-col items-center justify-center bg-gray-100 dark:bg-gray-700">
       {!appCtx.darkMode && <RaspiBlitzLogo className="mb-5 h-12" />}
       {appCtx.darkMode && <RaspiBlitzLogoDark className="mb-5 h-12" />}
       <LoadingSpinner color="text-yellow-500" />
-    </div>
+    </main>
   );
 };
 

src/layouts/PageLoadingScreen.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react";
+import LoadingSpinner from "../components/LoadingSpinner/LoadingSpinner";
+
+// Loading Screen where sidebar is visible and usable
+const PageLoadingScreen: FC = () => {
+  return (
+    <main
+      className={`content-container page-container bg-gray-100 p-5 transition-colors dark:bg-gray-700 dark:text-white lg:pb-8 lg:pr-8 lg:pt-8`}
+    >
+      <section className="content-container flex items-center justify-center">
+        <LoadingSpinner color="text-yellow-500" />
+      </section>
+    </main>
+  );
+};
+
+export default PageLoadingScreen;

src/layouts/SideDrawer.tsx

@@ -1,11 +1,11 @@
 import {
-  ArrowRightOnRectangleIcon,
+  ArrowRightStartOnRectangleIcon,
   Cog6ToothIcon,
   HomeIcon,
   Squares2X2Icon,
 } from "@heroicons/react/24/outline";
 import { SSEContext } from "@/context/sse-context";
-import AppStatusCard from "@/pages/Home/AppStatusCard";
+import AppStatusItem from "@/components/AppStatusItem";
 import type { FC } from "react";
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";
@@ -48,7 +48,7 @@ export const SideDrawer: FC = () => {
         {appStatus
           .filter((app) => app.installed)
           .map((app) => (
-            <AppStatusCard app={app} key={app.id} />
+            <AppStatusItem app={app} key={app.id} />
           ))}
       </div>
 
@@ -57,7 +57,7 @@ export const SideDrawer: FC = () => {
           onClick={logout}
           className="bd-button mb-3 flex h-8 w-60 items-center justify-center"
         >
-          <ArrowRightOnRectangleIcon className="mr-1 inline-block h-5 w-5" />
+          <ArrowRightStartOnRectangleIcon className="mr-1 inline-block h-5 w-5" />
           {t("navigation.logout")}
         </button>
       </div>

src/layouts/SkeletonLoadingScreen.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import LoadingSpinner from "@/components/LoadingSpinner/LoadingSpinner";
 
+// Loading Screen wher sidebar is visible but not usable
 const SkeletonLoadingScreen: FC = () => {
   return (
     <>

src/pages/Apps/AppCard.tsx

@@ -59,7 +59,7 @@ export const AppCard: FC<Props> = ({
   };
 
   return (
-    <div className="bd-card transition-colors dark:bg-gray-800">
+    <article className="bd-card transition-colors dark:bg-gray-800">
       <div className="relative mt-2 flex h-4/6 w-full flex-row items-center">
         {installed && (
           <>
@@ -145,7 +145,7 @@ export const AppCard: FC<Props> = ({
           &nbsp;{t("apps.info")}
         </button>
       </div>
-    </div>
+    </article>
   );
 };
 

src/pages/Apps/AppCardAlby.tsx

@@ -1,5 +1,5 @@
 import { PlusIcon, LinkIcon } from "@heroicons/react/24/outline";
-import { FC } from "react";
+import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import AppIcon from "@/components/AppIcon";
 import { toast } from "react-toastify";
@@ -57,7 +57,7 @@ export const AppCardAlby: FC = () => {
   };
 
   return (
-    <div className="bd-card transition-colors dark:bg-gray-800">
+    <article className="bd-card transition-colors dark:bg-gray-800">
       <div className="relative mt-2 flex h-4/6 w-full flex-row items-center">
         {/* Icon */}
         <div className="mt-4 flex w-1/4 items-center justify-center p-2">
@@ -94,7 +94,7 @@ export const AppCardAlby: FC = () => {
           </a>
         )}
       </div>
-    </div>
+    </article>
   );
 };
 

src/pages/Apps/AppInfo.tsx

@@ -1,16 +1,16 @@
+import AppIcon from "@/components/AppIcon";
+import ButtonWithSpinner from "@/components/ButtonWithSpinner/ButtonWithSpinner";
+import PageLoadingScreen from "@/layouts/PageLoadingScreen";
+import { AppStatus } from "@/models/app-status";
+import { App } from "@/models/app.model";
+import { availableApps } from "@/utils/availableApps";
 import {
   ChevronLeftIcon,
   PlusIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-import { AppStatus } from "@/models/app-status";
 import { FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import AppIcon from "@/components/AppIcon";
-import ButtonWithSpinner from "@/components/ButtonWithSpinner/ButtonWithSpinner";
-import LoadingSpinner from "@/components/LoadingSpinner/LoadingSpinner";
-import { App } from "@/models/app.model";
-import { availableApps } from "@/utils/availableApps";
 import ImageCarousel from "./ImageCarousel";
 
 export type Props = {
@@ -70,11 +70,7 @@ export const AppInfo: FC<Props> = ({
   }, [id]);
 
   if (isLoading) {
-    return (
-      <main className="page-container content-container flex w-full items-center justify-center bg-gray-100 dark:bg-gray-700 dark:text-white">
-        <LoadingSpinner />
-      </main>
-    );
+    return <PageLoadingScreen />;
   }
 
   return (

src/pages/Apps/AppList.tsx

@@ -0,0 +1,39 @@
+import { AppStatus } from "@/models/app-status";
+import { App } from "@/models/app.model";
+import { availableApps } from "@/utils/availableApps";
+import { FC } from "react";
+import AppCard from "./AppCard";
+
+type Props = {
+  title: string;
+  apps: AppStatus[];
+  onInstall: (id: string) => void;
+  onOpenDetails: (app: App) => void;
+};
+
+const AppList: FC<Props> = ({ title, apps, onInstall, onOpenDetails }) => {
+  return (
+    <section className="flex h-full flex-wrap">
+      <h2 className="w-full pb-5 pt-8 text-xl font-bold dark:text-gray-200">
+        {title}
+      </h2>
+      <div className="grid w-full grid-cols-1 gap-5 lg:grid-cols-3 lg:gap-8">
+        {apps.map((appStatus: AppStatus) => {
+          return (
+            <AppCard
+              key={appStatus.id}
+              appInfo={availableApps.get(appStatus.id)!}
+              appStatusInfo={appStatus}
+              installed={appStatus.installed}
+              installingApp={null}
+              onInstall={onInstall}
+              onOpenDetails={onOpenDetails}
+            />
+          );
+        })}
+      </div>
+    </section>
+  );
+};
+
+export default AppList;