+
{/*
diff --git a/components/development/ApiTool.tsx b/components/development/ApiTool.tsx
index e7098b00..c7eed492 100644
--- a/components/development/ApiTool.tsx
+++ b/components/development/ApiTool.tsx
@@ -1,11 +1,11 @@
"use client";
import { useLocalStorage } from "usehooks-ts";
-import { useSWRConfig } from 'swr';
-import { useMemo } from "react";
+import { useSWRConfig } from "swr";
+import { useEffect, useMemo } from "react";
// ability to change the API root between v1 and dev
export default function ApiTool() {
- const { cache, mutate, fetcher } = useSWRConfig()
+ const { cache, mutate, fetcher } = useSWRConfig();
const roots = ["v1", "dev"];
const [apiRoot, setApiRoot] = useLocalStorage("apiRoot", "v1");
@@ -18,32 +18,50 @@ export default function ApiTool() {
}
mutate(
- key => true, // which cache keys are updated
+ (key) => true, // which cache keys are updated
undefined, // update cache data to `undefined`
- { revalidate: false } // do not revalidate
- )
+ { revalidate: false }, // do not revalidate
+ );
// revalidate after 1 second
setTimeout(() => {
mutate(
- key => true, // which cache keys are updated
+ (key) => true, // which cache keys are updated
undefined, // update cache data to `undefined`
- { revalidate: true } // revalidate
- )
- }, 1000)
- }
+ { revalidate: true }, // revalidate
+ );
+ }, 1000);
+ };
const currentApiRoot = useMemo(() => {
return apiRoot;
- }, [apiRoot])
+ }, [apiRoot]);
+ useEffect(() => {
+ // shift the colors of the background container to indicate the API root
+ const backgroundContainerElement = document.getElementById(
+ "background-container",
+ );
+ if (backgroundContainerElement) {
+ if (apiRoot === "v1") {
+ backgroundContainerElement.classList.remove("hue-rotate-180");
+ } else {
+ backgroundContainerElement.classList.add("hue-rotate-180");
+ }
+ }
+ }, [apiRoot]);
return (
API Root:
-
toggleApiRoot()}>/{apiRoot}/
+
toggleApiRoot()}
+ >
+ /{apiRoot}/
+
- )
+ );
}