okay works

src/lib/api.ts

@@ -1,6 +1,5 @@
 import { API_URL } from "./constants";
-import { useAuthorizationStore } from "./stores/AuthorizationStore";
-
+import { authorizationStore } from "./stores/AuthorizationStore";
 
 export interface Preset {
   id: string;
@@ -31,7 +30,7 @@ export async function fetchApi(url: RequestInfo, options?: RequestInit) {
     ...options,
     headers: {
       ...options?.headers,
-      Authorization: `Bearer ${useAuthorizationStore.getState().token}`,
+      Authorization: `Bearer ${authorizationStore.token}`,
     },
   });
 
@@ -53,4 +52,5 @@ export const getUserDecorations = async (id: string = "@me"): Promise<Decoration
 export const getUserDecoration = async (id: string = "@me"): Promise<Decoration | null> =>
   fetchApi(API_URL + `/users/${id}/decoration`).then((c) => c.json());
 
-export const getPresets = async (): Promise<Preset[]> => fetch(API_URL + "/decorations/presets").then(c => c.json());
+export const getPresets = async (): Promise<Preset[]> =>
+  fetch(API_URL + "/decorations/presets").then((c) => c.json());

src/lib/stores/AuthorizationStore.ts

@@ -16,11 +16,15 @@ interface AuthorizationState {
   isAuthorized: () => boolean;
 }
 
-export const useAuthorizationStore = {
-  token: authorizationToken.get("token", null),
-  tokens: authorizationToken.get("tokens", {
-    [users.getCurrentUser().id]: authorizationToken.get("token", null),
-  }),
+export const authorizationStore = {
+  get token() {
+    return authorizationToken.get("token", null);
+  },
+  get tokens() {
+    return authorizationToken.get("tokens", {
+      [users.getCurrentUser().id]: authorizationToken.get("token", null),
+    });
+  },
   init: () => {},
   setToken: (token: string) => {
     authorizationToken.set("token", token);
@@ -36,5 +40,7 @@ export const useAuthorizationStore = {
     authorizationToken.set("tokens", tokens);
   },
   authorize: () => void showAuthorizationModal(),
-  isAuthorized: () => Boolean(authorizationToken.get("token", null)),
+  get isAuthorized() {
+    return () => Boolean(authorizationToken.get("token", null));
+  },
 };

src/lib/stores/UserDecorationsStore.ts

@@ -5,7 +5,7 @@ import { DECORATION_FETCH_COOLDOWN, SKU_ID } from "../constants";
 import { AvatarDecoration } from "../..";
 import subscribeToFluxDispatcher from "../utils/subscribeToFluxDispatcher";
 import { useCurrentUserDecorationsStore } from "./CurrentUserDecorationsStore";
-import { useAuthorizationStore } from "./AuthorizationStore";
+import { authorizationStore } from "./AuthorizationStore";
 
 const { lodash, users, fluxDispatcher, React, channels } = common;
 
@@ -31,7 +31,7 @@ export const useUsersDecorationsStore = create<UsersDecorationsState>((set, get)
   fetchQueue: new Set(),
   bulkFetch: lodash.debounce(async () => {
     const { fetchQueue, usersDecorations } = get();
-   set({ fetchQueue: new Set() });
+    set({ fetchQueue: new Set() });
 
     const fetchIds = Array.from(fetchQueue);
     if (fetchIds.length === 0) return;
@@ -112,7 +112,6 @@ export const subscriptions = [
   }),
 
   subscribeToFluxDispatcher("CONNECTION_OPEN", () => {
-    useAuthorizationStore.getState().init();
     useCurrentUserDecorationsStore.getState().clear();
     useUsersDecorationsStore.getState().fetch(users.getCurrentUser().id, true);
   }),
@@ -145,7 +144,7 @@ export function useUserDecorAvatarDecoration(user): AvatarDecoration | null | un
     fetchUserDecorAvatarDecoration(user.id);
   }, []);
 
-  console.log("Effects", decorAvatarDecoration)
+  console.log("Effects", decorAvatarDecoration);
 
   return decorAvatarDecoration ? { asset: decorAvatarDecoration, skuId: SKU_ID } : null;
 }

src/lib/utils/showAuthorizationModal.tsx

@@ -1,13 +1,17 @@
-import { webpack, common } from "replugged"
-import { useAuthorizationStore } from "../stores/AuthorizationStore";
+import { webpack, common } from "replugged";
+import { authorizationStore } from "../stores/AuthorizationStore";
 import { AUTHORIZE_URL, CLIENT_ID } from "../constants";
 import { logger } from "../..";
 
-const { modal: { openModal } } = common
-const OAuth = webpack.getByProps("OAuth2AuthorizeModal")
+const {
+  modal: { openModal },
+} = common;
+const OAuth = webpack.getByProps("OAuth2AuthorizeModal");
 
-export default async () => new Promise(r => openModal(props =>
-    <OAuth.OAuth2AuthorizeModal
+export default async () =>
+  new Promise((r) =>
+    openModal((props) => (
+      <OAuth.OAuth2AuthorizeModal
         {...props}
         scopes={["identify"]}
         responseType="code"
@@ -16,24 +20,23 @@ export default async () => new Promise(r => openModal(props =>
         clientId={CLIENT_ID}
         cancelCompletesFlow={false}
         callback={async (response: any) => {
-            try {
-                const url = new URL(response.location);
-                url.searchParams.append("client", "replugged");
+          try {
+            const url = new URL(response.location);
+            url.searchParams.append("client", "replugged");
 
-                const req = await fetch(url);
+            const req = await fetch(url);
 
-                if (req?.ok) {
-                    const token = await req.text();
-                    useAuthorizationStore.getState().setToken(token);
-                } else {
-                    throw new Error("Request not OK");
-                }
-                r(void 0);
-            } catch (e) {
-                logger.error("Decor: Failed to authorize", e);
+            if (req?.ok) {
+              const token = await req.text();
+              authorizationStore.setToken(token);
+            } else {
+              throw new Error("Request not OK");
             }
+            r(void 0);
+          } catch (e) {
+            logger.error("Decor: Failed to authorize", e);
+          }
         }}
-    />
-))
-
-
+      />
+    )),
+  );

src/ui/components/DecorSection.tsx

@@ -1,56 +1,65 @@
 import { webpack, common, components } from "replugged";
-import { useAuthorizationStore } from "../../lib/stores/AuthorizationStore";
+import { authorizationStore } from "../../lib/stores/AuthorizationStore";
 import { useCurrentUserDecorationsStore } from "../../lib/stores/CurrentUserDecorationsStore";
 import { cl } from "..";
 import { openChangeDecorationModal } from "../modals/ChangeDecorationModal";
 
-const { React } = common
-const { Flex, Button } = components
+const { React } = common;
+const { Flex, Button } = components;
 let CustomizationSection;
 
-
 interface DecorSectionProps {
   hideTitle?: boolean;
   hideDivider?: boolean;
   noMargin?: boolean;
 }
 
-
-export default function DecorSection({ hideTitle = false, hideDivider = false, noMargin = false }: DecorSectionProps) {
+export default function DecorSection({
+  hideTitle = false,
+  hideDivider = false,
+  noMargin = false,
+}: DecorSectionProps) {
   CustomizationSection ??= webpack.getBySource(".customizationSectionBackground");
-  const authorization = useAuthorizationStore();
-  const { selectedDecoration, select: selectDecoration, fetch: fetchDecorations } = useCurrentUserDecorationsStore();
-
+  const {
+    selectedDecoration,
+    select: selectDecoration,
+    fetch: fetchDecorations,
+  } = useCurrentUserDecorationsStore();
+
   React.useEffect(() => {
-    if (authorization.isAuthorized()) fetchDecorations();
-  }, [authorization.token]);
+    if (authorizationStore.isAuthorized()) fetchDecorations();
+  }, [authorizationStore.token]);
 
-  return <CustomizationSection
-    title={!hideTitle && "Decor"}
-    hasBackground={true}
-    hideDivider={hideDivider}
-    className={noMargin && cl("section-remove-margin")}
-  >
-    <Flex>
-      <Button
-        onClick={() => {
-          if (!authorization.isAuthorized()) {
-            authorization.authorize().then(openChangeDecorationModal).catch(() => { });
-          } else openChangeDecorationModal();
-          // openChangeDecorationModal();
-        }}
-        size={Button.Sizes.SMALL}
-      >
-        Change Decoration
-      </Button>
-      {selectedDecoration && authorization.isAuthorized() && <Button
-        onClick={() => selectDecoration(null)}
-        color={Button.Colors.PRIMARY}
-        size={Button.Sizes.SMALL}
-        look={Button.Looks.LINK}
-      >
-        Remove Decoration
-      </Button>}
-    </Flex>
-  </CustomizationSection>
+  return (
+    <CustomizationSection
+      title={!hideTitle && "Decor"}
+      hasBackground={true}
+      hideDivider={hideDivider}
+      className={noMargin && cl("section-remove-margin")}>
+      <Flex>
+        <Button
+          onClick={() => {
+            if (!authorizationStore.isAuthorized()) {
+              authorizationStore
+                .authorize()
+                .then(openChangeDecorationModal)
+                .catch(() => {});
+            } else openChangeDecorationModal();
+            // openChangeDecorationModal();
+          }}
+          size={Button.Sizes.SMALL}>
+          Change Decoration
+        </Button>
+        {selectedDecoration && authorizationStore.isAuthorized() && (
+          <Button
+            onClick={() => selectDecoration(null)}
+            color={Button.Colors.PRIMARY}
+            size={Button.Sizes.SMALL}
+            look={Button.Looks.LINK}>
+            Remove Decoration
+          </Button>
+        )}
+      </Flex>
+    </CustomizationSection>
+  );
 }