checkpoint

src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.tsx

@@ -6,57 +6,120 @@ import { DefaultButton, IButtonStyles, IButtonProps } from "office-ui-fabric-rea
 import { IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
 import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
 import { useSubscriptions } from "../../../hooks/useSubscriptions";
+import { useDatabaseAccounts } from "../../../hooks/useDatabaseAccounts";
+
+const buttonStyles: IButtonStyles = {
+  root: {
+    fontSize: StyleConstants.DefaultFontSize,
+    height: 40,
+    padding: 0,
+    paddingLeft: 10,
+    marginRight: 5,
+    backgroundColor: StyleConstants.BaseDark,
+    color: StyleConstants.BaseLight
+  },
+  rootHovered: {
+    backgroundColor: StyleConstants.BaseHigh,
+    color: StyleConstants.BaseLight
+  },
+  rootFocused: {
+    backgroundColor: StyleConstants.BaseHigh,
+    color: StyleConstants.BaseLight
+  },
+  rootPressed: {
+    backgroundColor: StyleConstants.BaseHigh,
+    color: StyleConstants.BaseLight
+  },
+  rootExpanded: {
+    backgroundColor: StyleConstants.BaseHigh,
+    color: StyleConstants.BaseLight
+  },
+  textContainer: {
+    flexGrow: "initial"
+  }
+};
 
 export const AccountSwitchComponent: React.FunctionComponent = () => {
   const subscriptions = useSubscriptions();
+  const [selectedSubscriptionId, setSelectedSubscriptionId] = React.useState<string>();
+  const accounts = useDatabaseAccounts(selectedSubscriptionId);
+  const [selectedAccountName, setSelectedAccoutName] = React.useState<string>();
+
   const menuProps: IContextualMenuProps = {
     directionalHintFixed: true,
     className: "accountSwitchContextualMenu",
     items: [
       {
         key: "switchSubscription",
-        onRender: () => renderSubscriptionDropdown(subscriptions)
+        onRender: () => {
+          // const placeHolderText = isLoadingSubscriptions
+          //   ? "Loading subscriptions"
+          //   : !options || !options.length
+          //   ? "No subscriptions found in current directory"
+          //   : "Select subscription from list";
+
+          const dropdownProps: IDropdownProps = {
+            label: "Subscription",
+            className: "accountSwitchSubscriptionDropdown",
+            options: subscriptions.map(sub => {
+              return {
+                key: sub.subscriptionId,
+                text: sub.displayName,
+                data: sub
+              };
+            }),
+            onChange: (event, option) => {
+              setSelectedSubscriptionId(String(option.key));
+            },
+            defaultSelectedKey: selectedSubscriptionId,
+            placeholder: "Select subscription from list",
+            styles: {
+              callout: "accountSwitchSubscriptionDropdownMenu"
+            }
+          };
+
+          return <Dropdown {...dropdownProps} />;
+        }
       },
       {
         key: "switchAccount",
-        onRender: renderAccountDropDown
+        onRender: () => {
+          const isLoadingAccounts = false;
+
+          const options = accounts.map(account => ({
+            key: account.name,
+            text: account.name,
+            data: account
+          }));
+
+          const placeHolderText = isLoadingAccounts
+            ? "Loading Cosmos DB accounts"
+            : !options || !options.length
+            ? "No Cosmos DB accounts found"
+            : "Select Cosmos DB account from list";
+
+          const dropdownProps: IDropdownProps = {
+            label: "Cosmos DB Account Name",
+            className: "accountSwitchAccountDropdown",
+            options,
+            onChange: (event, option) => {
+              setSelectedAccoutName(String(option.key));
+            },
+            defaultSelectedKey: selectedAccountName,
+            placeholder: placeHolderText,
+            styles: {
+              callout: "accountSwitchAccountDropdownMenu"
+            }
+          };
+
+          return <Dropdown {...dropdownProps} />;
+        }
       }
     ]
   };
 
-  const buttonStyles: IButtonStyles = {
-    root: {
-      fontSize: StyleConstants.DefaultFontSize,
-      height: 40,
-      padding: 0,
-      paddingLeft: 10,
-      marginRight: 5,
-      backgroundColor: StyleConstants.BaseDark,
-      color: StyleConstants.BaseLight
-    },
-    rootHovered: {
-      backgroundColor: StyleConstants.BaseHigh,
-      color: StyleConstants.BaseLight
-    },
-    rootFocused: {
-      backgroundColor: StyleConstants.BaseHigh,
-      color: StyleConstants.BaseLight
-    },
-    rootPressed: {
-      backgroundColor: StyleConstants.BaseHigh,
-      color: StyleConstants.BaseLight
-    },
-    rootExpanded: {
-      backgroundColor: StyleConstants.BaseHigh,
-      color: StyleConstants.BaseLight
-    },
-    textContainer: {
-      flexGrow: "initial"
-    }
-  };
-
   const buttonProps: IButtonProps = {
-    text: "foo",
+    text: selectedAccountName || "Select Database Account",
     menuProps: menuProps,
     styles: buttonStyles,
     className: "accountSwitchButton",
@@ -65,76 +128,3 @@ export const AccountSwitchComponent: React.FunctionComponent = () => {
 
   return <DefaultButton {...buttonProps} />;
 };
-
-function renderSubscriptionDropdown(subscriptions: Subscription[]): JSX.Element {
-  const selectedSubscriptionId = "";
-  const isLoadingSubscriptions = false;
-
-  const options: IDropdownOption[] = subscriptions.map(sub => {
-    return {
-      key: sub.subscriptionId,
-      text: sub.displayName,
-      data: sub
-    };
-  });
-
-  const placeHolderText = isLoadingSubscriptions
-    ? "Loading subscriptions"
-    : !options || !options.length
-    ? "No subscriptions found in current directory"
-    : "Select subscription from list";
-
-  const dropdownProps: IDropdownProps = {
-    label: "Subscription",
-    className: "accountSwitchSubscriptionDropdown",
-    options: options,
-    onChange: () => {},
-    defaultSelectedKey: selectedSubscriptionId,
-    placeholder: placeHolderText,
-    styles: {
-      callout: "accountSwitchSubscriptionDropdownMenu"
-    }
-  };
-
-  return <Dropdown {...dropdownProps} />;
-}
-
-function renderAccountDropDown(): JSX.Element {
-  const accounts = [];
-  const selectedAccountName = "foo";
-  const isLoadingAccounts = false;
-  const options: IDropdownOption[] = accounts.map(account => {
-    return {
-      key: account.name,
-      text: account.name,
-      data: account
-    };
-  });
-  // Fabric UI will also try to select the first non-disabled option from dropdown.
-  // Add a option to prevent pop the message when user click on dropdown on first time.
-  options.unshift({
-    key: "select from list",
-    text: "Select Cosmos DB account from list",
-    data: undefined
-  });
-
-  const placeHolderText = isLoadingAccounts
-    ? "Loading Cosmos DB accounts"
-    : !options || !options.length
-    ? "No Cosmos DB accounts found"
-    : "Select Cosmos DB account from list";
-
-  const dropdownProps: IDropdownProps = {
-    label: "Cosmos DB Account Name",
-    className: "accountSwitchAccountDropdown",
-    options: options,
-    onChange: () => {},
-    defaultSelectedKey: selectedAccountName,
-    placeholder: placeHolderText,
-    styles: {
-      callout: "accountSwitchAccountDropdownMenu"
-    }
-  };
-
-  return <Dropdown {...dropdownProps} />;
-}