ps99-api 2.1.0 → 2.2.0

package/example-web/react2/package.json

@@ -11,6 +11,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "date-fns": "^3.6.0",
+    "idb-keyval": "^6.2.1",
     "ps99-api": "file:../..",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -19,12 +21,15 @@
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.0",
     "ts-loader": "^9.5.1",
     "typescript": "^5.5.2",
     "webpack": "^5.92.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "webpack-dev-server": "^5.0.4",
+    "workbox-webpack-plugin": "^7.1.0"
   }
 }

package/example-web/react2/public/manifest.json

@@ -5,6 +5,7 @@
   "display": "standalone",
   "background_color": "#ffffff",
   "theme_color": "#000000",
+  "description": "Pet Simulator 99 PWA",
   "icons": [
     {
       "src": "/icons/icon-192x192.png",

package/example-web/react2/src/App.tsx

@@ -5,6 +5,7 @@ import Header from "./components/Header";
 import CollectionsIndex from "./components/CollectionsIndex";
 import CollectionConfigIndex from "./components/CollectionConfigIndex";
 import DynamicCollectionConfigData from "./components/DynamicCollectionConfigData";
+import Footer from "./components/Footer";
 
 const App: React.FC = () => {
   return (
@@ -13,15 +14,10 @@ const App: React.FC = () => {
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/collections" element={<CollectionsIndex />} />
-        <Route
-          path="/collections/:collectionName"
-          element={<CollectionConfigIndex />}
-        />
-        <Route
-          path="/collections/:collectionName/:configName"
-          element={<DynamicCollectionConfigData />}
-        />
+        <Route path="/collections/:collectionName" element={<CollectionConfigIndex />} />
+        <Route path="/collections/:collectionName/:configName" element={<DynamicCollectionConfigData />} />
       </Routes>
+      <Footer />
     </Router>
   );
 };

package/example-web/react2/src/components/CollectionConfigIndex.tsx

@@ -33,9 +33,6 @@ const CollectionConfigIndex: React.FC = () => {
     <div>
       <h2>{collectionName} Configurations</h2>
       <ul>
-        <li>
-          <Link to={`/collections/${collectionName}/all`}>All</Link>
-        </li>
         {configNames.map((configName, index) => (
           <li key={index}>
             <Link

package/example-web/react2/src/components/DynamicCollectionConfigData.tsx

@@ -1,128 +1,21 @@
-import React, {
-  lazy,
-  Suspense,
-  useEffect,
-  useState,
-  useRef,
-  useCallback,
-} from "react";
+import React, { lazy, Suspense } from "react";
 import { useParams } from "react-router-dom";
-import {
-  PetSimulator99API,
-  CollectionName,
-  Collection,
-  CollectionConfigData,
-} from "ps99-api";
+import { CollectionName } from "ps99-api";
 
 const DynamicCollectionConfigData: React.FC = () => {
-  const { collectionName, configName } = useParams<{
-    collectionName: CollectionName;
-    configName: string;
-  }>();
+  const { collectionName, configName } = useParams<{ collectionName: CollectionName; configName: string }>();
 
-  if (!collectionName) {
-    return <div>Invalid collection name</div>;
-  }
-
-  if (configName === "all") {
-    return <RenderAllConfigs collectionName={collectionName} />;
+  if (!collectionName || !configName) {
+    return <div>Invalid collection or config name</div>;
   }
 
   const Component = lazy(() => import(`./${collectionName}Component`));
 
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <Component />
+      <Component configName={configName} />
     </Suspense>
   );
 };
 
-const RenderAllConfigs: React.FC<{ collectionName: CollectionName }> = ({
-  collectionName,
-}) => {
-  const [configDataList, setConfigDataList] = useState<
-    Array<Collection<CollectionName>>
-  >([]);
-  const [page, setPage] = useState(0);
-  const [error, setError] = useState<string | null>(null);
-  const observer = useRef<IntersectionObserver | null>(null);
-  const loadMoreRef = useRef<HTMLDivElement | null>(null);
-
-  const fetchData = async (page: number) => {
-    try {
-      const api = new PetSimulator99API();
-      const response = await api.getCollection(collectionName);
-      if (response.status === "ok") {
-        const start = page * 20;
-        const end = start + 20;
-        setConfigDataList((prev) => [
-          ...prev,
-          ...response.data.slice(start, end),
-        ]);
-      } else {
-        setError(response.error.message);
-      }
-    } catch (error) {
-      setError("Error fetching data");
-      console.error("Error fetching data:", error);
-    }
-  };
-
-  useEffect(() => {
-    fetchData(page);
-  }, [page]);
-
-  const lastElementRef = useCallback((node: HTMLDivElement | null) => {
-    if (observer.current) observer.current.disconnect();
-    observer.current = new IntersectionObserver((entries) => {
-      if (entries[0].isIntersecting) {
-        setPage((prevPage) => prevPage + 1);
-      }
-    });
-    if (node) observer.current.observe(node);
-  }, []);
-
-  if (error) {
-    return <div>Error: {error}</div>;
-  }
-
-  return (
-    <div>
-      {configDataList.map((configData, index) => {
-        const Component = lazy(() => import(`./${collectionName}Component`));
-        if (index === configDataList.length - 1) {
-          return (
-            <div ref={lastElementRef} key={index}>
-              <Suspense fallback={<div>Loading...</div>}>
-                <Component
-                  configData={
-                    configData.configData as CollectionConfigData<
-                      typeof collectionName
-                    >
-                  }
-                />
-              </Suspense>
-            </div>
-          );
-        } else {
-          return (
-            <div key={index}>
-              <Suspense fallback={<div>Loading...</div>}>
-                <Component
-                  configData={
-                    configData.configData as CollectionConfigData<
-                      typeof collectionName
-                    >
-                  }
-                />
-              </Suspense>
-            </div>
-          );
-        }
-      })}
-      <div ref={loadMoreRef}></div>
-    </div>
-  );
-};
-
 export default DynamicCollectionConfigData;

package/example-web/react2/src/components/Footer.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from "react";
+import { useOnlineStatus } from "../hooks/useOnlineStatus";
+
+const Footer: React.FC = () => {
+  const isOnline = useOnlineStatus();
+  const [lastUpdate, setLastUpdate] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const updateLastUpdate = () => {
+    setLastUpdate(new Date().toLocaleString());
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      // Simulate a fetch call to update lastUpdate time
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      updateLastUpdate();
+      setLoading(false);
+    };
+
+    fetchData();
+
+    window.addEventListener("online", updateLastUpdate);
+    window.addEventListener("offline", updateLastUpdate);
+
+    return () => {
+      window.removeEventListener("online", updateLastUpdate);
+      window.removeEventListener("offline", updateLastUpdate);
+    };
+  }, []);
+
+  return (
+    <footer
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        padding: "1em",
+        borderTop: "1px solid #ccc",
+      }}
+    >
+      <div>
+        {loading ? (
+          <span>♻️ Loading...</span>
+        ) : (
+          <span>Last update: {lastUpdate}</span>
+        )}
+      </div>
+      <div>
+        {isOnline ? (
+          <span style={{ color: "green" }}>● Online</span>
+        ) : (
+          <span style={{ color: "red" }}>● Offline</span>
+        )}
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

package/example-web/react2/src/components/GenericFetchComponent.tsx

@@ -9,10 +9,10 @@ interface GenericFetchComponentProps<T> {
 }
 
 export const GenericFetchComponent = <T,>({
-  collectionName,
-  render,
-  configData,
-}: GenericFetchComponentProps<T>) => {
+                                            collectionName,
+                                            render,
+                                            configData,
+                                          }: GenericFetchComponentProps<T>) => {
   const { configName } = useParams<{ configName: string }>();
   const [data, setData] = useState<T | null>(configData || null);
   const [error, setError] = useState<string | null>(null);
@@ -23,12 +23,9 @@ export const GenericFetchComponent = <T,>({
     const fetchData = async () => {
       if (!configName) return;
       const api = new PetSimulator99API();
-      const response: ApiResponseBody<any[]> =
-        await api.getCollection(collectionName);
+      const response: ApiResponseBody<any[]> = await api.getCollection(collectionName);
       if (response.status === "ok") {
-        const item = response.data.find(
-          (item) => item.configName === configName,
-        );
+        const item = response.data.find((item) => item.configName === configName);
         if (item) {
           setData(item.configData);
         } else {

package/example-web/react2/src/components/ImageComponent.tsx

@@ -7,14 +7,14 @@ interface ImageProps {
 }
 
 const MAX_CONCURRENT_REQUESTS = 5;
-let currentRequests = 0;
-const queue: (() => void)[] = [];
+const requestQueue: Array<() => void> = [];
+let activeRequests = 0;
 
 const processQueue = () => {
-  if (queue.length > 0 && currentRequests < MAX_CONCURRENT_REQUESTS) {
-    const nextRequest = queue.shift();
+  if (activeRequests < MAX_CONCURRENT_REQUESTS && requestQueue.length > 0) {
+    const nextRequest = requestQueue.shift();
     if (nextRequest) {
-      currentRequests++;
+      activeRequests++;
       nextRequest();
     }
   }
@@ -22,31 +22,27 @@ const processQueue = () => {
 
 const ImageComponent: React.FC<ImageProps> = ({ src, alt }) => {
   const [imageUrl, setImageUrl] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchImage = async () => {
+      const api = new PetSimulator99API();
       try {
-        const api = new PetSimulator99API();
         const imageBlob = await api.getImage(src);
-        const imageUrl = URL.createObjectURL(
-          new Blob([imageBlob], { type: "image/png" }),
-        );
-        setImageUrl(imageUrl);
+        const url = URL.createObjectURL(new Blob([imageBlob], { type: "image/png" }));
+        setImageUrl(url);
       } catch (error) {
-        setError("Error fetching image");
         console.error("Error fetching image:", error);
       } finally {
-        currentRequests--;
+        activeRequests--;
         processQueue();
       }
     };
 
-    const load = () => {
+    const requestImage = () => {
       fetchImage();
     };
 
-    queue.push(load);
+    requestQueue.push(requestImage);
     processQueue();
 
     return () => {
@@ -54,14 +50,12 @@ const ImageComponent: React.FC<ImageProps> = ({ src, alt }) => {
         URL.revokeObjectURL(imageUrl);
       }
     };
-  }, [src, imageUrl]);
-
-  if (error) {
-    return <div>{error}</div>;
-  }
+  }, [src]);
 
   return (
-    <div>{imageUrl ? <img src={imageUrl} alt={alt} /> : <p>Loading...</p>}</div>
+    <div>
+      {imageUrl ? <img src={imageUrl} alt={alt} /> : <p>Loading...</p>}
+    </div>
   );
 };
 

package/example-web/react2/src/components/XPPotionsComponent.tsx

@@ -3,7 +3,9 @@ import { CollectionConfigData } from "ps99-api";
 import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
-const XPPotionsComponent: React.FC<{ configData?: CollectionConfigData<"XPPotions"> }> = ({ configData }) => {
+const XPPotionsComponent: React.FC<{
+  configData?: CollectionConfigData<"XPPotions">;
+}> = ({ configData }) => {
   return (
     <GenericFetchComponent<CollectionConfigData<"XPPotions">>
       collectionName="XPPotions"

package/example-web/react2/src/hooks/useOnlineStatus.ts

@@ -0,0 +1,20 @@
+import { useState, useEffect } from "react";
+
+export const useOnlineStatus = () => {
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    const handleOnline = () => setIsOnline(true);
+    const handleOffline = () => setIsOnline(false);
+
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+
+  return isOnline;
+};

package/example-web/react2/src/index.tsx

@@ -1,7 +1,11 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
+import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
 
 const container = document.getElementById("root");
 const root = createRoot(container!);
 root.render(<App />);
+
+// Register the service worker
+serviceWorkerRegistration.register();

package/example-web/react2/src/serviceWorkerRegistration.ts

@@ -0,0 +1,110 @@
+const isLocalhost = Boolean(
+  window.location.hostname === "localhost" ||
+    window.location.hostname === "[::1]" ||
+    window.location.hostname.match(/^127(?:\.\d+){0,2}\.\d+$/),
+);
+
+type Config = {
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
+  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      return;
+    }
+
+    window.addEventListener("load", () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        checkValidServiceWorker(swUrl, config);
+
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            "This web app is being served cache-first by a service " +
+              "worker. To learn more, visit https://cra.link/PWA",
+          );
+        });
+      } else {
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then((registration) => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === "installed") {
+            if (navigator.serviceWorker.controller) {
+              console.log(
+                "New content is available and will be used when all " +
+                  "tabs for this page are closed. See https://cra.link/PWA.",
+              );
+
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              console.log("Content is cached for offline use.");
+
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch((error) => {
+      console.error("Error during service worker registration:", error);
+    });
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+  fetch(swUrl, {
+    headers: { "Service-Worker": "script" },
+  })
+    .then((response) => {
+      const contentType = response.headers.get("content-type");
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf("javascript") === -1)
+      ) {
+        navigator.serviceWorker.ready.then((registration) => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        "No internet connection found. App is running in offline mode.",
+      );
+    });
+}
+
+export function unregister() {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        registration.unregister();
+      })
+      .catch((error) => {
+        console.error(error.message);
+      });
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ps99-api",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Pet Simulator Public API wrapper written in Typescript.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",