Move swr-models to separate package

Author: BlueManCZ

src/client/apps/contwatch-client/app/[lang]/APIModels.ts

@@ -1,8 +1,23 @@
 import { Endpoint } from "@repo/utils/endpoints";
 import { getApiEndpoint } from "@repo/utils/getApiEndpoint";
+import { io } from "socket.io-client";
+import { customMutate, SWRModelEndpoint } from "swr-models";
 
-import { APIModelEndpoint } from "./APIModels";
+import { fetchJson } from "../../src/utils";
 
-export const Handlers = new APIModelEndpoint({ key: getApiEndpoint(Endpoint.handlers) });
-export const Attributes = new APIModelEndpoint({ key: getApiEndpoint(Endpoint.attributes) });
-export const DataStats = new APIModelEndpoint({ key: getApiEndpoint(Endpoint.dataStats) });
+export const Handlers = new SWRModelEndpoint({
+    key: getApiEndpoint(Endpoint.handlers),
+    serverFetcher: fetchJson,
+});
+export const Attributes = new SWRModelEndpoint({
+    key: getApiEndpoint(Endpoint.attributes),
+    serverFetcher: fetchJson,
+});
+export const DataStats = new SWRModelEndpoint({
+    key: getApiEndpoint(Endpoint.dataStats),
+    serverFetcher: fetchJson,
+});
+
+export const socket = io();
+
+socket.on("mutate", (endpoint: string) => customMutate(getApiEndpoint(endpoint)));

src/client/apps/contwatch-client/app/[lang]/APIModelsDefinitions.ts

@@ -17,9 +17,9 @@ import { bemClassNames } from "@repo/utils/bemClassNames";
 import { useTranslation } from "@repo/utils/useTranslation";
 import { useRouter } from "next/navigation";
 import { type FC, useState } from "react";
+import { useModel } from "swr-models";
 
 import { Attributes, DataStats } from "../../../APIModelsDefinitions";
-import { useModel } from "../../../swrUtils";
 import styles from "./AttributeWidget.module.scss";
 
 type AttributeWidgetProps = {

src/client/apps/contwatch-client/app/[lang]/handlers/components/AttributeWidget/AttributeWidget.tsx

@@ -27,9 +27,9 @@ import { useTranslation } from "@repo/utils/useTranslation";
 import { DateTime } from "luxon";
 import Link from "next/link";
 import type { FC } from "react";
+import { useModel } from "swr-models";
 
 import { Handlers } from "../../../APIModelsDefinitions";
-import { useModel } from "../../../swrUtils";
 import { AttributeWidget } from "../AttributeWidget/AttributeWidget";
 import styles from "./HandlerWidget.module.scss";
 

src/client/apps/contwatch-client/app/[lang]/handlers/components/HandlerWidget/HandlerWidget.tsx

@@ -1,10 +1,9 @@
 import type { AttributeModel } from "@repo/types/AttributeModel";
 import type { DataStatModel } from "@repo/types/DataStatModel";
-import type { HandlerModel } from "@repo/types/HandlerModel";
 import type { PageParams } from "@repo/types/PageProps";
 import { Text } from "@repo/ui/Text";
 import { ssrTranslation } from "@repo/utils/ssrTranslation";
-import { SWRConfig } from "swr";
+import { CustomSWRConfig } from "swr-models";
 
 import { Attributes, DataStats, Handlers } from "../APIModelsDefinitions";
 import { HandlersWrapper } from "./components/HandlersWrapper/HandlersWrapper";
@@ -17,12 +16,6 @@ export default async function PageHandlers({ params }: PageParams) {
     // Fetch all handler ids
     const handlerIds: number[] = await Handlers.fetch();
 
-    // Fetch all handler objects for fallback
-    const handlersFallback: Record<string, HandlerModel> = {};
-    for (const handlerId of handlerIds) {
-        handlersFallback[Handlers.endpoint({ id: handlerId })] = await Handlers.fetch({ id: handlerId });
-    }
-
     // Fetch all attribute objects for fallback
     const attributesFallback: Record<string, AttributeModel> = {};
     for (const attribute of await Attributes.fetch<AttributeModel[]>()) {
@@ -37,10 +30,10 @@ export default async function PageHandlers({ params }: PageParams) {
     }
 
     return (
-        <SWRConfig
+        <CustomSWRConfig
             value={{
                 fallback: {
-                    ...handlersFallback,
+                    ...(await Handlers.fetchFallback({ id: handlerIds })),
                     ...attributesFallback,
                     ...dataStatsFallback,
                 },
@@ -54,6 +47,6 @@ export default async function PageHandlers({ params }: PageParams) {
                     <HandlerWidget key={handlerId} {...{ handlerId }} />
                 ))}
             </HandlersWrapper>
-        </SWRConfig>
+        </CustomSWRConfig>
     );
 }

src/client/apps/contwatch-client/app/[lang]/handlers/page.tsx

@@ -11,9 +11,9 @@ import { Text } from "@repo/ui/Text";
 import { useTranslation } from "@repo/utils/useTranslation";
 import { useSearchParams } from "next/navigation";
 import { useState } from "react";
+import { useModel } from "swr-models";
 
 import { Attributes } from "../APIModelsDefinitions";
-import { useModel } from "../swrUtils";
 import { InspectorChart } from "./components/InspectorChart/InspectorChart";
 
 export default function Inspector() {

src/client/apps/contwatch-client/app/[lang]/inspector/page.tsx

@@ -1,62 +1,10 @@
 "use client";
-
-import type { APIModel } from "@repo/types/APIModel";
 import type { AttributeChartModel } from "@repo/types/AttributeChartModel";
 import { getJson } from "@repo/utils/communication";
 import { Endpoint } from "@repo/utils/endpoints";
 import { getApiEndpoint } from "@repo/utils/getApiEndpoint";
-import { useEffect, useState } from "react";
-import useSWR, { mutate } from "swr";
-
-import type { APIModelEndpoint, APIModelEndpointConfigOverride } from "./APIModels";
-
-export const customSWR = <T>(endpoint: string) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useSWR<T>(endpoint, getJson, { revalidateOnFocus: false });
-};
-
-export const customMutate = mutate;
-
-export const useModel = <T extends APIModel | APIModel[]>(
-    modelInstance: APIModelEndpoint,
-    config?: APIModelEndpointConfigOverride,
-) => {
-    const { data: original } = modelInstance.use<T>(config);
-    const [model, set] = useState<T | undefined>(original);
-    const [refreshLock, setRefreshLock] = useState(false);
-    const [commitLock, setCommitLock] = useState(true);
-
-    useEffect(() => {
-        if (!refreshLock) {
-            set(original);
-        }
-    }, [refreshLock, original]);
+import useSWR from "swr";
 
-    useEffect(() => {
-        if (!commitLock && model) {
-            modelInstance.update(model, undefined, config);
-            setCommitLock(true);
-        }
-    }, [commitLock, config, model, modelInstance]);
-
-    const reset = () => {
-        set(original);
-    };
-
-    const commit = () => {
-        setCommitLock(false);
-    };
-
-    const lock = () => {
-        setRefreshLock(true);
-    };
-
-    const unlock = () => {
-        setRefreshLock(false);
-    };
-
-    return { original, model, set, reset, commit, lock, unlock };
-};
 
 export const useAttributeChart = (attributeIds: number[], date?: string) => {
     return useSWR<AttributeChartModel[]>(

src/client/apps/contwatch-client/app/[lang]/swrUtils.ts

@@ -1,5 +1,5 @@
-import { fetchJsonFactory } from "@repo/utils/fetchJsonFactory";
+import { jsonFetcherFactory } from "swr-models";
 
 import { HOST, PORT, PROTOCOL } from "./settings.mjs";
 
-export const fetchJson = fetchJsonFactory(HOST, PORT, PROTOCOL);
+export const fetchJson = jsonFetcherFactory(PROTOCOL, HOST, PORT, "force-cache", 600);

src/client/apps/contwatch-client/src/utils.ts

@@ -16,6 +16,7 @@
     "lodash.debounce": "4.0.8",
     "next": "15.1.4",
     "sass": "1.83.0",
+    "swr-models": "1.0.2",
     "turbo": "2.3.3",
     "typescript": "5.7.2"
   },