Client:OAuth2: fix create user and displaying list

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuth.types.ts

@@ -18,4 +18,6 @@ export interface OAuthProps {
 
   infoDialogVisible?: boolean;
   previewDialogVisible?: boolean;
+  isInit: boolean;
+  setIsInit: (value: boolean) => void;
 }

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.tsx

@@ -29,6 +29,8 @@ const OAuth = ({
   currentDeviceType,
   infoDialogVisible,
   previewDialogVisible,
+  isInit,
+  setIsInit,
 }: OAuthProps) => {
   const { t } = useTranslation(["OAuth"]);
 
@@ -36,6 +38,7 @@ const OAuth = ({
   const startLoadingRef = React.useRef<null | Date>(null);
 
   const getData = React.useCallback(async () => {
+    if (isInit) return;
     const actions = [];
 
     actions.push(fetchScopes(), fetchClients());
@@ -52,11 +55,13 @@ const OAuth = ({
       if (ms < MIN_LOADER_TIME)
         return setTimeout(() => {
           setIsLoading(false);
+          setIsInit(true);
         }, MIN_LOADER_TIME - ms);
     }
 
     setIsLoading(false);
-  }, []);
+    setIsInit(true);
+  }, [isInit, setIsInit]);
 
   useViewEffect({
     view: viewAs,
@@ -65,9 +70,11 @@ const OAuth = ({
   });
 
   React.useEffect(() => {
+    console.log(isInit);
+    if (isInit) return setIsLoading(false);
     startLoadingRef.current = new Date();
     getData();
-  }, [getData]);
+  }, [getData, setIsInit, isInit]);
 
   React.useEffect(() => {
     setDocumentTitle(t("OAuth"));
@@ -102,6 +109,8 @@ export default inject(
       fetchScopes,
       infoDialogVisible,
       previewDialogVisible,
+      isInit,
+      setIsInit,
     } = oauthStore;
     return {
       viewAs,
@@ -113,6 +122,8 @@ export default inject(
       infoDialogVisible,
       previewDialogVisible,
       fetchScopes,
+      isInit,
+      setIsInit,
     };
   }
 )(observer(OAuth));

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/index.tsx

@@ -58,7 +58,7 @@ const ClientForm = ({
     terms_url: "",
     policy_url: "",
 
-    authentication_method: "zxc",
+    authentication_method: "123",
 
     scopes: [],
   });

packages/client/src/store/OAuthStore.ts

@@ -34,6 +34,9 @@ const PAGE_LIMIT = 100;
 export type ViewAsType = "table" | "row";
 
 export interface OAuthStoreProps {
+  isInit: boolean;
+  setIsInit: (value: boolean) => void;
+
   viewAs: ViewAsType;
   setViewAs: (value: ViewAsType) => void;
 
@@ -68,6 +71,8 @@ export interface OAuthStoreProps {
 
   deleteClient: (clientId: string[]) => Promise<void>;
 
+  authStore: any;
+
   currentPage: number;
   nextPage: number | null;
   itemCount: number;
@@ -101,6 +106,8 @@ export interface OAuthStoreProps {
 }
 
 class OAuthStore implements OAuthStoreProps {
+  authStore: any = null;
+
   viewAs: ViewAsType = "table";
 
   currentPage: number = 0;
@@ -124,10 +131,17 @@ class OAuthStore implements OAuthStoreProps {
 
   consents: IClientProps[] = [];
 
-  constructor() {
+  isInit: boolean = false;
+
+  constructor(authStore: any) {
+    this.authStore = authStore;
     makeAutoObservable(this);
   }
 
+  setIsInit = (value: boolean) => {
+    this.isInit = value;
+  };
+
   setViewAs = (value: ViewAsType) => {
     this.viewAs = value;
   };
@@ -206,7 +220,7 @@ class OAuthStore implements OAuthStoreProps {
       const clientList: IClientListProps = await getClientList(0, PAGE_LIMIT);
 
       runInAction(() => {
-        this.clients = clientList.content;
+        this.clients = [...this.clients, ...clientList.content];
         this.selection = [];
         this.currentPage = clientList.page;
         this.nextPage = clientList.next || null;
@@ -265,8 +279,14 @@ class OAuthStore implements OAuthStoreProps {
     try {
       const newClient = await addClient(client);
 
+      const creatorDisplayName = this.authStore.userStore.user.displayName;
+      const creatorAvatar = this.authStore.userStore.user.avatarSmall;
+
       runInAction(() => {
-        this.clients = [{ ...newClient }, ...this.clients];
+        this.clients = [
+          { ...newClient, enabled: true, creatorDisplayName, creatorAvatar },
+          ...this.clients,
+        ];
       });
     } catch (e) {
       console.log(e);

packages/client/src/store/index.js

@@ -42,7 +42,7 @@ import PluginStore from "./PluginStore";
 
 import OAuthStore from "./OAuthStore";
 
-const oauthStore = new OAuthStore();
+const oauthStore = new OAuthStore(authStore);
 
 const selectedFolderStore = new SelectedFolderStore(authStore.settingsStore);