@plasius/profile 1.0.4

package/src/SettingsProvider.tsx

@@ -0,0 +1,146 @@
+const PRIVATE_ID = Symbol("settings.id");
+const PRIVATE_PARTITION_KEY = Symbol("settings.partitionKey");
+import React, { useEffect } from "react";
+import { createScopedStoreContext } from "@plasius/react-state";
+import type { IState } from "@plasius/react-state";
+import { useAuthorizedFetch } from "@plasius/auth";
+import { useQuery, useMutation, useQueryClient } from "@plasius/react-query";
+import type { SettingsEntity } from "@plasius/entity-manager";
+
+export type SettingsState = IState & Record<string, unknown>;
+
+export type SettingsAction =
+  | { type: "update"; key: string; value: unknown }
+  | { type: "reset" }
+  | { type: "load"; payload: Partial<SettingsState> };
+
+const initialState: SettingsState = {};
+
+const reducer = (
+  state: SettingsState,
+  action: SettingsAction
+): SettingsState => {
+  switch (action.type) {
+    case "update":
+      return { ...state, [action.key]: action.value };
+    case "load":
+      return { ...state, ...action.payload };
+    case "reset":
+      return initialState;
+    default:
+      return state;
+  }
+};
+
+export const SettingsStore = createScopedStoreContext<
+  SettingsState,
+  SettingsAction
+>(reducer, initialState);
+
+export const SettingsProvider = ({
+  children,
+  configUrl = "/settings",
+}: {
+  children: React.ReactNode;
+  configUrl?: string;
+}) => {
+  return (
+    <SettingsStore.Provider>
+      <SettingsInitializer configUrl={configUrl}>{children}</SettingsInitializer>
+    </SettingsStore.Provider>
+  );
+};
+
+const SettingsInitializer = ({
+  children,
+  configUrl,
+}: {
+  children: React.ReactNode;
+  configUrl: string;
+}) => {
+  const authorizedFetch = useAuthorizedFetch();
+  const dispatch = SettingsStore.useDispatch();
+  const state = SettingsStore.useStore();
+  const queryClient = useQueryClient();
+
+  type HiddenSettingsKeys = {
+    [K in typeof PRIVATE_ID | typeof PRIVATE_PARTITION_KEY]?: string;
+  };
+  const toSettingsEntity = (state: SettingsState): SettingsEntity => {
+    const hidden = state as SettingsState & HiddenSettingsKeys;
+    return {
+      id: hidden[PRIVATE_ID] ?? "",
+      partitionKey: hidden[PRIVATE_PARTITION_KEY] ?? "",
+      settings: state,
+    } as unknown as SettingsEntity;
+  };
+
+  const fromSettingsEntity = (
+    entity: SettingsEntity
+  ): Partial<SettingsState> => {
+    const result: Partial<SettingsState> = {
+      ...(entity.settings as Record<string, unknown>),
+    };
+    Object.defineProperty(result, PRIVATE_ID, {
+      value: entity.id,
+      enumerable: false,
+      writable: false,
+    });
+    Object.defineProperty(result, PRIVATE_PARTITION_KEY, {
+      value: entity.partitionKey,
+      enumerable: false,
+      writable: false,
+    });
+    return result;
+  };
+
+  const { data } = useQuery<SettingsEntity>(
+    "settings",
+    async (): Promise<SettingsEntity> => {
+      const res = await authorizedFetch(configUrl);
+      if (!res.ok) throw new Error(`Load failed with status ${res.status}`);
+      return (await res.json()) as SettingsEntity;
+    }
+  );
+
+  useEffect(() => {
+    if (data) {
+      dispatch({ type: "load", payload: fromSettingsEntity(data) });
+    }
+  }, [data]);
+
+  const saveMutation = useMutation(
+    async () => {
+      const res = await authorizedFetch(configUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(toSettingsEntity(state)),
+      });
+      if (!res.ok) throw new Error(`Save failed with status ${res.status}`);
+    },
+    {
+      onSuccess: () => {
+        console.info("✅ Settings saved successfully.");
+        queryClient.invalidateQuery("settings", async () => {
+          const res = await authorizedFetch(configUrl);
+          if (!res.ok) throw new Error(`Load failed with status ${res.status}`);
+          const entity = (await res.json()) as SettingsEntity;
+          return entity;
+        });
+      },
+      onError: (err: unknown) => {
+        console.error("❌ Error saving settings:", err);
+      },
+    }
+  );
+
+  useEffect(() => {
+    return () => {
+      void saveMutation.mutate();
+    };
+  }, [saveMutation]);
+
+  return <>{children}</>;
+};

package/src/UserProvider.tsx

@@ -0,0 +1,167 @@
+import React, { useCallback, useEffect } from "react";
+import { type UserAvatarEntity, type UserEntity, userEntitySchema } from "@plasius/entity-manager";
+import { validateUserId } from "@plasius/schema";
+import { useAuthorizedFetch } from "@plasius/auth";
+import { createScopedStoreContext, type IState } from "@plasius/react-state";
+
+export function ValidateUser(user: UserEntity) {
+  const validated = userEntitySchema.validate(user);
+  if (!validated.valid || !validated.value) {
+    throw new Error(
+      `Invalid User Profile: ${validated.errors?.join(", ") ?? "unknown error"}`
+    );
+  }
+  return validated.value as unknown as UserEntity;
+}
+
+interface UserState extends IState {
+  user?: UserEntity;
+  userId: string | null;
+}
+
+type UserAction =
+  | { type: "setUser"; user: UserEntity }
+  | { type: "setUserId"; userId: string | null }
+  | { type: "updateUser"; user: Partial<UserEntity> }
+  | { type: "updateField"; payload: { field: string; value: unknown } }
+  | { type: "updateNameField"; payload: { field: string; value: unknown } }
+  | { type: "updateAvatarField"; payload: { field: string; value: unknown } };
+
+const reducer = (state: UserState, action: UserAction): UserState => {
+  switch (action.type) {
+    case "setUser":
+      return { ...state, user: action.user };
+    case "setUserId":
+      return { ...state, userId: action.userId };
+    case "updateUser":
+      if (!state.user) return state;
+      return {
+        ...state,
+        user: {
+          ...state.user,
+          ...action.user,
+        },
+      };
+    case "updateField":
+      if (!state.user) return state;
+      return {
+        ...state,
+        user: {
+          ...state.user,
+          [action.payload.field]: action.payload.value,
+        },
+      };
+    case "updateNameField":
+      if (!state.user || !state.user.name) return state;
+      return {
+        ...state,
+        user: {
+          ...state.user,
+          name: {
+            ...state.user.name,
+            [action.payload.field]: action.payload.value,
+          },
+        },
+      };
+    case "updateAvatarField":
+      if (!state.user) return state;
+      return {
+        ...state,
+        user: {
+          ...state.user,
+          avatar: {
+            ...(state.user.avatar ?? {}),
+            [action.payload.field]: action.payload.value,
+          } as UserAvatarEntity,
+        },
+      };
+    default:
+      return state;
+  }
+};
+
+const initialState: UserState = {
+  user: undefined,
+  userId: null,
+};
+
+export const UserStore = createScopedStoreContext(reducer, initialState);
+
+export const UserProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <UserStore.Provider>
+      <UserInitializer />
+      {children}
+    </UserStore.Provider>
+  );
+};
+
+const UserInitializer = () => {
+  const authorizedFetch = useAuthorizedFetch();
+  const dispatch = UserStore.useDispatch();
+  const { userId, user } = UserStore.useStore();
+
+  const saveUser = useCallback(async () => {
+    if (!user) return;
+    try {
+      const validatedUser = ValidateUser(user);
+      const res = await authorizedFetch(
+        `/users/${validatedUser.partitionKey}/update`,
+        {
+          credentials: "include",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(validatedUser),
+        }
+      );
+      if (!res.ok) {
+        throw new Error(`Save failed with status ${res.status}`);
+      }
+      console.info("✅ User profile saved successfully.");
+    } catch (err) {
+      console.error("❌ Error saving user profile:", err);
+    }
+  }, [authorizedFetch, user]);
+
+  useEffect(() => {
+    if (!userId || !validateUserId(userId)) return;
+
+    const headers = { "Content-Type": "application/json" };
+
+    authorizedFetch(`/users/${userId}/get`, { credentials: "include" })
+      .then(async (res) => {
+        if (res.status === 404) {
+          const newUser: Partial<UserEntity> = { id: userId };
+          return await authorizedFetch(`/users/${userId}/create`, {
+            credentials: "include",
+            method: "POST",
+            headers,
+            body: JSON.stringify(newUser),
+          }).then(async (res) => {
+            if (!res.ok) throw new Error(`Failed to load user (${res.status})`);
+            const data: unknown = await res.json();
+            const validatedUser = ValidateUser(data as UserEntity);
+            dispatch({ type: "setUser", user: validatedUser });
+          });
+        }
+
+        if (!res.ok) throw new Error(`Failed to load user (${res.status})`);
+        const data: unknown = await res.json();
+        const validatedUser = ValidateUser(data as UserEntity);
+        dispatch({ type: "setUser", user: validatedUser });
+      })
+      .catch((err) => {
+        console.warn("⚠️ Failed to load or create user profile:", err);
+      });
+
+    return () => {
+      saveUser().catch((err) => {
+        console.error("❌ Error saving during cleanup:", err);
+      });
+    };
+  }, [userId, authorizedFetch, dispatch, saveUser]);
+
+  return null;
+};

package/src/declarations.d.ts

@@ -0,0 +1,5 @@
+// declarations.d.ts
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./UserProvider.js";
+export * from "./SettingsProvider.js";
+export * from "./Pages/Settings/index.js";